Tableo
飲食店のQRコードを、ただのPDFではなく販売チャネルに。
- 年
- 2026
- 制作期間
- 9週間
- 技術スタック
- React · TypeScript · Vite · Supabase · Vercel
- プロダクトデザイン
- モバイルデザイン
- 開発
- データベース
- 決済
Kayzen Webが開発・運営する製品です。正式なドメインに移行するまで、Vercelのプレビュー用アドレスで公開しています。
- スキャンからメニュー表示まで
- < 1秒
- Lighthouseパフォーマンス
- 91/100
- Lighthouseアクセシビリティ私たちの基準である95を下回っています。指摘されたのは各レストランのブランドカラーをそのまま使ったメニューのコントラストで、次回の改修で適合させる予定です。
- 87/100
解決すべき課題。
背景
Tableoは、レストランのテーブルに置かれたQRコードを、完全なインターフェースに変えます。常に最新のメニュー、注文、決済、口コミの収集、そして来店データです。
制約
QRコードは2020年以降、評判がよくありません。最初は読みにくいPDFを表示するために使われたからです。製品は、騒がしい店内、片手での操作、混雑した回線、急いでいる客という不利な状況の中で、モバイルの最初の画面からその記憶を拭い去る必要がありました。
解決策
管理画面ではなく、まず客側の画面を設計しました。メニューはインストールもアカウントも不要で1秒以内に開き、片手でも読みやすさを保ちます。店主向けのダッシュボードはその後に作り、客側の画面が実際に生み出すデータに合わせて設計しました。
納品時に計測したスコア。
本番環境のサイトのLighthouseスコアです。数値はそのまま公開しています。低いスコアがあれば、その原因と改善計画を下に記載しており、伏せることはしません。
すべての判断に、理由がある。
親指のための設計
カテゴリのナビゲーションは画面下部、親指の届く範囲に固定しています。タップ領域は最小44px。レストランのメニューは、立ったまま、片手で、もう一方の手にグラスを持って見るものです。
写真は任意、必須ではない
すべての料理のきちんとした写真を持っているレストランはわずかです。メニューは画像がなくても上品に見え、写真がある場合はあくまでプラスアルファであって、ページの骨格ではありません。
一目で読めるダッシュボード
店主はランチとディナーの合間にダッシュボードを確認します。上部に3つの数字、残りはスクロールした先に。注意深く読み解く必要のあるグラフはひとつもありません。
プロジェクトのカラーパレット
セピア
#7C4A21
アイデンティティ、見出し
クリーム
#FBF7F0
メニューの背景
インク
#1C1917
テキスト
オーダーグリーン
#15803D
確認表示
タイポグラフィ体系
見出し用書体
Outfit 700
本文用書体
Inter 400
価格は等幅数字で右揃えにしています。揃っていない価格の列は、雑なメニューに見えてしまいます。
その裏側にある技術。
- React
- TypeScript
- Vite
- Supabase
- Vercel
Supabaseのリアルタイム機能
注文はリアルタイムのサブスクリプションで厨房に即座に届きます。定期的な再読み込みでは、最も目立つところに遅延が生じていたでしょう。
店舗ごとのデータ分離
行単位のアクセスポリシーにより、あるレストランが別のレストランのデータを読むことは構造的に不可能です。マルチテナントの製品では、このルールはアプリケーションのコードではなくデータベースが担うべきものです。
決済は外部に委託
カード情報が製品を経由することは一切ありません。入力とPCI準拠は決済代行事業者が担います。この規模のチームにとって、唯一の合理的な選択です。
検索で見つけてもらうための仕組み。
SEOはソフトウェアの販売のために
レストランのメニューはインデックスされるべきものではありません。毎日変わり、どのクエリにも応えないからです。SEOがターゲットにするのは「テーブルオーダー システム」「QRコード メニュー レストラン」といった、店主が検索するクエリです。
誰もが使えるように。
2025年6月から、欧州アクセシビリティ法（European Accessibility Act）により、多くのオンラインサービスにデジタルアクセシビリティが義務づけられています。当社は後から対応するのではなく、設計段階から取り組んでいます。
メニューのコントラストを見直す
レストランのメニューは、白地に薄いグレーを多用しがちです。価格やアレルゲン表示を含め、すべての組み合わせを4.5:1以上にしました。アレルゲン表示の読みやすさは、快適さだけの問題ではありません。
納品したもの。
- 製品サイト
- 客側の画面（QR）
- 店主向けダッシュボード
- 料金
- アカウント
プロジェクトの流れ。
客側の画面
管理画面のコードを1行も書く前に、店内でモバイルのプロトタイプをテスト。
管理画面
メニュー、カテゴリ、提供可否、営業時間。
注文と決済
厨房へのリアルタイム連携、決済代行事業者。
アナリティクス
来店状況、よく見られている料理、平均客単価。
