フォーム・お問い合わせコード生成用
予約フォーム
日付・時間・人数を選んで申し込む、予約の入口。
用途・説明
飲食店、サロン、教室、相談会などの予約に使うフォームを作成します。日付、時間、人数を選ぶ欄を横に並べ、その下に名前と連絡先を入力します。スマホでも選びやすい入力方法を指定しています（予約の登録処理は含みません）。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[予約の対象]- 例：ランチの席、カット、無料相談
[選べる時間帯]- 例：11:00〜20:00、30分ごと
[使用技術]- 例：HTML/CSS/JavaScript、React + Tailwind CSS
プロンプト全文
あなたはフォームのUXとアクセシビリティに詳しいフロントエンドエンジニアです。 [予約の対象]の「予約フォーム」を実装してください（予約の登録処理は含めず、見た目と入力まわりの挙動のみ）。 ## 表示内容 - 日付、時間（[選べる時間帯]）、人数の選択欄 - お名前、電話番号、メールアドレスの入力欄 - ご要望（任意）の入力欄 - 「予約内容を確認する」ボタン ## レイアウト・デザイン - PC：日付・時間・人数を3列に並べる。スマホ：縦に積む - ラベルは入力欄の上に常に表示（14px、font-weight 700、色 #1B2A44） - 選択欄・入力欄：高さ 48px、角丸 8px、1px solid #CBD5E1、文字 16px、色 #1B2A44。選択欄は右端に下向きの矢印 - フォーカス時：枠線 #1463F0 と 3px の薄いリング - 任意の項目には「任意」を 12px・色 #5F6D84 で添える - ボタン：幅100%、高さ 52px、背景 #1463F0、文字 #FFFFFF、font-weight 700 ## 入力まわりの属性 - 日付：type="date"。min に今日の日付を入れ、過去の日付を選べないようにする - 時間・人数：select 要素 - 電話番号：type="tel"、autocomplete="tel"、inputmode="tel" - メール：type="email"、autocomplete="email" ## 動作 - 定休日など選べない日を選んだ場合は、日付欄の下に理由を表示する - 送信前に、選んだ日時と人数を1文にまとめて表示する（例：5月24日（日）14:00、2名） ## アクセシビリティ - すべての選択欄と入力欄に label を関連付ける - 日付は曜日も合わせて確認できるようにする - エラーメッセージは aria-describedby で関連付ける ## 出力形式 - [使用技術]のコードを1つ出力 - 予約の登録処理を接続する箇所をコメントで明示
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。