BuddyCompass 予約管理（フェーズ2）・2026-10-08 版

予約管理のプロトタイプ

予約者の画面・事業者の管理画面・事業者のホームページに入れた例を、実際に操作できる形にしたものです。架空の事業者「川あそび工房」のダミーデータで動きます。予約者の画面で入れた予約は、同じブラウザの管理画面にそのまま出ます。

ホームページの例から始める予約者の画面管理画面

今日の日付は2026年10月17日（土）に固定しています。データはこのブラウザの中だけに保存されます。

予約者はどこから入るか

10/8の定例で、最初はホームページへの埋め込みより「URLで飛ぶ予約ページ」を先に用意する方針になりました。ここではその両方を並べています。

1ホームページの「予約する」ボタン
押すと、ページの上に予約画面が開きます（ポップアップ）。ホームページから離れずに予約が終わります。
site.html
 2ホームページに埋め込んだ空き状況
ページの1区画に空き状況のカレンダーを出します。日付と時間を選ぶと、そのまま予約に進みます。
site.html#yoyaku
 3予約ページのURL（SNS・Googleマップ・QR）
ホームページがなくても使えます。Instagramのプロフィール、Googleマップの予約リンク、チラシのQRから開きます。
book.html
 4体験ごとのURL
特定の体験の詳細から始まります。投稿や広告から1つの体験へ直接つなぐときに使います。
book.html#/e/canoe

予約してから当日まで

予約者はアカウントを作らなくても、最後まで進めます。

体験詳細写真や説明が多い体験は「情報多め」（カヌー）、少ない体験は「情報少なめ」（e-bike）の形になります。入れていない節は出しません。
予約する日時と人数 → オプション → 予約者情報 → 内容の確認 の4段（日付・時間・人数は1画面）。オプションがない体験は3段です。カヌーで試す／リクエスト予約（SUP）で試す
確認メール完了の画面から「確認メールを見る」で見本を出せます。メールのリンクから、ログインなしで予約の確認・変更・取消ができます。予約の確認の例
変更・取消取消料はキャンセルのきまり（管理画面の設定）から計算して、取り消す前に金額を出します。予約番号で探す
当日の受付予約の確認の画面にコードが出ます。事業者は管理画面の「当日の受付」で読み取って受付します（見本のためカメラは動きません）。
次の予約完了の画面でパスワードを決めるとアカウントになり、次から名前と連絡先を省けます。ダミー: hanako.yamada@example.com / demo1234

事業者の管理画面

ホーム・予約・カレンダー・当日の受付・体験・顧客・集計・予約ボタン・設定・お知らせ。スマホでは下のタブ、PCでは左のメニューです。

管理者morita@kawaasobi.example / demo1234
ガイドsano@kawaasobi.example / demo1234
予約を見ることと受付だけができる権限の例
新しく始めるアカウントを作る流れ（3段。見本のため、作ったあとは川あそび工房のデータで開きます）
管理画面を開く

試すとよい流れ

  1. カヌー体験を予約する → 管理画面の予約とホームの「今日の回」に出る
  2. SUP講習をリクエストする → 管理画面で「別の日を提案する」 → 予約者の画面（予約の確認）で提案の日に確定する
  3. 管理画面の 体験の料金 を変えて保存する → 予約者の画面の料金が変わる
  4. 管理画面のカレンダーで回を選び「Web受付を止める」 → 予約者の画面でその回が選べなくなる
  5. 管理画面の 当日の受付 で、今日の予約を受付する
  6. エラーの見本: 送信が1回失敗する予約／存在しないページ／入力を空のまま「次へ」
  7. 管理画面の スタッフの招待を受ける・パスワードの再設定
  8. 管理画面の 予約ボタン でコードを作る → ホームページの例 と同じものが出る

このプロトタイプで動かないもの

メールの送信、カード決済、カメラでの読み取り、写真のアップロード、複数の事業者の切り替えは見本の表示だけです。料金の体系・本番のURL・手数料は未決です。画面の正本はFigmaの「🎨BC予約管理-Master」です。