フォーム・お問い合わせコード生成用
送信前の確認ダイアログ
送信ボタンを押すと、内容を見直す小さな画面が開く。
用途・説明
送信ボタンを押したときに、入力内容を確認するダイアログ（モーダル）を表示するパーツを作成します。画面を切り替える確認画面よりも手軽で、入力した場所から離れずに見直せます。項目の少ないお問い合わせや、予約、申し込みのフォームに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[確認する項目]- 例：お名前、メールアドレス、お問い合わせ内容
[送信ボタンの文言]- 例：この内容で送信する
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「送信前の確認ダイアログ」を実装してください。 ## 表示内容 - 見出し：「この内容で送信しますか？」 - 入力内容の一覧：[確認する項目] - ボタン：「戻って修正する」「[送信ボタンの文言]」 ## デザイン - 背景の覆い：rgba(27, 42, 68, 0.5) - ダイアログ：幅 480px（スマホは左右に 16px の余白）、背景 #FFFFFF、角丸 16px、padding 32px、影 0 24px 64px rgba(27, 42, 68, 0.24) - 見出し：18px、font-weight 700、色 #1B2A44 - 一覧：項目名 12px・色 #5F6D84、内容 15px・色 #1B2A44。項目の間隔 16px。内容が長いときは一覧だけをスクロールする（最大の高さ 50vh） - ボタン：横に2つ、幅は半分ずつ。高さ 48px、角丸 999px。「送信」は背景 #1463F0・文字 #FFFFFF、「修正」は枠線 - 開くとき：覆いは 0.2秒でフェードイン、ダイアログは下から 8px 上がりながら表示 ## 動作 - フォームの入力チェックを通ったときだけ、ダイアログを開く - 「戻って修正する」、Esc キー、覆いのクリックで閉じる - 「送信」を押したらボタンを「送信中…」にして、二重に押せないようにする - 開いている間は、後ろのページをスクロールできないようにする ## アクセシビリティ - dialog 要素（showModal）を使う。見出しを aria-labelledby で関連付ける - 開いたら、最初のフォーカスを「戻って修正する」に置く（誤って送信しないため） - フォーカスがダイアログの外に出ないようにする（dialog 要素の標準の動作を使う） - 閉じたら、フォーカスをもとの送信ボタンに戻す - 動きは prefers-reduced-motion で無効化 ## 出力形式 - [使用技術]のコードを1つ出力（送信処理そのものは含めない）
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。