画像を渡す前に、目的を話す
画像がそろうと、すぐ「これ作って」と渡したくなります。僕のおすすめは、その前に1回、全部壁打ちしておくことです。見本の画像は見た目の手本にはなりますが、あなたのページが何のためにあるのかまでは知らないので。
作る前に、何をどの順で載せるかを設計書に落としておく。
決めておくのは、この3つ
- 誰に見せるページか
- 見た人に何をしてほしいか（申し込み、問い合わせ、登録など）
- 載せたい中身（紹介したい物、伝えたいこと、よくある質問など）
「Vibe Codingの不変真理」の言い方で言えば、なぜ作るのかと、どうなれば成功か、を先に言っておく作業です。全部きれいに決まっていなくても、壁打ちの中でAIが聞いてくれます。
1本で、設計書まで作る
Claude Code か Codex で作業フォルダを開いて、これを送ります。相談してから設計書にまとめるところまで、この1本で進みます。
LPを1つ作りたいです。まだ作り始めないでください。先に、私と相談して設計書を作ります。 lp フォルダにある design の画像を、デザインの見本にしたいです。 1. まず、何のページか・誰に見せるか・見た人にしてほしいこと・載せたい中身の4つを、1つずつ私に質問してください。私が「まだ決めていない」と答えた所は、案を出して選ばせてください。 2. 次に画像を見て、どんなセクションがどの順で並んでいるかを書き出してください。 3. 私の目的に対して、足りないセクションや、足すと良いセクションの案を、理由と一緒に出してください。 4. ほかにもわからない所があれば、私に質問してください。 5. 私が決めたら、セクションの並び、それぞれに載せる中身、画像のどこをどう使うかを、lp フォルダの 設計書.md にまとめてください。
補足 貼って送ると、何のページかと、上の3つを1つずつ聞かれます。決まっていない所は「まだ決めていない」と答えれば、案を出してくれます。画像はチャット欄に直接貼っても大丈夫です。
決まるまで、何往復してもいい
案が返ってきたら、要る物と要らない物を選んで返事をします。「3つ目の案はいらない」「よくある質問は入れたい」くらいの短さで大丈夫です。ここで何往復しても損はしないです、あとで作り直すよりずっと早いので。
設計書.md ができたら、開いて上から下まで読んでみてください。自分のページの流れとして違和感がなければ、このSTEPは終わりです。
設計書は面倒なので、画像だけ渡して一発で作ってもらいたい。
作れはします。ただ、画像に無いセクションは作られないし、目的に要る中身も、渡していなければ入りません。あとから1つずつ足していくと、全体の並びやバランスがだんだん崩れていきます。先に設計書で決めておくほうが、結果的に早く仕上がります。