case study / 予約システム
その世界観を、
予約の入り口からかたちに。
東京・阿佐ヶ谷「呼吸の居場所」suha Asagaya 様の予約システム。
予約受付から運営までを一体化し、世界観の伝わる体験を設計しました。
project summary
クライアント
suha Asagaya 様
東京・阿佐ヶ谷／静かに過ごす「呼吸の居場所」
制作物
予約システム
予約受付〜店舗オペレーションを一体化
対応デバイス
スマートフォン最適化
PWA対応・ホーム画面に追加可
background & process
なぜ、既製サービスではなく
つくり直したのか。
suha は「呼吸の居場所」。カフェというより、空間・体験そのものを価値として届ける場所です。
だからこそ「予約」という最初の接点でも、その世界観が伝わる必要がありました。
01 ｜ Googleフォーム期
席（通常席／奥の間）・人数・延長という独特な予約体系が、フォームでは表現しきれませんでした。
02 ｜ 既存の予約サービス期
予約内容の実装自体はできても、「予約という入り口で、店のコンセプトを実現できていない」という課題感が残っていました。ここで andChange にご相談いただきました。
03 ｜ andChange のアプローチ
まず予約体系を整理し、早い段階でモックアップとして「見える形」を共有。そこからは対話しながら小さくつくって確かめる、アジャイル的な進め方で形にしていきました。
既製の予約ツールで"できる"ことと、ブランドとして"届けたい"体験は別物。
andChange はその溝を、設計からデザイン・開発まで一貫して埋めます。
challenge → solution
BEFORE / 課題
—独特な予約体系がフォームでは表現できない
—予約の入り口で「呼吸の居場所」の世界観が伝わらない
—確定・リマインドの連絡が手作業で運用負荷が残る
AFTER / 解決
◆数タップで完結する予約ウィザードを構築
◆確定メール・カレンダー登録・リマインドを自動化
◆スタッフ用管理画面で当日オペレーションまでカバー
成果 ①
「予約対応」という手間そのものを、仕組みが肩代わり。
成果 ②
お客様体験と店舗運営の両方を、ひとつのシステムで完結。
features
お客様側と、店舗側。
ひとつのシステムで。
予約する人の体験と、迎える人の運用。
その両方を、同じ世界観のもとで設計しました。
お客様側 ｜ 予約フロー
世界観から入るイントロ
予約の前に、店のコンセプト・過ごし方・利用案内をやさしく伝えるご案内モーダル。
6ステップの予約ウィザード
人数 → お部屋 → 延長 → 日時 → 情報入力 → 確認。迷わず数タップで完結。
リアルタイム料金計算
席種・人数・延長・貸切料を選ぶそばから、合計金額をその場で表示。
2つの席タイプ ＆ 自動確定メール
静かな通常席（最大4名）と貸切の奥の間（最大6名）。予約と同時に、アクセス・カレンダー登録リンク付きの確定メールを自動送信。
店舗スタッフ側 ｜ 管理画面
当日タイムライン表示
時間枠ごとの予約状況・来店者数・想定売上を、ひと目で把握。
ステータス管理
予約済 → 来店 → 完了 のフローを、タップで進めるだけ。
手動予約 ＆ 営業日設定
ウォークインの登録、受付期間や休業日の設定にも対応。
Gmail ＆ Google カレンダー連携
予約で確定・リマインドメールを自動送信し、Google カレンダーへ登録。キャンセル時も予定を取り消し、空き枠を開放します。
顧客メモ
常連のお客様の情報を、来店のたびに蓄積。
technology
技術は、静かに支える。
使った技術より大切なのは、それがお店とお客様にとって何を意味するか。
React / Vite
スマホで軽やかに動く、待たせない予約画面。
Supabase
予約データが安全に貯まり、顧客情報も蓄積できる。
Google Calendar 連携
予約が自動でカレンダーに入り、二重予約を防ぐ。
メール自動送信
確定・リマインドの連絡を、手を動かさず自動で。
Vercel（サーバーレス）
サーバー管理いらずで、落ちにくく運用がラク。
PWA 対応
ホーム画面に置けて、アプリのように使える。
results / 導入効果
予約方法の問い合わせ
0件 / 月
導入前は Instagram の DM に「予約方法」の問い合わせが届いていましたが、システム化後はゼロに。
来店前の体験
コンセプトを理解して、
来てくださる方が増加。
予約前のご案内で世界観が伝わり、読みたい本を持参するなど、過ごし方の目的を持って来店される方が増えました。
voice / お客様の声
“らしさ”を、こんなに早く形にしてもらえるとは。
予約の入り口から、suha になりました。
suha Asagaya オーナー様
contact
あなたのお店の“らしさ”を、
予約の入り口から。
「予約」は、お客様が最初に触れるお店の顔。suha のように、あなたのお店の世界観や体験を、予約という入り口から届ける仕組みを、要件整理からデザイン・開発・運用まで一貫してお手伝いします。まずはお気軽にご相談ください。
お問合せはこちら→