このたび弊社では、小規模カフェ向けのQRコード注文・決済アプリケーションを開発しました。本記事では、開発の背景と実装した機能、工夫したポイントをご紹介します。
「高機能なPOSやセルフオーダーシステムは導入したいけれど、月額数万円のサービスは予算的に厳しい…」
そんな個人経営カフェ・小規模店舗のオーナー様に向けて、必要最小限の機能を、運用コストを極限まで抑えて提供することをコンセプトに設計しました。
開発の背景
小規模カフェが抱える課題は明確です:
人手不足: ホールスタッフが注文取り・会計・配膳・調理補助まで兼任
ピーク時の機会損失: 店員を呼べずにお客様が帰ってしまう
導入コストの壁: 既存のセルフオーダーシステムは初期費用 + 月額 + 決済手数料で重い負担
テイクアウト需要への対応: 電話注文だと本業が止まる
弊社は「QRコードを机に貼るだけ」で始められ、初期費用を大きく抑えつつ、小さな月額費用で運用できる、このお店独自のアプリ開発を目指しました。
実装した主要機能
1. テーブルQR注文（イートイン）
テーブルに貼られたQRコードをお客様のスマホで読み取るだけで、注文画面が開きます。席を立たず、店員を呼ぶ必要もなく、その場で注文から決済まで完結します。
テーブル別URL (
/t/{tableCode}) で自動的に席情報を紐付けメニューはSquareの商品カタログから自動同期
バリエーション（サイズ・温冷）・モディファイア（トッピング等）対応
🥤 2. テイクアウト注文
事前注文・事前決済で、お客様は並ばずに商品を受け取れます。
ピックアップ時刻の指定
お客様名・電話番号の登録
決済完了と同時にキッチンへ連携
💳 3. Square 決済連携（Payment Links）
PCI DSS対応が不要な Square Payment Links を採用し、カード情報が自社サーバーを経由しないセキュアな構成にしました。
Square SDK v44 を利用
決済完了 Webhook でステータス自動更新
署名検証による改ざん防止
イデンポテント処理で Webhook の重複受信にも耐性
🔔 4. 管理画面のリアルタイム通知
新規注文が入ると、管理画面に赤いバナー + 通知音で即座に知らせます。
見逃し対策として特にこだわった機能です。
Supabase Realtime の WebSocket で即時反映（ポーリング不要）
通知音はお客様がタップするまで鳴り続けるループ方式
iPhone Safari 対応: AudioContext のサスペンド問題を回避し、タップによる「音声開始」→「停止」の2段階UIで確実に鳴動
ユーザー操作前は音が鳴らないブラウザ仕様に対応した設計
👨🍳 5. キッチンディスプレイ（KDS）
調理スタッフ向けの専用ディスプレイ画面です。タブレット1台をキッチンに置くだけでOK。
ダークテーマの視認性重視UI
「受付待ち」→「調理中」→「完了」のステータスをワンタップで遷移
注文からの経過時間を自動表示（「○分前」）
10秒ごとの自動更新
バッチ取得 + エラーフォールバックで大量注文時も安定動作
📋 6. 注文管理・検索
ステータス別フィルタ（未決済／調理中／完了／キャンセル）
ページネーション
Square POSレジ注文との統合表示（店頭の対面注文も一元管理）
注文詳細・顧客情報・支払履歴の確認
💸 7. キャンセル時の自動返金
管理画面から注文をキャンセルすると、Square Refunds API 経由で自動返金されます。手動のレジ操作は不要です。
📊 8. 売上レポート
日次・期間指定の売上集計で、経営判断に必要な数字をひと目で確認できます。
技術スタック
カテゴリ | 採用技術 | 選定理由 |
|---|---|---|
フロントエンド | Next.js 16 (App Router) | SSR/SSG/API Routes が一体化、高速 |
言語 | TypeScript | 型安全で保守性が高い |
DB / Realtime | Supabase | 無料枠あり、Realtime が標準装備 |
決済 | Square Payment Links | 初期費用ゼロ、PCI対応不要 |
ホスティング | Vercel | 無料枠で運用可、自動デプロイ |
テスト | Vitest | 軽量・高速 |
予算の少ない小規模カフェに最適な理由
初期費用を極限まで削減
AIや各ツールの活用により初期開発費用を大幅に削減。小さな月額費用のみでの利用を可能としました。
ハードウェア投資ゼロ
お客様のスマホが注文端末になる → 専用タブレット不要
キッチン側も既存のタブレット／PC／スマホで OK
レジはSquare POSをそのまま活用可能
導入が数時間で完了
QRコードを印刷して机に貼るだけ
Square アカウントとAPIキーを連携するだけ
スタッフ教育も最小限（KDSは直感的なUI）
まとめ
本プロジェクトは、「小規模カフェでも無理なく導入できるデジタル化」をテーマに、
必要な機能を厳選し、運用コストを最小化するよう心がけました。
「POSは使ってるけど、セルフオーダーは高くて導入できない」
「電話でのテイクアウト注文対応が限界」
「人手不足で席を回せない」
そんなお悩みをお持ちのカフェオーナー様、ぜひ一度お問い合わせください。
お店の規模・運用に合わせたカスタマイズ開発もご相談いただけます。
コストを抑えて素早くシステム開発をご希望の方はご相談ください
今はノーコードやAIなど、コストを抑えつつ自社独自の業務に合わせたWebシステム開発・アプリ開発が可能です。
コスト面で悩んでいたり、業務改善・DXと言われてもそもそもどう進めたらいいかわからず悩んでいたりする方は、ぜひ気軽にご相談ください。ふわっとしたご要望でも構いませんので、一緒に考えていきましょう。