SAC Private Club · Final Design

予約特典 — 確定デザインまとめ

個別コンサルティング予約を「予約特典」として整え、お客様サイト+管理サイト両方に最小の追加でフル機能を実装する設計案

User Side · Normal

お客様サイト「特典状況」ページ

予約URLが設定された特典は最上部にヒーローカードとして表示。「予約する」ボタンタップでGoogleカレンダーの予約フォームを別タブで開きます。下に通常の特典が続く構成。

sac-private-club.vercel.app / benefits

特典状況

プライベートクラブ会員の特典と利用状況をご確認いただけます

Private Reservation

紗希との 30 分のひととき

資産設計、ビジネス、これからの人生について。
15:00 〜 19:00 のあいだでご都合のよい時間をお選びください。

2 残り / 月3回まで
予約する
所要時間 30 分 / オンライン
ご予約後、確認メールが届きます

VIPイベント優先招待

月例イベントの先行案内・抽選優遇

無制限

提携施設ご利用優待

提携ホテル・レストランでの優待価格でのご利用

5

残り / 上限10

9:41● ● ●

特典状況

PC会員の特典と利用状況

Private Reservation

紗希との 30 分のひととき

資産設計、ビジネス、これからの人生について。
15:00 〜 19:00 でお選びください。

2残り / 月3回
予約する
所要時間 30 分 / オンライン

VIPイベント優先招待

先行案内・抽選優遇

無制限

提携施設優待

5

残り / 10

User Side · Edge case

残り回数が 0 になった月の表示

CTAをグレーアウトして「次回は来月以降」のメッセージを優しく表示します。利用履歴は引き続き展開可能。

Private Reservation

紗希との 30 分のひととき

今月分はすべてご利用いただきました。
来月、またお目にかかれることを楽しみにしております。

0 残り / 月3回まで
次回は来月以降ご利用いただけます
Admin · Benefits Master

管理サイト:特典マスタ編集フォーム(変更)

既存の特典編集モーダルに「予約URL」「ボタンラベル」の2項目を追加。URLが入っていれば、お客様サイトでヒーローカードに昇格表示されます。

URLを設定すると、お客様画面でこの特典が予約特典カードとして強調表示されます。空欄なら通常の特典として表示します。
空欄なら「予約する」が使われます。「面談を申し込む」など特典に合わせて変更可能。
Admin · Manual Count

管理サイト:顧客別状況での「+1 利用として記録」

面談を実施し終えたら、紗希さんもしくは管理者が顧客別状況タブで「+1」ボタンを1クリック。確認ダイアログを挟み、利用履歴に1件追加されます。

Selected Benefit
紗希との 30 分のひととき
月上限3回 · 予約URLあり
お客様 利用回数 最終利用 操作
山田 太郎
member1@example.com
2 / 3 2026/04/18 16:00
田中 花子
member2@example.com
0 / 3 未利用
佐藤 一郎
member3@example.com
3 / 3 2026/04/29 16:30
山田 太郎 様の「紗希との 30 分のひととき」を1件、利用履歴に追加しました
Workflow

運用の流れ(紗希さん視点)

面談予約から記録までの一連のフローです。Googleカレンダー側はそのまま現状維持で、サイトの世界観だけきれいに整えます。

1
お客様が「特典状況」ページを開く 最上部のヒーローカードで予約特典を確認 (残り回数を確認)
2
「予約する」ボタンをタップ 別タブでGoogleカレンダーの予約フォームが開く (モバイルはGoogle側がレスポンシブ対応)
3
お客様が日時を選んで予約完了 Googleからお客様と紗希さんに自動で確認メール
4
面談を実施 ZoomまたはGoogle Meetで30分
5
面談後、管理サイトで「+1 利用として記録」をクリック お客様の利用履歴に1件追加 (夕方のチェックリストに組み込み可)
Implementation

必要な実装の総量

小さくまとめれば、データベース1マイグレーション・お客様サイト2ファイル・管理サイト1ファイルの修正で完了する想定です。

DB
  • pc_benefits.booking_url (text, nullable)
  • pc_benefits.booking_button_label (varchar(50), nullable)
  • マイグレーション 1 本追加
User Side
  • benefits-list-view.tsx にヒーロー分岐追加
  • data/benefits.tsbookingUrl を返却
  • 残り0時のグレーアウト処理
Admin Side
  • 特典マスタ編集に2フィールド追加
  • 顧客別状況タブに「+1」ボタン追加
  • 確認ダイアログ → 既存利用履歴API呼び出し
Manual
  • 5-6 特典状況に予約特典の概念を追記
  • 夕方チェックに「面談実施後に+1記録」を追加