- Webサイトのアイデアはあるが、ワイヤーフレームを作るのが面倒だ
- コーダーに渡す前のプロトタイプを、もっと手軽に、かつ高品質に作りたい
そんなプロフェッショナルの悩みを解消するのが、今回ご紹介する「対話型・Web制作ディレクションプロンプト」です。
このプロンプトは、AIを単なる「コード生成機」としてではなく、経験豊富な「Webディレクター兼UI/UXデザイナー」として定義します。
ユーザーが「何をしたいか」を答えるだけで、要件定義から仮テキストの生成、構成の出力までステップバイステップで完結させることができます。
下記資料は、記事中で出力したワイヤーフレームからそのままやりとりを続けて複数ページ化した例と、シンプル構成案に変換したです。
なぜ、このプロンプトが必要なのか？
Web制作の現場では、アイデアを実際のコードに落とし込むまでの工程に多大な時間がかかります。
特にディレクターとデザイナー、コーダーの間で発生する認識のズレは、手戻りを引き起こす最大の原因です。
このプロンプトは、AIを単なるコーダーではなく経験豊富なWebディレクターとして機能させることで、上流工程から実装までをシームレスに繋ぎ、プロフェッショナルな品質を即座に生み出すために設計されました。
実演：実際のやり取りをご覧ください
このプロンプトを実行すると、AIはまずあなたの手元にある企画書や資料の提示を求めます。
資料がない場合でも、AI側からターゲットや目的についてのヒアリングが開始されます。
その後、要件定義の承認、トップページのワイヤーフレーム確認、そして実際のHTML実装へと進みます。
各ステップでユーザーの合意を得ながら進行するため、あたかも有能なスタッフと対話しているような感覚で制作が進んでいきます。
AIが「単に指示を待つ」のではなく、「自らコンサルタントとして主導権を握ってヒアリングし、提案してくる様子」に注目してください。
（プロンプト）
こんにちは！最高品質のHTMLモックアップ制作を開始します。
Webサイトの要件を把握するため、お手持ちの企画書や関連資料を添付ファイルでアップロードするか、このままテキストで貼り付けてください。
もし、具体的な資料がない場合でもご安心ください。 その場合は「資料なし」とお伝えいただければ、私からいくつか質問をさせていただき、対話形式で要件を固めていきましょう。
サイトの目的: （例: 新規顧客獲得、ブランド認知度向上、採用強化）
ターゲットユーザー: （例: 20代のITエンジニア、都内在住の30代女性）
与えたい印象・デザインの方向性: （例: 信頼感、先進的、温かみのある、ミニマル）
主要なコンテンツ: （例: サービス紹介、導入事例、会社概要、ブログ）
参考サイトURL: （デザインや構成の参考にしたいサイトがあれば）
まずは資料をご提示いただくか、「資料なし」とお知らせください。ご返信をお待ちしております！
（下記記入例。要件定義の内容や、ヒアリングを基にした構成案テキストなどを渡します。）
サイトの目的: エンジニアの中途採用強化（応募エントリー数の増加と、カルチャーフィットする人材の獲得）
ターゲットユーザー:
25〜35歳のITエンジニア（フロントエンド・バックエンド）。
現職に大きな不満はないが、よりモダンな開発環境や、柔軟な働き方（フルリモート・フレックス等）を求めている層。
与えたい印象・デザインの方向性:
先進的・クリーン: IT企業らしいスタイリッシュさと余白を活かしたモダンなデザイン。
温かみ・親しみやすさ: オープンでフラットな社風が伝わるよう、実際の社員の写真を多用する想定です。
カラー: コーポレートカラーの「ネイビー（信頼感）」をベースに、アクセントとして「明るいイエロー（活気・クリエイティビティ）」を使いたいです。
主要なコンテンツ:
ファーストビュー: キャッチコピー「あなたのコードで、次世代のスタンダードを創る。」＋社員が笑顔でミーティングしている写真。
私たちのミッション: 会社が目指すビジョンのシンプルな説明。
開発環境・技術スタック: 使用技術（React, Go, AWSなど）をロゴアイコン等で視覚的にわかりやすく並べたい。
メンバーインタビュー: 3名分を想定。写真＋名前＋職種＋短いコメントのカード型レイアウト。
働く環境・制度: フルリモート、フレックス、書籍購入補助などをアイコン付きで紹介。
CTA（エントリー）: 画面下部に常に追従する（Fixed）エントリーボタンを配置したい。
参考サイトURL:
SmartHRさんやメルカリさんの採用サイトのように、情報が整理されていてタイポグラフィが美しいUIをイメージしています。
（参考イメージ）https://example.com/recruit/
詳細な情報をご提供いただき、ありがとうございます！目的やターゲット、さらにはデザインのトーン＆マナーまで非常に明確で、素晴らしい要件ですね。特にネイビーとイエローのコントラストは、知的さと活気を両立させるのに非常に効果的です。
いただいた情報を基に、プロジェクトの要件を以下のように定義しました。
プロジェクト要件定義
サイトの目的: エンジニアの中途採用強化（応募エントリー数の増加および、カルチャーフィットする人材の獲得）
ターゲットユーザー: 25〜35歳のITエンジニア（フロントエンド・バックエンド）。モダンな開発環境や柔軟な働き方（フルリモート・フレックス等）を求めている層。
デザインコンセプト: 「先進的・クリーン」かつ「温かみ・親しみやすさ」。余白をたっぷりと取り、タイポグラフィを美しく見せるモダンなUI（SmartHR様やメルカリ様の採用サイトをベンチマーク）。
カラーリング: ベースカラー「ネイビー（信頼感）」 × アクセントカラー「明るいイエロー（活気・クリエイティビティ）」
サイト構成案（ページ一覧）: * 今回は情報の網羅性とストーリーテリングを重視し、1ページ完結型のランディングページ（LP）形式を提案します。
ページ名: 採用トップページ（index.html）
その他特記事項:
ファーストビュー：「あなたのコードで、次世代のスタンダードを創る。」という力強いコピーと、社員が笑顔でミーティングしている写真の組み合わせ。
追従型CTA：画面下部に常に固定（Fixed）されるエントリーボタンの配置。
開発環境・技術スタック、働く環境・制度は、アイコンやロゴを用いて視覚的にスキャンしやすい設計にする。
この内容でプロジェクトを進めてよろしいでしょうか？
問題なければ「承認します」とご返信ください。構成を複数ページに分けたい場合や、その他修正点があれば、お気軽にご指摘ください！
承認します
ご承認ありがとうございます。
それではまず、トップページのワイヤーフレーム（構成案）を作成しました。 いただいた要件に基づき、モダンで洗練された印象を与えるため、ファーストビューでのアシンメトリー（左右非対称）なテキストと写真の重なりや、メンバーインタビューにおける**少し高さをずらしたカード配置（ブロークングリッド手法）**を取り入れています。これにより、IT企業らしい先進性と、型にはまらないフラットな社風を視覚的に表現します。
”’
採用トップページ構成案（LP形式）
ヘッダー
企業ロゴ（左寄せ）
ナビゲーションメニュー（Mission, Tech Stack, Interview, Culture）
※スクロールすると背景が白/ネイビーに透過・追従する仕様を想定
メインビジュアル（ファーストビュー）
キャッチコピー：「あなたのコードで、次世代のスタンダードを創る。」（美しく大きな明朝・ゴシック混植などのタイポグラフィ）
メイン画像：社員が笑顔でミーティングしている写真
※デザイン提案：ネイビーの背景に対し、イエローのアクセント図形を配置し、写真とテキストをアシンメトリーに重ねて先進性を演出。
私たちのミッション (Mission)
シンプルで力強いビジョンメッセージ
余白（ホワイトスペース）を大胆に取り、メッセージに集中させるクリーンなレイアウト
開発環境・技術スタック (Tech Stack)
「React」「Go」「AWS」などの技術ロゴアイコンをグリッド状に配置
視覚的にスキャンしやすく、モダンな環境であることが一目でわかるデザイン
メンバーインタビュー (Interview)
3名分のインタビューカード（写真 ＋ 名前 ＋ 職種 ＋ 短いコメント）
※デザイン提案：3枚のカードの高さをあえて少しずつずらして配置（ブロークングリッド）し、クリエイティビティと風通しの良さを表現。
働く環境・制度 (Environment & Culture)
「フルリモート」「フレックスタイム制」「書籍購入補助」などをシンプルな線画アイコンと共に紹介
3列〜4列の整然としたグリッドレイアウトで分かりやすさを重視
固定CTA（画面下部追従）
目立つイエロー（アクセントカラー）を使用した「エントリーする」ボタン
スクロール中も常に画面下部（または右下）に固定表示され、いつでも応募アクションを起こせる導線
フッター
企業ロゴ
会社概要ページ、プライバシーポリシーへのテキストリンク
コピーライト
”’
この構成案について、セクションの順序変更や項目の追加・削除など、ご希望はありますか？ 問題なければ「構成案を承認」とご返信ください。HTMLモックアップの制作へ進みます！
構成案を承認
構成案のご承認、ありがとうございます。
それでは、定義した要件とワイヤーフレームに基づき、**トップページ（index.html）**の完全なHTMLモックアップを作成しました。 モダンなタイポグラフィ（Noto Sans / Noto Serifの混植）や、余白を活かしたアシンメトリー配置、そしてご要望の「ネイビー×イエロー」の配色をTailwind CSSで実装しています。レスポンシブ（スマートフォン・PC対応）も完了しています。
以下のコードブロックが実際のファイルとなります。
採用トップページ
3月3日 15:45
右側のプレビュー画面で実際の表示やデザイン（PC/スマホそれぞれの見え方）をご確認いただけます。
修正のご希望はありますか？（例: 「メインビジュアルのテキストをもっと大きくしたい」「ネイビーの色味をもう少し明るくしたい」など） もし問題がなければ、「承認します」とご返信いただければ、最終的な確認・納品プロセスに進みます！
こうして出してくれたワイヤーフレームをPDF化したものをお見せします。
あとは、やりとりを続けて調整していきましょう！
下層ページを含む複数ページにも対応しています。（ページ間リンクの実装は仕組み上不可能なので、ページごとにひとつの資料としてください。）
このプロンプトがもたらす4つのメリット
ご覧いただいた通り、AIは単なるチャットボットではなく、完全に「パートナー」として機能していました。ポイントは以下の4点です。
短時間で目に見える進捗が得られる
ゼロからコードを書く前に、ブラウザで動くモックアップが数分で完成します。
早い段階で形が見えることは、自分自身の時給アップ・モチベーション維持だけでなく、クライアントとの合意形成を劇的に早めます。
クライアントとのやり取りをリードできる
AIが提示する構成案やヒアリング項目をベースにすることで先回りの提案が可能になり、打ち合わせの主導権を握れます。
次に何をすべきかが明確になり、プロフェッショナルとしての説得力が増します。
丸投げクライアントへの強力な土台作り
要件が固まっていない丸投げ状態の依頼でも、まずはこのプロンプトでたたき台を作ることで、ブラッシュアップのための具体的な議論が可能になります。
ヒアリング項目のシミュレーション
実際にクライアントと対峙する前にプロンプトを実行してみることで、AIが何を問いかけてくるかを確認できます。
これがそのまま、本番のヒアリングシートの参考になります。
利用における注意点と限界
ワイヤーフレームに限らず、AIによる自動生成には、特有の弱点があることを理解しておく必要があります。
- 特定のテーマでの再現性
SWELLなどのWordPressテーマを使用する場合、AIが出力した追従ボタンやポップアップ、モーダル、あるいは極端に不規則なレイアウトなどは、標準機能での再現が難しい場合があります。 - 要望との乖離
対話の過程で、AIがユーザーの意図を完全には汲み取れず、要件とは異なるデザインや構成を出力する可能性があります。 - ページ間の整合性
トップページと下層ページを別々に生成する際、ヘッダーやフッターのデザインや内容がバラバラになってしまうケースがあります。
最終責任とコントロール
出力された成果物に対して、クライアントへ責任を持つのはあなた自身です。AIの提案を吟味し、必要に応じて修正を加え、自分の意志でコントロールする姿勢を忘れないでください。
【コピー用】最高品質HTMLモックアップ生成プロンプト
それでは、このプロンプトを公開します。
Gemini 3.1 Pro 向けに作成し、私も実務で使用しています。必ず「Canvasをオンにして、Proモードで実行」してください。クオリティが違います。
会員限定コンテンツ
ここは会員限定コンテンツです。
＼お申込みはこちら／
デザインがSWELLのブロックエディタで再現不可能な際は、まずはそのまま伝えてみてください。おそらく察して調整してくれます。
また、ワイヤーフレームにデザインの要素を含みすぎる場合は、以下のように伝えてみてください。
あくまで構成案なので、骨組みを示すことだけを目的としてシンプルなデザインに再調整してください。一般的な「ワイヤーフレーム（骨子）」の域を出ない、シンプルな構造案になりました！
参考サイトを一緒に模索する場合など、デザイン面は別途検討する場合はこちらの方が良いかもしれないですね。
生成AIということもあり、やりとり次第でかなり柔軟です。あなただけの使い方を見つけてみてくださいね！
+α：出力されたHTMLをPDF資料にするには？
- HTMLで出力！？コードのことはわからないんだけど…
- クライアントにHTMLで渡して大丈夫？？
という方もいらっしゃいますよね。
ここからはプラスアルファの情報として、出力されたHTMLをPDF資料にすることでクライアントへの共有をスムーズにし、提案の説得力を高める具体的な手順を解説します。
Canvasに出力されたHTMLコードをすべてコピーします。
テキストエディタ（プログラミング用ソフトが入っていない場合でも、メモ帳などの標準アプリで構いません。）を開き、コピーしたコードを貼り付けてください。
保存する際のファイル名は自由ですが、末尾の拡張子を .html にして保存します。
ファイル名は自由ですが、必ず「.html」まで記載して保存してください。
これにより拡張子が.htmlとなり、AI画面内のコードをひとつのHTMLファイルとして保存できました。
HTMLファイルをPDFや画像に保存するツール・サービスはいろいろあります。何を使っていただいても構いませんが、ここではChromeの拡張機能「FireShot」をご紹介します。
拡張機能をインストール後、メニューから「ページ全体をキャプチャ」を選択します。
スクロールと共に全体のキャプチャが撮られて結果タブが開くので、「PDFとして保存」を選択します。
PDFファイルが保存されました。あとはクライアントに提出するだけです！
下層ページを含む場合は、PDFを結合するサービスで１ファイルに統合してもよいかもしれないですね！
