あおい
ユーザーフロー図は、Web上でのユーザー体験改善には欠かせないツールです。本記事では、ユーザーフロー図とは何か、また、活用場面や作り方について紹介します。ぜひ本記事を参考にして、ユーザー体験（UX）の向上を目指しましょう。
1. ユーザーフロー図とは？
ユーザーフロー図とは、Webサイトの各ページでユーザーが体験する要素を可視化したものです。ユーザーの行動を把握することで、よりユーザーに寄り添った、満足度の高いWebサイトの構築が可能になります。
主にユーザーフロー図は以下の要素からできています。
① 開始点と到達点
ユーザーフローの開始点と到達点を明確にした点のこと
② プロセスと行動
ログインや購入など、ユーザーが実行するステップを示した情報のこと
③ 意思決定ポイント
ユーザーが購入する上で判断基準となるページや要素のこと
④ 矢印
決定に基づいてユーザーが向かう方向を示す矢印のこと
ユーザーフロー図は、現時点でのサイト上での戦略を評価、改善する際に便利なツールです。ユーザー体験や購入プロセス、無料トライアルの実施など、事業目標達成に必要な要素を明確にしましょう。
2. ユーザーフロー図の活用場面とは？
では、ユーザーフロー図は具体的にどのような場面で活躍するのでしょうか？ここでは、ユーザーフロー図の活用場面について紹介します。
2.1 UX設計
ユーザーフロー図を作成することで、ユーザの満足に必要なUI条件が明確になります。このUIを向上させることが、UX設計の向上につながります。なぜなら、UIはUXを向上させるための一つの要素であるからです。
例えば、スマホの画面でいうと「解像度」、「ボタンの配置」など実際にユーザーが触れる部分がUIです。
一方、「画面が綺麗でみやすい」、「片手で簡単に操作ができる」などユーザーが製品やサービスを通して得られる体験がUXになります。
「解像度」は「画面が綺麗でみやすい」の一部の要素です。このことから、ユーザーフロー図はUX設計に活用が可能です。
3. ユーザーフロー図作成のメリット
ユーザーフロー図作成は手間がかかり、めんどくさいと思われがちです。しかし、手間をかけてでも作る価値のあるメリットが存在します。ここでは、ユーザーフロー図作成のメリットを紹介します。このメリットを享受するため、ユーザーフロー図作成に取り組んでみましょう。
3.1 重要なステップを可視化できる
ステップ一つをとっても、人それぞれバックグラウンドや趣味嗜好の違いで、重要度や優先順位は変わります。
ワークフロー図で、このステップを可視化できます。可視化することで、ユーザーの行動やパターンが見え、ユーザー満足度の高いサービスが提供可能です。
3.2 ミスコミュニケーションの防止
例えば、「肉を買ってきて」と言われたとします。
あなた自身はどこでどの肉を買ってきますか？スーパーで買う人もいれば、精肉店で買う人もいます。牛肉を買う人もいれば、豚肉を買う人もいます。このように、「肉を買う」という一つのステップだけとっても、人によって認識がズレるのです。
ワークフロー図を作成することで、認識を一致させることができ、ミスコミュニケーションの防止につながります。
4. ユーザーフロー図の正しい作り方
実際にどのようにしてワークフロー図を作るのでしょうか？初めて作成する人は参考にしてワークフロー図を作成してみてください。
4.1 行動ステップを作る
今回は例として「Webサイトでの商品購入」のユーザーフロー図の作成を紹介します。ゴールは「商品購入」としました。
まずは、図の赤丸の部分の行動ステップを作成します。
今回の例は、「Webサイトでの商品購入」で多くの人が経験したことがある例ですが、ほとんどの人が経験したことのないテーマの場合もあります。
その場合、実際に経験したことのある人に聞いて、振り返ってもらうことが重要です。これにより、実際にユーザーが経験する正確なステップが書き出せます。
4.2 各ステップ毎のユーザー心理を書き出す
ステップごとにユーザーの気持ちをイメージしながら書き出しましょう。
ユーザーの気持ちを書き出すことで、課題や必要条件などをイメージしやすくなります。ユーザーの気持ちはポジティブでもネガティブでもどちらでもいいです。
なぜなら、ポジティブな気持ちはそうなるために必要な要素、ネガティブな気持ちはそうならないために必要な要素をイメージできるからです。
4.3 必要となる機能を書き出す
ステップごとに必要な画面や機能を書き出します。
書き出すことで、ユーザーの状況がイメージしやすくなり、課題や必要条件が明確になります。必要な画面や機能を書き出さずに進めると、ユーザーが何に困っているかイメージが湧きません。
4.4 ユーザーが求める機能を洗い出す
最後に、ユーザーが画面や機能に求める条件を書き出します。
この条件とは、各行動ステップを進めるために必要な条件のことです。例えば、「商品検索」をして次の「商品の詳細をみる」に進むには、商品検索が簡単でわかりやすい必要があります。
このように、次のステップに進むための前提条件を書き出すことで、必要なものを想定することが可能です。
5. ユーザーフロー図が無料で作れるツールboardmix
ユーザーフロー図を作るためのツールは多く存在しますが、今回は無料でユーザーフロー図を作成できる無料ツール「boardmix」を紹介します。無料とは思えない機能性を備えていますので、無料でユーザーフロー図を作成してみましょう。
5.1 Boardmix
boardmixは、オンラインホワイトボードにより共同での編集や閲覧を可能にした次世代型無料ツールです。多くのテンプレートを備えており、さまざまな図や資料の作成に役立ちます。
boardmixの特徴は以下になります。
- 無料で使用可能
- 無料とは思えない多機能性
- オンラインでの共有が可能
- シンプルな設計
- 直感的な操作性
- チームで共有・編集が可能
boardmixは、他社のツールにはない機能性を備えていますので、無料でのユーザーフロー図の作成に最適です。
5.2 Boardmixの機能性
boardmixの機能を紹介します。
上の図のように、boardmixにはたくさんのテンプレートが用意されています。
そのため、今回紹介したユーザーフロー図だけでなく、さまざまな資料や図を簡単に作成可能です。先ほど紹介したユーザーフロー図も、実際にboardmixを使って作成したものです。
boardmixは無料で使えるため、導入コストも抑えられます。ぜひboardmixを使って、さまざまな資料や図を作成してみてください。
6.まとめ
本記事では、ユーザーフロー図とは何か、また活用方法や作成方法を紹介してきました。ユーザーフロー図についてまとめると以下になります。
- ユーザーフロー図を活用することで、ユーザー満足度の高いサービスを提供できる
- ユーザーフロー図はUX設計に活用可能
- 正しい作り方を知ることで、より有効なユーザーフロー図を作成可能
- 無料ツールboardmixを使うことで、導入コストを抑え、手軽に作成できる
ユーザーフロー図作成は、ユーザーの満足度に直結します。より有効なユーザーフロー図を作成し、よりユーザーに寄り添った満足度の高いサービスの提供を目指しましょう。
