Skip to content

#3 情報設計 / 画面遷移フロー

🟧 ステータス: 未着手 対応Issue: #3 Issue内容を本ページにコピーした初期スタブ。設計確定後にこのページを正式版で置き換える。


🎯 概要

全画面の情報設計と画面遷移を整理する。ホーム(ラノベ風部屋)から各機能(SNSアプリ・デイリーチャレンジ・図鑑・AIターミナル・アナリティクス)にどう遷移するか、各画面の責務・要素を明文化し、ワイヤーフレームを起こす。

✅ ゴール / 完了条件

  • [ ] 画面一覧と各画面の責務定義
  • [ ] 画面遷移図(mermaid stateDiagram or flowchart)
  • [ ] 各画面のワイヤーフレーム(簡易でOK、後の#4ビジュアル設計のたたき台)
  • [ ] 各画面に表示する情報・操作要素のリスト化
  • [ ] モーダル / カットイン / オーバーレイ層の整理
  • [ ] docs/design/information-architecture.md 作成

📦 アウトプット

  • docs/design/information-architecture.md
  • docs/design/wireframes/ 配下に各画面の手書きレベルのワイヤー(PNG or ASCII or excalidraw)

📋 画面一覧(暫定)

ID画面概要
S00タイトル/ロード起動直後
S01ホーム(ラノベ風部屋)スマホ/PCタップで各機能へ
S02SNSアプリ(メインゲーム)5分Wave戦
S02-a杭打ちカットインスロットリール演出
S03デイリーチャレンジ4択3問
S04図鑑ネタリソース一覧 / 詳細
S05AIターミナル固定選択肢の壁打ち
S06アナリティクス過去ポスト/Wave別
S07リザルト承認欲求/精度/有益おじさん度
S08ランキング世界/日本/フレンド/週間
S09設定音量、ボイスON/OFF等

📋 タスク

  • [ ] 画面一覧確定
  • [ ] 遷移図作成
  • [ ] 各画面のワイヤー作成
  • [ ] 共通レイアウト要素(ヘッダ・通知音等)を整理
  • [ ] ドキュメント化

🔗 依存・関連

  • 親: #1
  • 依存: #2 (技術的制約に依存)
  • 影響: #4, #5, #13, #14, #18

📚 参考

  • 「ラノベ風部屋背景に机の上のスマホ/PCをタップしてSNSアプリ起動」という没入感重視のホーム
  • 倫理観メーター・PV数表示など常時HUD要素あり
  • ニコ動コメントは画面を埋めるレベルで流れる

出る杭おじさん育成計画