Prompt · Builder
Webデザインのプロンプトを組み立てる
作りたい画面の型と、見た目のスタイルを選ぶだけ。部品の構成・配色の値・書体・押さえるべき点までを、AIにそのまま渡せる日本語の指示文にまとめます。
組み立てる
選択中の条件
完成文を見る ヒーロー × ミニマル
組み立てたプロンプト
ヒーローセクションを作ってください。 スタイルは「ミニマル」です（要素を削ぎ落とした静けさの設計）。 ■ 画面の構成（ヒーロー） - 小さな標識（eyebrow） ── 状態やカテゴリを短く示す - 見出し（h1） ── 何ができるかが7秒で伝わる長さにする - サブコピー ── 見出しを1〜2文で補う - 行動ボタン ── 主と副の2つまで。主は1つだけ目立たせる - 実績の帯 ── 導入企業のロゴや数字を控えめに並べる ■ 見た目（ミニマル） - 配色: 地 #FFFFFF / 文字 #111111 / 面 #F2F2F2 / 唯一のアクセント #0066FF。この4色を基本にし、ほかの色は足さない。 - 書体: サンセリフ1書体。ウェイトは400と600の2段まで - 形: 角丸0〜4px。影は使わず、境界は1pxの罫線だけ - 動き: 150〜200msのフェードのみ。位置は動かさない ■ 押さえてほしいこと - CTAはスクロール不要の位置（ファーストビュー内）に置く - 背景メディアが本文の可読性を壊さないか必ず確認 - 色は主色1+中間色1+アクセント1以内に - 余白は「広すぎかな」と思うくらいが基準 ■ 共通の要件 - 実装: HTML と CSS だけで、1つの HTML ファイルに収める。外部ライブラリは使わない。 - 日本語の文章は字間 0、本文の行間 1.7〜1.85、見出しの行間 1.3〜1.5。和文に斜体は使わない。 - 文字と背景のコントラスト比は 4.5:1 以上。キーボード操作でフォーカス位置が見えるようにする。 - 動きは prefers-reduced-motion のときに止める。点滅は使わない。 - 幅 375px のスマホでも横にはみ出さないようにする。 - 画像がまだ無い部分は、CSS の色面で場所だけ確保する。 - 入力欄にはラベルを付け、エラーは色だけでなく文章でも伝える。 - UIに応じて長い日本語、0件、読み込み中、エラーの状態を用意する。 - 実在する実績・ロゴ・レビューを捏造しない。認証・決済・保存を実装しない場合はデモと明記する。 ■ 仕上がりの確認 - 幅320px・390px・768px・1280pxで見出し、ボタン、画像の折り返しを確認する。 - キーボードだけで操作し、フォーカス表示と動きを減らす設定を確認する。 - デモの処理と実際に送信・保存する処理を区別し、未実装の機能を完成扱いにしない。
本文は枠内でスクロールできます。コピーして、お使いのAIへ。条件を変更する ↑
近い見本 （同じ型・同じスタイル）
組み立てのしくみ
AIに画面を作らせるとき、「おしゃれなヒーローを作って」だけでは結果が毎回ぶれます。ぶれを減らすのは、どの部品を置くかとどんな値で描くかを具体的に書くことです。このページは、その2つを別々の材料から組み立てています。
- 画面の部品各カテゴリページの構成要素図と同じ内容です。部品ごとに、置き方と書き方の要点を添えています。
- 色・書体・形・動き各スタイルページの視覚パラメータです。色は雰囲気ではなく、実際に使う値を4色で渡します。
- 押さえてほしいこと型とスタイルそれぞれの成功のポイントから、2つずつ選んでいます。
- 共通の要件日本語の組版、文字のコントラスト、キーボード操作、動きを減らす設定への配慮。どの組み合わせでも欠かせないものです。
組み立てた文章はそのまま使っても、書き足しても構いません。特に何のサイトかを一言足すと、見出しや文言がそのサービスに合ったものになります。
よくある質問
- 組み立てたプロンプトは、どのAIに渡せばいいですか？
- Codex・Claude Code・v0・Cursor・ChatGPT など、HTML や CSS を書けるAIならどれでも使えます。日本語のまま貼り付けて構いません。実装方法の欄で、HTML と CSS だけ・Tailwind CSS・React から選べます。
- 組み合わせによっては、ちぐはぐな画面になりませんか？
- スタイルの色・書体・形・動きを、画面の部品にそのまま当てはめる形で書いているので、意外な組み合わせでも指示としては成り立ちます。仕上がりが想像しにくいときは、下に出る「近い見本」で実物を確かめてから使ってください。
- 作ったプロンプトや、それで作った画面を仕事で使ってもいいですか？
- 使えます。このツールが提供するプロンプトはCC0で、商用利用・改変・再配布ができます。クレジットの表記も要りません。外部AIで生成する画面や追加素材には、利用するサービスや素材の条件が別に適用されます。
- 入力した内容はどこかに送られますか？
- プロンプトを組み立てる処理はブラウザ内で完結し、入力本文をサーバーへ送信・保存しません。ページには広告・アクセス解析があるため、秘密情報や個人情報は入力しないでください。