BLOG
AI で LP のデザイン案を作る方法 — 思いどおりの見た目に近づける進め方
「AI で LP のデザインを作りたい」。そう思って ChatGPT のような AI にお願いしてみたものの、思っていたものが、なかなか一発で出てこない。「可愛い感じで」と頼んだのに、なんだかイメージと違う。もう一度お願いしても、今度は別の方向にズレる——そんな経験はないでしょうか。AI は便利ですが、頭の中にある「こういう見た目にしたい」を、言葉だけで正確に伝えるのは、案外むずかしいものです。
世の中の「AI で LP を作る方法」という記事の多くは、実は 文章（コピー）や構成、HTML を AI に書かせる 話が中心です。それも役に立ちますが、この記事の切り口は少し違います。お伝えしたいのは、文章ではなく——見た目・配色・雰囲気といった「デザイン案」を AI で作る ときの、思いどおりに近づけていく進め方です。とくに、言葉だけの指示ではなかなか出ない見た目を、参考画像で一気に近づける という突破口を中心に、実際の流れを通しで解説します。
AI で作れるのは「文章」だけじゃない
AI に LP を頼む、というと「キャッチコピーを書いてもらう」「セクション構成を考えてもらう」といった、文章まわり を思い浮かべる人が多いかもしれません。実際、コピーや構成の生成は AI の得意分野です。
でも、AI にできるのはそれだけではありません。「どんな見た目にするか」というデザイン案——配色の方向性、全体の雰囲気、レイアウトのイメージ——も、AI に作ってもらえます。「落ち着いた高級感のある LP」「若い女性向けの明るいポップな LP」といった見た目のたたき台を、AI が出してくれる。ツールも、ChatGPT のような対話型 AI から、画面イメージを描き出すデザイン生成系まで、いくつも選べるようになりました。
この記事が扱うのは、その 「見た目のデザイン案」を作る 側です。文章の作り方ではなく、頭の中にある雰囲気を AI にどう伝え、どう近づけていくか。ここに絞って、実際の進め方を見ていきます。
AI にデザイン案を頼む前に、決めておくこと
いきなり「いい感じの LP を作って」と頼んでも、まず思いどおりにはなりません。AI は、こちらが渡した情報の範囲でしか動けないからです。だから、頼む前に自分の中で決めておく ことが、遠回りを減らす第一歩です。決めておきたいのは、次の 3 つです。
1. 構成 — 何を、どの順で見せるか
LP は縦に長い 1 枚のページです。何を、どの順番で見せるか（つかみ → 悩みへの共感 → 商品の紹介 → 実績や声 → 申し込み、といった流れ）を、ざっくりでいいので先に決めておきます。ここが曖昧なままだと、AI が出す案も「なんとなく LP っぽいもの」で止まり、あなたの意図とはズレます。
2. 誰向けか — できるだけ具体的に
「誰のための LP か」を、一段深く具体的に します。「20 代女性」ではなく「20 代女性の社会人」。「経営者」ではなく「小さな会社を一人で回している経営者」。ターゲットが具体的になるほど、AI が選ぶトーンや色の方向性も、狙いに寄っていきます。ふんわりした対象には、ふんわりした案しか返ってきません。
3. 雰囲気 — 頭の中のイメージを、言葉にする
いちばん難しいのが、この「雰囲気」です。「可愛い」だけでは、AI にはどんな可愛さか分かりません。「可愛くてポップな感じ」「可愛いけど甘すぎず、少し大人っぽく」 というように、頭の中のイメージを一段ずつ言葉にしていきます。色の好みがあるなら「淡いピンクを基調に」まで添える。ここで、参考にしたい配色を持っているなら、気になる配色を、色ごとに数値で書き出す方法 で HEX や占有率まで言葉にしておくと、指示がぐっと具体的になります。
この 3 つを決めてから頼むだけで、AI の返してくる案は、決めずに頼んだときより明らかに近くなります。それでも——次に書くとおり、一発で「これだ」とはなりません。
それでも一発では出ない。参考画像という突破口
構成を決め、ターゲットを具体化し、雰囲気を言葉にして頼んでも、最初の一発で思いどおりの見た目が出ることは、まずありません。これは、あなたの指示が下手だからではありません。頭の中の「見た目」は、そもそも言葉に置き換えづらいものだからです。「可愛くてポップ」と伝えても、あなたの思う「ポップ」と AI の解釈する「ポップ」は、たいていズレています。
だから、AI とのデザイン作りは やり取りで近づけていく ものだと考えるのが現実的です。出てきた案を見て、「ここは近いけど、ここが違う」と感じたら、部分ごとに直す指示 を返します。「全部作り直して」ではなく、「配色はこのままで、見出しをもっと大きく」「上の余白を、もっと広く」というように、変えたいところだけを名指しで伝える。これを何度か往復すると、少しずつ近づいていきます。
それでも、言葉だけでは遠いままのことがあります。そこで効くのが——参考にしたい LP の画像（スクリーンショット）を読み込ませて、「これをベースに」と伝える やり方です。
見た目は、見た目で伝えるのが速い
雰囲気や配色、レイアウトのような 視覚的なもの は、言葉で説明するより、画像で見せたほうが一気に伝わります。「こういう感じにしたい」という LP のスクリーンショットを AI に読み込ませ、こう頼みます——「これをベースに、20 代女性の社会人向けの、可愛くてポップな雰囲気で作り変えて」。すると、言葉だけであれこれ説明していたときより、ぐっと近いところから始められます。
ただし、正直にお伝えします。参考画像を入れれば 完成する わけではありません。得られるのは「一発でかなり近いところまで来る」であって、そこはまだゴールではない。参考画像はあくまで出発点を近づける手段で、そこから先は、やはり直して仕上げていく 必要があります。「画像を入れれば一発で完璧」ではなく、「画像を入れると、近い場所から直し始められる」——この距離感が、実際のところです。
出てきた案の「なんか違う」を、どう直すか
参考画像で近づけても、最後は必ず「なんか違う」という感覚が残ります。ここからの直しが、仕上がりを分けます。そして、ここでつまずく人がとても多い。なぜなら——「なんか違う」を、そのまま AI に投げても直らない からです。
「もっと可愛く」「なんか違う」「いい感じにして」。こうした言葉は、あなたの頭の中では意味を持っていても、AI には 何をどう変えればいいのか伝わりません。その結果、また別の方向にズレた案が返ってきて、往復だけが増えます。
直すコツは、その違和感を「要素」に分解して言葉にする ことです。「なんか違う」の正体は、たいてい配色・フォント・余白・レイアウトといった、具体的な要素のどれかにあります。たとえば——
- 「なんかごちゃごちゃする」→ 「配色の色数が多すぎる。3 色くらいに絞って」
- 「なんか窮屈」→ 「セクションの間の余白が足りない。もっと広げて」
- 「なんか安っぽい」→ 「見出しの書体を、もっと上品な明朝系に」
こうやって 要素で名指し すると、指示が具体的になり、AI は狙いどおりに直せます。「もっと可愛く」は伝わらないけれど、「色数が多いから絞って」「余白が足りない」は伝わる。違和感を言葉にできる人が、AI をうまく使える のです。
違和感を「要素の言葉」に変える手がかり
とはいえ、「なんか違う」を要素に分解するのは、慣れないと難しいものです。自分の中のモヤモヤが、色の問題なのか、余白なのか、書体なのか——そこが分からないと、名指しのしようがありません。
そこで役立つのが、参考にしたい LP を分析して、要素の言葉に置き換えておく ことです。yorunoma に気になる LP の URL を入れると、配色・フォント・コピー・レイアウト・動きが、一つずつ「要素の言葉」に解読されます。
たとえば 配色 を分析すると、使われている色が 1 色ずつ、役割（ベース・アクセントなど）と占有率つきで読み解かれます。「主役のミディアムピンク（#cf5074）が、差し色として何割くらい使われ、どんな印象を作っているか」までが、言葉になります。これを見れば、「参考の LP は色数を 3 色に絞っている。自分の案は色が多すぎた」 という違和感の正体が、はっきりします。そして、その言葉は そのまま AI への指示 になります——「色数を 3 色に絞って」と。
配色だけではありません。フォントは書体と印象が、コピーは役割とトーンが、同じように要素の言葉になります。参考 LP を「なんとなくいいな」で終わらせず、「なぜいいのか」を要素で言語化しておく。それが、AI に「これをベースに」と頼むときの土台になり、「なんか違う」を直すときの語彙になります。
こんな使い方
AI でデザイン案を作るとき、参考 LP を要素で読み解く力は、次のような場面で効いてきます。
- 参考にしたい LP を分析して、AI への指示に使う — 「これをベースに」と読み込ませたい LP を、先に分析しておきます。配色・フォント・レイアウトが要素の言葉になるので、「なぜこの LP が良いのか」を理解したうえで、再現したい部分を AI に具体的に伝えられます。LP デザインを 5 要素で深く読み解く見方は LP デザインを分析・解読する — なぜそのデザインが選ばれているのか が詳しく、丸写しでなく参考にする線引きは サイトのデザインをパクリにせず参考にする方法 もどうぞ（分析は全プランで使え、登録なしの無料体験でも試せます）。
- AI が作った案を分析して、何が違うかを確かめる — AI に作らせた LP を形にして URL を入れれば、参考にしたい LP と 同じ要素の物差し で見比べられます。「参考は色数 3 色、自分の案は 5 色」——差が要素で見えれば、次の指示が具体的になります。自分の LP について優先度つきの改善点まで欲しいときは「診断」（Pro プラン以上）が向いています。
- 競合の LP と、AI で作った自分の案を並べて比べる — 目指したい競合 LP と自分の案を 5 要素で見比べ、差と近づけ方を掴みます。2 つを並べて差分を出す「比較」は Premium プランの機能です。
この記事は、AI でデザイン案を作る流れの 総論 です。今後このテーマでは、AI への「プロンプトの書き方」、AI で「色（配色）を試す」進め方、AI 出力の「修正」のコツ、複数出た「案の選び方」といった、一歩踏み込んだ記事も予定しています。まずは、参考 LP を要素の言葉に変えるところから始めてみてください。
よくある質問（FAQ）
無料で使えますか。
はい。URL を入れて配色・フォント・コピー・構造・アニメの 5 要素を読み解く「分析（解析）」は全プランで使え、登録なしの無料体験で 1 回試せます。まずは参考にしたい LP の URL を 1 つ入れて、要素の言葉に読み解くところから始められます。それ以降はプランによって 1 か月に解析できる回数が変わります。詳しくは 料金プランを見る からご確認ください。
yorunoma で、LP のデザインを作れるのですか。
いいえ。yorunoma は、デザインを 作る ツールではありません。デザイン案を作るのは ChatGPT のような AI の役割で、yorunoma がするのは、すでにある LP のデザインを分析して、要素の言葉に読み解く ことです。役割は分けて考えてください——AI が「作る」、yorunoma が「読み解く」。読み解いた配色・フォント・レイアウトの言葉が、そのまま AI への指示の材料になる、という関係です。
AI で作れば、成果の出る（売れる）LP になりますか。
成果は、デザイン以外の要因（商品・価格・集客・タイミングなど）も大きく、お約束できるものではありません。AI が作れるのは、あくまで 見た目のデザイン案 です。そして yorunoma も、CVR（コンバージョン率）や売上といった成果・数字は測りません。yorunoma が扱うのは、なぜそのデザインが選ばれているかを読み解くところまで。成果の保証ではなく、判断や指示の材料としてお使いください。
参考にしたい LP を分析するのは、真似（パクリ）になりませんか。
丸写しをすればパクリですが、要素として理解し、自分の文脈に置き換える なら、それは参考です。「この LP はなぜ良いのか」を配色・余白・書体といった要素で言語化し、狙いだけを自分の LP に取り入れる。表面をそっくりコピーするのとは、まったく別の行為です。この線引きは サイトのデザインをパクリにせず参考にする方法 で詳しく解説しています。
まとめ
AI で作れるのは、文章だけではありません。見た目・配色・雰囲気といったデザイン案 も、AI に作ってもらえます。ただし、言葉だけの指示では、頭の中の見た目はなかなか一発で出てこない。だから、構成・誰向け・雰囲気を先に決め、できるだけ具体的に伝え、出てきた案を部分ごとに直していく。それでも遠いときは、参考にしたい LP の画像を読み込ませて「これをベースに」と頼む——見た目は見た目で伝えるのが速く、一気に近づきます。そこから先は、やはり直して仕上げる。そして直すときの鍵は、「なんか違う」を 要素の言葉 に分解すること。「もっと可愛く」は伝わらないけれど、「色数が多いから絞って」「余白が足りない」は伝わります。参考にしたい LP を分析して要素の言葉に変えておけば、それがそのまま、AI への指示になります。AI に「作らせる」力は、参考を「読み解ける」力とセットで伸びていきます。
あわせて読みたい
この記事に関するご意見・ご要望は contact@yorunoma.app までお寄せください。