平松 健
LP（ランディングページ）やWebサイトのワイヤーフレームを作成するプロンプトをご紹介します。
参考：原稿からワイヤーフレームまで一気通貫 | 工学型コピーライティング™
以下のプロンプトを使えば、実際にブラウザで閲覧できるHTMLワイヤーフレームを短時間で作成できます。レスポンシブも実装されるため、わざわざモバイル（TB・SP）のワイヤーフレームを別途用意する手間がありません。
「商材/サービス」 の箇所を埋めて、原稿ファイルを添付したうえで、生成AIに送信してください。
あなたはプロフェッショナルなUI/UXデザイナー兼フロントエンドエンジニアです。
以下の【要件】と【デザインシステム】に基づき、Tailwind CSSを使用したLP（ランディングページ）のワイヤーフレーム（HTMLコード）を生成してください。
【要件】
・商材/サービス：
・原稿：
※添付の実装用原稿を参照。原稿のコピーを基本的にはそのまま使うこと
・フォント：Noto Sans JPを使用（Google Fontsから読み込むこと）
・レスポンシブ対応：スマホ表示とPC表示の両方に対応すること。
・必要と思われる箇所に画像のプレースホルダーを挿入してください。
【デザインシステム（厳守すること）】
・コンテンツの幅は1400pxをデフォルトにしてください。※意図的にあえて外すのはありですが、基本は1400pxに揃えてください。
・カラースキーム：白（#ffffff）黒（#222222）グレー（#F8F8F8）のみを使用するモノクロームデザイン。これら以外は一切使用禁止です。
・タイポグラフィ：文字の色に頼らず、フォントサイズとウェイト（太さ）で情報の階層を明確にする。見出しは font-bold tracking-tight を推奨。
・シェイプ：ボタンやカードなどの要素には rounded-md または rounded-lg を使用。
・余白：PaddingとMarginを大きめに取り、ゆとりのあるミニマルなレイアウトにする。
・エフェクト：立体感は控えめな shadow-sm を使用し、強い影は避ける。
・インタラクション：ボタンやリンク、カードには hover: クラスと transition-all duration-200 などを組み合わせ、上品なホバーエフェクトを必ずつけること。フォーカス時のアウトライン（focus:ring-black等）も設定する。
・ヘッダーのロゴ部分はテキストではなく、w-32 h-8 程度のグレー背景で「LOGO」とだけ記載したプレースホルダーブロックにすること。
・フッターはリンクやテキストを入れず、セクション全体をグレー背景（#e5e5e5）にし、「Footerエリア」とだけ記載した全幅のプレースホルダーにすること。
・トーン＆マナー：モダン、プロフェッショナル、洗練、無駄を省いたミニマルな印象。
出力は、すぐにブラウザでプレビューできる完全な単一のHTMLファイル（<!DOCTYPE html>から始まるコード）として出力してください。TailwindのPlay CDNを読み込んでください。
以下は、生成されるHTMLワイヤーフレームの例（サンプル）です。
こちらのリンクから、HTMLファイルのサンプルもダウンロードできます。
プロンプトを上手く使うコツ
構造化された原稿を用意する
このワイヤーフレーム生成プロンプトは、精密に組まれた原稿（これをコピー・デッキと呼んでいます）があってこそ、威力を発揮します。「原稿はないけど、架空の内容でコピー書いて」 と指示すれば生成自体はできますが、それっぽいだけで中身がないワイヤーフレームになってしまいます。
大事なのは、コピーが先にあり、その後に、そのコピーをどう配置するか？ という順番です。「何を、どの階層で、どの順番で、どういう意図で配置するか」 という設計図がなければ、このプロンプトはただのおもちゃです。役には立ちません。
だからこそ、以下のような構造化された原稿が必要なのです。
見出し（h）や段落（p）、リスト（ul）、CTAなどをHTMLタグレベルで指定し、実装上の補足まで記載したコピー・デッキを読み込ませることで、AIは「何を、どの階層で、どの順番で、どういう意図で配置するか」 を完璧に理解します。
原稿（コピー・デッキ）のサンプルは、以下のリンクからダウンロードできます（個人情報の入力は不要です）。
出力トークン数が膨大なモデルを使う
このワイヤーフレーム生成プロンプトは、出力トークン数が膨大なモデルで、最大限のパフォーマンスを発揮します。
出力トークン数とは、簡単に言えば、AIが1回の返答で生成できるテキストの上限です。この上限が高いほど、原稿（コピー・デッキ）の内容を1mmの狂いもなくワイヤーフレーム化できます。逆に、この上限が低いと、AIはテキストを適当に端折って、半端なアウトプットを出してきます。
個人的な推奨は、Google AI Studioです。
Google AI Studioは、Googleが開発者向けに提供しているプロ仕様のAI実験場です。本来はシステム開発やAPIのテストに使う場所ですが、Googleアカウントさえあれば誰でもブラウザから無料でアクセスできます。
一般的なAIチャットで長いコードを書かせると、AIは途中でスタミナ切れを起こし、平気で手抜きをします。しかし、Google AI Studioであれば、画面右側にある「Output Length（最大出力トークン）」のスライダーで、出力トークン数を力技で引き上げることができます。
これにより、コピーを一言一句損なうことなく、精密なワイヤーフレームを作ることができます。
追加指示を適切に行う
AIが一発で完璧なコードを出してこないケースは、当然あります。
そこで必要になるのが、追加指示です。「ここをもっとこうしてほしい」 「こういう要素を追加してほしい」 といった修正指示を重ねて、納得いくクオリティに仕上げていきます。
以下は、追加指示の例です。
- セクション○の途中で出力が途切れています。続きの文章を、一切の省略なく出力してください。
- テキストを勝手に要約・改変しないでください。提供した原稿の文言を、1文字も変えずに、再生成してください。
- 見出しのフォントサイズをもっと上げてください。ジャンプ率を意識してください。
- 同じレイアウトが続いていて単調です。奇抜さは不要ですが、セクションごとに視覚的変化を付けてください。
- CTAボタンの位置が不自然です。コンテンツを読んだ自然な流れで目に入るよう、配置を調整してください。
- SP表示時、カラムの配置が崩れています。レスポンシブの調整をお願いします。
- 各セクションの上下の余白が狭すぎます。MarginおよびPaddingを調整して、もっとゆとりを持たせてください。
よくある質問
- 生成AIでワイヤーフレームを作るメリットは何ですか？
HTMLコードで出力されるため、実際のブラウザ上の挙動をリアルに体感できることです。レスポンシブの挙動も正確に確認できます。WebサイトやLP制作において、デザインツールを介さず、直接HTMLでワイヤーフレームを組むワークフローは徐々に浸透してきており、今後は主流になっていくでしょう。この記事でご紹介したプロンプトを使えば、HTMLワイヤーフレーム作成にかかる時間とコストを、極限までカットできます。
- プロンプトはGoogle AI Studio以外でも使えますか？
はい、使えます。ChatGPT、Gemini、Claudeなど、ほとんどの生成AIに対応しています。ただ、出力トークン数の上限には注意が必要です。モデルやプランによって上限は変動します。場合によっては、一回の出力ではワイヤーフレームを完全に生成できないかもしれません。その場合は、何度か追加指示を行う必要があります。
- 2カラム仕様にするなど、レイアウトの調整はできますか？
はい、可能です。プロンプトの【デザインシステム（厳守すること）】の項目を調整してください。以下は、2カラム（左側にコンテンツ、右側に目次の固定追従）の指示に変更した場合の、アウトプット例です。プロンプトの工夫次第で、どんなレイアウトにも可変できます。
- Figmaなどのデザインツールにインポートできますか？
はい、可能です。Figmaのプラグインを使えば、生成されたHTMLのURLやコードを、そのままFigma上の編集可能なレイヤーとしてインポートできます。以下の記事が参考になります。