フォーム・お問い合わせコード生成用
予約の時間枠を選ぶボタン
空いている時間だけが押せる、時間帯の一覧。
用途・説明
予約できる時間帯をボタンで並べ、空いている枠から1つを選ぶ入力パーツを作ります。満席の枠は押せない状態で残すので、全体の混み具合も伝わります。美容室、クリニック、オンライン相談、レッスンの予約フォームに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[時間枠]- 例：10:00〜17:00を30分ごと
[満席の枠]- 例：11:00、13:30
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはフォームのUIに詳しいフロントエンドエンジニアです。 以下の条件で「予約の時間枠を選ぶボタン」を実装してください。 ## 表示内容 - 見出し：選んだ日付（例：5月24日（日）の空き状況） - 時間枠：[時間枠] - 満席の枠：[満席の枠] - 下に凡例：「空きあり」「残りわずか」「満席」 ## レイアウト - PC：4列、スマホ：3列のグリッド。間隔 8px - 午前・午後で小さな見出しを付けて区切る ## デザイン - 各ボタン：高さ 44px、角丸 8px、文字 15px・font-weight 700 - 空きあり：背景 #FFFFFF、枠線 1px solid #CBD5E1、文字 #1B2A44 - 残りわずか：空きありと同じ見た目に、右上へ小さな丸（6px、#1463F0）を付ける - 満席：背景 #F1F4F9、文字 #A3ADBD、取り消し線、カーソル not-allowed - 選択中：背景 #1463F0、文字 #FFFFFF、枠線なし - hover（空きありのみ）：枠線 #1463F0 ## 動作 - 選べるのは1つだけ。選ぶと下に「14:00〜14:30 を選択中」と表示する - 日付が変わったら、選択を解除して空き状況を読み込み直す（データはコールバックで受け取る） ## アクセシビリティ - input type="radio" と label で実装し、見た目だけボタンにする - 満席の枠は disabled にし、読み上げで「満席」と伝わるようにする - 「残りわずか」は色の丸だけでなく、読み上げ用の文言も付ける - 矢印キーで枠を移動できる ## 出力形式 - [使用技術]のコードを1つ出力 - 時間枠と空き状況を配列で渡して繰り返し表示する形にする
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。