WORKS
WEB

QR ORDER / GUEST 飲食店QRオーダー｜お客さまUI

  • Thymeleaf
  • 素のCSS
  • 素のJavaScript
  • SSE
  • Responsive
  • Figma

実店舗のお客さまが実際に触る画面（卓番QRセルフオーダーシステムの、お客さま側）

スマホ注文画面をひらく スタッフUI のページへ

ログイン不要で開けます。スマホで見ると実店舗とまったく同じ体験になります。 デモのデータはすべて架空です。実店舗の営業データとは別のデータベースで動いています。 無料枠のため、時間帯によっては最初の1回だけ起動に30〜40秒かかります。

お客さま側の3画面。左からメニュー、ご注文内容の確認、お席の伝票

OVERVIEW

プロジェクト概要

課題

この画面を操作するのは店のスタッフではなく、はじめて来たお客さまです。 説明できる人が横にいません。使い方を間違えたとき、困るのはお客さまで、 その場で呼ばれるのはいちばん忙しい時間帯の店員です。 「分かりにくい」がそのまま人件費になります。

目的

席のQRを読んでから会計まで、一度も人に聞かずに進めること。 そのために、聞かれそうなことを聞かれる前に画面側から出す方針で組みました。 迷う場所に注意書きを置き、押す前に何が起きるかを先に見せています。

FLOW

お客さまがたどる道

  1. SCAN

    席のQRを読む。卓はURLで決まるので、お客さまは席番号を入力しない。

  2. SEAT

    人数を選ぶ。テーブルチャージの計算に要るので、最初にここだけ聞く。

  3. PICK

    お食事・ドリンク・サービス・伝票の4タブ。写真と価格を見て注文リストへ入れる。

  4. SEND

    内容を確認して確定。ここを押してはじめて厨房のボードへ届く。

  5. WATCH

    厨房が品を進めると、SSEでお客さまの伝票もリロードなしで変わる。

SCREENS

3つの画面

お客さまが触るのはこの3画面だけです。画像を押すと拡大できます。

RETROSPECTIVE

振り返り・工夫した点

SAY IT BEFORE THEY ASK

セルフオーダーでいちばん多い不安は「これ、もう注文されちゃったの？」です。 押した覚えがないのに届いていたら困るし、押したつもりで届いていなければもっと困ります。 そこで確認画面の見出しを「まだ注文は未確定です。」にし、 「いちばん下の『この内容で注文する』を押すまで厨房には届きません」と本文で繰り返しました。

同じ考えで、伝票にはテーブルチャージを「¥450 × 2名」と式のまま出しています。 合計だけ出すと「この900円は何？」になり、結局スタッフが呼ばれます。 深夜料金も、掛かっていない時間帯でも「23:00〜05:00 のご注文には」と条件ごと書いてあります。 会計の場でいちばん困るのは金額の高さではなく、説明できない項目があることでした。

THE TERMINAL YOU DON'T BUY

卓に置く専用端末は買っていません。お客さま自身のスマホを使います。 価格はピンキリですが、前職で導入していたものは1台6万円ほどでした。 こわれれば修理に出し、機種が古くなれば席数ぶんを一度に入れ替えることになります。 セルフオーダーで人手を減らしても、浮いたぶんが更新のたびに端末代として戻ってくる。 席のQRを読んでもらう形にしたのは、この費用を店が持たなくて済むからです。

PUT IT WHERE THEY GET LOST

このシステムはいきなり「人数をお選びください」から始まります。 実店舗なら席のQRを読んだ本人が開くので前提が共有されていますが、 ポートフォリオのボタンから直接来ると、なぜ人数を聞かれるのか分かりません。 サイト側にも書きましたが、読まずに押す人のほうが多いので、 アプリの人数入力画面そのものに前置きを出すようにしました。 説明は、読んでほしい場所ではなく迷う場所に置くものでした。

THE OWNER PICKED THE MINUS

注文リストから1行消すボタンを、最初は「×」で作りました。 店主に見せたところ指定は「−ボタン」でした。 ×は「閉じる・取り消す」に見えて、注文そのものを取りやめる操作と紛らわしいからです。 実際いまも、数量の「−」と行削除の記号は意味が地続きになっています。 記号の意味は作り手ではなく、その場で使う人が決めます。

THE CANCEL THAT WENT AWAY

伝票には当初「ご注文 #119 をキャンセル」という取り消しボタンがありました。 しかしその画面には注文番号をどこにも出していません。 #119がどれのことか、お客さまには分かりません。 ボタンを消し、送信先の口（POST）も一緒に閉じて、 取り消しはスタッフへお声がけいただく運用にしました。 押せるのに意味が分からないボタンは、無いほうが親切でした。

THE REAL REASON IT WOULDN'T STICK

メニューのカテゴリタブが上に固定されない、という不具合がありました。 最初はヘッダーの高さが原因だと考えて直しましたが、それでも貼り付きません。 本当の原因は position: sticky の性質でした。 sticky は親要素の箱の中でしか貼り付きません。 タブを包む要素がタブと同じ高さしかなく、貼り付く余地が0だったのです。

症状が同じでも原因は別、という良い例でした。 「ありそうな原因」を1つ直して直らなかったときに、 もう1つ足すのではなく、仕組みのほうを読み直す——この順番を覚えた不具合です。

LIVE

公開デモ（ログイン不要）

ボタンを押すと、そのまま画面が開きます。ID もパスワードも要りません。 これは公開デモ版で、データはすべて架空です。実店舗の営業データとは別のデータベースで動いています。 スマホで開くと、実店舗で席のQRを読んだときとまったく同じ画面になります。 無料枠のため、時間帯によっては最初の1回だけ起動に30〜40秒かかります。

スマホ注文画面をひらく スタッフUI のページへ GitHub でコードを見る

別のタブで店舗管理画面も開くと、注文が厨房のボードに届くところまで確かめられます。

コピーしました