飲食店モバイルオーダーシステム開発事例 | 注文DX化

プロジェクト背景 — 飲食店が抱える「注文」の課題

飲食店の現場では、注文プロセスに起因する課題が多数存在します。ピーク時のオーダーミス、ホールスタッフの慢性的な人手不足、手書き伝票の読み間違い、そして客単価向上の機会損失。本プロジェクトでは、都内で複数店舗を展開するカフェチェーンを対象に、これらの課題を解決するモバイルオーダーシステムを開発しました。

クライアントの要望は明確でした。「お客様がスマートフォンから直接注文できるシステムを導入し、ホールスタッフの負担を軽減したい」。さらに、既存のPOSシステムとの連携も必須要件でした。

システム全体像

モバイルオーダーシステムは、以下の3つのコンポーネントで構成されます。

お客様用Webアプリ: QRコードを読み取ると、そのテーブル専用のメニュー画面が開きます。アプリのインストール不要で、ブラウザから注文可能
店舗用タブレットアプリ: リアルタイムで注文を受信し、キッチンディスプレイに表示。調理完了時にはプッシュ通知でお客様に通知
管理ダッシュボード: メニュー管理、売上集計、注文分析、テーブル管理を一元化したWeb管理画面

技術スタック

開発速度とリアルタイム性を重視し、以下のスタックを採用しました。

お客様用: React Native for Web（PWA対応）— アプリインストール不要
店舗用: React Native（iPadアプリ）— オフライン対応必須のため
バックエンド: Firebase（Realtime Database, Cloud Functions, Authentication）
通知: Firebase Cloud Messaging（FCM）— プッシュ通知
管理画面: Next.js + TypeScript — SSRによるSEO不要だが、開発効率を優先

QRコードによるテーブル紐付け

各テーブルに固有のQRコードを設置し、読み取ると自動的にテーブル番号が紐付けされます。URLにテーブルIDをエンコードする方式を採用しました。

// QRコードのURL構造
// https://order.example.com/store/{storeId}/table/{tableId}

// テーブル紐付けのフロー
// 1. お客様がQRコードを読み取る
// 2. URLからstoreIdとtableIdを取得
// 3. Firebase Realtime Databaseにセッションを作成
// 4. メニュー画面を表示（テーブル番号が自動設定済み）

interface OrderSession {
  storeId: string;
  tableId: string;
  tableNumber: number;
  startedAt: number;   // Firebaseタイムスタンプ
  status: "active" | "ordering" | "completed";
}

QRコードは定期的にローテーションする仕組みも実装しました。前回の来店客が同じURLにアクセスしても、セッションの有効期限切れにより新しいセッションが開始されます。これにより、不正注文のリスクを低減しています。

Firebase Realtime Databaseでの注文ステータス管理

注文のライフサイクルは、以下の5つのステータスで管理されます。

pending（受付待ち）: お客様が注文を送信した直後の状態
confirmed（受付済み）: 店舗側が注文を確認した状態
preparing（調理中）: キッチンで調理が開始された状態
ready（調理完了）: 料理の準備が完了し、提供待ちの状態
served（提供済み）: お客様に料理が届けられた状態

// Firebase Realtime Database のデータ構造
{
  "orders": {
    "{orderId}": {
      "storeId": "store-001",
      "tableId": "table-05",
      "items": [
        {
          "menuItemId": "item-042",
          "name": "カフェラテ",
          "quantity": 2,
          "price": 480,
          "options": ["ホット", "Mサイズ"]
        }
      ],
      "status": "preparing",
      "totalAmount": 960,
      "orderedAt": 1706000000000,
      "updatedAt": 1706000120000
    }
  }
}

Firebase Realtime Databaseのリアルタイムリスナーにより、ステータスが変更された瞬間に、お客様用アプリと店舗用アプリの両方に変更が反映されます。WebSocketベースの通信であるため、ポーリングと比較してサーバー負荷が大幅に低く、レスポンスも即座（通常100ms以内）です。

プッシュ通知（FCM）による調理完了通知

料理の調理が完了すると、お客様のスマートフォンにプッシュ通知が送信されます。PWA対応のWebアプリではService Workerを通じてプッシュ通知を受信します。

// Cloud Functionsによるプッシュ通知の送信
exports.onOrderStatusChange = functions.database
  .ref("/orders/{orderId}/status")
  .onUpdate(async (change, context) => {
    const newStatus = change.after.val();
    const orderId = context.params.orderId;

    if (newStatus === "ready") {
      const orderSnap = await admin.database()
        .ref(`/orders/${orderId}`).once("value");
      const order = orderSnap.val();

      // FCMでプッシュ通知を送信
      await admin.messaging().send({
        token: order.customerFcmToken,
        notification: {
          title: "お料理ができました",
          body: `テーブル${order.tableNumber}のご注文が準備できました`,
        },
        data: { orderId, tableId: order.tableId },
      });
    }
  });

POSシステムとの連携設計

既存のPOSシステムとの連携は、本プロジェクトで最も難易度の高い要件でした。クライアントが使用していたPOSシステムはREST APIを提供していたため、Cloud Functionsを中継してデータを同期する構成を採用しました。

注文データの連携: 注文が確定すると、Cloud Functions経由でPOS APIに注文データを送信
メニューマスタの同期: POSのメニューマスタを日次でFirebaseに同期。価格変更やメニュー追加が自動反映される
売上データの集約: POSの売上データとモバイルオーダーの注文データを統合し、管理ダッシュボードで一元的に可視化

連携時のエラーハンドリングには特に注意を払いました。POS APIがダウンした場合でも、Firebase側に注文データが保持されるため、お客様の注文が失われることはありません。POS復旧後にリトライキューから自動再送する仕組みを実装しています。

導入効果

システム導入後3ヶ月間の計測で、以下の効果が確認されました。

注文ミス: 月間平均32件 → 6件（約80%削減）。手書き伝票の読み間違いがゼロに
テーブル回転率: ランチタイムの平均滞在時間が45分 → 36分に短縮（約20%向上）。注文待ち時間の解消が主因
客単価: 平均1,200円 → 1,380円（15%向上）。メニュー写真と「おすすめ」表示によるアップセル効果
人件費: ホールスタッフを各店舗で1名削減可能に。年間で約300万円の人件費削減
顧客満足度: アンケート調査で満足度が4.2/5.0 → 4.6/5.0に向上

運用上の工夫

オフライン対応

飲食店のWi-Fi環境は不安定なケースが多いため、店舗用アプリにはオフライン対応を実装しました。ネットワーク接続が途切れても、ローカルにキャッシュされたメニューデータで注文受付を継続します。接続復帰時にFirebaseと自動同期し、データの整合性を保証します。

ピーク時の負荷対策

ランチタイム（11:30〜13:00）に注文が集中するため、Firebase Realtime DatabaseのシャーディングとCloud Functionsのインスタンス数自動スケーリングを設定しました。最大同時注文数200件/分でも安定稼働することを負荷テストで確認しています。

将来展望

今後のフェーズでは、以下の機能拡張を計画しています。

AI需要予測: 過去の注文データとイベント情報（天候、曜日、祝日）をもとに、日別・時間帯別の来客数と注文数を予測。食材の仕入れ量の最適化と食品ロスの削減を目指す
自動発注システム: 需要予測に基づき、食材の自動発注を実現。在庫管理の自動化による業務負担の軽減
パーソナライズドメニュー: 過去の注文履歴にもとづくレコメンデーション機能。リピーターの客単価向上が期待される
多言語対応: インバウンド需要に対応するための英語・中国語メニュー表示

まとめ

モバイルオーダーシステムの導入は、飲食店のオペレーション効率化に直結する投資です。React NativeとFirebaseの組み合わせにより、短期間・低コストでリアルタイム性の高いシステムを構築できました。注文ミスの削減、回転率の向上、客単価の改善、人件費の削減と、多面的な効果を実現しています。

飲食店向けモバイルオーダーシステム開発事例 — 注文のDX化で業務効率化