Case Study / Web Application
QRコードから注文できる、
飲食店のためのモバイルオーダーシステム
お客様・店長・厨房・オーナー、4つの役割それぞれに最適化された画面を一つのシステムで提供。Supabase Realtime によるリアルタイム同期で、注文から提供までの流れを店舗全体で共有します。Web デザインだけでなく、設計・実装・運用まで一貫して担当。
実在の店舗ではありません。設計・UI・データはすべてオリジナルで、ポートフォリオ・技術検証を目的としています。同じ仕組みは飲食店だけでなく、宿泊施設のチェックイン／予約・サロン予約・体験施設のオプション販売など、リアルタイム同期と複数ロールが必要な業態に応用可能です（→詳細は本ページ下部）。
— Customer View —
お客様の手元のスマホが、
そのままメニューになる。
卓上に貼られた QR コードを読み取ると、その席専用のメニュー画面が開きます。アプリのインストールは不要。注文はそのまま厨房と店長端末にリアルタイム同期されます。
01 — Why
なぜ作ったか
Background
コロナ禍以降、飲食店ではホール業務の人手不足が常態化しています。一方で、SaaS 型の既存モバイルオーダー製品は月額が高く、中小規模の個人店には導入のハードルが高い、という課題が見えてきました。
「自社で持てる、軽くて、世界観も崩さないモバイルオーダーをつくれないか」 ── そんな問いから、このシステムは始まっています。
Goal
・お客様にアプリインストールを強いず、QR を読むだけで注文を完結できること
・店長／厨房／オーナー、それぞれが必要な情報だけ見られるロール分離
・注文から提供までの状態が、関係者全員にリアルタイムで共有されること
・店舗のブランド世界観（和の落ち着き）をそのままUIに落とすこと
02 — Approach
4つの役割を、ひとつのシステムで
飲食店オペレーションを観察し、必要な画面を「お客様／店長／厨房／オーナー」の4ロールに分解。それぞれに最適化された UI を設計し、Supabase Realtime で全員の状態を同期しています。
01
Customer
お客様
QR から開ける注文画面。落ち着いた和のトーンを保ちつつ、品切れ商品はリアルタイムで非表示に。
02
Manager
店長
メニュー編集・カテゴリ管理・QR 発行・スタッフ管理。在庫状態のトグルが即時に客側へ反映。
03
Kitchen
厨房
新規 → 調理中 → 提供済の3カラムで進行を視覚化。新規注文時にサウンドで通知。
04
Owner
オーナー
本日／週／月の売上分析。注文件数・客単価・テーブル稼働率を一画面で確認。
03 — Screens
主要な画面
4つのロール、それぞれの画面を紹介します。実装は Next.js App Router によるマルチテナント構成（/order/[shopId] 等）で、1つのシステムで複数店舗の運用にも対応できます。
01 — Customer
お客様の注文画面
QR 読み取り後、店舗の世界観をそのまま映したメニュー画面が表示されます。「御酒／御料理／御献立」のカテゴリで切り替え、商品ごとに料理写真・解説・価格が並ぶエディトリアル風レイアウト。タップひとつでカートに追加でき、テーブル番号は QR から自動取得されるため、お客様は何も入力する必要がありません。
02 — Manager
店長：お品書きの編集
ドラッグで並び替え、トグルひとつで品切れ切替、鉛筆ボタンで個別編集。CSV インポートでメニュー一括投入も可能です。在庫状態の変更は Supabase Realtime を介して即座に客側の注文画面に反映されます（在庫切れの商品はカートに追加できなくなる）。
03 — Kitchen
厨房：注文進行ボード
注文を「新規 → 調理中 → 提供済」の3カラムで管理。新規が入ると音で通知、ボタン1つで状態遷移できます。厨房タブレットを想定した、文字大きめ・コントラスト強めの設計。テーブル番号と注文時刻を大きく表示し、忙しい時間帯でも瞬時に判断できるよう情報の優先順位を整えています。
04 — Owner
オーナー：売上分析ダッシュボード
本日／週／月の3粒度で、売上高・注文件数・テーブル稼働率の推移を可視化。前日／前週比のデルタも自動算出。CSV エクスポートにも対応し、税理士への共有や経営判断にそのまま使える形に。データはリアルタイムで集計されるため、営業中の状況把握にも活用できます。
04 — Stack
技術スタック
パフォーマンスと運用コストのバランスを重視。すべてのレイヤーで TypeScript を使い、UI から DB スキーマまで型で守られた状態を保っています。
Framework
Next.js 14
App Router / Server Components / Route Handlers
Language
TypeScript
UI ↔ API ↔ DB を型で接続
Database
Supabase (Postgres)
Row Level Security でロール権限を実装
Realtime
Supabase Realtime
注文・在庫変更を全画面に即時反映
Auth
Supabase Auth
マルチテナント＋ロール別認可
Styling
Tailwind CSS
和のトーン（ink / paper / gold）でテーマ化
Hosting
Vercel
Edge Runtime / 自動 Preview Deploy
QR
qrcode.react
テーブル毎に動的生成・印刷向け SVG 出力
Type System
Zod / Type-safe
フォーム入力から DB スキーマまで一気通貫
05 — Highlights
制作で工夫した点
01
リアルタイム同期で「待ち時間ゼロ」
店長が「品切れ」をトグルした瞬間、お客様の注文画面に反映されます。Supabase Realtime（PostgreSQL の WAL 経由）を採用し、ポーリング不要・通信量ミニマムで全画面を同期。「在庫切れの料理を注文してしまう」事故を構造的に防止。
02
マルチテナント前提の URL 設計
パスに [shopId] を含む構造（/order/[shopId]）にすることで、1コードベースで複数店舗の運用が可能に。Row Level Security で他店舗のデータには絶対にアクセスできないよう DB レイヤーで担保。
03
店舗の世界観を崩さない UI
「飲食 SaaS の管理画面っぽさ」を排除し、店舗のブランドトーン（明朝体・和紙のような余白・ゴールドの差し色）を全画面に貫きました。お客様画面はもちろん、厨房ボードや売上分析まで「世界観の一部」として設計。
04
本番運用を意識した運用導線
CSV メニューインポート、QR 一括 PDF 出力、エラー通知パネル、CSV 売上エクスポートなど、「導入初日から困らない」ための運用機能を実装。フロント開発だけでなく運用フェーズの想像力までを設計に織り込みました。
06 — Application
他業態への応用可能性
コアとなる仕組み ──「QR からアクセス → 複数ロールの状態をリアルタイム同期 → ダッシュボードで集計」── は、飲食店以外の業態にも展開可能です。実装の大半をそのまま流用しつつ、業態ごとの語彙とフローに置き換えることで、別の店舗 SaaS にカスタマイズできます。
想定される横展開先
以下のような、「複数の関係者がリアルタイムに状態を共有する必要がある業態」であれば、本システムをベースにカスタマイズ可能です。
-
宿泊施設の予約・チェックイン管理
QR からチェックイン／部屋オプション追加。フロント・客室・清掃・経営でロール分担。 -
サロン・整体院の予約システム
WEB予約 → 担当スタッフ表示 → 来店通知 → 売上集計の一気通貫。 -
体験施設のオプション販売
受付 QR → オプション追加 → スタッフ手元の進行ボードへ。 -
カフェのモバイルオーダー＋ロイヤルティ
注文＋スタンプカード＋会員ランクをひとつのアプリで。 -
イベント会場の事前注文
座席 QR から注文 → 売り子に最適配信 → 集計まで自動。 -
製造業・倉庫の作業進行ボード
厨房モデルを工程に置換。新規／作業中／完了の3カラムを応用。