AIで、ここまでできる。｜第2回
WordPressでサイトを作るとき、最初に悩むのがHOMEのデザインです。
何をどこに配置するのか。どんな色を使うのか。訪問した人に、どの記事を読んでもらうのか。
HTMLやCSSに詳しくなければ、思い描いたデザインを実現するのは簡単ではありません。
MANIARUでは、このHOME制作にChatGPTとChatGPT Workを使いました。
ChatGPTと相談して構成を考え、Markdownの指示書にまとめ、Workに実装してもらう。
最初からすべてが完成したわけではありません。レイアウトを何度も修正し、少しずつ理想の形に近づけていきました。
今回は、実際に使用した指示書と制作履歴をもとに、ChatGPTとWorkでWordPressのHOMEをどこまで作れたのかを紹介します。
01｜まずはChatGPTにサイトのイメージを伝えた
最初に行ったのは、WordPressの操作ではありません。
ChatGPTに、作りたいサイトの目的や方向性を相談することでした。
MANIARUのコンセプトは「みんなのマニュアル」。
自分で試したことを記録し、同じことに挑戦する人が再現できるサイトを目指しています。
デザインの方向性として相談したのは、次の4つです。
- Minimal：余計な装飾を減らす
- Modern：現代的で整理されたデザイン
- Intellectual：知的で落ち着いた印象
- Futuristic：少し未来を感じさせる雰囲気
これらをもとに、ChatGPTとHOMEの構成を考えていきました。
驚いたのは、相談しているだけで、かなり理想に近い構成案ができたことです。
自分でHTMLやCSSを書き始める前に、サイト全体の設計を具体化できました。
02｜HOMEの構成を決める
初期のHOME制作では、次の構成を採用しました。
Header → Hero → Categories → PICK UP → PROJECTS → ABOUT MANIARU → Footer
訪問者が最初にサイトの目的を理解し、興味のあるテーマや制作記録へ進める構成です。
Heroには、MANIARUのコンセプトを伝えるコピーと、記事へ進むための導線を配置。
カテゴリーでは、AIやWeb制作などのテーマから記事を探せるようにしました。
PROJECTSは、実際に何かを作る過程をSTEP形式で記録する場所です。
配色は白・濃紺・ブルーを中心に、余白を広く取る方針にしました。
こうした内容を、Workへの制作指示書にまとめています。
03｜ChatGPTで考え、Workで実装する
MANIARUでは、ChatGPTとWorkの役割を分けて使っています。
ChatGPTは相談と設計。Workは実際の作業。
ChatGPTとの会話で方向性を決めたら、その内容をMarkdown形式の指示書にまとめます。
Workには、その指示書を読んでWordPressを操作してもらう方法を採用しました。
初期HOMEの実装方針は、次の組み合わせです。
- WordPressテーマ：Arkhe無料版
- ブロック：Snow Monkey Blocks無料版
- CSS：必要最小限の追加
最初から大規模な独自開発をするのではなく、既存のWordPressの機能を活用する方針です。
実装されたHOMEは、大まかには希望に近いものでした。
ただし、一度の実装ですべてが理想どおりになったわけではありません。
実際の画面を確認すると、セクションの配置や情報の見せ方など、調整したい部分が出てきました。
04｜HOMEは何度も修正して完成に近づいた
HOME制作で特に難しかったのは、セクションの配置とレイアウトの調整です。
たとえば、HeroとPROJECTSの両方に似た情報が表示されると、訪問者にとって何が重要なのか分かりにくくなります。
そこで、各セクションの役割を整理しました。
Heroはサイトの入口。
CURRENT PROJECTは、現在注目してほしいPROJECTと最新STEPを紹介する場所。
PROJECTSは、これまでの制作記録を一覧できる場所。
それぞれの役割を明確にすることで、HOMEの情報を整理していきました。
PROJECTカードの見せ方も改善
PROJECT 001とPROJECT 002を区別しやすくするため、カード間に区切り線と余白を追加しました。
さらに、STEPの進捗やCURRENT・COMPLETEDの表示も調整しました。
PCだけでなく、スマートフォンでも読みやすくするため、STEP進捗をレスポンシブなGridに変更する指示も作成しています。
こうした修正は、一度にすべて行ったわけではありません。
実際の画面を確認し、問題を見つけ、ChatGPTと相談してからWorkへ指示する。
この作業を繰り返しました。
05｜難しかったのは、希望を正確に伝えること
今回の制作を振り返って、最も難しかったのはコードを書くことではありませんでした。
自分が望んでいる修正内容を、ChatGPTに正確に伝えることです。
「もう少し見やすくしたい」
「この部分の配置を変えたい」
そう思っても、具体的にどう変更したいのかを言葉にするのは意外と難しいものです。
そこで、次の3つを組み合わせました。
スクリーンショットを見せる。
実際の画面を共有して、気になっている場所を伝えます。
文章で説明する。
何が問題で、どう改善したいのかを言葉にします。
ChatGPTに改善案を提案してもらう。
自分では具体的なデザインを思いつかないときは、ChatGPTに複数の案を考えてもらい、その中から希望に近いものを選びます。
この3つのうち、どれか一つだけが特に優れていたわけではありません。
組み合わせることが重要でした。
最初から完璧な指示を出せなくても、対話を重ねることで、希望するデザインを具体化できました。
06｜Markdown指示書を使う理由
MANIARUでは、ChatGPTで決めた内容をMarkdown指示書にしてからWorkへ渡しています。
この方法を採用した大きな理由は、Workのクレジット消費を抑えられるのではないかと考えたからです。
通常のChatGPTで相談や試行錯誤を済ませ、Workには具体的な作業だけを依頼する。
そうすれば、Workでのやり取りを減らせる可能性があります。
ただし、ここは正確に書いておきたい部分です。
この方法で実際にどれくらいクレジットを節約できたのかは、まだ検証していません。
現時点で「指示書を使えばクレジットを節約できる」と断定することはできません。
今後、同じような作業を異なる方法で実施し、消費量を比較してみたいと考えています。
一方で、指示書を残すことで、どのような修正を依頼したのか振り返りやすくなりました。
今回の記事も、実際に保存していた指示書があったからこそ、制作過程をたどることができています。
07｜制作途中と現在のHOMEを比較する
HOMEは一度作って終わりではありません。
記事やPROJECTが増えるにつれて、必要な情報や導線も変わっていきます。
ここでは、異なる時点に記録したPROJECT 002のSTEP進捗を比べます。
2026年10月3日時点
当時はPROJECT 002を制作している途中で、STEP 04まで進んでいました。
2026年10月15日時点
その後、全10 STEPを公開し、HOMEの進捗表示も更新しました。
この2枚は、特定のデザイン修正の直前・直後ではなく、制作途中と公開後という異なる時点のHOMEを記録したものです。
AIで制作のハードルは下がった。でも、学ぶことはなくならない
今回の経験から感じたことは、大きく2つあります。
一つは、WordPressでサイトを作るハードルが大きく下がったことです。
HTMLやCSSに詳しくなくても、ChatGPTと相談しながらHOMEの構成を考え、Workに実装してもらうことができました。
もう一つは、自分でもWebサイトの仕組みを理解する必要があることです。
AIが実装してくれるとしても、どのような構造になっているのか、なぜレイアウトが崩れるのかを理解できれば、もっと的確に改善を進められるはずです。
AIに任せることと、自分で学ぶこと。
MANIARUでは、その両方を続けていきたいと考えています。
まとめ｜AIと一緒に、HOMEを作りながら改善する
今回のHOME制作では、ChatGPTとWorkを組み合わせることで、デザインの相談からWordPressへの実装まで進めることができました。
ただし、最初からすべてが完成したわけではありません。
実際の画面を見ながら問題を見つけ、ChatGPTと相談し、Workで修正する。
その繰り返しによって、HOMEを少しずつ改善してきました。
これからWordPressサイトを作るなら、最初におすすめしたいのは、いきなりコードを書くことではありません。
まずはChatGPTに、作りたいサイトの目的やイメージを伝えてみること。
そこから構成を考え、実装し、実際の画面を見ながら改善していく。
それが、今回MANIARUで実践した方法です。
シリーズ｜AIで、ここまでできる。
- 01｜WordPressサイトを作る
ChatGPTとWorkでWordPressサイトを作ったら、ここまでできた。 - 02｜WordPressのHOMEを作る（閲覧中）
ChatGPTとWorkでWordPressのHOMEを作る。デザインから修正までの実体験 - 03｜社内ポータルサイトを作る
ChatGPTとWorkで社内ポータルを作ったら、ここまでできた。