画面遷移図と画面仕様書の書き方

• 日程: Day 6 / セッション 1
• 時間: 09:30-09:55（25分）
• 形式: 座学
• ゴール: 画面遷移図の表記ルールと画面仕様書に書くべき項目（レイアウト・入力項目・ボタンの遷移先等）を6つ以上挙げ、良い画面遷移図の条件を自分の言葉で説明できる
• 学習形式: 対話型解説、ケーススタディ

昨日、画面一覧と機能一覧を作りました。今日はそれを「つなげて」「中身を埋めます」。

問いかけ: あなたが初めて使うWebサービスで、3クリックしても目的のページにたどり着けなかったら、どうしますか？

たいていの人は離脱します。画面遷移図はユーザを迷子にさせない地図です。

今日の流れ:

• セッション1（このセッション）: 書き方を学ぶ
• セッション2: 自チームの画面遷移図を作る
• セッション3: 画面仕様書を作り、外部設計書を完成させる

設計フェーズの折り返し地点です。今日終われば外部設計が完成し、明日からは内部設計に入ります。

画面遷移図は「画面（ノード）」と「遷移（矢印）」で構成します。Mermaidのflowchartで書きます。

悪い例: 矢印が交差し、どこから始まるか不明

何が悪いか:

• 開始画面が不明
• 全画面が相互に遷移し、ユーザの動線が見えない
• 遷移の理由（ボタン名・操作）がない

良い例: 開始が明確で、遷移ラベル付き

良いところ:

• 開始ノードが明示
• 各遷移に「ボタン名・操作名」がラベル
• 失敗時の戻り先が描かれている
• 画面IDと画面名がノードに入っている

• 全画面が必ず遷移図に登場する（画面一覧との一致）
• 行き止まり画面（戻れない画面）がない
• 到達不能画面（誰からも遷移されない画面）がない
• ペルソナのゴール（CJM To-Be版の終点）に到達できる

画面仕様書は「1画面につき1ページ」で書きます。最低限の項目はこの7つ。

画面ID: S-101
画面名: 予約フォーム画面
目的: ユーザが希望日時・人数を入力して予約申込ができる

レイアウト:
+--------------------------------+
| ヘッダー（ログイン状態）        |
+--------------------------------+
| タイトル: 予約申込              |
|                                |
| 来店日 [____] (必須)            |
| 時間   [____] (必須・15分単位)  |
| 人数   [__] (必須・1〜10)       |
| 要望   [_______________] (任意) |
|                                |
|        [戻る]  [確認へ進む]     |
+--------------------------------+

入力項目:
- 来店日: date型、今日以降、必須
- 時間: time型、営業時間内、必須
- 人数: number型、1-10、必須
- 要望: text型、200文字以内、任意

ボタン:
- [戻る]: マイページ画面（S-003）へ遷移
- [確認へ進む]: 入力チェック後、予約確認画面（S-102）へ遷移

表示項目:
- ログイン中のユーザ名（ヘッダー）
- 営業時間案内（注意書き）

エラー時挙動:
- 入力エラー: 該当項目下に赤字でメッセージ表示、遷移しない
- 通信エラー: 画面上部にトースト「通信に失敗しました。再試行してください」

• レイアウトは「絵心」より「位置関係」が大事。テキストアートでも可
• 入力項目には必ず「型」と「バリデーション」を書く
• ボタンの遷移先は必ず画面IDで明記する
• エラー時挙動を書き忘れない（明日の内部設計の入力になる）

良い遷移の条件は3つです。

1. 戻り道がある: ブラウザの戻るに頼らず、画面内に明示的な戻り導線
2. 現在地が分かる: パンくず、ステップインジケータ、タイトル
3. 次の一手が明確: ボタンが多すぎず、主アクションが目立つ

CJM（カスタマージャーニーマップ）のTo-Be版でペルソナの感情を確認しましょう。「ここで迷う」「ここで不安」と書いた地点には、案内・確認・ヘルプを置きます。

• 「以下の画面遷移図を見て、ユーザが迷子になりそうな箇所を指摘してください。[Mermaid貼付]」
• 「Webサービスでよく見落とされる画面（404、メンテ、利用規約）を挙げて」
• 「予約フォーム画面の画面仕様書をレビューしてください。実装者が迷う点はありますか？」

今日学んだこと:

• 画面遷移図は「開始ノード明示」「遷移ラベル付与」「行き止まり禁止」が基本
• 画面仕様書は7項目（ID・目的・レイアウト・入力・ボタン・表示・エラー）が最低限
• ペルソナの動線（CJM To-Be版）を必ず突き合わせる

次セッションで実際に作ります。

• 良い遷移図と悪い遷移図の違いを2つ以上挙げられる
• 画面仕様書の7項目をすべて言える
• 「行き止まり画面」「到達不能画面」を発見する観点を持てた
• CJM To-Be版を確認する理由を説明できる

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