Webデザイン向けChatGPTプロンプト28選：ホームページ制作を効率化

Webデザインは戦略、美しさ、ユーザー心理が交わる仕事であり、工程ごとに異なる思考が求められます。適切なWebデザイン向けChatGPTプロンプトを使えば、ヒアリングやサイト構成から、ビジュアル案、文章、クライアントへの提案、公開後の改善まで効率よく進められます。

ここでは28のプロンプトを、調査と計画、ビジュアルとレイアウト、文章・SEO・コンバージョン、クライアント対応・公開・改善の4段階に分けて紹介します。Webデザイナー、フリーランス、制作会社向けで、ChatGPTや他のAIチャットボットで使えます。

曖昧な説明では、ありきたりなサイト案しか得られません。各プロンプトに次の情報を加えましょう。

• 事業とターゲット：会社の事業内容、訪問者、サイトを訪れる理由
• 各ページの目的：訪問者にそのページで取ってほしい最も重要な行動
• ブランドの立ち位置：個性、語り口、他社との違い
• 実用性の確認：どのサイトにも当てはまる回答には具体化を求め、SEOや表示速度の助言は実際のツールとデータで検証する

細かな要件の整理やクライアント向けの説明文には、Claude Sonnet 5から試すとよいでしょう。

デザイン作業に入る前の土台づくりに役立つ7つのプロンプトです。Gemini 3 Proなら、長い要件書やコンテンツ一覧をまとめて扱えます。

1. クライアントへのヒアリングシート

[業種]の新規Web制作クライアント向けにヒアリングシートを作成してください。事業目標、ターゲット、競合、ブランドの個性、必須機能、既存コンテンツ、予算、スケジュール、成功を測る方法を含めてください。

2. サイト構成の設計

[事業の種類・規模・目標]に合うWebサイトの情報設計を行ってください。ターゲット：[説明]。訪問者の主な行動を優先順に示すと：[一覧]。主要セクション、下層ページ、URL構造、各重要ページの主なCTAと最適なコンテンツ形式を含むサイトマップを作成してください。階層の理由を説明し、競合サイトによくあるものの訪問者があまり使わないページも指摘してください。

3. UX要件書の作成

[サイトと事業]の[トップページ／商品ページ／購入手続きページ]について、UX要件書を作成してください。事業目標：[説明]。ユーザーの目的：[説明]。必要な情報：[一覧]。主なコンバージョン：[説明]。ページへの流入と移動先、果たすべき役割、情報の優先順位、UX原則、アクセシビリティ要件、成功指標を含めてください。初めてこの事業を担当するデザイナーにも伝わる具体性を持たせてください。

4. 競合サイトの分析

3つの競合サイトについてのメモです：[構成、メッセージ、ビジュアル、CTAを説明]。各サイトの良い点と問題点を比較し、この業界でユーザーが期待する共通要素を整理してください。そのうえで、クライアントのサイトが差別化できる点を提案してください。

5. リニューアル戦略

[ブランド]のサイトをリニューアルする必要性を整理してください。現状：[公開からの年数、性能、課題、データ]。変化した点：[ターゲット、商品、ブランド刷新、競合]。対応しない場合の損失、目標と指標、対象範囲、段階的な進め方、主なリスクを含め、予算承認用の経営層向け要約を1段落で付けてください。

6. 提案書と作業範囲

[クライアントと案件]のWeb制作提案書を作成してください。目標、工程ごとの納品物、対象外の作業、修正回数、スケジュール、クライアント側の担当事項、追加依頼への対応方法を含めてください。

7. コンテンツの棚卸し

クライアントの現行サイトのページとコンテンツ一覧です：[貼り付け]。各項目を維持、更新、統合、削除に分類し、新サイトで作成する必要があるコンテンツを列挙してください。

プロンプト3で事業目標とユーザーの目的を分けることは、コンバージョンを考えるうえで重要です。調査、ユーザーフロー、ユーザビリティテストを深めるには、UI/UXデザイナー向けChatGPTプロンプトもご覧ください。

サイトの見た目と構造を考える7つのプロンプトです。コンセプトをクライアント向けのイメージ画像にするなら、Nano Banana Proを試せます。

8. ビジュアルコンセプトの開発

[ブランド]のサイト向けに、明確に異なる3つのビジュアルコンセプトを考えてください。個性：[説明]。ターゲット：[説明]。価値観：[一覧]。各案に名称と1文のデザイン理念、視覚的な雰囲気、配色の方向性、タイポグラフィ、画像のスタイル、レイアウトと余白でブランドを表現する方法を示してください。同じ案の色違いにしないでください。

9. ランディングページの構成

[ターゲット]に[商品・サービス]を販売するランディングページの構成を、セクションごとに提案してください。各セクションの役割、内容、CTAの位置を説明し、訪問者の主な疑問に答えながら、できるだけ短いページにしてください。

10. デザインシステムのコンポーネント

[製品：種類、ターゲット、技術構成]のコンポーネントライブラリを、次のデザイン方針に沿って定義してください：[説明]。レイアウト、ナビゲーション、フォーム、コンテンツ表示、フィードバック、操作要素に分類してください。各要素の目的、バリエーション、アクセシビリティ要件を示し、サイト全体で使われる頻度順に並べてください。

11. ブランドカラーと書体の組み合わせ

[業種]の[ブランドの個性]を持つサイトに合う配色を3案、書体の組み合わせを3案提案してください。それぞれが与える印象、文字・ボタン・背景への適用方法、確認すべきコントラストの問題を説明してください。

12. 写真と画像のディレクション

[ブランド]のサイト向けに画像制作の指示書を書いてください。被写体、照明、色調、構図、人物と多様性、避けたい表現を含め、トップページ、商品ページ、ブログで画像をどう使い分けるかを説明してください。

13. ヒーロー画像の生成プロンプト

[事業]のWebサイトのヒーロー画像を生成するプロンプトを書いてください。比率は16:9で、[主な価値]を伝える[スタイル]の画像にします。被写体は片側に置き、反対側は見出しとボタンを配置できる落ち着いた余白にしてください。

14. モバイルファーストのチェックリスト

[サイトの種類]に合うモバイルファーストのデザインチェックリストを作成してください。ナビゲーション、タップ領域、読みやすい文字サイズ、フォーム入力、画像読み込み、固定CTA、小画面で非表示または簡略化すべき要素を含めてください。

理念の異なる3案を提示すると、クライアントは方向性を比較して選べます。プロンプト13をAI画像生成ツールで使い、実際のブランド写真を用意できる場合は置き換えましょう。

検索で見つけてもらい、行動につなげる文章と構造を考える7つのプロンプトです。Claude Haiku 4.5は見出しやメタディスクリプションをまとめて作る際に便利です。

15. トップページの文章

[事業]を展開する[ブランド]のトップページの文章を書いてください。ターゲット：[説明]。語り口：[説明]。ヒーロー部分にはメリット、理想、課題にそれぞれ焦点を当てた見出し3案、補足文、CTAを用意してください。さらに主なメリット3つ、実績や口コミへの導入文、3〜4つのサービスや商品の短い説明、締めのCTAを含めてください。会社の説明に終始せず訪問者に語りかけ、受け身や専門用語を避けてください。

16. 会社紹介ページ

次の事実から[事業]の会社紹介ページを書いてください：[創業の経緯、チーム、価値観、主な出来事]。顧客のためにこの事業が存在する理由から始め、親しみやすく具体的に書き、明確な次の行動で締めてください。

17. サービス・商品ページの文章

[ターゲット]向けの[サービスまたは商品]のページを書いてください。解決する課題、仕組み、主なメリット、含まれる内容、よくある懸念への回答、行動につながるCTAを含めてください。口コミや成果は捏造せず、必要な箇所にプレースホルダーを使ってください。

18. SEO構造の設計

[事業と業種]のサイトの内部SEO構造を計画してください。商用キーワード：[一覧]。情報収集キーワード：[一覧]。キーワードをページに割り当て、優先ページのH1とタイトル、内部リンク計画、検索意図に合うコンテンツ形式、FAQ・構造化データ・パンくずリストなどの要素を提案してください。成果につながる可能性を基準に優先順位を付けてください。

19. タイトルとメタディスクリプション

各ページに60文字未満のタイトルタグと155文字未満のメタディスクリプションを書いてください：[ページ、キーワード、目的の一覧]。具体的でクリックしたくなる内容にし、誇張した釣り見出しは避けてください。

20. コンバージョン率の診断

CROの専門家としてこのページを診断してください：[目的、レイアウト、文章、CTA、データを説明]。目標：[説明]。CTAの明確さ、社会的証明、認知負荷、流入元に対するファーストビューの関連性、信頼要素、モバイル体験を1〜5で評価してください。その後、主な障壁を3つ挙げ、それぞれに具体的で検証可能な改善策を1つ提案してください。

21. ユーザーフローの整理

[サイト]で[タスク：商品を見つけて購入するなど]を行うユーザーフローを整理してください。各段階で見えるもの、行動、判断ポイント、離脱しそうな理由、デザインで負担を減らす方法を説明してください。理想的な経路とよくある代替経路2つを含め、負担の大きい場面を3つ示してください。

SEOは設計と同時に計画しましょう。キーワードや内部SEOを詳しく検討するなら、SEO向けClaudeプロンプトを、公開後の集客キャンペーンにはマーケティング向けChatGPTプロンプトを参考にしてください。

成果の説明、円滑な公開、公開後の改善に役立つ7つのプロンプトです。途中のクライアント連絡には、AIメール作成ツールも活用できます。

22. クライアント向け提案の台本

[クライアントと意思決定者]に[デザイン案／リニューアル案／調査結果]を説明する台本を書いてください。画像を見せる前に戦略の枠組みを説明し、各判断の理由は相手が反応する前に伝えてください。想定される懸念への回答を用意し、最後は個人の好みではなく、改善につながるフィードバックを促してください。

23. クライアントの修正依頼への対応

最新デザインへのクライアントの意見です：[貼り付け]。具体的な修正、追加質問が必要な曖昧な意見、合意した範囲外の依頼に分類してください。そのうえで、次の対応を確認する丁寧で親しみやすい返信を作成してください。

24. 公開前のQAチェックリスト

[プラットフォーム]で制作した[サイトの種類]の公開前チェックリストを作成してください。リンク、フォーム、旧URLからのリダイレクト、アクセス解析、基本SEO、ファビコン、404ページ、ブラウザと端末別の確認、プライバシーとCookieの通知、バックアップを含めてください。

25. アクセシビリティの確認

このページのデザインを確認し、コントラスト、見出し順、代替テキスト、キーボードフォーカス、リンク文言、フォームラベルなどの一般的なアクセシビリティ課題を指摘してください：[説明またはアップロード]。各問題と修正方法を説明し、自動検証ツールとスクリーンリーダーでのテストも促してください。

26. ページ表示速度の改善

トップページの性能測定結果です：[速度測定ツールの結果を貼り付け]。大きな問題をわかりやすく説明し、画像、フォント、スクリプト、レイアウトのずれを対象に、優先順位付きの修正リストを作成してください。

27. 公開後のテスト案

サイトを公開して[期間]が経ち、結果は次のとおりです：[主要指標を貼り付け]。期待できる効果と工数を基準に5つのA/Bテストを順位付けしてください。各テストの仮説、見るべき指標、実施期間を示してください。

28. クライアントへの引き継ぎガイド

[クライアント]向けの簡単な引き継ぎガイドを書いてください。ページ編集、ブログ投稿、画像更新の手順、ログイン情報とバックアップの保管場所、不具合が起きた際の対応と連絡先を説明してください。

判断の理由を理解しているクライアントからは、より役立つ意見を得られます。提案は戦略の説明から始めましょう。公開後の解析やテスト結果を深掘りするには、データ分析向けChatGPTプロンプトをご覧ください。

Chat Smithでは、ChatGPTに加えてClaude、Gemini、Grok、DeepSeek、画像モデルを1つのアプリで利用できます。同じトップページの文章作成依頼を複数のAIモデルで試して、訪問者への伝え方を比較しましょう。UX要件書、コンセプト、提案用プロンプトを保存すれば、新しい案件のテンプレートとして使えます。

良いWebデザインは、訪問者とそのニーズを明確に理解することから始まります。デザイン以外にも使える指示のコツは、ChatGPTプロンプトの総合ガイドで紹介しています。