Prompt Builder for Web Design

ChatGPT / Claude Design / 画像生成AI / Codex 用に最適化

プロンプトジェネレーター

入力内容をもとに、要件を整理した完成版のプロンプトを ChatGPT用、 Claude Design用、 画像生成AI用、 コード化用、 Codex用 へ自動変換します。

使い方ガイド

  1. まず業種、目的、ターゲット、サイトの構造を入力します。
  2. 次に見た目と参考資料を足して、方向性を具体化します。
  3. 必要なら注意事項とサイト化の設定まで入れて、実装向けに整えます。
  4. 参考画像を使う場合は、この画面で手動アップロードして一緒に渡します。

Input

質問に答える

業種セットは、業種に合わせて複数項目をまとめて入れるためのアシストです。下の「業種」は最終プロンプトにそのまま入る表記です。新しい業種で作った内容は、そのまま保存してあとで呼び出せます。

Structure

サイトの構造

1ページのLPにするか、複数ページのサイトにするかをここで決めます。複数ページを選ぶと、トップだけでなく下層ページの役割まで出力に入ります。下の「この設定で変わること」も見ながら決めるのがおすすめです。

この設定で変わること

ここに、LPか複数ページかによって何が出力に足されるかを表示します。

英字プレビュー

未選択

Aa Bb Cc 123 Prompt Design Studio

日本語プレビュー

未選択

あいうえお LPデザイン 指示文サンプル 123

References

参考資料

毎回似た雰囲気になるのを避けたいときに使います。URLやサイト名、参考にしたい要素に加えて、必要なら画像も紐づけられます。色味、構図、余白感までAIに見てほしいときはアップロードがおすすめです。逆に、画像そのものを見せなくても「image01 のヒーロー写真」みたいに管理用の対応だけ伝わればよい場合は、参考元にファイル名だけ書く使い方でも大丈夫です。

参考1

参考2

参考3

出力には、参考元・参考にしたい要素・参考画像のファイル名・「画像は別添で送る」メモが自動で入ります。見た目そのものをAIに判断してほしい画像だけアップロードし、管理用の対応だけでよい画像はファイル名記載だけにすると運用しやすいです。

Build

サイト化の設定

ここで選んだ内容は「デザイン案を実際のWebページ用データに落とし込む指示文」にだけ反映されます。見た目のデザイン用プロンプト自体は変わりません。

この設定で変わること

ここに、選択内容によって実装用プロンプトのどこが変わるかを表示します。

Output

AI別に最適化したプロンプト

設計サマリー

入力した内容をもとに、この案件で優先したい方向性や見せ方の要点をここへ整理して表示します。出力前にざっと見て、「今の方針で合っているか」を確認するためのメモ欄として使えます。

ChatGPT

デザインカンプ画像を作る版

この出力は、ChatGPTにデザインカンプ画像を作ってもらいたいとき向けです。コードではなく、まず見た目の完成イメージを出したいときに使います。

Claude Design

世界観まで丁寧に伝える版

この出力は、Claude Designでデザインカンプ画像を作るとき向けです。雰囲気やブランド感まで丁寧に伝えたい案件に向いています。

画像生成AI

見た目だけを圧縮して渡す版

この出力は、Midjourney や Flux などの画像生成AIで、見た目の見本やムードボードを作りたいとき向けです。会話用AIではなく、画像専用のモデルへ短く渡したいときに使います。

Other AI

他のAIに実装させる版

この出力は、ChatGPT や Claude など、Codex以外のAIに「この見た目をHTML・CSS・JSへ落として」と頼みたいとき向けです。実装方針を整理して渡すためのもので、この画面上で直接作業させる前提ではありません。

Codex

Codexにそのまま実装を頼む版

この出力は、この作業環境のCodexに「この見た目とルールで、そのままサイトを実装して」と依頼したいとき向けです。他のAI向けの実装依頼よりも、作業ルールやダミー画像の扱いまで細かく含めています。