Behind the build — Day 017

つくり方の全容

day17 は、女性のためのアロマ・リラクゼーションサロン「Sprout(架空)」。セラピストがひとりで営む、小さなお店です。トップに出るのは、予約サイトでよく見る週間の◯✕カレンダー。今週のどこが空いているか、一目でわかります。でも、この空き表の正体は——店主が普段使っている、無料の Google カレンダー1枚。予約が入ればサイトの◯が✕に変わり、お客さんの名前はサイトに出ません。毎月の掲載料も、専用の予約システムも、ありません。前回(day16)の仕組みを、もっと見慣れたカレンダーの形にした回です。完成したサイトと、その仕組みを順番に。

Sprout のサイトの週間カレンダー。縦に 10時〜18時、横に月曜から日曜が並び、各枠に◯(空きあり)・✕(満席)・−(休み)が入る。上には『アロマボディ/フットケア/ヘッドスパ』のメニュー選択と『60分・90分・120分』の時間選択がある
サイトのトップ。予約サイトでよく見る、週間の◯✕カレンダー

01

見慣れたカレンダーで、
今週の空きが一目。

週間カレンダー。月曜始まりで、今日(月曜)から日曜まで。◯が空き、✕が満席、−が定休の水曜。人気店らしく◯と✕が程よく散らばっている
月曜始まりの週間ビュー。◯が空き、✕が満席、−が休み

まず決めたのは、とにかく分かりやすくすること。凝ったレイアウトより、予約サイトで誰もが見慣れた「週間の◯✕カレンダー」をそのままトップに置きました。月曜始まりで、今週のどこが空いているかが一目でわかる。営業時間(10〜20時)や水曜定休は自動で反映され、過ぎた時間には◯が出ません。SNS で動画にしたとき、◯がパッと目に飛び込むことも狙って、空きの緑を少し強くしています。

出した指示予約サイトでよく見る、週間の◯✕カレンダーをトップに置いて。今週の空きが一目でわかるように。カレンダーは月曜始まりで、◯や✕は枠の中央にそろえて。

02

受けたいメニューを選ぶと、
行ける枠が変わる。

アロマボディ120分を選んだ状態のカレンダー。まとまった2時間の空きが必要なので、◯が少なめになっている
アロマボディ 120分。長いぶん、入れる枠は絞られる
ヘッドスパ30分を選んだ状態のカレンダー。短い時間で収まるので、同じ週でも◯が増えている
ヘッドスパ 30分。短いぶん、入れる枠が増える

リラクゼーションの「空いてるか」は、受けたいメニューで変わります。アロマボディ 120分ならまとまった 2時間、ヘッドスパ 30分なら短い空きでも入れる。だから「◯時から空いてます」だけでは足りません。そこで受けたいコースを選ぶと、その所要時間ぶん続けて空いている枠だけを◯にしました。長いコースほど、入れる日は絞られます。選んだ内容で、行ける枠が変わる。前回(day16)の考え方を、カレンダーの形に移しています。

出した指示受けたいコースを選んだら、その所要時間ぶん続けて空いている枠だけを◯にして。長いコースを選ぶと、まとまった空きがある日にしか入れない、というのが分かるように。

03

空きの元は、店主のGoogleカレンダー。
名前は、サイトに出さない。

スマホの Google カレンダーで新規予定を作る画面。開始 2026/07/04 14:00、終了 15:30、タイトルは『アロマボディ90分 佐藤さん』、カレンダーの種類は『Sprout 予約』が選ばれている
店主はいつものカレンダーに、名前つきで書くだけ
サイトの週間カレンダー。日付と時刻ごとに◯✕が並ぶだけで、予約者の名前はどこにも出ていない
サイトに出るのは◯✕だけ。名前はどこにもない

ここが一番大事なところです。カレンダーには「アロマボディ90分 佐藤さん」と、お客さんの名前が入っています。これがそのままサイトに出ては、お店として困ります。そこでサイトが受け取るのは「その時間が空いているかどうか」だけにしました。名前や内容は途中で捨てられ、サイトには一切届きません。店主は名前つきで普段どおり書けて、サイトに出るのは◯✕だけ。カレンダーの種類も、普段使いのままで大丈夫——専用のものに分けても、分けなくても動きます。両立させることが、この仕組みの肝です。

出した指示店主はいつもの Google カレンダーに名前つきで予約を書くけれど、その名前は絶対にサイトに出さないで。サイトに渡すのは「何時から何時が埋まっているか」という時間だけにして。

04

予約は、LINEか電話で。
会員登録も、いらない。

サイトの予約カード。選んだ枠『6/30(火) 10:00〜 / アロマボディ 90分』がまとまり、緑の『LINEで予約する』ボタンと『電話する 03-0000-0000』が並ぶ。下に『ネット予約システム・会員登録はありません。この日この時間、空いてますか、だけで大丈夫です』
空いてる枠を選ぶと日時がまとまる。あとは LINE か電話で

空いてる枠をタップすると、「6/30(火) 10:00〜 / アロマボディ 90分」と日時とコースがまとまって、LINE のメッセージに最初から入った状態になります。あとは送るだけ。予約フォームも、会員登録も、ありません。ひとりで店に立つ人にとって、ネット予約システムは維持のほうが負担になりがち。お客さんの側も、会員登録なしで「空いてますか」だけで済むところまで削りました。決めるのは人と人で、いい。

出した指示予約システムは作らない。空いてる枠を選んだら、その日時とコースが LINE のメッセージに入った状態にして、送るだけで伝わるように。会員登録もいらないように。

05

そして、完成形。

完成形 PC。縦長の施術写真を中央に置き左右をサンド色の余白にしたファーストビュー、週間◯✕カレンダー、コースと時間、予約カード、料金表、サロン紹介、アクセスの順に並ぶ。素肌ベージュとキャメル、セリフ体の上品なトーン
完成 — Sprout(PC)
完成形 SP。縦長画面に、施術写真のファーストビュー、週間◯✕カレンダー、コース選択、予約カード、料金、紹介、アクセスが積み上がる
完成 — Sprout(SP)

お客さんは、受けたいコースを選ぶだけで行ける枠が分かる。店主は、いつものカレンダーに予約を書くだけ。あいだをつなぐ仕組みが、名前を伏せて時間だけを運ぶ。デザインは、アロマにありがちな淡いピンクや筆記体を避けて、素肌に近いベージュとキャメル、セリフ体で静かにまとめました。毎月の掲載料も、専用の予約システムも要らず、無料の Google カレンダー1つで、ひとりのサロンが「今週、空いてる?」に答えてくれる。これが day17 の答えです。

「今週の空きは、
無料のGoogleカレンダーで」。

予約サイトに毎月の掲載料を払わなくても、見慣れた週間◯✕カレンダーは、無料の Google カレンダー1枚で見せられます。整体・マッサージ・ネイル・まつげ・エステなど、1対1で時間を予約する小さなお店なら、同じ仕組みで応用できます。予約が入ればサイトの空きが減り、お客さんの名前は、サイトに出ません。100連発の中で、もう少し追いかけてみます。

サイトを見る →