デザイン生成の精度が上がるプロンプトの書き方｜AIを使ってWebデザインを生成

制作現場では「ブリーフ（要件書）」と呼ばれることが多い情報を、AI ツールでは「プロンプト」と呼ぶことがあります。

中身は同じで、サイトの目的・ターゲット・トーン・載せる情報を言語化したテキストです。

DesignLayer では、ダッシュボードの入力欄や /brief のチャット画面に書いた内容が、そのまま生成エンジンへ渡されます。

長文の要件書を別途作る必要はなく、自然文のプロンプト1本で十分です。

外注先への依頼書として使う場合も、ここで書いたプロンプトをベースに、納期・ブランドガイド・素材リストを追記すればそのまま共有できます。

プロンプトの冒頭で、ページの成功指標を1文で書きます。目的がぶれると、セクションの優先順位もぶれるからです。

例えば次のように、訪問者に何をしてほしいかを最初に言い切ってください。

「初回来店の予約を増やしたい」

「無料トライアルへの登録を促したい」

「作品依頼の問い合わせを受け付けたい」

「認知も上げたいし、問い合わせも増やしたい」のような複数目的は、CTA が分散しやすくなります。迷ったら1つに絞りましょう。

ターゲットは属性だけでなく、状況と不安まで書くとコピーの精度が上がります。

「20〜40代の女性」で止めず、その人が今どんな行動段階にいるかを描写してください。

例：「初めてオンライン予約するユーザー」「比較検討中の BtoB 担当者」

「誰が・どんな状況で・何に困っているか」の3点セットで書くのがおすすめです。

プロンプトでは、載せたい情報と避けたい雰囲気を分けて書くと、AI が判断しやすくなります。

この2つをセットにすると、セクション構成とビジュアルの両方が安定しやすくなります。

「おしゃれに」だけでは伝わりません。形容詞でトーンを指定してください。

例：「温かみのあるナチュラル」「上質で静か」「信頼感のある堅実」

配色も2〜3色に絞って書くと再現性が上がります。

例：「ベージュと深いブラウン」「ホワイトとソフトベージュ」「ネイビーとオフホワイト」

DesignLayer は業種・カテゴリごとに最適化されたデザインの型を参照します。

プロンプトの冒頭で「カフェ」「レストラン」「美容サロン」「BtoB SaaS」など業種を明示すると、レイアウトの一貫性が高まります。

店名・地域名・サービス名も早めに書いておくと、ヒーローや店舗情報セクションが具体化されます。

生成前にプロンプトを出し切ることが、再生成の手戻りを減らす最短ルートです。

プロンプトが長くなりすぎる場合は、次の7項目を順番に埋めるだけで十分です。この7項目が揃うと、ヒーローから FAQ・CTA まで一貫した LP が生成されやすくなります。

DesignLayer は業種の型をベースにセクションを組み立てますが、載せたいブロックを明示すると精度が上がります。

希望する流れを矢印で書いてください。

例：「ヒーロー → こだわり → メニュー → 店内ギャラリー → アクセス → 予約 CTA」

セクション名まで指定する必要はありません。「料金表を目立たせたい」「FAQ を載せたい」程度でも、構成への反映率は上がります。

フォント指定は、具体的な書体名より役割で書く方が再現しやすいです。

例：「セリフ見出し＋サン-serif 本文」「細めのサン-serif 中心」

余白は形容詞で伝えてください。

例：「余白多め」「情報を詰め込まない」「写真の周りに呼吸感を持たせる」

参考 URL をそのまま貼るより、抽象化した特徴を書く方が安全で効果的です。

例：「余白が広い」「写真が大きい」「見出しが短い」

DesignLayer は参考をインスピレーションとして扱い、既存デザインの複製を目的とした生成は行いません。

「カフェのサイト」だけでは汎用テンプレートになります。

「ミニマルかつ情報量を最大化」は両立しにくいです。

「予約も資料 DL も問い合わせも」はボタンが分散します。

「かっこよく」「おしゃれに」だけでは再現率が低いです。

業種が書かれていないと、レイアウトの型が固定されません。

下北沢のスペシャルティコーヒー店「珈琲 かげろう」の紹介サイトを作りたい。

温かみのあるナチュラルで、余白多め、素材感のある写真配置。

自家焙煎のこだわり、ドリンクと軽食メニュー、店内の雰囲気、営業時間・アクセス・Instagram 導線を載せる。

ベージュと深いブラウン、落ち着いたセリフ見出しと読みやすいサン-serif。

飲食チェーンの汎用テンプレート感は避け、地域の一店舗らしい品のあるサイトに。

銀座の小さなイタリアン「Ristorante Lumina」の店舗サイトを作りたい。

上質で静か、料理の写真が主役。

コンセプト、コースとランチメニュー、シェフの一言、店内ギャラリー、予約 CTA、店舗情報。

温かいオフホワイトと深いワインレッドのアクセント、エレガントなセリフ見出し。

外食チェーンのテンプレート感や過剰な装飾は避ける。

下町の活気ある居酒屋「炉端 さくら」の店舗サイトを作りたい。

温かく下地のある、活気と親しみやすさ。

看板メニュー、飲み放題プラン、宴会コース、座席・貸切情報、予約・電話 CTA。

木目と暖色照明を感じる配色、読みやすいメニュー表。

居酒屋チェーンの汎用テンプレート感は避ける。

神楽坂のクラフトカクテルバー「Bar Kage」の紹介サイトを作りたい。

落ち着いた、ミッドナイトブルー基調、上質で静か。

シグネチャーカクテル、フードペアリング、営業時間・アクセス、店内の雰囲気。

控えめなセリフ見出しと細めのサン-serif、余白多め。

クラブやバーチェーンの汎用テンプレート感は避ける。

表参道の美容サロン「Sora Hair & Skin」の予約サイトを作りたい。

清潔感があり、ミニマルで上質。

施術メニューと料金、スタッフ紹介、サロンのこだわり、予約・LINE 導線。

ホワイトとソフトベージュ、細めのサン-serif 中心。

美容系の派手なテンプレート感や過剰な装飾は避ける。

BtoB SaaS「FlowDesk」のプロダクト紹介サイトを作りたい。

ターゲットは20〜40代のスタートアップ経営者・PM。

洗練されたミニマル、ダーク基調、信頼感のあるテック感。

散らばった業務を整理できる価値提案、3カラムの機能紹介、料金プラン、FAQ、無料トライアル CTA。

ガラスモーフィズムは控えめに、情報設計とコンバージョン導線を優先。

汎用 SaaS テンプレートっぽさは避ける。

フリーランスのブランドデザイナー「田中由紀」のポートフォリオサイトを作りたい。

クライアントはスタートアップと文化系ブランド。シリアスで上品、控えめ。

ダーク基調、タイポグラフィ主導、余白多め、作品が主役。

代表作ギャラリー、短いプロフィール、制作アプローチ、問い合わせ導線。

上品なセリフと静かなサン-serif、フォントサイズは絞る。

汎用的なスタートアップ風テンプレート感は避け、時代を超えた精密な一人称のサイトに。

フリーランスの Web コンサルタント「佐藤健」の個人ブランドサイトを作りたい。

ターゲットは中小企業の経営者。信頼感があり、落ち着いた、専門性が伝わる。

プロフィール、提供サービス（サイト改善・LP 制作支援）、実績ハイライト、相談 CTA。

ネイビーとオフホワイト、読みやすいサン-serif。

SNS インフルエンサー風の派手さは避ける。

中央区の小規模弁護士事務所「Legal Partners Tokyo」の紹介サイトを作りたい。

信頼感があり、落ち着いた、堅実。

取扱分野、代表プロフィール、相談の流れ、初回相談 CTA。

ネイビーとオフホワイト、読みやすい明朝系見出しとサン-serif 本文。

士業向けの汎用テンプレート感や過剰な装飾は避ける。

2月開催のオンラインセミナー「Design Ops Summit 2026」の告知 LP を作りたい。

ターゲットはデザインチームのリード・PM。プロフェッショナルで情報整理されたエディトリアル調。

日時、登壇者プロフィール、アジェンダ、参加方法（Zoom・録画あり）、早期割引 CTA。

信頼感のある落ち着いた配色、読みやすい見出し階層。

チケット販売サイト風の汎用イベントテンプレート感は避ける。

新サービス「Hikari Note」のキャンペーン LP を作りたい。

ターゲットはクリエイターとフリーランス。ライトモード、温かみのあるミニマル、説得力のあるストーリー構成。

ヒーローでベネフィット、社会的証明、機能ハイライト、FAQ、「今すぐ始める」への明確な CTA。

色数は抑え、タイポグラフィと余白で差をつける。

安っぽいバナー広告風レイアウトは避ける。

IT スタートアップ「NovaTech」の採用 LP を作りたい。

ターゲットは20〜30代のエンジニア・デザイナー。先進的でオープン、カジュアルすぎない。

募集職種（フロントエンド・プロダクトデザイナー）、働く魅力（リモート可・裁量大）、社員の声、福利厚生、応募 CTA。

ダーク基調にアクセントカラー1色、読みやすいサン-serif。

大手企業の堅い採用サイト風テンプレート感は避ける。

東京都世田谷区の新築マンション「Green Terrace 世田谷」の物件紹介 LP を作りたい。

ターゲットは30〜40代のファミリー層。明るく清潔、信頼感のある。

物件概要、間取り図、周辺環境（学校・スーパー・駅）、設備・仕様、内覧予約 CTA。

ホワイトとグリーンのアクセント、読みやすい見出し階層。

汎用的な不動産ポータル風のテンプレート感は避ける。

横浜・関内の個人経営リフォーム会社「山田工務店」の紹介サイトを作りたい。

ターゲットは50〜60代の戸建てオーナー。信頼感があり、地元密着、堅実。

事業内容（キッチン・浴室リフォーム）、施工事例、対応エリア、無料見積もり CTA。

ネイビーとオフホワイト、読みやすいサン-serif。

大手リフォームチェーンのテンプレート感は避ける。

ハンドメイドアクセサリーブランド「Luna Craft」の新商品販促 LP を作りたい。

ターゲットは20〜30代の女性。ナチュラルで温かみ、余白多め。

商品の特徴（素材・デザイン・こだわり）、価格、購入ボタン、配送・返品ポリシー、SNS 導線。

ベージュとゴールドのアクセント、商品写真が主役。

汎用 EC テンプレートの詰め込み感は避ける。

既存のコーポレートサイトをリニューアルしたい。

現在の構成は「会社概要・サービス・実績・採用・問い合わせ」で、トーンは堅実で信頼感。

新デザインはよりモダンで余白多め、ダーク基調。

既存の情報設計は維持しつつ、ビジュアルとタイポグラフィを刷新。

古いテンプレート感や過剰な装飾は避ける。

生成ボタンを押す前に、次の8項目を確認してください。

□ 業種・サイト種別が冒頭に書かれている

□ ターゲットが属性だけでなく状況まで書かれている

□ CTA が1つに絞られている

□ 載せる情報が列挙されている

□ トーン・配色が形容詞と色名で指定されている

□ 避けたい雰囲気が書かれている

□ 店名・サービス名・地域など固有名詞がある

□ 矛盾する指示（ミニマルかつ情報過多など）がない

DesignLayer のダッシュボードでは、業種別テンプレートをワンクリックで入力欄に挿入できます。

テンプレートをベースに、店名・地域・サービス名を自社の情報へ差し替えてから生成してください。

生成後はスタジオでテキスト・画像・配色を調整し、公開 URL を発行するか HTML をエクスポートできます。

生成から公開までの流れは「AI でランディングページを作る方法」の記事も参考にしてください。

セクション構成の見直しには「ランディングページの構成テンプレート」、コピーの推敲には「LP コピーライティングの書き方」も併せてご覧ください。

AI Webデザインの生成精度を上げるプロンプトの書き方は、次の2点に集約されます。

1つ目は具体性です。

業種・店名・ターゲット・トーン・配色・載せる情報を、形容詞と固有名詞で書き切りましょう。

2つ目は優先順位です。

CTA を1つに絞り、載せる情報と避けたい表現を分け、矛盾する指示を排除してください。

業種別テンプレートを起点に、自社の情報へ差し替えて試してみてください。