AIにLPを作らせるときの指示の出し方｜先に渡すものと直しの言い方

はじめに

AIにLPを作らせると、1時間で形になります。ところが出てきた画面はどこか安っぽく、直そうとしても何と言えばいいのか分かりません。「もう少しかっこよく」と伝えると、別の場所が崩れて戻ってきます。

意識することは1つです。AIは、こちらが決めていないことを毎回その場で決めます。だから作業の本体は、作らせることではなく「決めて渡す」ことです。

本記事では、スマートエイトが自社の広告用LP*を作り直したときに、何を渡し、どう直しの指示を出したかを書きます。決めるのは3つの層、直しの言い方は3通りに収まりました。仕上がったページはスマートAIコーチのご案内として公開しているので、本文の記述と実物を見比べながら読めます。

*LP：ランディングページの略。広告のリンク先として用意する1枚もののWebページ。申し込みや問い合わせなど、1つの行動に絞って作る。

何を意識するのか｜決めていないことは、AIがその場で決める

結論として、意識するのは「自分が何を決めていないか」です。決めていない項目の数が、そのまま出力のぶれ幅です。

同じ依頼を2回すると、別のものが出てきます

「AI研修のLPを作って」と頼むと、それらしいページが出てきます。翌日にもう一度同じ依頼をすると、色も文字の大きさも違うページが出てきます。

指示が悪かったわけではありません。文字の大きさも余白も、こちらが決めていないので、その都度AIが決めているだけです。決めていない項目は、毎回まっさらから作り直されます。

しかも、その都度の選択には偏りがあります。2026年3月に公開されたWeb制作におけるデザイン均質化の研究は、生成AIが訓練データで支配的なスタイルを再現すると指摘しました。指定がなければ、学習データの中で最も多かった選択に寄ります。だから、別々の会社が別々に作ったページが似てきます。

決めるのは3つの層です

決めることは、性質の違う3つの層に分かれるものでした。

見た目を3つに絞れる理由は、業界のデザイン体系を見比べると分かります。次の体系を実際に開いて確認しました。

• W3Cのデザイントークン仕様
• Googleのマテリアルデザイン
• 英国政府のデザインシステム
• ShopifyのPolarisとIBMのCarbon

色と文字は、どれにも独立した項目として立っています。余白も主要な体系に共通する項目です。角丸・影・モーションは体系によって扱いが分かれるため、まずこの3つを決めれば足ります。

3つの層のうち、構成をAIに考えさせない話は既存の記事で扱っているため、本記事では触れません。見た目の渡し方は2章、目的の使い方は4章で扱います。

「かっこよく」では直りません

最初の数回は「もう少し洗練された感じで」と伝えていました。返ってくるのは、前回と違う方向へ振れたページです。前回よかった部分まで一緒に変わります。

「洗練された」に対応する数値がないためです。言葉の解釈の幅が、そのまま出力の幅になります。3章で扱う3つの型は、どれもこの幅を狭めるための言い方です。

見た目の決め方｜色・文字・余白と、その渡し方

結論として、渡す順番は参照、数値、禁止です。参照がいちばん速く伝わり、数値がいちばん再現し、禁止がいちばん守られます。

参照を1枚渡す

最も速いのは、目指す画面の画像を1枚渡すことです。スクリーンショットで構いません。「このページの雰囲気に寄せて」と添えるだけで、色の傾向、余白の取り方、文字の大小の付け方がまとめて伝わります。文章で同じ量を伝えようとすると、何十行も書くことになります。

自社サイトがあるなら、それが最良の参照です。今回は本サイトのトップページを指定しました。広告から来た人が後で本サイトを見たとき、別の会社に見えないという効果もあります。

ただし、画像だけを渡すと2回目以降でぶれます。画像は「だいたいこの感じ」までしか伝えないためです。1回目は画像で方向を合わせ、2回目からは数値に落とします。

色・文字・余白を数値で渡す

参照から数値を抜き出して、文字にします。抜くのは色、文字、余白の3つです。

色は4つ決めます。ブランドの主色、文字の色、背景の色、そしてボタンなど強調に使う色です。今回の割り当ては次のとおりです。

• 帯とボタン：紺（#132f54）
• ブランド名：紫（#6148ac）
• 注意を引く1箇所：橙（#f0912d）
• 背景の面：淡い紫（#f2efff）

決めずに任せると、その都度違う青や紫が混ざります。色は数を絞るほど締まるため、4つで十分です。

文字は、使ってよい大きさの種類を決めます。作り直す前のページを数えたら25種類ありました。しかも0.5ピクセル刻みの値が26箇所あり、13.5ピクセル、12.5ピクセルといった数字が混ざっています。必要になるたびに1つずつ足された跡です。

多すぎるかどうかは、外の指針と比べると判断できます。Material Designのタイポグラフィは、文字のスタイルを5分類に分けています。display・headline・title・body・labelの5つで、それぞれ大中小の3サイズ、合計15種類です。世界中のアプリを想定した指針でも15種類に収まっています。1枚のLPに25種類は多すぎます。

今回は12・13・15・17・20・24・28・32・36・44の10段階に決め、本文は15ピクセルとしました。日本語は漢字の画数が多いため、13ピクセル前後だと潰れます。

書体も、同じ「文字」の決めごとです。決めずに任せると欧文向けの書体が選ばれます。よく出てくるのはInterで、英語では美しい書体ですが、日本語の見出しに使うと線が細く痩せて見えます。自社サイトはモリサワのA1ゴシックですが、これは制作サービスとの提携で使える書体のためライセンスが下りません。そこでNoto Sans JPと名前で渡しました。

余白は、1つの単位の倍数に揃えます。測ると5・6・13・17ピクセルが混ざっていました。ここには法則があります。まったく違う値なら意図に見えますが、2ピクセル差は「揃えようとして失敗した」と読まれます。近いのに一致しない値のほうが、印象は悪いということです。

こちらも指針側に答えがあります。Material Designのレイアウトは、すべての部品を8dpの正方形グリッドに揃えると定め、文字とアイコンだけ4dpの細かいグリッドを使うとしています。今回は4の倍数に統一し、4・8・16・24・40・64の6段階だけにしました。単位は4でなくても構いません。1つ決めて、その倍数だけを使うことが本質です。

「やるな」を渡す

3つ目が禁止です。理想を伝えるより、禁止を伝えるほうが守られます。理想は解釈の幅が広く、その幅の中で毎回違う判断が起きます。禁止は境界が1本しかないため、迷う余地がありません。

今回渡したのは4つです。

• 見出しの上に英字のラベルを置かない
• 絵文字をアイコン代わりに使わない
• 背景にグラデーションを敷かない
• カードの左端に色付きの線を入れない

どれも自社サイトには1つもなく、AIが作ったページには高い確率で出てくる要素です。自社サイトを見て「うちに無いもの」を挙げれば、そのまま禁止リストになります。

毎回書くのは手間なので、ファイルに残して読ませます。会話で伝えた指示は次の作業に残らないためです。この運用はAIで作ったLPがダサくなる原因で詳しく扱っています。

直しの指示は3通りに集約できる｜実際に出した指示とその型

結論として、効いた直しの指示は3通りしかありませんでした。寸法で言う、実物を指す、やるなを言う、の3つです。今回の作業で実際に出した指示を並べると、すべてこの3つに収まります。

寸法・量で言う

「短くして」ではなく「何ピクセルに」「何行以内に」「1画面に収めて」と言います。数字が付いた瞬間、達成したかどうかの基準は両者で同じです。

今回はファーストビュー*の高さが、スマートフォン表示で1244ピクセルまで伸びていました。画面はおよそ800ピクセルなので、1画面半ぶんです。価格も申し込みボタンも最初の画面に入りません。ここで「もっと短く」と言っても、どこまで縮めればよいかが決まりません。

代わりに、先に上限を決めました。上限があると、要素の取捨が自動的に決まります。併せて「残すもの」を3つ挙げています。価格、業務ごとの削減時間、申し込みボタンです。この3つが最初の画面に入らないなら、他を削る意味がありません。結果はスマートフォンで973ピクセルに収まりました。

着地点を指定するのも、この型に入ります。申し込みボタンを押すと、フォームの説明文の位置に飛んでいました。「ボタンを押したら入力欄に着地させて」と結果で言えば、実装の方法は任せられます。

*ファーストビュー：ページを開いた直後、スクロールせずに見える範囲。

既存の実物を指す

2つ目は、頭の中のイメージではなく、実在する画面を指すことです。「本サイトのトップと同じ形に」と言えば、写真とフォームの並べ方、余白の量、見出しの大きさがまとめて伝わります。

今回はファーストビューの構成で使いました。写真を左、フォームを右に置くという配置を、本サイトのトップページを指して伝えています。「バランスよく」と言うより速く、結果も安定します。

書体を名前で指定するのも同じ型です。「読みやすい日本語のフォント」ではなく「Noto Sans JP」と言います。固有名詞には解釈の幅がありません。

「やるな」を言う

3つ目が禁止です。2章で作ったリストは作り始める前に渡すものですが、作業中に見つけたものも同じ形で足していきます。

今回の例では「カードの左端に色付きの線を付けない」があります。左に細い色の帯が入ったカードは、既製のテンプレートに多く見られる形です。1枚だけなら気になりませんが、ページ内で繰り返されると出来合いの印象が強くなります。

「金色のバッジはやめて、文字の強弱で見せて」も同じ型です。ここでは禁止に加えて、代わりに何をするかも添えた形です。禁止だけを伝えると、AIはその要素を消すだけで空白を残します。代わりを指すところまで含めれば、1往復で済む話です。

効かない言い方も挙げておきます。「かっこよく」「モダンに」「いい感じに」「洗練された感じで」の4つです。どれも解釈の幅が広く、毎回違う結果が返ってきます。使いたくなったら、寸法・実物・禁止のどれかに置き換えられないか考えてみてください。

直す順番｜そのページで完了させたい行動から逆に見る

結論として、直す順番はゴールから逆に決めます。見た目は最後です。今回いちばん高くついたのは、この順番を間違えたことでした。

ゴールを1つに決める

まず、そのページで完了させたい行動を1つだけ決めます。申し込みかもしれませんし、資料のダウンロード、電話、来店予約かもしれません。何であっても構いませんが、1つに絞ります。

複数あると優先度が決まりません。「フォームも直したいし、電話番号も目立たせたい」となった時点で、どちらが先か判断できなくなります。

決めた行動が、そのページの唯一の合格条件になります。滞在時間が伸びても、その行動が増えなければ改善したことになりません。効果の数え方に迷う場合は、AI投資の費用対効果を測る指標の考え方が使えます。

「動く、たどり着ける、見た目」の順に通す

決めた行動を軸に、3段階で見ます。

1段目は、その行動が最後まで完了するかどうかです。フォームなら、送信できて、こちらに届いて、送った人にも結果が見えるところまで通します。今回はここで問題が見つかりました。個人情報の取り扱いに同意しないまま送信できる状態になっていたのです。

2段目は、その行動までたどり着けるかどうかです。ボタンが目立たない、押しても違う場所に着地する、読み進めても導線が出てこない区間がある、といった問題を潰します。今回は動画のセクションから外部サイトへ出ていくリンクが残っており、広告費で連れてきた人が外へ流れる状態でした。

3段目が見た目です。ここで2章と3章の話が効いてきます。

端末の幅は、この3段目で3つ見ます。パソコン、スマートフォン、そして両者の中間です。今回はタブレットくらいの幅だけ表示が崩れていました。パソコン向けの設定が、中間の幅にも中途半端に当たっていたためです。両端しか確認していないと、この区間は最後まで視野に入りません。

見た目を先にやってしまう理由

順番を間違える原因は、意志の弱さではありません。見た目の問題は目に見えるので指摘しやすく、直した実感も得やすいからです。

実際、今回は実績の見せ方に6案かけました。その間ずっと、同意しないまま送信できる状態が残っています。目に見える問題から潰していると、目に見えない問題は最後まで残ります。

対策は、見た目の議論に入る前に1段目と2段目を通しておくことです。外に出る操作の手前に確認を1つ残す考え方は、長く動くAIエージェントの安全設計でも同じ形で扱われています。

よくある質問｜AIへの指示で迷いやすい点

参照にするページは自社サイトでないといけませんか

他社のページでも構いません。ただし、指すのは構造や余白の取り方、文字の大小の付け方までにとどめてください。文言や図版まで似せると、模倣になります。

自社サイトを勧める理由は品質ではなく一貫性です。広告から来た人が後で会社のサイトを見たとき、同じ会社だと分かる状態を作れます。

デザインの知識がなくても数値は決められますか

決められます。今回渡した数値は、自社サイトを測って書き写したものです。文字の大きさが何種類使われているか、余白が何ピクセルかは、ブラウザの検証機能で読み取れます。

参照する実物がない場合は、公開されている指針をそのまま借りて構いません。本記事で引いたMaterial Designは、文字のスタイルも余白のグリッドも数値まで公開されています。

出てきたものを評価できる人が社内にいない場合はどうしますか

4章の1段目と2段目だけなら、デザインの知識がなくても判断できます。見るのは、目的の行動が完了するかと、そこまでたどり着けるかの2つです。どちらも事実の確認なので、担当者が変わっても同じ答えになります。

見た目の判断が難しい場合は、2章の禁止リストを増やす方向で対応してください。「良いかどうか」は判断が要りますが、「自社サイトに無い要素が入っているか」は照合するだけで済みます。

さいごに

AIで作ったLPが安っぽいのは、指示の腕前ではありません。決めていない項目が多いだけです。

作り始める前に、参照、数値、禁止の3つを渡してください。参照は画像1枚で足ります。数値は色と文字と余白の3つで、どのデザイン体系を開いても共通して出てくる項目です。禁止は自社サイトに無いものを挙げれば作れます。

直すときは、寸法で言う、実物を指す、やるなを言うの3通りに置き換えてください。「かっこよく」は、この3つのどれかに翻訳できます。

そして直す順番は、そのページで完了させたい行動から逆にたどってください。動くか、たどり着けるか、見た目はどうか、の順になります。

まずは自分のページで文字の大きさが何種類使われているかを数えてみてください。10種類を超えていれば、色もレイアウトも変えないまま印象を変えられる余地があります。

スマートエイトの生成AI研修では、こうした作業を自社の制作物で実際に回すところまで扱っています。目標に置いているのは、ツールの操作ではなく、出てきたものを自分で直せる状態です。

どの業務から手を付けるかで迷っている場合は、AIに任せられる業務が分かる無料診断から始めてください。3分で終わり、登録もメールアドレスも要りません。

※生成AI研修資料/導入事例も無料ダウンロードいただけます。