#3 情報設計 / 画面遷移フロー
🟧 ステータス: 未着手 対応Issue: #3 Issue内容を本ページにコピーした初期スタブ。設計確定後にこのページを正式版で置き換える。
🎯 概要
全画面の情報設計と画面遷移を整理する。ホーム(ラノベ風部屋)から各機能(SNSアプリ・デイリーチャレンジ・図鑑・AIターミナル・アナリティクス)にどう遷移するか、各画面の責務・要素を明文化し、ワイヤーフレームを起こす。
✅ ゴール / 完了条件
- [ ] 画面一覧と各画面の責務定義
- [ ] 画面遷移図(mermaid stateDiagram or flowchart)
- [ ] 各画面のワイヤーフレーム(簡易でOK、後の#4ビジュアル設計のたたき台)
- [ ] 各画面に表示する情報・操作要素のリスト化
- [ ] モーダル / カットイン / オーバーレイ層の整理
- [ ]
docs/design/information-architecture.md作成
📦 アウトプット
docs/design/information-architecture.mddocs/design/wireframes/配下に各画面の手書きレベルのワイヤー(PNG or ASCII or excalidraw)
📋 画面一覧(暫定)
| ID | 画面 | 概要 |
|---|---|---|
| S00 | タイトル/ロード | 起動直後 |
| S01 | ホーム(ラノベ風部屋) | スマホ/PCタップで各機能へ |
| S02 | SNSアプリ(メインゲーム) | 5分Wave戦 |
| S02-a | 杭打ちカットイン | スロットリール演出 |
| S03 | デイリーチャレンジ | 4択3問 |
| S04 | 図鑑 | ネタリソース一覧 / 詳細 |
| S05 | AIターミナル | 固定選択肢の壁打ち |
| S06 | アナリティクス | 過去ポスト/Wave別 |
| S07 | リザルト | 承認欲求/精度/有益おじさん度 |
| S08 | ランキング | 世界/日本/フレンド/週間 |
| S09 | 設定 | 音量、ボイスON/OFF等 |
📋 タスク
- [ ] 画面一覧確定
- [ ] 遷移図作成
- [ ] 各画面のワイヤー作成
- [ ] 共通レイアウト要素(ヘッダ・通知音等)を整理
- [ ] ドキュメント化
🔗 依存・関連
- 親: #1
- 依存: #2 (技術的制約に依存)
- 影響: #4, #5, #13, #14, #18
📚 参考
- 「ラノベ風部屋背景に机の上のスマホ/PCをタップしてSNSアプリ起動」という没入感重視のホーム
- 倫理観メーター・PV数表示など常時HUD要素あり
- ニコ動コメントは画面を埋めるレベルで流れる