画面設計で制作する「画面遷移図」とは「Webサイトやアプリケーションの画面間の相互関係を1つの図にまとめたもの」のことを言います。要するに、以下2つの要素を1つの図にまとめたもののことです。

• どんな画面があるか？
• どの画面からどの画面に移動（遷移）するのか？

また、画面遷移図には主に以下3段階のレベルがあります。
まずは1段階目から簡易的に作り、プロジェクトのフェーズや他メンバー・クライアントの理解度に応じて必要なレベルまで解像度を上げて設計していきましょう。

※注意：
画面イメージについては基本的に、次パートで学習する「ワイヤーフレーム」を作成するフェーズで検討するものであるため、ここでは簡易的なものを時間をかけすぎずに作るとお考えください。

画面遷移図を作成するメリットとして主に以下の4つが挙げられます。

• サービスの全体像を捉えることができる
• 画面間の相互関係を把握しやすい
• サービスの規模を掴むことができる
• 必要な画面を洗い出すことができる

まずは案を書き出していきましょう。最終的にはExcelやPowerPointなどのツールを利用して設計をするので、この時点ではメモ用紙に書き出す方法で問題はありません。

画面遷移図を書くそれぞれの方法は下記の通りです。

• 手書き
• Excel
• PowerPoint
• Webサービス

画面遷移図にはいくつかの種類があります。それぞれの作成方法について紹介します。

画面名だけを書いた図形を線で結んで画面遷移図を作成する方法です。ツールを使うほどではない、アイデア出しの段階でよく作られる画面遷移図です。紙とペンがあればサクッと作ることができます。

画面名と機能を1つの図表にまとめて、それを線で結んで画面遷移図を作る方法です。画面名のみの画面遷移図と比べて、その画面で何ができるか明確になる為、サービスをより具体的にイメージしやすくなります。ある程度サービスの概要が固まってきたタイミングで作るのにおすすめです。

画面デザインを使って画面遷移図を作成する方法です。画面のどこを押せば次の画面に遷移するのかが明確になります。UIやUXについて検討を行うために作られたり、デザインチームがデザインの説明を行う際に使用されることが多いです。

画面遷移図を作成するにあたって、気を付けて欲しいポイントが3あります。作成する際は下記の3つの原則に注意しましょう。