まちあいさがし

https://github.com/harune-pg/marguerite
http://localhost:5173/admin/register

TypeScript

React

Python

料理を待つ時間を楽しくする、間違い探しアプリ🔍

渡邊佳菜美

Harune Makino

推しアイデア

飲食店のテーブル等に置かれているQRコードを読み取ると、そのお店オリジナルの間違い探しが遊べるアプリ。間違い探しはそのお店おすすめのものを使用して作成しているため、待ち時間を「暇」から「楽しい体験」に変えつつ、プレイ後にはおすすめメニューも自然に知れる新しい来店体験を生み出す。

作った背景

飲食店で料理を待つ時間はスマホを見て待ちがちな経験から、某飲食店のように、その時間を店ならではの体験に変えたいと考えた。QRコードだけで導入でき、待ち時間を楽しさとお店の魅力発信に変える仕組みとして開発した。

推し技術

AI画像生成とセグメンテーションを組み合わせ、1枚の画像から毎回異なる間違いを自動生成している。さらにインペイント技術によって自然な差分を作ることで、同じQRコードでも遊ぶ度に新しい問題が出題出来る仕組みを実現している。

プロジェクト詳細

「まちあいさがし」は、飲食店のQRコードを読み取るだけで、その店舗専用の間違い探しゲームが遊べるWebアプリ。

ユースケース

 
【店舗側】                          【お客さん側】

 店名を登録                         QRコードを読み取り
     │                                    │
     ▼                                    ▼
 QRコード発行 ──── 店内に設置 ────→ ランディング画面
     │                                    │
     ▼                                    ▼
 メニュー情報を入力                  「スタート」を押す
     │                                    │
     ▼                                    ▼
 「画像生成」ボタン                  間違い探しで遊ぶ
     │                              （ピンチ拡大・連動操作）
     ▼                                    │
 AIが自動生成                              ▼
 （ベース画像＋間違い画像）          結果画面
     │                              （スコア＋おすすめメニュー）
     ▼
 確認して公開

店舗側は、店名を登録するだけでQRコードが即座に発行される。その後、ジャンル・おすすめメニュー名・写真・紹介文を入力し「画像生成」ボタンを押すと、AIがバックグラウンドで間違い探し用のイラストを自動生成する。生成結果を確認し、公開に切り替えれば準備完了。

お客さん側は、テーブルのQRコードをスマホで読み取るだけ。アプリのインストールは不要で、ブラウザ上で間違い探しがすぐに始まる。画像はピンチ操作で拡大でき、2枚の画像が連動して動くため、細部まで快適に探せる。

間違い探しの題材はお店のおすすめメニューから生成されるため、遊びながら自然と店の魅力に触れることができる。QRコードを置くだけの手軽な導入と、AIによる問題の自動生成により、飲食店の待ち時間を価値ある来店体験に変える。

技術スタック
レイヤー技術
フロントエンドReact + TypeScript + Vite
バックエンドFastAPI + SQLModel + SQLite
画像生成OpenAI API (gpt-image-1) + Flood fill + GPT-4o Vision

画像生成パイプライン

店舗情報をもとに間違い探し画像を自動生成するパイプライン。

店舗情報（店名・ジャンル・メニュー写真・紹介文）
  │
  ▼
[Step 1] プロンプト生成 ── 店舗情報からイラスト用プロンプトを組み立て
  │
  ▼
[Step 2] ベース画像生成 ── OpenAI gpt-image-1 でイラストを生成
  │
  ▼
[Step 3] セグメント分割 ── Flood fill で領域分割 → GPT-4o Vision でラベル付け
  │
  ▼
[Step 4] インペイント ── 3箇所を選択し OpenAI API で差分を合成
  │
  ▼
[Step 5] 差分座標の算出 ── 変更箇所の中心座標・サイズを記録
  │
  ▼
出力: 元画像 (original.png) + 間違い画像 (modified.png) + 差分座標

当初の構想と妥協点

当初は Groq API による高速画像生成 と プレイ時のリアルタイムインペイント を構想していた。お客さんがゲームを開始するたびにベース画像に対してランダムにインペイントを実行し、毎回異なる間違いを動的に生成する設計だった。

しかし開発を進める中で以下の理由から方針を変更した。

  • 画像生成APIの変更: Groq API では求める品質のイラストが安定して生成できず、OpenAI gpt-image-1 に切り替えた
  • リアルタイム生成の断念: インペイントは1回あたり数十秒かかるため、お客さんの待ち時間中にさらに待たせるのは体験として不適切と判断。事前にベース画像＋間違い画像＋差分座標を一括生成し、プレイ時はデータ配信のみとする方式に変更した
  • セグメンテーション手法の変更: 当初は専用のセグメンテーションモデル（SAMなど）を検討していたが、イラスト画像に対してはFlood fillベースの領域分割＋GPT-4o Visionによるラベリングの組み合わせが実用的だった

結果として、同じQRコードでも複数のベース画像を生成・登録しておくことでバリエーションを持たせる設計に落ち着いた。リアルタイム生成ではないが、店舗が画像を追加生成するだけで問題のバリエーションを増やせる運用となっている。

渡邊佳菜美

@kanakana_pengin