画面遷移図テンプレート

画面遷移図テンプレートとは？

画面遷移図（画面フロー図とも呼ばれる）は、ワイヤーフレームの一種で、webサイトやシステム開発において画面間の関係を一目で分かるように整理した図のことです。

各画面間のフローを視覚的にマッピングすることにより、ユーザーが webサイト上の各画面をどのような流れで、何を見て、製品やサービスを購入する際の意思決定にどのような影響を与えるかを深く分析することができます。

こんな人におすすめ

UX・UIデザイナーや、プロダクト開発に関わる人、ブランドのマーケティングに関わる人など、製品やサービスとユーザーの接点をデザインする人たちに幅広く活用していただけます。

画面遷移図テンプレートを活用することで、ユーザーが製品やサービスに辿り着くまでのフローを簡単に構築したり、修正点を見つけることができます。

画面遷移図テンプレートの使い方

画面遷移図は、画面そのものと、ページごとのユーザー体験に焦点を当てて作成することが重要です。テンプレートを使って、簡単に画面遷移図を作成するステップを紹介します。

1. ユーザーストーリーを定義する

画面遷移図を描き始める前に、ユーザーニーズと解決すべき顧客の課題をユーザーストーリーとして書き出しましょう。

ユーザーストーリーはターゲットとなるユーザーが、どのような結果を求めていて、何をしたいのかということを明確にするフレームワークです。

ユーザーが求めることが画面遷移図の出発点を具体的にするための材料となります。

2. キーポイントとなる画面を決定する

Webサイト内で、ユーザーの動きを想像し、ユーザージャーニーの開始点と到着地点を定義しましょう。

ユーザーのタッチポイントとなる各画面を書き出したら、変更や追加が必要な箇所を特定します。

例えば、ランディングページをどこに設置するか、サインアップフォーム画面や確認画面はどこのフローに含めるか、分割すべきページや追加すべき画面は存在するかなどです。

この際、Miroのワイヤーフレームツールに豊富に用意された、15種類以上のUIコンポーネントを活用することがおすすめです。

画面のインスピレーションを得て、そのまま画面遷移図に簡単に追加することができます。

3. 画面同士を接続する

全画面を書き出した後、Miroボードにあるコネクタツールを使用して、各画面を矢印で接続し、理想的なユーザーフローを構築します。

意思決定ポイントを分析し、ユーザーが選択（クリック）できる画面内のオプションやボタンから、どこに移動するかということを明確にしていきましょう。

全ての画面を接続していくと、ユーザーの動きが見える化され、改善が必要な場所が見えてきます。

Miro では画面遷移図やワイヤーフレームの作成に役立つワイヤーフレームテンプレートが多数ご利用いただけます。

専用のツールやテンプレートを使ってアプリやwebサイトの開発を効率化しましょう。