画面遷移図の作成

• 日程: Day 6 / セッション 2
• 時間: 09:55-11:00（65分）
• 形式: 実習
• ゴール: 画面一覧のすべての画面を含む画面遷移図を時間内に作成し、ペルソナの動線（CJM To-Be版）と一致していることを確認できる
• 学習形式: ハンズオン実習（AIサポートあり）

直前セッションで書き方を学びました。今度は自チームの画面遷移図を作ります。

問いかけ: ペルソナがあなたのサービスで一番達成したいゴールは何ですか？そのゴールに何クリックで到達できますか？

ゴールまでの最短経路を、CJM To-Be版と突き合わせながら描いていきます。

このセッションの進め方:

1. 開始画面と主要動線を全員で書く（20分）
2. 残りの画面を組み込む（25分）
3. CJM突き合わせとAIレビュー（15分）

順番が大事です。

1. 開始ノードを置く: 「初回訪問ユーザ」と「ログイン済みユーザ」の2系統が一般的
2. 主要動線を1本通す: ペルソナのメインゴールまでの道
3. 派生動線を足す: メインから外れた場合の遷移
4. 共通画面を組み込む: ログイン、エラー、404、利用規約
5. 行き止まりチェック: すべての画面から戻れるか

これに派生（キャンセル、変更、参照、ログアウト等）を足していきます。

• ログイン画面
• ログアウト後画面
• パスワード再設定画面
• 404 Not Found 画面
• 500 サーバエラー画面
• メンテナンス中画面
• 利用規約・プライバシーポリシー画面
• お問い合わせ画面
• 確認モーダル（削除前など）

画面遷移図を「機能カテゴリごとに分割」してもよい。例えば「会員系」「予約系」「管理者系」と3枚に分けると見やすい。ただし画面IDは全体で一意にする。

ペルソナがゴールに最短で到達できることは大事です。でも常に最短がベストとは限りません。例えば決済画面は「あえて確認ステップを挟む」ことで安心感を与え、離脱を防ぎます。逆に検索結果から商品詳細への遷移は1クリックが理想。ペルソナの感情で判断します。CJMの「感情曲線」を見ながら、不安な箇所には確認を、ワクワクの箇所にはスピードを。

• 「以下の画面遷移図を見て、行き止まり画面・到達不能画面・忘れがちな画面を指摘してください。[Mermaid貼付]」
• 「ペルソナ[Day3成果物]がゴール[CJM To-Be最終地点]に到達するまでの最短経路を、この画面遷移図でトレースしてください」
• 「ログイン状態と非ログイン状態で見える画面が混在しています。どう整理すべきですか？」

画面一覧のすべての画面を含む画面遷移図を作成し、CJM To-Be版との整合性を確認する。

1. 開始ノードと主要動線（20分）

   • 全員でホワイトボードまたは共有エディタに描く
   • ペルソナのメインゴールまでを1本通す
   • 各遷移にボタン名・操作名のラベル

2. 派生動線・共通画面の追加（15分）

   • 画面一覧と突き合わせて、登場していない画面を追加
   • 忘れがちな画面チェックリストを確認
   • 分担してもよい（カテゴリ別）

3. CJM突き合わせ（5分）

   • CJM To-Be版を画面の横に並べる
   • ペルソナの各ステップに対応する画面があるか確認

4. AIレビュー（5分）

   • 完成した画面遷移図をAIに貼り付け
   • 漏れ・行き止まり・到達不能を指摘してもらう

• 画面遷移図（Mermaid記法）
• 必要に応じてカテゴリ別に複数ファイル

• ノードが多すぎたら、サブシステム（会員系・予約系等）に分割
• 共通レイアウト（ヘッダーのリンク等）は別途まとめて記述
• 認証要否（ログイン必須／不要）を色やコメントで示すと分かりやすい

次セッションでは、この画面遷移図を入力に画面仕様書を作り、外部設計書として完成させます。

• 画面一覧のすべての画面が遷移図に登場している
• 行き止まり画面・到達不能画面がない
• 各遷移にラベル（ボタン名等）がある
• CJM To-Be版とペルソナの動線が一致している
• AIに1回以上レビューしてもらった

• 入力: 画面一覧（Day5 Session3）、CJM To-Be版（Day3）
• 出力: 画面遷移図（次セッションの入力）