テーブル・一覧コード生成用
予約の空き状況の表
日付と時間ごとの空きを、◎△×で見せる。
用途・説明
日付を横、時間を縦に並べ、予約の空き状況を記号で示す表を作成します。空いている枠を押すと、その日時で予約に進めます。サロン、クリニック、教室、会議室などの予約ページに向いています。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[表示する期間]- 例：今日から7日間
[時間の枠]- 例：10:00、13:00、16:00
[使用技術]- 例：HTML/CSS + JavaScript、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「予約の空き状況の表」を実装してください。 ## 表示内容 - 表示する期間：[表示する期間] - 時間の枠：[時間の枠] - 各枠の状況：◎（空きあり）、△（残りわずか）、×（満席）、−（受付なし） - 表の上に、「前の週」「次の週」のボタンと、表示している期間 - 表の下に、記号の説明 ## レイアウト - 左端に時間の列、その右に日付の列。日付の列は同じ幅で、中央揃え - 日付の見出しは、「10/1」と曜日の2段 - スマホでは、時間の列を固定して横スクロールにする ## デザイン - 表：外枠 1px solid #E2E8F0、角丸 10px - 日付の見出し：背景 #F7F9FC、日付 14px・font-weight 700・色 #1B2A44、曜日 12px・色 #5F6D84 - 時間：14px、font-weight 700、色 #1B2A44 - ◎と△：18px、font-weight 700、色 #1463F0。押せる枠として、セル全体をボタンにする - ×と−：18px、色 #8A96AA。押せない - 押せる枠の hover：背景は #1463F0 の9%の淡い色 - 選んだ枠：背景 #1463F0、記号 #FFFFFF - セルの高さ 48px、下と右に 1px solid #EDF1F7 ## 動作 - 空き状況のデータを渡すと、表示が変わる - 過ぎた日時の枠は「−」にする - ◎または△の枠を押すと、その日時を選んだ状態にし、コールバックで日時を渡す - 「前の週」は、今日より前には戻れない ## アクセシビリティ - 日付のセルは th（scope="col"）、時間のセルは th（scope="row"） - 押せる枠は button 要素で、aria-label に日時と状況を入れる（例：「10月1日 水曜 10時、空きあり」） - 選んだ枠に aria-pressed="true" - 記号には、読み上げ用の文字を添える。色だけでなく、記号の形で区別できるようにする - 期間が変わったら、表示している期間を aria-live="polite" で伝える ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。