社内共有用 ・ 2026年4月

🏖 AOSHIRO Match

画面数・導線まとめ

開発範囲の確認と、各ロール（ユーザー・スタッフ）の導線整理

1まとめ

  1. 必要画面数は10枚
  2. アカウント登録：個人（メルパス、認証なし）
  3. マッチ単位：グループ
  4. マッチするまでは同じ席にいてもらう、マッチ後その席のQRは解放
  5. 無料ドリンクは選択してからレジへ向かう
1

2必要画面数

必要画面数 10 画面
No. 画面名 詳細
1 QR読み込み QRを読み取って、アカウント登録に進む画面
2 サインイン/ログイン メアド・パスワード登録画面
3 パスワードリマインダー パスワード忘れた人用
4 プロフィール登録 個人のプロフィール登録
5 メンバー待機 同じグループのメンバーが揃うまで待機する画面
6 ホーム（一覧） マッチングできる人が並んでる /
何らかの方法でマッチが来たのもわかる
7 マイページ 個人のプロフィール等編集可能
8 マッチング/スタッフ待機 マッチしました、スタッフが案内するまで動かないでください　みたいな注意書き
9 ドリンク選択 注文したいドリンクを選択できる画面、スタッフがマッチ処理を管理画面で行わないと使用できない
10 チケット表示 発行したチケットをスタッフに見せる画面
2

3画面構成

QR読み込み
→
サインイン/
ログイン画面
パスワード
リマインダー
→
プロフィール
登録
→
メンバー
待機
→
マッチング/
スタッフ待機
→
ホーム
マイページ
ドリンク
選択
→
チケット
表示
3

4導線

ユーザー導線（9ステップ）

1. 来店
→
2. レジで注文、会計
→
3. 机でバーコード読み取る
4. 登録
→
5. マッチ成立
→
6. スタッフさんが案内
7. 画面内でドリンクを選んでチケットを取得
→
8. レジで注文
→
9. その後退店等は自由
4

5グループ人数について

前提

1日1ドリンク無料 を守るために、各端末で会員登録をしてもらうことにしました

補足
  • 個人登録することで、同日に2回目マッチできないけど、別日に再度マッチが可能になる
  • メンバー待機画面に制限時間を設けることで、長時間の利用やバグを阻止
流れ
1
個人で、グループみんながQRを読み取り会員登録
↓
2
会員登録完了した人から、メンバー待機画面で他メンバーを待機
↓
3
メンバー全員が揃ったら、スタートボタンを押す
（この時点で人数の追加は不可）
↓
4
マッチ一覧には、グループとして表示される
5

6QRについて

前提

席移動問題を解決するために、セッションを設けます

エンジニア向けメモ
  1. QR読取で /entry/{storeId} にアクセス
  2. storeId に紐づく status == recruiting のセッションを検索
  3. あれば参加、なければ新規作成（トランザクション必須：同時アクセス時の二重作成防止）
  4. マッチング成立時に該当セッションの status を matched に更新
  5. 以降のアクセスは募集中セッションが無いので新セッション作成 → 新規登録画面へ
リアルタイム同期
  • Firestore の onSnapshot() でセッションドキュメントを購読
  • 参加者追加・マッチ成立を全クライアントに即反映
流れ
1
QRコードを読み取る：セッションスタート
↓
2
登録、利用開始
↓
3
マッチ成立：セッション終了
※この時点で、同じQRを読み取っても会員登録の画面が開かれる
6

7ドリンク選択 / チケット表示

ドリンク選択

無料ドリンクが一覧で表示されており、【グループ人数分】のドリンクチケットを取得することができる
ここに表示するドリンクの種類は、管理画面でスタッフが設定可能
※ダイニーをイメージしてもらえると近いかも

チケット表示

取得した分のドリンクチケットを表示する画面
レジでこの画面を見せることで、どのドリンクを何個無料で頼むのかスタッフも把握することができる
レジでスタッフが無料ドリンクの注文を通した時点で、その場でチケットを【使用済み】にしてもらう

なぜこの画面構成にしたか

  • 全てのドリンクが無料になるわけではないパターンが多い
  • グループで、一部が先に無料ドリンクを頼んで残りが後で頼む、にも対応可能
  • 一人一枚、の管理が可能
7