Behind the build — Day 019

つくり方の全容

これまで(day16〜18)の予約カレンダーは、「空きを見せて、予約は LINE か電話で人が返す」形でした。day19 はそこを一歩進めて、LINEで送るだけで予約がそのまま入り、サイトの空きも自動で ◯→✕ に更新されるようにしました。予約はお店の Google カレンダーに記録され、お客さんの名前はサイトに出ません。題材は、大人のためのピアノ教室「Encore(架空)」。実際に動く形まで作って、順番に。

LINEのトーク画面。お客さんが『予約をお願いします。7/11(土) 13:00〜 個人レッスン60分』というメッセージを送ると、すぐに『ご予約を承りました。7/11(土) 13:00〜 60分 お気をつけてお越しください。』と返信が届いている
枠を選んで送るだけで、その場で「承りました」

01

送るだけで、
予約が入る。

サイトの予約カード。選んだ枠『7/10(金) 11:00〜 / 個人レッスン 45分』がまとまり、金色の『LINEで予約する』ボタンと、『枠を選んでLINEで送信すると、その場でご予約が確定します。会員登録も、予約システムへのログインもいりません。』という説明がある
枠を選ぶと、LINEに送るメッセージができあがる

サイトで空いてる枠(◯)をタップすると、日時とメニューが入ったメッセージが LINE に用意されます。あとは、そのまま送るだけ。すると数秒で「ご予約を承りました」と返信が届きます。お客さんがするのは LINEで送る、これだけ。アプリを入れる必要も、会員登録も、予約システムにログインすることもありません。これまでは店主が手で返事をしていたところを、送った瞬間に予約が確定するようにしました。

出した指示枠を選んでLINEで送ったら、店主が手で返事をしなくても、その予約がそのまま入るようにして。お客さんは送るだけで済むように。

02

サイトの空きも、
自動で更新される。

予約が入る前のカレンダー。土曜11日の13:00は◯(空きあり)
予約前 — 土 13:00 は ◯
予約が入った後のカレンダー。土曜11日の13:00が✕(満席)に変わっている
予約後 — 同じ枠が ✕ に

予約が入ると、サイトのその枠が ◯ から ✕ に変わります。誰かが予約したら、次にサイトを見た人には、もうそこは空いていない。手で直さなくても、サイトの空き状況がいつも本当の状態になります。動画では、送信のあとにくるくると読み込みが回って、その枠が ✕ に切り替わる様子が見られます。

出した指示予約が入ったら、サイトのその枠を自動で✕にして。次に見た人には、もう空いていないことが伝わるように。

03

予約は店主のカレンダーへ。
名前は、サイトに出さない。

店主のGoogleカレンダーの予定一覧。『ご予約/Yuki Hattori(60分) 13:00』という予約が、名前つきで記録されている
店主のカレンダーには、名前つきで記録される

送られた予約は、お店の Google カレンダーにそのまま書き込まれます。店主はいつものカレンダーを開けば、誰がいつ来るかが分かる。予約管理のために新しいアプリを覚える必要はありません。一方で、サイトに渡すのは「その時間が空いているかどうか」だけ。お客さんの名前は途中で捨てられ、サイトには一切出ません。店主の手元には名前つきで残り、公開されるのは ◯✕ だけ。これは day16 から続けている考え方です。

出した指示予約は店主のGoogleカレンダーに名前つきで入れて。でも、その名前はサイトには絶対に出さないで。サイトに出すのは時間の空き具合だけにして。

04

接客中でも、
二重予約は起きない。

手で予約を受けていると、こんなことが起こりえます——店主がレッスン中で手が離せないあいだに、別の人が同じ時間を予約してしまう。サイトにはまだ「空き」と出ているからです。そこで、予約を書き込む直前に、もう一度「その時間がまだ空いているか」を確認するようにしました。もし先に埋まっていたら、「すみません、その時間はちょうど埋まってしまいました」とお返しします。派手な機能ではありませんが、予約が"回る"ために欠かせない一手です。今回は、ここまで実際に動く形にしてから公開しています。

出した指示二人が同時に同じ枠を送ってきても、片方だけが入って、もう片方には「先に埋まりました」と返すようにして。

05

そして、完成形。

完成形 PC。白地に黒(ピアノブラック)のヘッダー、金の見出し、白黒のピアノ写真。今週の空きの週間◯✕カレンダー、予約カード、レッスンと料金、講師のことば、アクセスが並ぶ
完成 — Encore(PC)
完成形 SP。縦長画面に、白黒のピアノ写真のファーストビュー、週間◯✕カレンダー、予約カード、レッスンと料金、講師のことば、アクセスが積み上がる
完成 — Encore(SP)

お客さんは、LINEで送るだけ。店主は、いつものカレンダーを見るだけ。あいだの仕組みが、予約を書き込んでサイトを更新し、名前は伏せる。デザインは、癒やし系が続いたので気分を変えて、ピアノそのものの色——黒(ピアノブラック)・金・白黒写真で、大人の個人教室らしい静かなトーンにしました。「空きを見せる」だけだった予約カレンダーが、送るだけで予約が回るところまで来た。これが day19 の答えです。

予約はLINEで。
裏は、Googleカレンダー。

お客さんはLINEで送るだけ、店主はいつものGoogleカレンダーを見るだけ。あいだの仕組みが、予約を書き込み、サイトの空きを自動で更新し、名前は伏せる。整体・ネイル・美容室・教室など、1対1で時間を予約する小さなお店で、同じように使える形です。この予約カレンダーは、近く 100連発の中で無料で配る予定です。もう少しだけ、お待ちください。

サイトを見る →