週間グリッドで時間を選んで予約する（時間貸し）
概要
週間グリッドは、会議室やレンタルスペースなど 時間貸し（hourly） タイプの施設で利用できる予約時間選択画面です。Hot Pepper Beauty のような見慣れたグリッド形式で、7日分の空き状況を一目で確認しながら開始・終了時刻をタップするだけで予約できます。
この画面が表示される条件: 施設の予約設定が「時間貸し（hourly）」モードの場合、週間グリッドが標準で表示されます。施設が旧来の開始/終了ドロップダウン形式を使用している場合は、そちらが表示されます。
予約の流れ
- カレンダーで起点となる日付を選ぶ
- プラン・部屋を選ぶ
- 週間グリッドで時間を選ぶ（本画面）
- ゲスト情報を入力する
- 料金を確認して決済する（有料の場合）
- 予約完了・アクセスコードを受け取る
詳細機能
機能1: グリッドの見かた
グリッドは 縦軸が時間・横軸が曜日（月〜日の7日間） の表形式です。
セルの色と意味
| 色 | 意味 |
|---|---|
| 緑 | 空き（タップ可能） |
| ピンク・赤 | 予約済（タップ不可） |
| ストライプ（グレー斜線） | 営業時間外または利用不可（タップ不可） |
- 記号（◎×─）は表示されません。色のみで状態を識別します
- 左端の列に時刻ラベル（正時のみ表示）が表示されます
- 土曜は青、日曜は赤で日付ヘッダーが色分けされます
- 時間粒度（15分・30分・60分・90分・120分）は施設のプラン設定に従います
- 曜日ごとに営業時間が異なる場合があります（例：土曜は10:00〜18:00、平日は9:00〜22:00）
機能2: 月ピッカーで週をジャンプ（v2 新機能）
グリッド上部の月ラベル（例：2026年4月 ▾）をタップすると、月ジャンプピッカーが開きます。スマートフォンではボトムシートとして表示されます。目的の月を選ぶと、その月の第1週に移動します。
ヒント: 数週間以上先の予約を探すときに便利です。前週/次週ボタンで1週ずつ移動する必要がなくなります。
機能3: 週の切り替え（前週 / 次週）
グリッド上部の 前週 / 次週 ボタンで表示する週を1週ずつ切り替えられます。現在表示中の週の月・日範囲がタイトルに表示されます。週の切り替え時には空き情報が自動的に再読み込みされます。
機能4: 時間帯アンカージャンプ
グリッド上部に 午前 / 午後 / 夜 のボタンが表示されます。タップするとグリッドがその時間帯の行まで自動スクロールします。
注意: これらのボタンは表示行を絞り込むフィルターではありません。グリッド全体の表示は変わらず、スクロール位置のみが移動します。
機能5: 開始時刻の選択（Phase 1）
グリッドを最初に開いたとき、ヘッダーに 「開始時刻をタップ」 と表示されます。
- 希望の日付列の緑のセルをタップします
- タップしたセルが青くハイライトされ、ヘッダーが 「終了時刻をタップ (連続空きのみ選択可)」 に変わります
- 異なる列（別の日）の緑セルをタップすると、新しい日の開始時刻として選択し直せます
- 開始セルを再度タップするか 「やり直す」 ボタンをタップすると選択がリセットされます
機能6: 終了時刻の選択（Phase 2）
開始時刻を選ぶと、同じ列（同じ日）で終了時刻を選択できるようになります。
- 開始セルから連続して空きが続いているセルのみ 淡いグリーン でハイライトされます（選択可能候補）
- 途中に予約済みセルが入ると、そこより後のセルは選択できなくなります
- 候補セルをタップすると終了時刻が確定し、開始〜終了の範囲が青くハイライトされます
ポイント: 終了時刻は「その時刻で利用終了」の意味です。例えば 13:00 のセルをタップすると 12:00〜13:00 の利用になります。
最低利用時間について: プランに最低利用時間（例：90分）が設定されている場合、それより短い範囲の終了セルは淡色+ストライプで表示され、タップできません。90分プランの場合、開始から60分後のセルは選択できません。
機能7: 確認バーと「予約する」ボタン
開始・終了時刻を両方選択すると、画面下部に固定の 確認バー が表示されます。
| 表示 | 内容 |
|---|---|
| 日付 | 選択した日付 |
| 時間帯 | 開始時刻〜終了時刻 |
| 利用時間 | 合計分数 |
| やり直すボタン | 選択をクリアして最初から選び直す |
| 予約するボタン | 次のステップ（ゲスト情報入力）へ進む |
機能8: 料金確認画面と時間帯別内訳（v2 新機能）
「予約する」をタップすると、確認画面で料金の内訳が表示されます。料金は以下の設定を反映して計算されます：
- 基本時間単価（hourly rate）
- 段階料金（例：最初の1時間は高単価、以降は低単価）
- 週末料金（土日に異なる単価が設定されている場合）
- 夜間パック（施設が夜間料金を設定している場合）
時間帯別料金ティアの内訳表示（v2）: 施設が時間帯別料金（例：午前¥500/h・午後¥800/h・深夜パック等）を設定している場合、確認画面では各ティアの利用時間と小計が一覧表示されます。例：
| 時間帯 | 利用時間 | 小計 |
|---|---|---|
| 午前（〜12:00） | 1時間 | ¥500 |
| 午後（12:00〜18:00） | 2時間 | ¥1,600 |
| 合計 | 3時間 | ¥2,100 |
時間帯別料金が設定されていない施設では、単価×時間の一行表示のみとなります（v1 と同じ）。
機能9: 決済後の鍵画面への自動遷移（v2 新機能）
予約が 当日または24時間以内 のチェックイン可能な時間帯に該当する場合、決済完了後にアプリが自動的に 鍵（アクセスコード）画面 に移動します。「今すぐチェックイン」ボタンを手動でタップする必要はありません。
- 予約開始まで24時間を超えている場合は通常の予約完了画面に戻ります
- 自動遷移はインターネット接続が正常な場合のみ行われます
機能10: タイムスロットプランの週間グリッド表示（v2 新機能）
施設が time_slot_week_grid フラグを有効にしている場合、従来の1日単位リスト形式の代わりに タイムスロットプランも週間グリッドで表示 されます。各ティア（午前の部・午後の部など）が7日分のグリッドに丸みのあるブロックとして表示され、空き状況を一目で比較できます。
このモードが表示される条件: 施設側で
time_slot_week_gridフラグが有効化されている場合のみ表示されます。有効でない施設では従来のタイムスロット一覧画面が表示されます。
よくある質問
Q: ストライプ（斜線）のセルはなぜタップできないのですか？
ストライプは 営業時間外 または 利用不可 の時間帯を示しています。施設が対応できる時間帯のみ予約できます。曜日によって営業時間が異なるため、同じ時刻でも曜日によってストライプになる場合があります。
Q: 予約済みのセルが多くて選べる時間帯が限られています
予約済みセル（赤・ピンク）は他の方がすでに予約済みの時間帯です。別の日・別の時間帯を試してみてください。週の切り替えで空きの多い週を探すこともできます。
Q: 終了時刻を選べません（淡いグリーンが途中で途切れる）
開始時刻から連続して空きがある範囲しか選べません。予約済みセルがあるとそこでブロックされます。短い時間帯を選ぶか、予約済みセルのない別の日・時間帯をお選びください。
Q: 淡色+ストライプのセルが選択候補として表示されません
プランに 最低利用時間 が設定されているため、その時間に満たない終了時刻は選択できません。例えば90分が最低利用時間のプランでは、開始から60分後のセルは選択不可です。より長い時間帯か、最低利用時間のないプランをお選びください。
Q: 「午前 / 午後 / 夜」ボタンを押しても表示が変わりません
これらのボタンはフィルターではなく、グリッドのスクロール位置を移動するアンカーです。グリッド全体の時間は変わりませんが、スクロール位置が該当時間帯に移動します。
Q: 開始時刻を選び直したい
開始セルをもう一度タップするか、確認バーの 「やり直す」 をタップすると選択がリセットされます。
Q: 土曜・日曜は予約できますか？
施設の営業時間設定によって異なります。グリッドに緑のセルが表示されていれば予約可能です。
Q: 確認画面の料金はどう計算されていますか？
選択した時間帯・曜日・時刻に応じて、施設が設定した料金プランが自動適用されます。段階料金・週末料金・夜間パックなどが設定されている場合はそれらが反映されます。
Q: 料金内訳が出る予約と出ない予約があるのはなぜですか？
確認画面の 時間帯別内訳 は、施設が hourly_rate_tiers（時間帯別料金）を設定している場合にのみ表示されます。設定されていない施設では従来通り「単価 × 時間 ＝ 合計」の一行表示となります。内訳の有無は施設側の設定によるもので、ゲスト側での変更はできません。
Q: 決済後に勝手に鍵画面に移動しました
これは意図した動作です。予約の開始時刻が 現在から24時間以内 の場合、決済完了後にアプリが自動的に鍵（アクセスコード）画面へ遷移します。すぐにチェックインできる状態であることを示しており、手動で「今すぐチェックイン」をタップする手間を省いています。
トラブルシューティング
空き情報が読み込まれない
「空き情報の取得に失敗しました」などのエラーメッセージが表示された場合は、以下をお試しください：
- インターネット接続を確認します
- ページをリロードします
- 前週または次週に切り替えて再試行します
- それでも解決しない場合は施設にお問い合わせください
グリッドが横スクロールで見切れる
スマートフォンで表示する場合、グリッドは横スクロール対応です。左右にスワイプすると曜日列全体を確認できます。