設計段階やプレゼンでどのように画面が変わっていくのか確認するために必要な画面遷移図。
単に作るだけなら簡単なのですが、わかりやすく全体を管理したり、変更があったときに修正するのが非常に面倒ですよね。
そのため、最初に気合を入れて書いたはいいがメンテナンスされずに最初の案のままということも。そこで、今回は、画面遷移図の書き方と簡単に作成や修正ができるツールを紹介します。
画面遷移図とは
画面遷移図は、Webサイトやアプリケーションの画面の流れを表すための図表です。画面遷移図を作るタイミングは、要件定義の段階もしくは、基本設計の段階が多いです。
画面遷移図を描くことで、以下のような目的を達成することができます。
どの画面からどの画面に移動できるのか
顧客や製造者への説明資料
完成後のサポートやマニュアル作成の資料
画面遷移図の書き方
画面遷移図は、案の段階では何で書いてもかまいません。ホワイトボードやメモ用紙に手書きの方がむしろ発想を柔軟に書けるでしょう。
最終的にが設計としてエクセルやツールを使用して作成しますが、画面遷移図を書くそれぞれの方法とメリット、デメリットについて考えてみます。
手書き
画面遷移図を作成する一番初期の段階では、手書きが一番早く簡単です。頭で考えたことを直にアウトプットするには、ツールを使うとどうしてもワンクッションが入ってしまいます。
どんな画面が必要なのか、どのようなアクションで遷移させるかという基本的なことが固まっていない段階では、すぐに修正ができる手書きでアウトラインを作った方が圧倒的に効率がいいです。
ある程度手書きで図ができた段階でツールやソフトの利用を考えましょう。
エクセル
画面遷移図を作るときに使い慣れたエクセルを使うという人は多いでしょう。
要件定義や基本設計書を作成するときに、エクセルで統一する方が何かと便利です。簡易な図形しか使わない画面遷移図やエクセルの操作に慣れていれば、誰でも使えるエクセルでささっと書くというのも悪くないです。
ただエクセルの場合は、移動の線の引くのが面倒なので修正が多い場合には効率が悪くなるかもしれません。また、ボタンや機能をエクセルの図形で作るのは結構難しいです。
・企業なら多くの人がもっているソフトなので配布が容易
・複雑な画像を作成しにくい
パワーポイント
プレゼンに使う場合などは、パワーポイントで作成すれば、そのまま利用できるので便利です。パワーポイントも企業であればインストールされている場合が多いですし、使い慣れている人も多いので作成コスト的には低い部類です。
ただし、エクセルと比べるとパワーポイントをインストールしていない人もいるので画面遷移図を描くだけなら、エクセルとそう変わらないのでわざわざパワーポイントを使うメリットは少なくなります。
・画像の作成や自由度はエクセルよりも高い
・エクセルよりインストールされている数が少ない
Webサービス
draw.ioやcacooなど作図用のWebサービスを使うことでかっこいい画面遷移図が簡単に作れます。モックアップを作ると同時に画面遷移も作れるサービスもあるので、単なる図形だけの遷移図より、さらにイメージしやすい図が作れます。
ツールのデメリットとしては、操作は簡単で直観的には使えますが、初めての場合はどうしても使い方を覚えなければいけないこと。サービスによっては、費用が掛かることなどがあります。
・専用のツールなので修正が用意
・ワイヤーフレームと同時に作成できる
・ツールによっては月額費用がかかる場合がある
・設計書の作成ツールがバラバラになる場合がある
画面遷移図のコツ
では実際に見やすい画面遷移図を書くときのコツについて紹介します。
できれば用紙一枚に収める
画面遷移図が多くなってしまうと、A4用紙1枚では収まりきらなくなってとても小さい画面か、複数枚になってしまうこともあります。
画面遷移図は、サービス全体の画面の移動を見たい場合がほとんどなので、A3用紙を使うか１つ１つの画面を小さくするなど工夫して1枚に収めた方が見やすくなります。
画面の移動は左から右に整頓させる
画面遷移図を書きなれていない場合に、失敗しがちなのがメイン画面を中央に置いてそこから放射状に画面の遷移を描いてしまうことです。
画面の流れを把握したいので、左から右へ、上から下に画面が移動した方がわかりやすい画面遷移図になります。ただし、アプリやシステムによっては流れが複雑な場合もあるので、必ずしもこれが当てはまらない場合もあります。
画面名や条件はわかりやすい名前にする
画面名を「画面1」→「画面2」としたり、「LoginManu」→「SalesInfoDialog」などと実装に近い名称になっていると製造する場合にはそのまま作れるので便利ですが、ユーザーに説明したり、全体の概略を説明する資料としては読みにくくなります。
「顧客一覧」→「顧客情報詳細」といったように機能の名称を日本語で書く方が後で見やすいでしょう。
利用者の権限で遷移図を分ける
ユーザーと管理者の権限別に画面の遷移先がわかれることはシステムを作るときによくあることです。権限別の遷移先をすべて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サイトやスマホアプリのワイヤーフレームを作成して画面遷移図を作成することもできます。
まとめ
画面遷移図を書く方法やコツ、画面遷移図を書くときに使うツールについて紹介しました。
画面遷移図は、如何にキレイに書くかではなく見やすい、わかりやすく書くことが大切です。今回紹介した書き方のコツや作成に便利なツールを利用してわかりやすい画面遷移図を作成してください。
