フォーム・お問い合わせコード生成用
ステップ式のフォーム
入力を数画面に分け、今どこかを上部に示す。
用途・説明
項目の多い申し込みや見積もりを、数ステップに分けて入力してもらうフォームを作成します。上部に「入力 → 確認 → 完了」のような進み具合を表示し、「戻る」「次へ」で行き来します。入力した内容は戻っても消えません。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[ステップの内容]- 各ステップの名前と入力項目。例：1 お客様情報／2 ご希望内容／3 確認
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 以下の条件で「ステップ式のフォーム」を実装してください（送信処理は含めず、画面の切り替えと入力の保持のみ）。 ## 表示内容 - 進み具合の表示（ステップの番号と名前） - 現在のステップの入力項目：[ステップの内容] - 「戻る」「次へ」ボタン（最後のステップでは「送信する」） ## レイアウト・デザイン - 進み具合：番号の丸（直径 32px）を線でつなぐ。完了は #1463F0 の背景に白のチェック、現在は #1463F0 の背景に白の番号、未着手は #E2E8F0 の背景に #5F6D84 の番号 - ステップ名：12px。現在のステップだけ font-weight 700・色 #1B2A44、ほかは #5F6D84 - 線：完了した区間は #1463F0、それ以外は #E2E8F0 - 入力欄：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px、色 #1B2A44 - 「次へ」：背景 #1463F0、文字 #FFFFFF。「戻る」：枠線のみ。高さ 48px、右寄せで並べる ## 動作 - 「次へ」を押したとき、そのステップの入力だけを確認する。エラーがあれば進まない - 「戻る」で前のステップへ。入力済みの内容は保持する - ステップが切り替わったら、そのステップの見出しにフォーカスを移す - ブラウザの「戻る」でも前のステップに戻れるようにする案を併記する ## アクセシビリティ - 進み具合は ol でマークアップし、現在のステップに aria-current="step" を付ける - 「ステップ 2 / 3」のように、現在地を文字でも伝える - 完了・現在・未着手を、色だけでなくチェックマークや太字でも区別する ## 出力形式 - [使用技術]のコードを1つ出力 - 送信処理を接続する箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。