AIでLPやホームページを作成するとき、最初に作らせるものは逆｜LPは文章から、ホームページは見た目から

「1回で良いものが出たなら、それでいいのでは？」

弊社のスタッフが、AIを使って、リニューアル提案用のページを3時間で作りました。

リニューアル提案用のページは、今あるホームページを作り直しませんか、と提案するときに見せる、新しいページの見本です。つまり、ホームページの側の話です。

品質は文句なしでした。やったのは、これだけです。

• 元のサイトのURLを貼って、「リニューアルを提案したいので作って」とだけ伝える
• AIに一旦ぜんぶ作らせる
• 出てきたものを見て、おかしい所を指摘して直す

ページの区切りの並びも、自分では決めていません。いちばん上の帯（ヘッダー）、料金表、よくある質問、といったまとまりを、どの順に置くか。これをセクション構成と言いますが、そこもAI任せでした。

ところが「もう一回、同じ品質で」となると、途端に難しくなりました。

理由は、どこで良くなったのかが、本人にも分からなかったからです。

おかしい所を指摘して直すことは、できました。本人の中に、「これは違う」と言える仕上がりの姿があったからです。

でも、どの段階で何を決めたから良くなったのかは、手順として言葉になっていません。だから、次に同じ品質が出る保証がありません。

「作って」と一度に頼むと、途中で決めたことが、どこにも残りません。

1回目から思ったものが出ない場合も、同じ頼み方をしています。途中で確かめる所がないので、ずれたまま最後まで作られます。

「じゃあ、AIにはどう頼めばいいの？」

手順を分けて、1段ずつ渡します。どちらも、2番目で必ず一度止めます。

「止める」といっても、止めるボタンがあるわけではありません。頼む文の中に「ここまでで止めて。先はまだ作らないで」と書いて、途中の段だけを出してもらいます。

止める理由は2つです。

• 途中でずれたら、その場で気づける。最後まで作らせてから気づくと、やり直しになります
• どの段で何を見てOKにしたかが残る。残すのは、あなたのメモです

ホームページの場合

1. あなた：「こういう感じにしたい」という参考サイトを探して、URLをAIに渡す
2. AI → あなた：AIがそのサイトを分析して、セクション構成を提案する。ここで一度止めて、あなたが確かめる
3. AI：構成にOKを出してから、デザインと動き（スクロールしたときに、文字や画像が動いて出てくる、など）を作らせる。あなたは、参考サイトと並べて見る
4. AI：パーツ集（よく使うデザインの部品を、集めておいたもの）から引っ張って当てはめる
5. AI → あなた：最後に文章を入れる。あなたは、自社のこととして合っているかを確かめる

1と2は、たとえばこう頼みます。

このサイトを参考に、自社のホームページを作りたい。まず、このサイトを分析して、上から順に、どんな区切りを、どの順番で置くか（セクション構成）だけを提案して。デザインと文章は、まだ作らないで。参考サイト：（ここにURL）

3は、2でOKを出したあとに、こう頼みます。

この構成でOK。次に、この構成のまま、デザインを作って。色や雰囲気は参考サイトに寄せて。スクロールしたときの動きも付けて。文章は、まだ仮のままでいい。

5は、こう頼みます。載せたいことを箇条書きで渡せば、文章はAIが書きます。自分で書いた文章があれば、それを渡します。

このデザインと区切りの並びは変えずに、文章を入れて。載せたいこと：（ここに箇条書き）

4番目のパーツ集は、弊社がよく使う部品（ヘッダー、料金表、よくある質問など）を、動きまで含めて貯めているので入っている段です。持っていなければ、3番目でデザインと一緒にAIに作らせます。

LPの場合

1. あなた → AI：ターゲット（誰に向けたページか）とオファー（その人に何を申し込んでもらうか）を書いて渡し、AIにコピーを書かせる
2. あなた：コピーを確定させる（ここがいちばんの山場です。止めて確かめる所）
3. AI：確定したコピーを渡して、それに合わせたデザインを作らせる
4. あなた → AI：読みづらいところだけ、コピーを微調整してもらう

1は、たとえばこう頼みます。

LPを作りたい。まず、ページに載せる文章（コピー）だけを、上から下まで書いて。デザインは、まだ作らないで。誰に向けたページか：（ここに書く）。その人に申し込んでもらうもの：（ここに書く）。

3は、こう頼みます。

このコピーに合わせてデザインを作って。文章は削らず、入りきらなければ枠のほうを変えて。（ここに確定したコピー）

4は、読みづらい所だけこう頼みます。

デザインは変えずに、この部分の文章だけを読みやすく直して：（ここに読みづらい所）

3時間の例は、ホームページの手順の2番目（構成を確かめて止める所）が省かれていました。だから速かった。そして、どの構成でOKにしたかが残らなかったので、同じ品質で作り直せませんでした。

「止めたとき、何を見てOKを出せばいいの？」

見るのは、1番目で自分が用意したものと比べて、どうかです。比べる相手が自分の中にあることを、この記事では「完成図」と呼びます。

完成図がある人は、AIに任せると速くなります。出てきたものを見て、違う所を指摘できるからです。

完成図がない人は、AIに任せても速くなりません。出てきたものが良いのか悪いのか分からないので、そのまま使うか、全部やり直すかの二択になります。

だから、止める前に、1番目で完成図を作っておきます。作り方は、ホームページとLPで違います。

ホームページ：参考サイトを探して、並べて見る

ホームページの1番目、参考サイトを探す段を飛ばさないでください。あれは手を抜かないための作業ではなく、完成図を自分の中に作る作業です。

止めたときは、AIが出してきたセクション構成を、自分で選んだ参考サイトと並べて見ます。いいなと思った区切りが入っているか。並び順が、自分の思う形になっているか。違うと思ったら、そこで直してもらいます。

LP：読み終わった人の姿を書いて、その人になって読む

LPの完成図は、デザインではなく、読み終わった人の姿です。誰が読んで、読み終わったら何を申し込んでいるか。1番目でターゲットとオファーを書くのが、LPの完成図を作る作業です。

弊社のLPの手順には、参考のLPを探す段は入っていません。LPはデザインより文章と読ませる順番で勝負するので、デザインの参考より先に、読み終わった人の姿を決めます。ターゲットは、あなたが「この人になりきって読める」くらいまで書きます。なりきれないと、次の問いに答えられないからです。

たとえばこのくらいです（書き方の例）。

誰に向けたページか：小さな会社の事業主。エンジニアではない。AIでLPを作らせたが、思ったものが出ず、直してもなかなか決まらない。

「小さな会社の事業主」だけでは、なりきれません。

止めたときは、AIが書いたコピーを、ターゲットの人になったつもりで、上から下まで読みます。そして、次の問いに答えます。

• 途中で、読むのが止まる所はないか。止まった所が、読みづらい所です
• 読み終わったとき、何を申し込めばいいかが分かるか
• 申し込んでほしいことは、1つにしぼれているか。ほかのことにも誘っていないか
• あなたがいちばん伝えたいことが、文章の中に入っているか。デザインに入れたあとでは、枠に合わせて削られやすいので、ここで確かめます

1つでも「いいえ」なら、その所をAIに伝えて直してもらいます。全部「はい」になったら、OKです。

3時間の例のスタッフは、完成図を持っていたので、指摘だけで直せました。それでも作り直せなかったのは、どの段で何を見てOKにしたかが、言葉になっていなかったからです。完成図があることと、手順があることは別です。

作業はAIに任せられても、完成図は任せられません。だから、どこまでを人が決めて、どこからをAIにやらせるかを、最初に決めておきます。

「この記事の話は、どこまで確かなの？」

• 「3時間」は、弊社のスタッフが作った1件だけの例です。元のサイトの大きさや提案の範囲は書いていないので、目安にはなりません
• 手順は、弊社がページを作るときの手順です。手順を分けて頼んだ場合と、一度に頼んだ場合で、品質を測って比べたわけではありません。「2番目で止めると、次も同じ品質で作りやすい」は理屈です
• 止めたときに確かめる問いは、LPとホームページの役目の違いから組み立てたものです。この問いを使った場合と使わない場合を、比べたわけではありません
• 3時間の例で、どのAIの道具を使ったかは、この記事では扱っていません

まとめ：明日、AIに頼むときにやること

LPは文章から、ホームページは見た目から。そして、2番目で一度止めます。

明日やることは、次のとおりです。

1. 作るのがLPか、ホームページかを決める
2. LPなら：ターゲットとオファーを、その人になりきって読めるくらいに書く。上の頼み方でコピーだけを書いてもらい、上の問いで確かめて確定してから、デザインを頼む
3. ホームページなら：いいなと思うサイトを探して、上の頼み方でセクション構成だけを出してもらう。参考サイトと並べて見て、OKを出してからデザインを頼む
4. 止めた所で、何を見てOKにしたかを1行メモしておく。それが、次に同じ出来で作るときの手順になります

この「手順を先に決めて、AIに1段ずつ渡す」やり方は、ページ作り以外でもそのまま使えます。

サイトそのものをAIから触れる形にする話は、WordPressのブログが止まる本当の理由｜記事が増え続けるサイトへの乗り換え方に書きました。手順が決まったあと、それを実行する土台の話です。

この使い方をいちばん小さく体験できるキットを、LINEで無料で配っています。打ち合わせをするだけで、文字起こしと議事録ができて、案件ごとのフォルダに溜まっていくものです。