「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典

サクっと一言で説明すると

「どんな画面があって、どの画面からどの画面に移動するか（移動できるか）」を描いた図

が「画面遷移図」です。
一般的には箱で画面を表現し、線や矢印で画面間のつながりを表現します。



例えば、そうですね。

ピヨ太君が、とあるシステムの会員登録機能を作ることになりました。



会員登録機能は3つの画面からなる機能です。
動きとしては

１．登録画面で「確認」ボタンを押すと確認画面に移動する
２．確認画面で「登録」ボタンを押すと完了画面に移動する
３．確認画面で「キャンセル」ボタンを押すと登録画面に移動する

ようになります。

さぁ！頑張って作るぞ！……と思ったピヨ太君ですが、やっぱり面倒くさくなりました。



そこで、ピヨ子さんに代わりに作ってもらうことにしました。
ケーキを供えれば、やってくれるでしょう。



ピヨ太君はピヨ子さんに作ってほしい機能の中身を説明します。
3つの画面からなる機能であることと、動きは

１．登録画面で「確認」ボタンを押すと確認画面に移動する
２．確認画面で「登録」ボタンを押すと完了画面に移動する
３．確認画面で「キャンセル」ボタンを押すと登録画面に移動する

になることを説明しました。



ピヨ子さんは「さっぱり分からん。やり直し」と言いました。



う～ん、言葉だけで説明しても分かりづらいみたいですね。
ピヨ太君は図を使って説明することにしました。



今度は、どうでしょうか。
「こんな画面があるよ」と「この画面からこの画面に移動するよ」を箱と矢印で表現した図を作って、ピヨ子さんに見せます。



ピヨ子さんは「ふむふむ。なるほど」と言いました。
どうやら伝わったようです。



この話で登場した

「こんな画面があるよ」と「この画面からこの画面に移動するよ」を箱と矢印で表現した図

が画面遷移図です。



画面遷移図の描き方は、いろいろ あります。

例えば、今回のピヨ太君が描いたような描き方です。
この描き方が一番シンプルなんじゃないですかね。



どのボタンを押すとその画面に移動するかを表現する場合も あります。



画面の見た目を、それっぽくする場合も あります。



画面遷移図は

１．どんな画面があるか
２．どの画面からどの画面に移動する（移動できる）か

を表現した図です。
それさえ満たしていれば、どのような描き方でも「画面遷移図」と呼べると思います。