前回の続きと、この講義の役割
前回のH-02では、どこに何があるかを決める情報設計を学びました。利用者の行動を軸にメニューを分類する、という話でした。今回はその一歩先、決めた機能のあいだを利用者がどう移動するかを設計します。情報設計が地図上の地点の配置なら、画面遷移はその地点をつなぐ道の設計です。1画面ずつは作れても、経路全体は人間が渡さないと抜け落ちる領域です。
このスライドのポイント
- 前回H-02: 情報設計で「どこに何があるか」を決めた
- 今回H-03: その地点のあいだを「どう移動するか」を決める
- 情報設計＝地点の配置／画面遷移＝地点をつなぐ道
画面遷移と遷移図の定義
画面遷移とは、操作をきっかけに別の画面や表示へ移ることです。遷移図とは、画面を箱、操作を矢印で結んだ経路の地図のことです。ここで大切なのは、1つの画面だけを見るのではなく、開始点、つまりどこから来るかと、完了後、つまりどこへ戻るかまで含めて、1本の経路として描くことです。ボタンを押したら次の画面へ、で終わりにせず、その先の行き先まで設計の対象に含めます。たとえるなら、乗り換え案内のように、出発から到着までの全経路を1枚に描くイメージです。
このスライドのポイント
- 画面遷移＝操作をきっかけに別の画面や表示へ移ること
- 遷移図＝画面を箱、操作を矢印で結んだ経路の地図
- 開始点（どこから来るか）と完了後（どこへ戻るか）まで含めて1本の経路
なぜ経路の設計が要るのか
経路を設計せずに作ると、作ってから、完了した後どこへ行くのかが発覚します。AIは1画面ずつなら正確に作れますが、経路全体の設計は人間が渡さないと抜け落ちます。これはA-08で学んだ、入力と出力を先に決める話の画面版です。行き先を指定しないまま頼めば、AIは目の前の1画面だけを作り、画面どうしのつながりまでは考えません。その結果、たどり着けない画面や、戻れない画面が生まれてしまいます。
このスライドのポイント
- 経路を渡さないと、AIは目の前の1画面だけを作る
- 作ってから「完了した後どこへ行くのか」が発覚する
- A-08「入力と出力を先に決める」の画面版
経費申請の遷移図
具体例として、経費申請の遷移図を考えます。一覧から新規作成へ、入力から確認へ、確認から申請して完了へ、そして完了から一覧へ戻る、という一本の経路です。ここで設計として明記すべきなのが、完了後の戻り先と、キャンセルしたときの戻り先です。多くの設計不備は、この2つの出口を決め忘れることで起きます。すべての画面に、入る矢印と出る矢印の両方があるかを確認してください。
このスライドのポイント
- 一覧→新規作成→入力→確認→申請→完了→一覧へ戻る、の一本の経路
- 明記すべき出口: 完了後の戻り先／キャンセル時の戻り先
- すべての画面に「入る矢印」と「出る矢印」があるか
経路が抜けたときの定番事故
経路の設計が抜けると、定番の事故が起きます。1つ目は行き止まりです。申請完了画面から次にどこへも行けず、利用者はブラウザを閉じるしかなくなります。2つ目は戻れない問題です。完了後にブラウザの戻るボタンを押すと、申請がもう一度送られてしまう二重送信が起きます。どちらも、画面そのものの出来ではなく、経路の設計が無いことが原因です。完了後は一覧へ戻す、という出口を1つ決めておくだけで、これらは防げます。
このスライドのポイント
- 行き止まり: 完了画面から次にどこへも行けない
- 戻れない: 完了後にブラウザの戻るで二重送信が起きる
- どちらも画面の出来ではなく、経路設計の不在が原因
サンプル: 経費申請の遷移図
スライドの遷移図を見てください。これがこの講義のサンプルです。種別は図で、目的は経費申請の全経路を1枚で確認することです。読み方のポイントは2つあります。1つ目は、すべての画面に入る矢印と出る矢印があること。2つ目は、キャンセルの経路も設計の一部として描かれていることです。正常に進む道だけでなく、途中でやめる道まで描いて初めて、経路の設計は完成します。AIには、このアプリの画面遷移図を描いてください、行き止まりの画面はありませんか、と頼みます。
「画面を作る」と「経路を作る」
混同しやすいのが、画面を作ることと、経路を作ることの違いです。必要な画面がすべて揃っていても、それらが矢印でつながっていなければ、利用者は目的を果たせません。部品が揃っていることと、通り道が通っていることは、別の話です。前回のH-02が地点の配置なら、今回は地点をつなぐ道であり、両方がそろって初めて使えるアプリになります。
このスライドのポイント
- 画面を作る＝必要な箱を1つずつ用意すること
- 経路を作る＝箱を矢印でつなぎ、通り道を通すこと
- 箱が揃っても、道が通っていなければ使えない
バイブコーディングでの確認点
バイブコーディングでの確認点です。実装を頼む前に、まずAIへ遷移図を描かせてください。そのうえで、行き止まりの画面はないか、戻れない画面はないか、完了後の行き先は決まっているか、という3点を確認してから作らせます。図の段階で経路の穴に気づければ、作り直しの手間を大きく減らせます。AIへの質問例は、この遷移図の中で、入る矢印か出る矢印が足りない画面を挙げてください、です。
このスライドのポイント
- 実装前に、まずAIへ遷移図を描かせる
- 確認する3点: 行き止まりはないか／戻れない画面はないか／完了後の行き先は決まっているか
- 図の段階で穴に気づけば、作り直しの手間が減る
まとめと次回
最後に一問一答です。遷移図で必ず確認すべき出口は何でしょうか。少し考えてみてください。答えは、完了後の行き先と、キャンセル時の戻り先です。この2つの出口の決め忘れが、行き止まりと二重送信の主な原因でした。30秒でまとめます。画面遷移は、操作でどの画面へ移るかの経路設計であり、遷移図は、画面を箱、操作を矢印で描いた地図です。開始点と完了後まで含めて1本の経路にすること、そして実装前に図で出口を確認することが要点でした。次回は、経路の中の1画面、入力フォームの設計へ進みます。関連資料は、画面設計チェックリスト100と、SaaS画面パターン100です。
このスライドのポイント
- 一問一答: 遷移図で必ず確認すべき「出口」は？
- 答え: 完了後の行き先と、キャンセル時の戻り先
- 次回H-04: 経路の中の1画面、入力フォームの設計へ
- 関連資料: 「画面設計チェックリスト100」「SaaS画面パターン100」
