あおい
Web開発やシステム開発などに欠かせない画面遷移図ですが、作成がめんどくさく思われがちです。しかし、作り方や便利なツールを知っていることで、簡単に作成できます。
本記事では、画面遷移図の作り方と便利な無料ツールを紹介します。ぜひ参考にして、有効な画面遷移図を作成し、開発を成功に導きましょう。
1. 画面遷移図とは？
具体的に画面遷移図とはどのようなものなのでしょうか？画面遷移図によく似ている図に状態遷移図というものがあります。このよく似ている状態遷移図と比較しながら紹介します。
状態遷移図との違い：
画面遷移図とは、以下の図のようなものです。
画面遷移図は、Web開発やシステム開発の際に、画面間の相互関係を把握するために作成するものです。サービス全体の規模を一目で把握できるようになり、メンバー同士の認識の違いやページの抜け落ちなどを防ぐことができます。
一方、状態変遷図とは、以下の図のようなものになります。
状態変遷図とは、状態の移り変わりを図面化したものです。画面変遷図と似ていますが、図のように画面変遷図は画面間の相互関係を表し、状態変遷図は状態の移り変わりを表したものという違いがあります。
2. 画面遷移図の作り方
画面変遷図がどのようなものかわかったところで、画面変遷図の作り方を紹介します。2つの作り方を紹介しますが、自分の状況や目的にあった方法を選びましょう。また、2つの作り方を両方活用することも一つの方法です。ぜひ参考にしてください。
2.1 手書きで画面遷移図を作る
画面変遷図作成の初期段階では、素早く、直感的に書くことのできる手書きでの作成が適しています。画面変遷図は、何度も書き直し、ブラッシュアップしていく必要があります。そのため、ボールペンなどの消すことのできないものよりも、鉛筆やシャープペンなどの消すことのできるものを使用することがオススメです。
まずは、形や見た目にこだわらず、紙とペンを用意して、直感的にどんどん書き進めていきましょう。完成後、手書きもしくはツールを使用して、きれいに作り直して共有するほうが効率がいいです。
2.2 オンラインツールで画面遷移図を作る
画面変遷図に限らず、様々な図を簡単に作成できるオンラインツールが多く存在します。これらのオンラインツールを使用することで、より簡単に分かりやすい画面変遷図を作成することができます。
ただし、オンラインツールを使って作成する場合、パソコンの操作がワンクッション入るため、手書きに比べて直感性に劣るので注意が必要です。他の人に共有する段階では、分かりやすく、見やすくまとめることのできるオンラインツールの使用をオススメします。
3. 画面遷移図を作成する3つのメリット
画面変遷図を作成することでどのようなメリットがあるのでしょうか？ここで紹介するメリットを知ることで、画面変遷図の重要度を知ることができます。メリットをより享受できるよう、より良い画面変遷図の作成を目指しましょう。
3.1 課題の可視化
画面遷移図を通して、メンバーがユーザー目線で商品やユーザー体験を捉えることができるようになります。ユーザーの抱えている問題を解決することが開発側の課題ですので、開発側の課題を簡単に可視化できます。課題が可視化されることで、改善点が見つかり、より良いサービスの提供が可能です。
3.2 情報の共有化
開発チームは多くの場合、部署や年齢、経験や知識レベルも全く違うメンバーで構成されます。そのため、専門的な用語や難しい言葉など、文字や言葉では全員が細かなことまで理解できない問題が出てきます。しかし、画面遷移図を使い、視覚的な情報で共有することで、メンバー全員が情報を共有することが可能です。
3.3 UXの改善
画面遷移図を使用し、メンバー全員で情報や課題を共有することで、全体のユーザー体験（UX）に関して、広く議論することができるようになります。また、サインアップ、確認画面、ポップアップなど、画面フロー内の要素がどのようにユーザーの購買意欲に影響するのかを、ビジュアルを通して分析が可能です。
4. 画面遷移図を作れるテンプレート付き無料ツールboardmix
画面変遷図を作成できるツールは多くありますが、今回は最新の無料ツール「boardmix」を紹介します。無料でありながら、様々な機能を備えており、簡単に画面変遷図を作成することができます。参考にして、無料で画面変遷図を作成しましょう。
4.1 boardmix
boardmixは、オンラインホワイトボードによって共同で閲覧や編集を可能にした次世代型の無料デザインツールです。boardmixの特徴は以下になります。
- 無料で使える
- 他社にはない機能性
- オンラインでの共有が可能
- シンプルな設計
- 直感的な操作性
- チームでの共有・編集が可能
上記のようにboardmixは、他社にはない機能性を備えています。その上、無料ですので、導入費用も発生せず、簡単に導入可能です。
4.2 boardmixの機能性
boardmixの機能性の中でも、最初から用意されているテンプレートについて紹介します。
上の図のように、多くのテンプレートが用意されており、画面遷移図はもちろん、さまざまな図や資料が無料で簡単に作成できます。先ほど紹介した画面変遷図と状態変遷図は、実際にboardmixを使って作成したものです。
作成手順は上の図のようになります。同じ色の図形同士が対応しています。今回は、テンプレートを使用せず作成しています。
- ①のボタンから図形を選択し、必要な項目を追加
- 色をつけるとビジュアルがよくなる
- ②ボタンから矢印を選択し、関係のある項目同士を繋ぐ
- 必要に応じて③のボタンからページ内の機能や項目をテキストで追加
簡単な説明ですが、それだけ簡単に作成可能ということです。ぜひ実際にboardmixを使って、無料で簡単に資料や図を作成してみてください。
まとめ
本記事では、画面変遷図の作り方と無料ツールについて紹介しました。内容をまとめると以下になります。
- 画面変遷図は、Web開発やシステム開発において全体を把握するうえで重要なものである
- 画面変遷図の作り方には、手書きとオンラインツールの2つがあり、目的や状況によって使い分ける
- 時間をかけてでも作成するメリットがある
- 無料のデザインツールを使うことで、無料で簡単に作成可能
画面変遷図は、開発において重要な役割を果たします。ぜひboardmixツールを活用し、より簡単に、より効果的な画面変遷図を作成しましょう。
