1. 画面構成概要
ホームページ
メイン画面・イベント一覧・ナビゲーション
出し物詳細
タイトル・内容・画像・場所情報
スタンプラリー
収集状況・QRスキャン・進捗表示
QRスキャナー
カメラ起動・QR読み取り・結果表示
マップ
校舎図・フロア案内・移動経路
管理画面
情報編集・投稿・管理機能
必要な要素(再確認)
コア機能
- ✓ スタンプラリー
- ✓ QRコード読み込み
- ✓ ホームページ
- ✓ 出し物詳細ページ
詳細要素
- • タイトル・内容・画像
- • 学部・校舎名
- • 階数 / 部屋番号
- • マップ・移動経路
2. ホームページ
モバイルレイアウト
VANTAN文化祭
検索バー
○○学部カフェ
A棟 2F 205
コーヒーと軽食を提供
アート展示
B棟 1F ロビー
学生作品の展示会
ゲーム体験
C棟 3F 301
VRゲームを体験
主要機能
検索・フィルター機能
- • キーワード検索
- • カテゴリ別フィルター(食べ物・体験・展示)
- • 学部別フィルター
- • 場所別フィルター
出し物一覧表示
- • カード形式でのリスト表示
- • サムネイル画像
- • タイトル・場所・概要
- • リアルタイム更新
ボトムナビゲーション
- • ホーム(現在の画面)
- • スタンプラリー
- • マップ
- • QRスキャナー
お知らせ・更新情報
- • 重要なお知らせをトップに表示
- • タイムライン更新
- • 急な変更の通知
3. 出し物・イベント詳細ページ
詳細ページレイアウト
詳細情報
メイン画像
○○学部カフェ
デザイン学部
場所情報
A棟 2階 205教室
→ マップで見る
→ マップで見る
内容
学生が運営するカフェです。
手作りコーヒーと軽食を
お楽しみいただけます。
手作りコーヒーと軽食を
お楽しみいただけます。
スタンプを獲得
情報構造
基本情報
- • タイトル: 出し物の名前
- • 学部名: 主催学部
- • メイン画像: 代表写真
- • ステータス: 開催中/準備中/終了
場所情報
- • 校舎名: A棟/B棟/C棟
- • 階数: 1F/2F/3F等
- • 部屋番号: 205/301等
- • マップリンク: 地図表示への遷移
詳細コンテンツ
- • 内容説明: 何をしているか
- • 特徴・魅力: アピールポイント
- • 参加方法: 体験の仕方
- • 注意事項: 制限や条件
アクション
- • スタンプ獲得: QRコードスキャン
- • 地図表示: 場所への案内
- • 共有: SNSシェア
- • お気に入り: 後で見る
4. スタンプラリー
スタンプラリー画面
スタンプラリー
進捗: 5/12 スタンプ獲得
QRコードをスキャン
獲得済みスタンプ
カフェ
アート
ゲーム
???
???
???
スタンプラリー機能
進捗表示
- • 獲得スタンプ数 / 全スタンプ数
- • プログレスバーでの視覚的表示
- • 達成率のパーセンテージ
- • 次の目標までの残り数
QRスキャン機能
- • ワンタップでスキャナー起動
- • リアルタイムQR認識
- • スキャン成功時の視覚フィードバック
- • 重複スキャンの防止
スタンプ一覧
- • グリッド形式での一覧表示
- • 獲得済み/未獲得の明確な区別
- • 各スタンプの名前・場所情報
- • タップで詳細情報表示
報酬システム
- • 達成段階ごとの報酬
- • コンプリート時の特別報酬
- • 成果の共有機能
- • ランキング機能(オプション)
5. QRスキャナー
スキャナー画面
QRスキャン
QRコードをフレーム内に合わせてください
自動でスキャンします
スキャンフロー
1
カメラ起動
- • ボトムナビからQRアイコンタップ
- • カメラ権限の確認・許可
- • スキャナー画面への遷移
2
QR認識
- • フレーム内にQRコードを配置
- • リアルタイムでの認識処理
- • 成功時の視覚・音響フィードバック
3
結果処理
- • スタンプデータの検証
- • 重複チェック
- • データベースへの保存
4
フィードバック
- • 成功/失敗メッセージ表示
- • 獲得したスタンプ情報表示
- • スタンプラリー画面への遷移
6. マップ機能
マップ画面
校舎マップ
A棟
B棟
C棟
現在地: 正門付近
→ A棟まで 徒歩2分
→ B棟まで 徒歩3分
→ C棟まで 徒歩4分
→ B棟まで 徒歩3分
→ C棟まで 徒歩4分
フロア選択
マップ機能詳細
校舎全体図
- • A棟・B棟・C棟の配置
- • 建物間の移動経路表示
- • 所要時間の目安表示
- • 現在地のリアルタイム表示
フロアマップ
- • 各階のフロアレイアウト
- • 教室・部屋番号の表示
- • 出し物開催場所のハイライト
- • エレベーター・階段の位置
ナビゲーション
- • 目的地までのルート案内
- • ステップバイステップの道案内
- • 最短ルートの提案
- • 障害物や混雑の考慮
検索・フィルター
- • 部屋番号での検索
- • 出し物名での検索
- • カテゴリ別フィルター表示
- • 近くの施設検索
7. ユーザーフロー
メインユーザーフロー
QRコードスキャン
アクセス
ホーム画面
出し物一覧
詳細画面
情報確認
マップ
経路確認
スタンプラリーフロー
1
スタンプラリー画面へ
2
QRスキャナー起動
3
出し物でQRスキャン
4
スタンプ獲得・進捗更新
検索フロー
1
検索バーに入力
2
フィルター適用
3
結果一覧表示
4
詳細画面へ
画面遷移パターン
ホーム
メインハブ
スタンプ
収集管理
マップ
場所案内
QRスキャン
読み取り