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