Behind the build — Day 022
day22は、ハンバーガー屋のモバイルオーダー。チェーン店でおなじみの「先に頼んで、着いたら受け取るだけ」を、個人のお店でもできるようにしました。お客さんは並ばない。お店は、いつも使っているものだけで受けられる——メニューはスプレッドシート、受け取り時間はスマホのあの「回して選ぶ」画面、注文はLINEで送るだけ。
01
メニュー（商品名・説明・値段・売り切れ）は、Googleのスプレッドシート1枚で管理しています。お店の人はそこを書き換えるだけ。新商品を1行足せばサイトに増えるし、売り切れを「売切」に変えれば、その品はサイトで自動的に灰色になって選べなくなります。管理画面も、ログインも、ありません。ふだんの表計算と同じ場所で、メニューの更新が終わります。
写真のことメニューに1品ずつの写真は載せていません。スプレッドシートに写真は入れられないので、文字だけをスプレッドシートで管理して、見た目はサイト側が守る形にしました。おいしそうに見せる役目は、上の大きな1枚の写真にすべて持たせています。
02
受け取り時間は、スマホでアラームをセットするときの、あの「くるくる回して合わせる」画面をそのまま持ってきました。日付・時・分を回して、30分刻み、数日先まで選べます。スマホのアプリでみんなが毎日触っている操作なので、説明がいりません。この連載でずっとやってきた「便利なアプリの画面を、そのままサイトに持ってくる」の、今回はここが主役です。
気をつけたこと選べる一番早い時間は「今から1時間後」から。過ぎた時間や、間に合わない時間をうっかり選べないよう、開いた瞬間に一番早い枠へ自動で合わせています。
03
「LINEに送る」を押すと、お店の公式LINEのトークが開いて、注文の内容がもう入力された状態になります。お客さんは、そのまま送信するだけ。届いた注文は、お店がいつものLINEで読んで用意します。裏で勝手に何かが動く仕組みは入れていないので、お店の人は、ふだんどおりLINEを見るだけ。難しい設定はいりません。
送られるのは、こんなメッセージです。誰が読んでもすぐ分かるように、商品・合計・受け取り時間を並べています。
04
注文が届いたら、お客さんに「受け付けました」と自動で返したい。これは、LINE公式アカウントの自動返信を一度ONにするだけで用意できます。プログラムは書きません。ここにキャンセルのお願いも添えておけば、お客さんは送った直後に、確認と一緒に受け取れます。
05
デザインは、最初は黒を基調にした落ち着いた案で組んでいました。でも、お店の写真（鮮やかな黄色の背景に、手に持ったバーガー）を見て方向を変えました。写真の黄色を、そのままお店の色に。黒の極太文字を合わせて、昼・食べたい・軽やか、の空気に振っています。写真の黄色と背景の黄色をぴったり同じにしたので、手とバーガーが黄色の中に浮いて見えます。ハンバーガーは、写真が一番強い。だから写真に働いてもらいました。
スプレッドシート、LINE、スマホでおなじみの操作——お客さんもお店も、すでに毎日使っているものだけでできています。新しく覚える道具はゼロ。それでも、並ばずに受け取れる。スプレッドシート、LINE、Googleカレンダー、Googleドキュメントに続いて、今回はモバイルオーダー。いつもの道具が、そのまま仕組みになる話でした。100連発は、まだ続きます。
