タブレットでテーマ選択
→リモートカメラで撮影
→コメント記入
→QR受け取り＆ギャラリー表示
褒めて、残して、共有する。
ユーザ体験型ブース「ほめて」
東北芸術工科大学 田代奈菜さんの卒業制作プロジェクトとして、来場者が楽しめるプリクラ風のインタラクティブなユーザ体験ブースを設計・開発しました。撮影から画像加工、共有までの一連の体験を提供するシステムです。
会場動画
実際の展示の様子をご覧ください
卒業制作展でインタラクティブフォトブースを使用する来場者
褒めて、残して、共有する。
インタラクティブ褒め言葉コレクションブース
ほめて！ブースは、テーマに沿った褒め言葉を写真と一緒に残せるインタラクティブな展示作品です。タブレットで操作し、リモートカメラで撮影、コメントを書いてQRコードで受け取れます。
展示の様子
実際の展示会場での体験風景
インタラクティブ体験
テーマを選び、撮影し、手書きコメントを追加。誰でも簡単に参加できる体験型ブース。
リアルタイム共有
完成した瞬間にWebギャラリーに自動表示。みんなの作品がリアルタイムで流れます。
QRコードで受け取り
スマホでスキャンして自分の写真を保存。その場で思い出を持ち帰れます。
体験の流れ
ユーザー体験デモ
来場者がフォトブースとどのように対話し、撮影からギャラリー表示までの完全なフローを体験する様子をご覧ください。
展示の様子
実際の展示会場での体験風景
展示会場全体の様子
ブース設置、タブレット、カメラの配置
来場者がタブレット操作
テーマ選択、コメント記入の様子
iPhone SEリモートカメラ
スタンドに設置された撮影用カメラ
Webギャラリー大画面表示
完成作品がリアルタイムで流れる様子
体験フロー
クリックでステップを進めて、参加者の体験フローを確認してください
STEP 1
タブレットでテーマ選択
参加者はタブレット端末で褒め言葉のテーマを選択します
STEP 2
撮影ボタン押下
テーマ選択後、撮影ボタンを押すとリモートカメラが起動します
STEP 3
遠隔iPhone SEで撮影
Firestore経由でトリガーされ、離れた場所にあるiPhone SEが写真を撮影します
STEP 4
タブレットでプレビュー
撮影された写真がタブレットに表示され、参加者が確認できます
STEP 5
コメント書き込み
OKなら、タブレット上で手書きのコメントを追加します
STEP 6
QRコード生成
完成すると、画像のURLからQRコードが生成されます
STEP 7
Webギャラリーにリアルタイム表示
完成した作品が即座にWebギャラリーにスクロール表示されます
1 / 7
QR受け取り
QRコードで作品を受け取る
完成した作品はQRコードとして表示され、参加者はスマートフォンでスキャンして自分の写真を保存できます。その場で思い出を持ち帰れる体験を提供します。
- Firebase Storageの画像URLから自動生成
- スマホでスキャンして即座にダウンロード
- 印刷不要で環境にも優しい
リアルタイム
リアルタイムWebギャラリー
完成した作品が、Firestoreのリアルタイムリスナーを通じて即座にWebギャラリーに表示されます。新しい作品が次々とスクロールして流れる様子を楽しめます。
完成した作品が自動的にスクロールして表示されます
システムアーキテクチャ
ほめて！ブースは、テーマベースの褒め言葉収集システムです。Androidタブレット・iPhone SE・Next.js Webダッシュボードの3デバイスが Firebase を介してリアルタイムに連携し、参加者とホスト双方にシームレスな体験を提供します。
システム構成図
Firebase、Web App、Mobile Appsの3層アーキテクチャ
4層デバイスアーキテクチャ
クラウド接続されたマルチデバイスシステム
Firebase Backend
クラウドバックエンド・リアルタイム同期
Tablet App
Flutter (Android)
参加者操作UI
Camera Device
iPhone SE
リモート撮影専用
Web Dashboard
Next.js
管理＆ギャラリー
1 / 3
💡 クリックして詳細レベルを切り替えられます
データフロー図
テーマ管理、画像キャプチャ、ギャラリー同期の3つの主要フロー
3つの主要データフロー
リアルタイム同期によるシームレスな体験
1️⃣ テーマ管理フロー
Web Dashboard → Firestore → Mobile Apps
2️⃣ 画像キャプチャフロー
Camera → Storage → QR生成 → Firestore → Gallery
3️⃣ ギャラリー同期フロー
Storage List → Firestore Compare → Update
1 / 3
💡 クリックして詳細レベルを切り替えられます
ユーザージャーニー図
参加者とホストの2つの視点から見るシステム利用フロー
ユーザージャーニー
2つの視点から見るシステム利用フロー
ホーム
テーマ選択
カメラ
手書き
アップロード
1 / 3
💡 クリックして詳細レベルを切り替えられます
🛠️ 技術スタック
モダンでスケーラブルな技術選択
Frontend
Backend
Mobile
DevOps
💡 技術名をクリックして選定理由と主要機能を表示
🎯主要な技術的決定
- 1Flutter は Android・iOS 両対応のクロスプラットフォーム開発を実現。タブレットとiPhone SEの双方で動作するカメラ機能・手書き入力のリッチなUIを単一コードベースで構築。
- 2Firebase は サーバー管理不要でリアルタイム同期・スケーラブルなCloud Storageを提供。Firestoreのonsnapshotリスナーにより、3デバイス間の状態をミリ秒単位で同期。
- 3Next.js Web App により、ホストがブラウザからテーマ設定・ギャラリー管理・カメラトリガー操作を行える管理ダッシュボードを実現。展示会場での運営を大幅に効率化。
技術詳細
📋アーキテクチャ決定記録 (ADR)
なぜ Flutter？
クロスプラットフォーム開発とネイティブパフォーマンスを両立。Androidタブレットと iPhone SE 両対応のカメラ機能・手書き入力 UI を単一コードベースで実現。
- •iOS / Android 対応
- •60fps スムーズ UI
- •Hot reload で高速開発
なぜ Firebase？
サーバー管理不要でリアルタイム同期・スケーラブルなストレージを提供。撮影トリガーやギャラリー同期など、展示環境に必要な全機能をサーバーレスで実現。
- •onSnapshot リアルタイム同期
- •Cloud Storage で画像無制限保存
- •サーバーレスでゼロ運用コスト
なぜ Riverpod？
Flutter アプリの複雑な状態（撮影状態・テーマ・プレビュー）を型安全に管理。StreamProvider で Firestore の変更を UI へリアクティブに伝播。
- •コンパイル時の型チェック
- •StreamProvider で Firebase 連携
- •テスタブルな依存性注入
⚡アーキテクチャ特性
同期方式
アーキテクチャイベント駆動
リスナーonSnapshot
ポーリングなし
ストレージ
転送方式直接アップロード
容量無制限
解像度3000×3000px
UI / アニメーション
フレームレート60fps 目標
アニメーションLottie
BGM / SEAudioPlayers
技術スタック
FlutterDartFirebase
🎯課題と解決策
1マルチデバイス間のリアルタイム同期
展示中、Androidタブレット・iPhone SE・Webダッシュボードの3デバイスが Firestore 経由でリアルタイムに状態を共有する必要がありました。特に撮影トリガーのタイミングと、撮影後の画像をタブレットへ反映するフローの設計が難しい課題でした。
解決策:
Firestore の onSnapshot リスナーを各デバイスに実装し、camera/trigger コレクションで showCamera・takePhoto・latestImageName の状態を一元管理。イベント駆動型アーキテクチャにより、撮影ボタン押下から iPhone SE 撮影 → タブレットプレビュー表示までをリアルタイムで同期。
2展示会場でのネットワーク安定性
展示会場の Wi-Fi 環境は不安定になりがちで、Firebase への接続が切れると撮影トリガーが届かず体験が止まるリスクがありました。会場セットアップ時のネットワーク確認も重要な課題でした。
解決策:
Flutter アプリ起動時に Wi-Fi 接続チェック画面を設け、接続不良を事前検知。Firestore のオフライン永続化を活用し、一時的な接続断でもデータの整合性を保持。再接続時には自動で状態を再同期する仕組みを実装。
3クロスプラットフォームのリモートカメラ制御
Android タブレットから別デバイスの iPhone SE カメラをリモートで制御する仕組みが必要でした。ネイティブカメラ API の差異と、撮影後の高解像度画像（3000×3000px）のアップロード・配信フロー設計が技術的な難所でした。
解決策:
Firestore をメッセージブローカーとして活用し、タブレットが書き込んだ takePhoto フラグを iPhone SE が購読するパターンを実装。撮影後は Flutter camera package で生成した画像を Firebase Storage へ直接アップロード。タイムスタンプベースのファイル命名で競合を防止。
GitHub で見る