状態遷移図と画面遷移図の違いをわかりやすく解説！初心者にもおすすめの基本知識

---

状態遷移図とは何か？

状態遷移図（じょうたいせんいず）とは、システムやプログラムの『状態』がどのように変わるかを図で表したものです。
例えば、自動販売機が『待機中』から『お金を受け取った状態』へ、さらに『商品を出す状態』へと変わる動きを表します。
この図では、丸や四角の枠で状態を表し、それらの間を矢印で結びます。
矢印には条件やきっかけとなる出来事（イベント）が書かれており、それを満たすと状態が変わります。
つまり、状態遷移図は物の『状態』や『動作の変化』に注目しているのが特徴です。
様々な分野で使われていて、例えばゲームのキャラクターの動作、ロボットの動き、家電製品の動作パターンなどを表現するときに役立ちます。

画面遷移図とは何か？

一方、画面遷移図（がめんせんいず）とは、アプリやウェブサイトの『画面がどのように切り替わるか』を説明するための図です。
利用者がボタンを押したりリンクをクリックしたときに、どの画面からどの画面へ移動するかを示します。
例えばスマホアプリでメニュー画面から設定画面へ行く流れや、ショッピングサイトで商品一覧からカート画面へ行く流れを図にします。
図では画面を四角のボックスで表し、それらの間を矢印で結んでいます。
画面遷移図のポイントは、ユーザー体験の中の“画面の移動”に焦点を当てていることです。
デザイナーや開発者が使い、使いやすいアプリやサイトをつくるのに役立ちます。

状態遷移図と画面遷移図の違い

ここまで説明した２つの図の違いを表にまとめます。

ding="5">

ポイント	状態遷移図	画面遷移図
対象	システムやモノの『状態』や変化	アプリやサイトの『画面の切り替え』
表現内容	状態（例：待機、処理中、完了）と条件	画面名と画面間の遷移関係
使用目的	動作の流れ理解、設計、動作確認	ユーザーの操作の流れ把握、画面設計
利用者	エンジニア、システム設計者	UIデザイナー、開発者、プロジェクトマネージャー
図の構成要素	状態（ノード）、イベント、遷移（矢印）	画面（ノード）、遷移（矢印）

このように、状態遷移図は中の動きや状態の変化を細かく見るのに適していて、画面遷移図はどういう順番で画面が変わるかを全体的に見るのに適しています。
両者は似ているように見えますが、フォーカスしている視点が違っているのです。

まとめ

状態遷移図と画面遷移図は、どちらもシステムの動きを理解するための図ですが、
状態遷移図は『システム内部の状態の変化』に注目し、画面遷移図は『ユーザーが操作でたどる画面の流れ』に注目しています。
どちらの図を使うかは、何を知りたいのか、誰が見るのかで決まります。
プログラムの中身やロジックを考えるときは状態遷移図、アプリの使いやすさやUI設計を考えるときは画面遷移図を使うと覚えておきましょう。

理解が深まると、より良いシステムやアプリを作ることができるようになります。
ぜひ、両方の図の違いを押さえて、開発の現場で役立ててくださいね。

ピックアップ解説

状態遷移図の“状態”って、実はとても奥が深いんです。例えばゲームのキャラクターなら『立っている』『走っている』『ジャンプしている』など様々な状態がありますよね。状態遷移図はこれらの動きがどのように順番に変わっていくかをわかりやすく教えてくれます。中学生のみんなには、“動く絵コンテ”のようなもので考えると理解しやすいかもしれません。単に画面が変わるだけじゃなく、心の中（状態）がどう変化するかを図にするんですよ。ちょっとしたゲーム作りに挑戦するときにも役立つので、ぜひ覚えておくと楽しいですよ！

---