BLOG
AI に LP のデザイン案を作らせるプロンプトの書き方 — 見た目を思いどおりに指示する
「AI に LP のデザインを頼んでみたのに、思っていたものが出てこない」。ChatGPT のような AI に「可愛い感じの LP を作って」とお願いしたのに、返ってきたのはどこかで見たような、のっぺりした案。もう一度頼むと、今度は別の方向にズレる——。問題は AI の性能ではなく、たいてい「指示（プロンプト）の書き方」の側にあります。頭の中の「こういう見た目にしたい」を、AI に伝わる言葉へ変換できていないのです。
この記事は、その プロンプトの書き方 に絞って、明日から使える形で解説します。読み終えたら、「AI に LP のデザインをどう指示すればいいか」が具体的に分かっているはずです。
LP の「デザイン」を作らせるプロンプトは、情報が少ない
「AI LP プロンプト」で検索すると、出てくる記事のほとんどは 文章（コピー）や構成、見出しの型を AI に書かせる 話です。「10 個のキャッチコピー案を出させる」「#目的 #情報 #ルール #出力 のテンプレで構成を作らせる」——それらは役に立ちますが、この記事が扱うのは、そこではありません。
いっぽう「画像生成プロンプト」の記事は、イラストや写真を作る話が中心で、LP のデザインとは別物です。つまり、「LP の見た目（デザイン）そのものを、AI にどう指示するか」だけが、ぽっかり空いています。ここを埋めるのがこの記事です。文章の作り方でも、装飾画像の作り方でもなく——配色・雰囲気・レイアウトといった 見た目の方向づけを、言葉でどう渡すか。それだけに集中します。
なお、AI でデザイン案を作る 全体の流れ（決める → 指示する → 直す → 仕上げる）は AI で LP のデザイン案を作る全体の流れ に総論としてまとめてあります。この記事は、その中の「プロンプトの書き方」を深掘りする 各論 です。流れをまだ押さえていない方は、先に総論に目を通すと、この記事の位置づけがはっきりします。
デザイン案を頼むときに伝える 3 つの軸
AI は、こちらが渡した情報の範囲でしか動けません。「いい感じに」だけ渡せば、AI は無数の解釈の中から いちばん無難な平均値 を返してきます。だから、のっぺりした案になるのです。逆に言えば、渡す情報を具体的にするほど、返ってくる案の方向は定まります。
「おしゃれに」「可愛く」「いい感じに」といった 抽象的な言葉ほど、AI にとっては解釈の幅が無限です。人によって「おしゃれ」の中身がまるで違うのと同じで、AI も「どのおしゃれか」を決められません。結果、当たり障りのない平均に落ち着きます。プロンプトを書くときの一般的なコツとして「抽象的な表現を避け、具体的な要素に分解する」とよく言われますが、これはデザインの指示でもそのまま当てはまります。
では、何を具体的に伝えればいいのか。デザイン案を頼むときは、次の 3 つの軸を渡します。
1. 構成 — 何を、どの順で見せるか
LP は縦に長い 1 枚です。何を、どの順番で見せるか、そして ファーストビュー（最初の一画面）に何を置くか を、ざっくりでいいので指定します。「ファーストビューに商品名とひとことの魅力、その下に悩みへの共感、商品紹介、使った人の声、最後に申し込み」——この骨組みを渡すだけで、AI の案は「なんとなく LP っぽいもの」から「あなたの意図に沿った順序」に変わります。
2. 誰向け — 年齢＋属性＋状況まで
「誰のための LP か」は、一段も二段も深くします。「20 代女性」では、まだ足りません。同じ 20 代女性でも、「20 代女性の社会人」と「20 代女性の学生」では、響くデザインがまるで違う からです。さらに「通勤中にスマホで見る」「休日に自宅でじっくり見る」といった 状況 まで添えると、方向はもっと絞れます。年齢＋属性＋状況——この 3 点セットで、ターゲットを言葉にします。
3. 雰囲気 — 形容詞は 2 つ重ねる
いちばん難しいのが雰囲気です。「可愛い」だけでは、AI はどんな可愛さか決められません。コツは、形容詞を 2 つ重ねる ことです。「可愛くてポップ」なのか「可愛くて上品」なのか「可愛いけど甘すぎず、少し大人っぽく」なのか。2 語重ねるだけで、方向がぐっと固定されます。色の好みがあるなら「淡いピンクを基調に」まで添える。さらに、参考にしたい配色を持っているなら 色の指定を HEX まで具体化するやり方 で「#f2c1cf を基調に」と数値まで渡すと、AI の解釈のブレはさらに小さくなります。
この 3 つを具体的に渡してから頼むだけで、AI の返す案は、渡さないときより明らかに近くなります。それでも——次に書くとおり、一発では決まりません。
一発では出てこない。指示は重ねて育てる
構成を決め、ターゲットを具体化し、雰囲気を 2 語で固めても、最初の一発で思いどおりの見た目が出ることは、まずありません。これは指示が下手だからではなく、頭の中の「見た目」がそもそも言葉に置き換えづらいからです。プロンプトの一般的なコツでも「一発で完璧を求めず、やり取りで育てる」と言われますが、デザインではとくにこれが効きます。
大事なのは、出てきた案を見て 部分ごとに直す ことです。「なんか違うから全部作り直して」ではなく、実物を見て、ズレている箇所だけを名指しで直す。
- 「配色はこのままでいいので、見出しをもっと大きく」
- 「全体は近い。上の余白だけ、もっと広げて」
- 「雰囲気はいい。申し込みボタンの色を、もっと目立つ色に」
全部を作り直すと、うまくいっていた部分まで別物になり、往復が増えます。間違っているところだけを直す指示のほうが、正解に速く近づきます。1 回で当てようとせず、「7 割の案を、直しながら 9 割に育てる」——この構えで臨むのが現実的です。
そしてこのとき、違和感を「要素の言葉」に翻訳できるか が分かれ目になります。「もっと可愛く」は AI に伝わりませんが、「色数が多いから 3 色に絞って」「余白が足りない」「書体を丸ゴシックに」は伝わります。直す指示は、感想ではなく 配色・余白・書体・サイズといった要素で名指し する。これが、重ねて育てるときの基本動作です。
言葉の限界と、参考画像の使い方
部分ごとに何度か直しても、言葉だけでは、どうしても遠いまま のことがあります。「可愛くてポップ」と繰り返し説明しても、あなたの思う「ポップ」と AI の「ポップ」が最後まで噛み合わない。これは、雰囲気・配色・レイアウトのような 視覚的な情報は、言葉だけでは伝えきれない からです。
そこで効くのが、参考にしたい LP のスクリーンショットを読み込ませて、言葉と組み合わせて指示する 方法です。総論でも触れましたが、ここでは「プロンプトの書き方」として、もう一歩踏み込みます。ポイントは、画像を貼るだけで終わらせず、言葉とセットで渡す ことです。
画像だけを渡して「こんな感じで」と言うと、AI は「何を再現してほしいのか」を決められません。色なのか、レイアウトなのか、余白の取り方なのか。だから、画像に 「何をベースに、何を変えるか」を言葉で添えます。
- 画像だけ:「これみたいにして」→ どこを真似ればいいか AI が迷う
- 画像＋言葉:「この LP の余白の広さと配色をベースに、20 代女性の社会人向けの、可愛くてポップな雰囲気で作り変えて」→ ベース（何を残すか）と変更点（誰向け・雰囲気）が両方伝わる
「ベースにする部分」と「作り変える部分」を言葉で分けて指定する。これが、参考画像を使うプロンプトの型です。すると、言葉だけであれこれ説明していたときより、ぐっと近いところから始められます。
ただし、正直にお伝えします。参考画像を入れれば 完成する わけではありません。得られるのは「一発でかなり近いところまで来る」であって、そこはまだゴールではない。参考画像は 出発点を近づける手段 であって、そこから先はやはり、前の章の「部分ごとに直す」に戻って仕上げていきます。「画像を入れれば一発で完璧」ではなく、「画像を入れると、近い場所から直し始められる」——この距離感が、実際のところです。
コピペで使えるプロンプトの形
ここまでの 3 つの軸（構成・誰向け・雰囲気）と、参考画像の指定を 1 つにまとめると、そのまま使えるプロンプトの型になります。まず、やりがちな 悪い例 と 良い例 を並べてみます。
- 悪い例:「リップの LP 作って」——誰向けも雰囲気も構成も無いので、AI は無難な最大公約数を返す
- 良い例:「20 代女性の社会人向け、可愛くてポップだけど甘すぎない雰囲気で、ファーストビューに商品名とひとことの魅力、その下に悩みへの共感 → 紹介 → 使った声 → 申し込みの順のリップの LP。添付画像の余白と配色をベースに作り変えて」
この「良い例」を、毎回ゼロから書かなくていいように、テンプレにしておきます。角カッコの中を埋めるだけです。
# 目的
[商品・サービス名] の LP のデザイン案がほしい
# 誰向け（年齢＋属性＋状況）
[例: 20代女性の社会人／通勤中にスマホで見る]
# 雰囲気（形容詞は2つ重ねる）
[例: 可愛くてポップ／ただし甘すぎず少し上品]
基調にしたい色: [例: 淡いピンク #f2c1cf]
# 構成（上から見せる順）
- ファーストビュー: [例: 商品名＋ひとことの魅力]
- 悩みへの共感 → 商品紹介 → 使った人の声 → 申し込み
# 参考画像
添付の LP の [例: 余白の広さと配色] をベースに、
上の条件で作り変えて
# 出力
まず全体の配色と雰囲気だけ提案して。そこから直していきます
最後の「まず全体の配色と雰囲気だけ提案して」は、前の章の「一発で完璧を求めず、重ねて育てる」を、最初から仕込んでおくためのひと言です。全部を一度に出させず、大きな方向から固めていくと、直しがラクになります。このテンプレを起点に、返ってきた案を見ながら部分ごとに直していけば、思いどおりに近づいていきます。
「どんな雰囲気か」を言葉にできないと、指示は書けない
ここまでの書き方には、ひとつ前提があります。「どんな雰囲気にしたいか」を、自分が言葉にできる こと。「可愛くてポップ」と言えるから指示できるのであって、頭の中がモヤっとしたままでは、テンプレの角カッコが埋まりません。とくに参考にしたい LP を渡すときは、「その LP のどこが良くて、何を再現したいのか」を言葉にできて初めて、「この余白と配色をベースに」と指定できます。
その「言葉にする」を助けるのが、yorunoma です。参考にしたい LP の URL を入れると、配色・フォント・コピー・レイアウト・動きが、一つずつ「要素の言葉」に解読されます。「なんとなくいいな」だった参考 LP が、「主役のミディアムピンクが差し色として何割くらい使われ、どんな印象を作っているか」まで言葉になる。その言葉が、そのまま AI へのプロンプトの材料になります——「この LP のように、色数を 3 色に絞って」「基調は #cf5074 で」と。yorunoma はデザインを 作る ツールではなく、すでにある LP を分析して言語化する ツールです。作るのは AI、言葉にするのが yorunoma、という役割分担です。
丸写しにするためではありません。「なぜこの LP が良いのか」を要素で理解し、狙いだけを自分の指示に翻訳するために使う。要素の言葉を持っているほど、AI に渡すプロンプトは具体的になります。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは参考にしたい LP の URL を 1 つ入れて、要素の言葉に読み解くところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
yorunoma で、LP のデザインを作れるのですか。
いいえ。yorunoma は、デザインを 作る（生成する）ツールではありません。デザイン案を作るのは ChatGPT のような AI の役割で、yorunoma がするのは、すでにある LP のデザインを分析して、要素の言葉に読み解く ことです。読み解いた配色・フォント・レイアウトの言葉が、そのまま AI へのプロンプトの材料になる、という関係です。役割は分けて考えてください——AI が「作る」、yorunoma が「読み解く」。
AI で作れば、成果の出る（売れる）LP になりますか。
デザイン案は作れますが、成果は別の話です。売上や問い合わせは、デザイン以外の要因（商品・価格・集客・タイミングなど）も大きく、お約束できるものではありません。AI が作れるのは、あくまで 見た目のデザイン案 です。そして yorunoma も、CVR（コンバージョン率）や売上といった成果・数字は測りません。yorunoma が扱うのは、なぜそのデザインが選ばれているかを読み解くところまで。成果の保証ではなく、指示の材料としてお使いください。
自分の LP や参考 LP を、もっと詳しく分析できますか。
はい。分析（解析）は全プランで使え、無料体験でも試せます。そのうえで、自分の LP について優先度つきの改善点まで出す「診断」は Pro プラン以上、2 つの LP を並べて差分を出す「比較」は Premium プランの機能です。まずは全プランで使える分析から始めてみてください。
まとめ
AI に LP のデザインを頼んで思ったものが出てこないのは、AI の性能ではなく、指示の書き方の問題であることがほとんどです。抽象的な言葉（おしゃれに・いい感じに）は解釈が無限で、AI は無難な平均を返します。だから、構成・誰向け・雰囲気の 3 つの軸を具体的に渡す。「20 代女性」ではなく「20 代女性の社会人」、「可愛い」ではなく「可愛くてポップ」と、一段深く言葉にする。それでも一発では出ないので、全部作り直さず、ズレた部分だけを要素で名指しして直す。言葉だけで遠いときは、参考にしたい LP の画像に「これをベースに、○○向けの△△な雰囲気で」と言葉を添える——ベースと変更点を分けて指定するのがコツです。そして、コピペできるテンプレの角カッコを埋めれば、明日から使えます。すべての土台は、「どんな雰囲気か」を自分の言葉にできること。参考 LP を要素の言葉に読み解いておけば、それがそのまま、プロンプトの材料になります。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。