BLOG
AI で LP を作る流れ — 参考探しからデザイン案、実物のページになるまで
「AI を使えば、LP を一人で作れるらしい」。そう聞いて始めてみたものの、何を、どの順番でやればいいのかが分からない。ChatGPT に「LP を作って」と打ち込んでみる、それらしい文章は返ってくる、でもそこから実物のページにどう辿り着くのかが見えない——そんなところで止まっていないでしょうか。
この記事は、LP を 1 本作りきるまでの 流れ全体 を、通しで書きます。参考サイトを探すところから、デザイン案を作り、直して、実際に動くページにするまで。途中で使うツールの名前も出しますが、主役は道具ではなく 順番 です。
先にお伝えしておくと、AI を使っても 時間はかかります。ボタンひとつでプロ級の LP が出てくる、という話ではありません。それでも、この流れを知っていれば、一人でも、参考探しから実物まで辿り着けます。
大事なのは「ツール選び」より「流れ」
「AI LP」で調べると、たいてい出てくるのは ツールの紹介 です。「LP が作れる AI ツール 9 選」「このサービスなら 5 分で LP が完成」。あるいは、ChatGPT に構成やキャッチコピーを書かせる 話。どちらも役に立ちますが、実際にやってみると気づくことがあります——ツールを 1 つ知っても、LP は完成しない のです。
なぜなら、LP 制作は 1 つの作業ではなく、性質の違う工程の連なり だからです。方向性を決めるのは考える作業、参考を探すのは眺める作業、デザイン案を作るのは生成の作業、実物にするのは実装の作業。それぞれに向いた道具が違う ので、「万能の 1 ツール」を探すより、「どの工程で何を使うか」を知るほうが早い。
そこでこの記事では、参考探しから実物まで 6 つの工程 に分けて、順に見ていきます。とくに、多くの記事が飛ばしている ③参考を分析する という工程を挟むと、そのあとの AI への指示が一気に具体的になります。ここがこの記事の中心です。
①方向性を決める ②参考を見つける
①方向性 — ここが曖昧だと、後が全部ブレる
最初にやるのは、AI を開くことではありません。誰向けの、どんな雰囲気の LP にするか を、自分の中で決めることです。
- 誰向けか: 「20 代女性」ではなく「20 代女性の社会人」まで。できれば「通勤中にスマホで見る」といった状況も。
- どんな雰囲気か: 「可愛い」ではなく「可愛くてポップ」「可愛いけど甘すぎず、少し大人っぽく」まで。
- 何を、どの順で見せるか: つかみ → 悩みへの共感 → 商品紹介 → 使った人の声 → 申し込み、という骨組みをざっくりと。
地味な工程ですが、ここが曖昧なまま先に進むと、あとの工程が全部ブレます。参考を探しても「何を基準に選べばいいか」が決まらず、AI に頼んでも「なんとなく LP っぽいもの」しか返ってこない。5 分でいいので、先に決めておきます。
②参考を見つける — 言葉より先に、目で探す
方向性が決まったら、それに近い実物の LP を探します。頭の中のイメージを言葉だけで固めようとすると行き詰まるので、実物を見ながら「これに近い」を見つけるほうが速い。
探し先は、SANKOU! や MUUUUU.ORG のような Web デザインのギャラリーサイト が定番です。業種・雰囲気・色などで絞り込めるので、「可愛い系」「ダーク系」といった方向から辿れます。競合や、同じ業種の LP を素直に見に行くのも有効です。
このとき、1 つに絞らず 2〜3 本ためておく のがコツです。1 本だけだと、その LP の丸写しに寄ってしまいます。複数あると「どれにも共通しているのは、余白が広いことだ」というように、自分が本当に良いと思っている要素 が浮かび上がります。参考の探し方と活かし方そのものは Web デザインの参考サイトを分析して自分に活かす方法 にまとめています。
③参考を「分析」する — この工程が、あとの指示を決める
ここが、多くの記事が飛ばしている工程です。そして、やるかどうかで後半の効率が変わる ところでもあります。
参考 LP を見つけたあと、たいていの人は 眺めて終わり にします。「うん、いい感じ」「こういうのが作りたい」。でも、その状態のまま AI に向かうと、打ち込める言葉は「いい感じの LP を作って」しかありません。「なんかいい」は、そのままでは指示にならない のです。
必要なのは、参考 LP を 要素に分解して理解する ことです。
- 配色: 何色使われているか。どれがベースで、どれが差し色か。どのくらいの割合か。
- フォント: 見出しと本文の書体は何系か。太さや大きさの差はどのくらいか。
- レイアウト: 何をどの順で見せているか。余白はどのくらい取られているか。
- コピー: キャッチはどんなトーンか。CTA（申し込みボタン）の言葉は何か。
この 4 つの目で見直すと、「なんかいい」が 「この配色と、この余白の使い方がいい」 に変わります。そして、要素の言葉になったものは、そのまま AI への指示に使えます。ここが肝心なところです。分析は、理解を深めるためだけの作業ではありません。次の工程の材料を作る作業 です。
手でやってもいいし、分析ツールを使ってもいい
要素への分解は、手作業でもできます。ブラウザの検証ツールで色を拾い、書体を確かめ、余白を測る。時間はかかりますが、確実です。
手早く済ませたいときは、分析ツールを使う手もあります。yorunoma は、参考にしたい LP の URL を入れると、配色・フォント・コピー・レイアウト・動きが一つずつ「要素の言葉」に読み解かれる ツールです。
たとえば配色なら、使われている色が 1 色ずつ、役割（ベース・差し色など）と占有率つきで出てきます。「主役のミディアムピンク（#cf5074）が、差し色としてどのくらい使われ、どんな印象を作っているか」まで言葉になる。ここで得た 「色数は 3 色」「基調は #cf5074」 という言葉が、次の工程でそのまま AI への指示になります。配色だけを先に押さえたいときの手順は 参考 LP の配色だけを先に取り出しておく方法 にまとめています。
コピーも同じように、キャッチ・本文・CTA が役割とトーンに分けて読み解かれます。参考 LP の言葉づかいを「上品で落ち着いたトーン」と掴めていれば、AI にもそう頼めます。
なお、yorunoma が するのは分析だけ です。デザインを作ってはくれません。作るのは次の工程の AI の役割で、yorunoma は その AI に渡す材料を用意する道具 だと考えてください。丸写しにするためではなく、「なぜこの LP が良いのか」を理解して自分の文脈に翻訳するために使います。その線引きは サイトのデザインをパクリにせず参考にする方法 で詳しく書いています。
④デザイン案を作る — 分析で出た言葉を、そのまま渡す
材料が揃ったので、ここでようやく AI に頼みます。ChatGPT のような対話型 AI に、LP の見た目のデザイン案（画像） を作ってもらう工程です。
このとき渡すのが、①で決めた方向性と、③で言葉にした要素です。
20 代女性の社会人向け、可愛くてポップだけど甘すぎない雰囲気のリップの LP のデザイン案。色数は 3 色に絞って、基調は #cf5074。余白は広めに。ファーストビューに商品名とひとことの魅力、その下に悩みへの共感 → 紹介 → 使った人の声 → 申し込みの順で。
「なんかいい感じで」と頼むのとの違いが分かるでしょうか。分析で出た具体的な要素が、そのまま指示の言葉になっています。AI は渡された情報の範囲でしか動けないので、渡す言葉が具体的なほど、返ってくる案の方向は定まります。
さらに、参考 LP のスクリーンショットも一緒に渡す と、もう一段近づきます。雰囲気や余白のような視覚的な情報は、言葉より画像のほうが速く伝わるからです。ただし画像を貼るだけでは「どこを真似ればいいのか」が伝わらないので、「この LP の余白と配色をベースに、○○向けの△△な雰囲気で作り変えて」 と、ベースにする部分と変える部分を言葉で分けて添えます。
プロンプトそのものの書き方（3 つの軸、コピペで使えるテンプレ）は AI に LP のデザイン案を作らせるプロンプトの書き方 に、デザイン案作りだけを掘り下げた進め方は AI で LP のデザイン案を作る方法 にまとめてあります。この記事は流れの俯瞰なので、細かい書き方はそちらに譲ります。
⑤直して詰める ⑥実物の LP にする
⑤一発では出ない。だから、部分ごとに直す
正直に書きます。一発で「これだ」という案は、まず出ません。どれだけ具体的に頼んでも、7 割くらいの案が返ってくる、というのが実際のところです。
ここでやることは、ズレている部分だけを名指しで直す ことです。「なんか違うから全部作り直して」と言うと、うまくいっていた部分まで別物になり、往復だけが増えます。
- 「配色はこのままで、見出しをもっと大きく」
- 「全体は近い。上の余白だけ、もっと広げて」
- 「雰囲気はいい。申し込みボタンの色を、もっと目立たせて」
このとき効いてくるのが、やはり 要素の言葉 です。「もっと可愛く」は AI に伝わりませんが、「色数が多いから 3 色に絞って」「余白が足りない」は伝わります。③で参考を分解しておくと、直すときの語彙 も手に入っている、というわけです。この往復が、だいたい数回。ここが一番時間のかかるところですが、7 割の案を 9 割に育てる つもりで進めるのが現実的です。
⑥デザイン案を、実物のページにする
案が固まったら、実際に動く LP にします。デザイン案は画像なので、そのままでは公開できません。ここで使うのが、コードを書いて形にしてくれる AI ツールです。Claude Design のように、デザイン案や指示から実際のページを組み上げてくれる ものを使えば、コードに詳しくなくても実物まで辿り着けます。
そしてここで、丸投げ型の「5 分で LP 完成」ツールとの違いが出ます。AI に作らせたあとも、自分で手を入れられる こと。「この見出しをもう少し詰めたい」「ボタンの位置を変えたい」と思ったときに、AI に頼んで直してもらうことも、自分で直すこともできます。出てきたものが最終形ではなく、そこからが調整の始まり です。
公開したあとも、自分の LP を要素の目で見返せば、直すべきところが見えてきます。自分のページについて優先度つきの改善点まで出す「診断」は Pro プラン以上、参考 LP と自分の LP を並べて差分を出す「比較」は Premium プランの機能です。
この流れの、何が良いのか
6 工程を振り返ると、この流れの利点は 3 つあります。
1. 一人で、参考探しから実物まで辿り着ける。 デザイナーもコーダーもいない状態から、ギャラリーサイトで参考を探し、分析し、AI にデザイン案を作らせ、実物のページにする——ここまでを一人でやりきれます。少し前なら、途中のどこかで必ず誰かに頼む必要がありました。
2. 工程ごとに、向いた道具を使い分けられる。 探すのはギャラリーサイト、分析するのは分析ツール（または手作業）、作るのは ChatGPT、実物にするのは Claude Design。1 つの万能ツールを探さない ぶん、それぞれの工程で確実に前に進めます。
3. 丸投げより、自分のイメージに近づく。 「AI に丸投げして 5 分で完成」は速いけれど、出てくるのは平均的なものです。この流れは時間がかかります。参考を探して、分解して、指示して、何度も直す。でもそのぶん、自分が「いい」と思ったものの理由を通した LP になります。
時間はかかります。半日で終わることもあれば、数日かかることもある。AI を使っても、そこは変わりません。それでも、迷いながら手探りするのに比べれば、順番が分かっているだけで、進み方はまるで違います。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは参考にしたい LP の URL を 1 つ入れて、要素の言葉に読み解くところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
yorunoma で、LP を作れるのですか。
いいえ。yorunoma がするのは ③参考を分析する 工程だけです。デザイン案を作るのは ChatGPT のような AI、実物のページにするのは Claude Design のような実装向けのツールで、yorunoma はそれらに渡す 材料（要素の言葉）を用意する道具 です。役割は分けて考えてください——yorunoma が「読み解く」、AI が「作る」。
AI で作れば、成果の出る（売れる）LP になりますか。
成果は、デザイン以外の要因（商品・価格・集客・タイミングなど）も大きく、お約束できるものではありません。AI が作れるのは、あくまで 見た目のデザイン案とページ です。そして yorunoma も、CVR（コンバージョン率）や売上といった成果・数字は測りません。yorunoma が扱うのは、なぜそのデザインが選ばれているかを読み解くところまで。成果の保証ではなく、判断や指示の材料としてお使いください。
③の分析は、飛ばしてはいけませんか。
飛ばしても LP は作れます。ただ、そのぶん④以降の往復が増えます。分析を挟まないと AI に渡せる言葉が「いい感じで」しかなく、返ってきた案の「なんか違う」も言葉にできないからです。時間を使う場所が、前（分析）に来るか後ろ（往復）に来るか の違いだと考えてください。
参考にしたい LP を分析するのは、真似（パクリ）になりませんか。
丸写しをすればパクリですが、要素として理解し、自分の文脈に置き換える なら、それは参考です。「この LP はなぜ良いのか」を配色・余白・書体といった要素で言語化し、狙いだけを自分の LP に取り入れる。表面をそっくりコピーするのとは別の行為です。線引きは サイトのデザインをパクリにせず参考にする方法 で詳しく解説しています。
まとめ
AI で LP を作るときにまず知りたいのは、どのツールを使うかより どういう順番で作るか です。①方向性を決める（誰向け・どんな雰囲気・何をどの順で）、②ギャラリーサイトなどで参考を 2〜3 本見つける、③参考を配色・フォント・レイアウト・コピーの要素に分解して理解する、④その要素の言葉を使って AI にデザイン案を作らせる（参考のスクショも一緒に渡す）、⑤一発では出ないので部分ごとに直して詰める、⑥固まったら Claude Design のようなツールで実物のページにする。この 6 つです。
とくに効くのが、③の分析を挟むこと。「なんかいい」を「この配色・この余白の使い方がいい」に変えておくと、それがそのまま④の指示になり、⑤で直すときの語彙にもなります。分析は理解のためだけでなく、制作の道具 です。
時間はかかります。ボタンひとつでプロ級、という話ではありません。それでも、順番が分かっていれば、参考探しから実物まで、一人でも辿り着けます。まずは①と②——方向性を決めて、いいなと思う LP を数本、集めるところから始めてみてください。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。