1. AIに頼むと"なんか野暮ったい"の正体は、指示不足
⚠️ 注記: 本記事はOpenAI Developers Blog「Designing delightful frontends with GPT-5.4」（https://developers.openai.com/blog/designing-delightful-frontends-with-gpt-5-4 ）の内容をもとにしています。紹介するモデル名・機能・仕様は執筆時点（2026年7月）のものであり、今後変わり得ます。実際に使う際は各AIツールの最新情報をあわせてご確認ください。
「AIにLPを作らせてみたけど、なんだかテンプレっぽい」「提案資料のデザイン案を頼んだら、文字も色も詰め込みすぎでごちゃついた」——こうした感想を持つ人は少なくありません。
ですが、AIの実力そのものが足りないわけではないケースがほとんどです。多くの人が「LPを作って」「資料のデザインを考えて」とだけ伝え、あとはAI任せにしています。人間のデザイナーに依頼するときも、要望を何も伝えずに丸投げすれば、当たり障りのない無難な仕上がりになるのと同じです。AIも同様に、指示が雑であれば平凡な結果になり、指示が具体的であれば、その分だけ見栄えのする仕上がりに近づきます。
裏を返せば、コードが書けなくても、デザインの専門知識がなくても、「何を、どう指示するか」さえ押さえれば、AIに"それなりに見える"たたき台を作らせることは十分可能だということです。本記事では、その指示のコツを、実践しやすい順番で紹介していきます。
2. 良い指示があればAIは見栄えするページを作れる
OpenAIが公開した開発者向けブログ「Designing delightful frontends with GPT-5.4」では、適切な指示があれば、AIは本番レベルの見栄えのするフロント（画面・ページ）を作れる一方で、雑な指示だと平凡な仕上がりになりやすいという点が核として語られています。
同記事では、モデルの進化点として次のような向上が挙げられています。
- 画像理解の強化：渡した画像（お手本やスクリーンショット）をより正確に読み取り、デザインに反映できるようになった
- 完成度の高いサイト・アプリを作れるようになった：全体としてまとまりのある仕上がりが出やすくなった
- 自分の成果物を検査・検証する精度の向上：AI自身が作ったものを見直し、崩れやおかしな点に気づく力が上がった
なお、元記事では開発者向けに「実際に画面を操作して見た目を検証する」ようなツール活用にも触れられていますが、これはエンジニア向けの話です。非エンジニアの立場で押さえておくべきは、「AIが自分の仕上がりを自己点検する精度が上がってきている」という程度で十分です。
重要なのは、こうしたモデルの進化があっても、指示の質が仕上がりを大きく左右するという前提は変わらないということです。次の章から、その"良い指示"の具体的な中身を見ていきます。
3. "ごちゃつかない"を作る5つの制約
AIにデザインを頼むと文字も色もボタンも増えすぎて、ごちゃついた仕上がりになりがちです。これは、AIが「良かれと思って」情報を詰め込んでしまう傾向があるためです。この"詰め込みすぎ"を防ぐ最も簡単な方法が、先に具体的な制約を与えてしまうことです。元記事で紹介されている制約は、次の5つです。
| 制約 | 内容 |
|---|---|
| フォントは2種類まで | 見出し用と本文用など、使うフォントの種類を最大2つに絞る |
| 差し色（アクセントカラー）は1色だけ | ベースカラー以外で目立たせる色を1色に限定する |
| セクションは6つ以内 | ページ全体を6つ以下のかたまりに収める |
| 1セクション1メッセージ | 各セクションの見出しも1つ、伝えることも1つに絞る |
| メインCTA（行動喚起）はファーストビューに1つ | 最初に見える範囲のボタンは1つだけにする |
さらに、写真を使う場合はヒーロー画像（最初に見える大きな写真）に文字を重ねすぎないことも挙げられています。見出し1行・補足1行・ボタン1つ程度にとどめ、写真の上を文字だらけにしないという考え方です。
一見、制約を増やすと窮屈になりそうに思えますが、実際は逆です。「フォントは2種まで」「色は1色まで」と数字で区切って伝えるだけで、AIは情報を取捨選択せざるを得なくなり、結果的にすっきり整理された仕上がりになります。「見栄えよくして」と抽象的に頼むより、こうした具体的な制約を先に渡すほうが、圧倒的に狙った結果に近づきます。
4. 構成の黄金型。ヒーロー→特徴→詳細→CTA
セクションをどう並べるかで迷う場合は、元記事で紹介されている次の型を借りるのが手っ取り早い方法です。
- ヒーロー：キャッチコピー＋補足1行＋ボタン1つ＋メインビジュアル
- 特徴紹介：具体的な強みを1つに絞って伝える
- 詳細説明：世界観・使い方・実績などをもう少し詳しく
- 最後の行動喚起（CTA）：申込・問い合わせのボタン
この型は、「①目を引く→②ひとつの強みで惹きつける→③詳しく納得してもらう→④行動してもらう」という、読み手の気持ちの流れに沿っています。ゼロから構成を考えるより、まずこの型に自社の情報を当てはめて指示するほうが、迷いなく・早く・整理された仕上がりに近づきます。
提案資料の場合も考え方は同じです。「表紙（タイトル＋一言サマリー）→課題の整理→解決策→具体的な内容・実績→まとめ・次アクション」という流れに置き換えれば、そのまま応用できます。
5. 仕上がりをもう一段上げる3つのコツ
制約と構成を押さえたら、さらに仕上がりを引き上げるコツも3つ紹介します。
① ダミーでなく、実際の文章・情報を渡す
元記事が「もっとも手軽な改善策」として挙げているのが、仮の文章（ダミーテキスト）ではなく、実際の商品情報・コピー・目的をそのまま渡すことです。「いい感じの文章を考えて」と丸投げするより、自社の実際のコピーや商品説明、伝えたい目的をそのまま渡したほうが、AIはその情報量をもとに、より的確なレイアウトや強弱をつけてくれます。
② お手本になる画像・参考スクリーンショットを渡す
言葉だけで「明るい雰囲気で」「信頼感のある感じで」と伝えるより、目指す雰囲気に近い画像やスクリーンショット（ムードボード）を見せるほうが伝わりやすい、というのも元記事のポイントです。AIの画像理解の精度が上がっているからこそ、「こういう感じにしたい」という参考を1〜2枚渡すだけで、指示の解像度がぐっと上がります。
③ いきなり1案でなく、方向性違いの複数案を出させてから選ぶ
最初から「これで決定版を作って」と頼むのではなく、まずは方向性の異なる案を2〜3パターン出してもらい、そこから選ぶという進め方も有効です。案ごとの「狙い」を一言添えてもらうようにすると、比較・選定がしやすくなります。
このほか、細かなコツとして次の2点も押さえておくとよいでしょう。
- 動き（アニメーション）は2〜3個までに絞る（登場の動き1つ・スクロール時の動き1つ・ホバー時の動き1つ程度が目安）。動きを増やしすぎると、かえって落ち着きのない印象になります。
- ツールによっては「reasoning effort（AIがどれだけ深く考えるか）」を設定できる場合があり、元記事では見た目重視の作業では低〜中程度の設定のほうが良い結果になりやすい、とされています。ただしこの設定はツールやプランによって有無が異なるため、使っているAIに該当機能があるかを確認したうえで試してみてください。
6. 【コピペOK】そのまま使える指示テンプレ3つ
ここまでのコツを、実際に使えるテンプレートの形にまとめました。〔 〕の部分を自社の内容に置き換えて、そのままAIへの指示として使ってください。
テンプレ① LP（ランディングページ）のデザイン案を作らせる
以下の条件でLPのデザイン案を作ってください。 【構成】①ヒーロー（キャッチコピー＋補足1行＋ボタン1つ＋メインビジュアル）②特徴紹介（具体的な強み1つ）③詳細説明（世界観・使い方・実績）④最後の行動喚起（申込/問い合わせボタン）※セクションは6つ以内、各セクションは1メッセージ・見出し1つ。 【デザイン制約】フォントは2種類まで／差し色は1色だけ／ファーストビューにボタンは1つ／写真に文字を重ねすぎない。 【動き】アニメは全体で2〜3個まで（登場1・スクロール1・ホバー1）。 【素材】実際の文章・商品情報を使う（仮テキスト禁止）：〔ここに実コピー〕／参考にしたい雰囲気の画像を添付：〔画像添付〕 まず方向性の違う案を2〜3パターン出し、それぞれの狙いを一言で説明してください。
テンプレ② 提案資料のデザイン案を作らせる
以下の条件で提案資料のデザイン案を作ってください。 【構成】表紙（タイトル＋一言サマリー）→課題の整理→解決策→具体的な内容・実績→まとめ/次アクション。※1ページ1メッセージ。 【デザイン制約】フォントは2種まで／強調色は1色／過剰装飾は避ける。 【素材】実際の提案内容・数字・事例をそのまま反映：〔ここに実内容〕／参考の雰囲気画像を添付：〔画像添付〕 まずトーン違い（信頼感重視／親しみやすさ重視）を2案、狙いを一言添えて。
テンプレ③ 既存のLP・資料の見た目を改善してもらう
今あるLP/資料の見た目を改善してほしいです。まず現状のスクショを見て次を指摘してください：フォントが3種以上ないか／強調色が複数で散らかっていないか／1セクション/ページに詰め込みすぎていないか／ファーストビューにボタンが複数ないか。指摘のあと改善案を1つ提示。実際の文章はそのまま使い仮テキストに置き換えない。
いずれのテンプレも、〔 〕の中身を実際の情報に置き換えるほど、仕上がりの精度が上がります。まずは手元の一番使う予定のテンプレから、試しに使ってみてください。
7. AIに任せるときに、必ず人が確認すべきこと
AIが作ってくれるのは、あくまで"たたき台（初稿）"です。ここを勘違いしないことが、実務でAIをうまく使うための最後のポイントです。
- ブランドとの整合性：自社のロゴ、企業カラー、トーン&マナーに合っているかは、必ず人が確認・調整してください。
- 誤字・数字・実績の正確性：AIが生成した文章や数字は、実際の情報と一致しているか必ずチェックしてください。特に金額・実績数値・お客様の声などは、事実と異なるまま公開すると信用問題に直結します。
- 他社デザイン・ロゴの模倣はNG：「雰囲気を参考にする」ことと、「実在する他社のデザインやロゴをそのまま模倣・流用する」ことは明確に別物です。参考画像を渡す際も、あくまで雰囲気の共有にとどめてください。
- reasoning effortなどの設定はツール依存：紹介した設定は使っているAIツールやプランによって存在しない場合もあります。まずは自分が使っているツールにその機能があるかを確認してください。
- モデルや機能は変わり得る：本記事で触れたモデル名や機能は執筆時点（2026年7月）のものです。実際に使う際は、各AIツールの最新の仕様をあわせてご確認ください。
AIに"たたき台づくり"を任せることで、ゼロから手を動かす時間は大きく減らせます。ただし、そこから先——ブランドに合わせて磨き込み、事実確認をし、実際に成果につながる形に仕上げていく作業は、やはり人の目と判断が欠かせません。「AIに丸投げして終わり」ではなく、「AIにたたき台を作らせ、人が仕上げる」という役割分担を意識することが、実務でAIを使いこなす一番のコツです。
まとめ
AIに頼んだLPや資料が「なんとなく野暮ったい」まま終わってしまうのは、AIの実力不足ではなく、指示の具体性が足りていないことがほとんどでした。
- 正体：雑な指示は平凡な結果に、具体的な指示は見栄えのする結果につながりやすい
- 5つの制約：フォント2種まで／差し色1色だけ／セクション6つ以内／1セクション1メッセージ／CTAはファーストビューに1つ
- 構成の型：ヒーロー→特徴→詳細→最後のCTA
- 仕上がりを上げる3つのコツ：実際の文章・情報を渡す／お手本画像を渡す／複数案を出させてから選ぶ。加えて動きは2〜3個まで、reasoning effortは低〜中が良いことが多い（ツール依存）
- 人が必ず確認すべきこと：ブランドとの整合性、誤字・数字の正確性、他社デザインの模倣はしない、たたき台であることを忘れない
コードが書けなくても、デザインの専門知識がなくても、これらのコツと本記事のテンプレを使えば、AIに"それなりに見える"LP・資料のたたき台を作らせることは十分可能です。まずは一番使う機会が多そうなテンプレから、実際の自社の情報を入れて試してみてください。
⚠️ 本記事はOpenAI Developers Blog「Designing delightful frontends with GPT-5.4」をもとにした、執筆時点（2026年7月）の情報です。モデル名・機能・仕様は今後変わり得るため、実際に利用する際は各AIツールの最新情報をあわせてご確認ください。
