ワイヤーフレーム

各画面の構成とユーザーフロー設計

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分
フロア選択

マップ機能詳細

校舎全体図

  • • A棟・B棟・C棟の配置
  • • 建物間の移動経路表示
  • • 所要時間の目安表示
  • • 現在地のリアルタイム表示

フロアマップ

  • • 各階のフロアレイアウト
  • • 教室・部屋番号の表示
  • • 出し物開催場所のハイライト
  • • エレベーター・階段の位置

ナビゲーション

  • • 目的地までのルート案内
  • • ステップバイステップの道案内
  • • 最短ルートの提案
  • • 障害物や混雑の考慮

検索・フィルター

  • • 部屋番号での検索
  • • 出し物名での検索
  • • カテゴリ別フィルター表示
  • • 近くの施設検索

7. ユーザーフロー

メインユーザーフロー

QRコードスキャン

アクセス

ホーム画面

出し物一覧

詳細画面

情報確認

マップ

経路確認

スタンプラリーフロー

1
スタンプラリー画面へ
2
QRスキャナー起動
3
出し物でQRスキャン
4
スタンプ獲得・進捗更新

検索フロー

1
検索バーに入力
2
フィルター適用
3
結果一覧表示
4
詳細画面へ

画面遷移パターン

ホーム

メインハブ

スタンプ

収集管理

マップ

場所案内

QRスキャン

読み取り

次のステップ

デザインシステムとUI/UXガイドラインを確認しましょう

デザインシステムを見る