画面遷移図は、設計段階やプレゼンテーションで、画面がどのように変わるのかを確認するために重要な図です。
単に作成するだけであれば簡単ですが、画面遷移図によって、わかりやすく全体を管理したり、変更が生じた際の修正が非常に簡単になります。今回は、画面遷移図の効率的な書き方と、簡単に作成・修正ができるツールを紹介します。
画面遷移図とは
画面遷移図は、Webサイトやアプリケーションの画面の流れを描いた図表です。画面遷移図を作るタイミングは、要件定義の段階もしくは、基本設計の作成時です。
画面遷移図を描くことで、以下のような目的を達成することができます。
画面遷移の全体像の把握
顧客や製造者への説明資料
サポートやマニュアル作成の資料
要件定義のテンプレートについては以下の記事を参照
サンプルあるの要件定義テンプレート
わかりやすい画面遷移図の書き方
画面遷移図は、構成案を考える段階では、どのようなツールを用いてもかまいません。ホワイトボードやメモ用紙に手書きの方がむしろ柔軟な発想ができるでしょう。
通常は、最終的にエクセルなどのツールを使用しますが、画面遷移図を書く方法のそれぞれのメリット、デメリットは以下のようなものです。
手書き
画面遷移図を作成する一番初期の段階では、手書きが一番早く簡単です。頭で考えたことを直にアウトプットするには、ツールを使うとどうしてもワンクッションが入ってしまいます。
どんな画面が必要なのか、どのようなアクションで遷移させるかという基本的なことが固まっていない段階では、すぐに修正ができる手書きでアウトラインを作った方が圧倒的に効率がいいです。
ある程度手書きで図ができた段階でツールやソフトの利用を考えましょう。
エクセル
画面遷移図を作るときに使い慣れたエクセルを使うと最初からキレイな図を描けます。
また、要件定義や基本設計書を作成するときに、エクセルで統一する方が何かと便利です。簡易な図形しか使わない画面遷移図やエクセルの操作に慣れていれば、誰でも使えるエクセルでささっと書くというのも悪くないです。
ただエクセルの場合は、移動の線の引くのが面倒なので修正が多い場合には効率が悪くなるかもしれません。また、ボタンや機能をエクセルの図形で作るのは結構難しいです。
・企業なら多くの人がもっているソフトなので配布が容易
・複雑な画像を作成しにくい
パワーポイント
プレゼンテーションで使用する際には、パワーポイントで画面遷移図を作成すると非常に便利です。多くの企業でパワーポイントがインストールされていることが一般的であり、多くの人が既に使い慣れているため、コスト面でも負担が少ないです。
ただし、エクセルも十分に画面遷移図の作成には適しており、パワーポイントがインストールされていない環境でも問題なく利用できます。そのため、画面遷移図の作成が主目的であれば、パワーポイントを特別に使用する必要は少ないでしょう。
・画像の作成や自由度はエクセルよりも高い
・エクセルよりインストールされている数が少ない
Webサービス
draw.ioやcacooなどの作図専用のWebサービスを利用すると、洗練された画面遷移図を手軽に作成できます。モックアップ作成と画面遷移図の作成が一緒にできるサービスも存在するため、単純な図形だけの遷移図よりも、より直感的に理解しやすい図が描けます。
ただし、ツールにはいくつかのデメリットもあります。操作自体は直観的で簡単ですが、初めて使用する場合には操作方法を学ぶ必要があります。また、サービスによっては利用料金が発生する場合もあります。
・専用のツールなので修正が用意
・ワイヤーフレームと同時に作成できる
・ツールによっては月額費用がかかる場合がある
・設計書の作成ツールがバラバラになる場合がある
見やすい画面遷移図の作成テクニック
以下では、見やすく効率的な画面遷移図を作成するためのポイントをご紹介します。
用紙サイズの工夫で見やすさを追求
画面遷移図が多くなると、A4用紙1枚に収めきれなくなることがあります。しかし、サービス全体の画面の流れを一覧で確認したい場合が多いため、A3用紙を使用するか、各画面を小さくして1枚にまとめる工夫が必要です。
画面の流れを左から右に整理
初心者の作成者が陥りがちなのは、メイン画面を中央に配置し、そこから放射状に画面遷移を描くスタイルです。画面の流れを一目で把握するためには、左から右、または上から下に画面が移動する形式が理解しやすいです。ただし、アプリやシステムの流れが複雑な場合、このルールが必ずしも適用できないこともあります。
画面名と条件を直感的に理解できるように
「画面1」や「LoginMenu」のような実装に近い名称は、製造段階では便利ですが、説明資料としては読みにくくなります。例えば、「顧客一覧」や「顧客情報詳細」のように、機能を直訳した日本語の名称を使用すると、後で確認する際にも見やすくなります。
権限別に画面遷移図を分類
ユーザーと管理者で画面遷移が異なる場合は、すべてを1枚の図にまとめると、非常に複雑で見づらくなります。権限ごとに遷移図を作成することで、見やすさと理解しやすさが向上します。
画面遷移図におススメのツール
画面遷移図を直観的に書けるおすすめのツールをいくつか紹介します。各ツールごとに特徴がありますので、自分に合いそうなツールを選んで試してみてください。
Cacoo
Cacooは、ブラウザ上で使用できるオンラインのドローツールです。draw.ioとできることはほとんど同じですが、保存できる先や使い勝手が多少違うのでこの辺は好みで決めていいでしょう。
Cacooの方が、保存先の種類は少ないですが、ワイヤーフレーム用のパーツが多いので、単なる図形の画面遷移図よりわかりやすい図を描くことができます。
draw.io
「draw.io」は、オンラインで簡単にフローチャートや画面遷移図などを作成できる作図ツールです。作成した図は、画像やPDFファイルでGoogleドライブやMicrosoftのOneDriveなどに保存したりローカルにダウンロードすることもできます。
エクセルやパワーポイントとの違いは、図の作成に特化しているところです。専用のアイコンが豊富にあるため、選んでドラッグするだけで簡単に画面遷移図を描くことができます。
prott
prottoは、Webサイトやスマホアプリなどのワイヤーデザインを簡単に作るためのオンラインツールです。
無料版もありますが、１ユーザー１プロジェクトしか使えない上に画面遷移図は有料のproプラン以上でしか使用できません。
prottは、画面遷移図用のツールというよりワイヤーフレームを作るツールなので簡易で全体の概要をみるというよりは、しっかりと作り込んだプロトタイプで画面遷移の詳細を作るというイメージに近いです。
Overflow
「Overflow」はMac用の画面遷移図作成ツールで現在のところはWindowsでは使えません。AdobeXDやFigma、Sketchなどのデザイン系アプリと連携することもできるので、よりビジュアル性に優れた画面遷移図を描くことができます。
Overflowは、モックアップの画面から遷移図を描くことができるので完成がイメージしやすいです、さらに、画面と画面を結ぶ線の種類が多い上に線にコメントをつけることができるのでサクサクと遷移図を描くことができます。
ただし、無料で使用できるのは1ヶ月だけでその後は有料なので、使い勝手がよいと感じる場合は続けて使うのがいいでしょう。
Visio
WindowsだとMicrosoftのVisioが有名です。Visioには画面遷移図のステンシルや、テンプレートがあるので簡単に作成することができます。
簡易的な図の画面遷移図を作成することも、Webサイトやスマホアプリのワイヤーフレームを作成して画面遷移図を作成することもできます。
まとめ
今回は、画面遷移図を書く方法やコツ、画面遷移図を書くときに使うツールについて紹介しました。
画面遷移図は、如何にキレイに書くかではなく見やすい、わかりやすく書くことが大切です。今回紹介した書き方のコツや作成に便利なツールを利用してわかりやすい画面遷移図を作成してください。
