デザイン依頼資料

サブプラン予約機能

よもぎ蒸し・エステマシン等の店舗サービス予約を、自前システムで実現する

背景
テンマネの店舗では、サブスク会員向けによもぎ蒸しやエステマシンなどの無料サービスを提供しています。現在はペライチという外部予約サービスで運用していますが、これを自前のシステムに移行します。対象サービスは「サブプラン」と呼び、店舗ごとに自由にプランを作成できる設計です。管理者側(管理画面)と会員側(ユーザー画面)の両方に画面が必要です。
画面ストーリー一覧
管理者側の画面
1
サブプランを作成して有効にする

管理画面のデータベースページに「サブプラン」タブを追加します(会員タブ等と並ぶ想定)。管理者は店舗ごとに独自のサブプラン(よもぎ蒸し、エステマシンなど)を自由に作成・編集・削除できます。

想定される設定項目
  • タイトル(プラン名)
  • 説明テキスト
  • 画像
  • 利用時間(例: 45分、60分など)
  • 有効 / 無効の切り替え
  • 表示順
  • 予約開始可能期間(何日前から予約受付するか)
flowchart LR
  A["データベースページの
サブプランタブを開く"] B["新規作成
名前・説明・画像
利用時間など入力"] C["有効にする"] D["会員側に表示開始"] A --> B --> C --> D
2
予約枠を設定する

作成したサブプランに対して、曜日ごとの予約枠を設定します。「月曜の10:00〜11:00は定員2名」のように設定できます。

📅曜日ごとに個別設定
時間帯(開始・終了)を指定
👥枠ごとに定員を設定
枠ごとに有効/無効を切替
🔒1日の利用回数制限を設定可能
想定される画面構成
  • サブプラン詳細画面の中に「予約枠」セクション
  • 曜日を選択 → 時間帯・定員を入力するフォーム
  • 設定済みの枠を一覧表示(編集・削除可能)
3
特定日の枠を調整する(オーバーライド)

通常の曜日設定はそのままに、特定の日だけ枠を変更できます。スタッフのシフト変動や機器の故障が起きた時に、臨時で対応するための機能です。翌日以降は元の曜日設定に自動で戻ります。

🚫故障時 → その日の定員を0に
🎉イベント時 → 定員を増やす
flowchart LR
  A["対象のサブプランを開く"]
  B["オーバーライド設定"]
  C{"変更内容"}
  D["定員を0に
受付停止"] E["定員を変更
増枠 or 減枠"] F["その日だけ反映
翌日以降は元に戻る"] A --> B --> C C -- "休止" --> D --> F C -- "枠数調整" --> E --> F
4
カレンダーで予約状況を確認する

管理者がサブプラン予約の状況を確認できるようにします。来店予約は件数が多くカレンダー上で流動的に入れ替わるため、サブプラン予約を絞って「誰がどのサービスをいつ使うか」を把握できる表示が必要です。

表示方法については検討中です。来店予約と同じカレンダー上にまとめて表示する方法と、サブプラン予約だけを別表示にする方法が考えられます。どちらの方が管理上見やすいか、ご意見をお聞かせください。

表示に必要な情報
  • プラン名(よもぎ蒸し、エステマシン等)
  • 会員名
  • 時間帯
📱
会員側の画面
5
来店予約と一緒にサブプランを予約する

会員が来店予約をする際、確認画面でサブプランをオプションとして追加選択できます。サブプラン選択は来店予約と同じ画面内で完結させます(別ページに遷移すると認知負担が大きいため)。

画面の要素
  • プログラム選択カードの下に「サブプラン(オプション)」エリアを追加
  • 利用可能なサブプランがカード形式で一覧表示
  • チェックボックスでサービスを選択
  • 選択すると時間帯のプルダウンが表示される
  • 各時間帯に「残り○枠」を表示
  • 定員に達した枠は選択不可で「予約枠なし」と表示
  • サブプランがない店舗では「利用可能なサブプランはありません」と表示
flowchart TB
  A["来店予約画面で
日時を選択"] B["プログラムを選択"] C["確認画面に進む"] D["サブプラン選択エリアが
表示される"] E["利用したいサブプランに
チェックを入れる"] F["時間帯を
プルダウンで選択
残り枠数が表示される"] G["予約確定ボタン
来店 + サブプランを
同時に送信"] H["確認メールが届く
サブプラン情報も記載"] A --> B --> C --> D --> E --> F --> G --> H
6
既存の予約に後からサブプランを追加する

先に来店予約だけしておいて、後から「やっぱりよもぎ蒸しも使いたいな」となった場合に、サブプランを追加できます。来店予約の作り直しは不要です。

画面の要素
  • 予約詳細画面に「サブプランを追加」ボタンを配置
  • 押すと、来店予約の時間範囲内で利用可能なサブプランと空き枠が表示
  • 選択して追加を確定
flowchart LR
  A["予約一覧から
既存の予約を開く"] B["サブプラン追加
ボタンを押す"] C["空き枠を見て
サブプランを選択"] D["追加を確定"] E["確認メールが届く"] A --> B --> C --> D --> E
7
キャンセルする(2パターン)

キャンセルには2つのパターンがあります。生理などの都合でサブプランだけ取りやめるケースと、来店自体をキャンセルするケースです。

flowchart TB
  Q{"何をキャンセル?"}
  Q -- "サブプランだけ" --> A1["サブプラン予約を
キャンセル"] A1 --> A2["来店予約は
そのまま残る"] A2 --> A3["通知メールが届く"] Q -- "来店予約ごと" --> B1["来店予約を
キャンセル"] B1 --> B2["紐づくサブプラン予約も
自動でキャンセル"] B2 --> B3["通知メールが届く"]
画面の要素
  • 予約詳細画面にサブプランのキャンセルボタンを配置
  • 来店予約のキャンセル時は、サブプランも一緒にキャンセルされる旨を確認ダイアログで表示
予約ルールと通知
時間範囲
サブプラン予約の時間帯は、来店予約の時間範囲内に収まる必要があります。
👥
定員管理
各枠に定員があり、定員に達すると「予約枠なし」と表示されます。
🚫
重複不可
同じ時間帯に複数のサブプランを重ねて予約することはできません。
🔢
予約枠数の上限
メインプランの契約年数に準拠します(1年契約: 3枠 / 2年契約: 4枠)。
メール通知
予約確認・キャンセルのメールは来店予約と同じ1通にまとめ、サブプラン情報(プラン名・時間帯)を文面に含めます。サブプラン用に別メールは送りません。
🔗
参考

現在ペライチで運用している予約ページです。移行元のイメージとしてご参照ください。

🔗 ペライチ予約ページを開く