webサイト制作において、各ページ間の関係性の可視化に欠かせない画面遷移図。本記事では画面遷移図の意味や役割、Adobe XDを用いた作成手順をご紹介します。
特に以下のような悩みをお持ちの方は、本記事が解決の一助となれば嬉しいです。
・画面遷移図の作り方を知りたい
・画面遷移図のテンプレートが欲しい（※AdobeXDデータ）
Contents
画面遷移図の意味と役割
画面遷移図とは、Webサイト内のページの関連性を可視化したものです。
Webサイトは、多くのページで構成されるものが一般的です。 その際、各ページの関係性（画面の流れ）に意図がない場合、Webサイトの利用者は「○○ページにはどこから遷移できるんだろう」など困惑してしまいます。
「どのような種類の、どれくらいの量のページで構成されるのか」「各ページの関係性はどうなっているか」「Webサイトの目的（問い合わせなど）へ訪問者をスムーズに誘導できるか」などを把握・実現するためにも画面遷移図の作成は必須です。
画面遷移図の作成で意識すべきこと
画面遷移図作成の中で意識しておくと良いことをご紹介します。
作成に時間を掛けすぎないこと
画面遷移図は、Webサイトの構造を直感的に把握できるものです。
それゆえ見た目も自由に作成できることから、私もそうですが、ついおしゃれに作り込みたくなってしまいます。
ただし画面遷移図を作成する目的は「Webサイト内のページの関連性を可視化」すること。更にそれにより「関係者間で共通認識を持てるようにすること」にあります。
カッコ良いものを作れば見栄えも良くなりますが、Webサイトの制作過程で活用する一つのツールである以上は上記が達成していれば問題ないため、作り込みに時間を掛けすぎないようにしましょう。
利用者を明確にすること
Webサイトの中には、権限や立場により閲覧できるページが変わる管理システムなどもあります。
権限や立場により閲覧できるページが異なることを加味せずに、１つの画面遷移図に纏めようとすると、とても複雑な図になってしまうことが想像できると思います。
そのような場合は、権限や立場に応じて分類した画面遷移図を作成することで、サイト構造を直感的に把握できる図となるでしょう。
ページに適切な名前をつけること
画面遷移図において各ページ名を「ページA」「ページ1」等の通し番号とした場合、本来の画面遷移図の役目である「Webサイト内のページの関連性を可視化」が損なわれる可能性があります。
また場合によっては、番号の見誤りなどから関係者の間で認識のズレが生じる可能性があります。
ただしこれが「”ページA”→”ページB”」ではなく「”お仕事一覧ページ”→”お仕事詳細ページ”」であれば、ページ間の関連性を直感的に把握できます。
誰もが認識できる分かりやすい名前をつけることが大切です。
画面遷移図の作成手順
それでは実際に画面遷移図を作っていきましょう。
本記事は新しくWebサイトを制作する方向けに手順をご紹介していますが、既存Webサイトのリニューアルや振り返り時での活用も有効かと思いますので、ぜひご参考ください。
①サイトマップの作成
画面遷移図を作成するには、まずサイトマップの準備が必要です。
サイトマップとは、GoogleスプレットシートやExcelなどを通して、Webサイト内のページ・コンテンツを一覧化したものです。
サイトマップでページの整理、画面遷移図で各ページの関係性をビジュアライズといった手順です。
いきなり画面遷移図を作成することも可能ではありますが、事前に表形式などで情報整理を行っておくことで、作業全体がスムーズに遂行できるかと思います。
サイトマップの詳しい作り方は、以下の記事をご覧ください。
そして上記記事で作成した次のサイトマップを基に、画面遷移図の作り方を解説していきます。
補足：作成したサイトマップの階層
*****
※階層は以下の体裁で表しています。
第1階層
└ 第2階層
└ 第3階層
*****
・https://XXX.com
トップページ
└ 当園について
└ 概要・アクセス
└ 施設のご紹介
└ 地域とのつながり
└ 園での生活
└ 保育について
└ 教員について
└ 入園案内
└ お知らせ
└ 食事について
└ お問い合わせ
└ プライバシーポリシー
└ よくあるご質問
・https://alubum.XXX.com
トップページ（フォトアルバム一覧ページ）
└ アルバム詳細
└ 新規登録
└ ログイン
※詳細はこちらの記事で解説していますが、今回は「保育園のサイト」の制作を例にご紹介しています。
「https://XXX.com」のドメインは園に関する紹介サイト、「https://alubum.XXX.com」のドメインは親御さんなど関係者のみが閲覧可能なフォトアルバムのサイトと設定しています。
②画面遷移図の作成（Adobe XDプラグイン・Flow kitの活用）
「Flow kit」のインストール
画面遷移図をAdobeXDで作成する上で、作業効率化できるプラグイン「Flowkit」をご紹介します。
これはオブジェクト同士を結ぶ矢印を１クリックで生成できるもので、使用までの手順を以下に示します。
①作者GitHub内のインストールリンクをクリック
https://github.com/shingo2000/xd-plugin-flowkit にアクセスし、以下インストールリンクをクリックします。
②「Adobe XD app を開く」をクリック
モーダルが表示されたら「Adobe XD app を開く」をクリックします。
③Flowkitのインストール画面で「インストール」をクリック
Flowkitの紹介画面が表示されたら、インストールをクリックします。
④Adobe XDでプラグインから「Flow kit」を選択
最後にAdobe XD内で「Flow kit」のプラグインが表示されれば完了です。
※使い方は次の動画で分かりやすく紹介されていましたのでご参照ください。
画面遷移図の作成
サイトマップで洗い出したページ群の関係性を、画面遷移図によって可視化しましょう。
ただ難しいことをする必要はなく、サイトマップで整理した情報を踏まえ、次のように各ページの関係性が分かるように配置していきます。
ここでもう一度サイトマップを振り返ってみましょう。
例えば第1階層の「トップページ」の下に、第2階層の「当園について」、その下には第3階層の「概要・アクセス」があります。
これらはサイトマップ上でも関係性を把握できるものの、画面遷移図の方がより直感的に把握できるようになっていると思います。
以上で画面遷移図は完成です。
このようにサイト構造を可視化することで、実際のサイトの使われ方をより明確にイメージできるのではないでしょうか。
今回使用した画面遷移図のテンプレート（Adobe XDデータ）は、以下からダウンロードできます。
よろしければご活用ください。
おわりに
ここまで読んでくださりありがとうございます。
Webサイト内のページの関連性の可視化に画面遷移図は欠かせません。
もし画面遷移図をこれから作成予定でサイトマップが未作成の場合は、サイトマップから作成することをオススメします。
詳しい作り方は以下をご参考ください。
また画面遷移図・サイトマップの作成は、Webサイト制作の中の業務のひとつに当たります。
Webサイト制作全体の流れを知りたい方は、以下記事をご覧ください。
基本的にサイトマップと画面遷移図はセットで作るものです。
そしてどちらも作り方や表現の仕方に正解はありませんので、皆さんの使用されるツール（紙でも良いと思います）でやりやすいと思う方法で手を動かすことが大切です。
本記事もその一つとして、画面遷移図作成の際に参考になれば嬉しいです。
