ユーザーフロー図とは何？活用場面や作り方を徹底解説！

ユーザーフロー図は、Web上でのユーザー体験改善には欠かせないツールです。本記事では、ユーザーフロー図とは何か、また、活用場面や作り方について紹介します。ぜひ本記事を参考にして、ユーザー体験（UX）の向上を目指しましょう。

1. ユーザーフロー図とは？

ユーザーフロー図は、利用者が目的を達成するまでの操作、画面や分岐を順序に沿って示す図です。利用者が迷いやすい分岐や、次に進めない箇所を見つける手がかりになります。Boardmixのフローチャート作成ツールで、操作と分岐を図形・矢印として整理できます。担当者間の引き継ぎを示す業務フローとは視点が異なります。後者の例はサポート対応のエスカレーション図で確認できます。

主にユーザーフロー図は以下の要素からできています。

①　開始点と到達点

ユーザーフローの開始点と到達点を明確にした点のこと

②　プロセスと行動

ログインや購入など、ユーザーが実行するステップを示した情報のこと

③　意思決定ポイント

ユーザーが購入する上で判断基準となるページや要素のこと

④　矢印

決定に基づいてユーザーが向かう方向を示す矢印のこと

ユーザーフロー図は、現時点でのサイト上での戦略を評価、改善する際に便利なツールです。ユーザー体験や購入プロセス、無料トライアルの実施など、事業目標達成に必要な要素を明確にしましょう。

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 ユーザーが求める機能を洗い出す

最後に、ユーザーが画面や機能に求める条件を書き出します。

この条件とは、各行動ステップを進めるために必要な条件のことです。例えば、「商品検索」をして次の「商品の詳細をみる」に進むには、商品検索が簡単でわかりやすい必要があります。

このように、次のステップに進むための前提条件を書き出すことで、必要なものを想定することが可能です。

4.5 商品購入のフローに、分岐と戻り先を加える

前の例で整理した「商品を探す→詳細を見る→購入する」という流れに、先へ進めない場合の経路を加えます。ここでは開始を「商品詳細を見る」、完了を「注文完了画面に注文番号が表示される」とします。「購入ボタンを押す」だけでは決済や注文が成立したか分からないため、利用者が完了を確認できる状態まで描きます。

まず通常の経路を、商品選択→カート確認→配送先入力→支払方法選択→注文確定→注文完了、のようにつなぎます。そのうえで、各画面から分かれる経路を次のように書き出します。

ひし形の中を「配送先の確認」とだけ書くと、「はい」「いいえ」の意味が曖昧になります。「配送先の必須項目は入力済みか」のような問いにして、矢印がどの結果を表すか分かるようにします。戻る矢印も単に前の画面へ結ぶのではなく、利用者が何を直せば再開できるかを添えます。

利用者の操作とシステムの処理を分けて読む

「住所を入力する」は利用者の操作、「入力内容を検証する」はシステムの処理です。同じ箱にまとめすぎると、エラーがどこで発生するか分からなくなります。必要なところだけ箱を分け、利用者が選べる操作を矢印で追えるようにしましょう。途中で購入をやめる経路があるなら、「中止」と明示して無理に注文完了へ戻さないことも大切です。

ユーザー心理は別の補足として置けますが、「不安」という気持ち自体を画面の遷移先にはしません。たとえば送料が分からず迷う場合は、「送料を確認する」という操作や、それを表示する画面が必要かを検討します。気持ちから直接、未確認の機能を決めるのではなく、行動と表示内容を分けて考えます。

Boardmix上で図を見直すときは、開始点から通常経路をたどり、次に失敗時の矢印を一つずつ追います。箱を移動した後に接続先が変わっていないか、修正後に注文を再開できるかを確認してください。画面そのものの構成も検討したい場合は、操作の箱の近くに画面案を置くと、フローと表示内容を見比べられます。

5. ユーザーフロー図が無料で作れるツールboardmix

ユーザーフロー図を作るためのツールは多く存在しますが、今回は無料でユーザーフロー図を作成できる無料ツール「boardmix」を紹介します。無料とは思えない機能性を備えていますので、無料でユーザーフロー図を作成してみましょう。

5.1 Boardmix

boardmixは、オンラインホワイトボードにより共同での編集や閲覧を可能にした次世代型無料ツールです。多くのテンプレートを備えており、さまざまな図や資料の作成に役立ちます。

boardmixの特徴は以下になります。

1. 無料で使用可能
2. 無料とは思えない多機能性
3. オンラインでの共有が可能
4. シンプルな設計
5. 直感的な操作性
6. チームで共有・編集が可能

Boardmixでは、図形や接続線を使ってユーザーフロー図を作り、チームで内容を検討できます。使うテンプレートや共有範囲は、作成する図と参加者に合わせて選びましょう。

5.2 Boardmixの機能性

boardmixの機能を紹介します。

上の図のように、boardmixにはたくさんのテンプレートが用意されています。

そのため、今回紹介したユーザーフロー図だけでなく、さまざまな資料や図を簡単に作成可能です。先ほど紹介したユーザーフロー図も、実際にboardmixを使って作成したものです。

boardmixは無料で使えるため、導入コストも抑えられます。ぜひboardmixを使って、さまざまな資料や図を作成してみてください。

boardmixを無料で体験

6.まとめ

本記事では、ユーザーフロー図とは何か、また活用方法や作成方法を紹介してきました。ユーザーフロー図についてまとめると以下になります。

1. ユーザーフロー図を活用することで、ユーザー満足度の高いサービスを提供できる
2. ユーザーフロー図はUX設計に活用可能
3. 正しい作り方を知ることで、より有効なユーザーフロー図を作成可能
4. 無料ツールboardmixを使うことで、導入コストを抑え、手軽に作成できる

ユーザーフロー図は、操作の流れを検討するための資料です。より有効なユーザーフロー図を作成し、よりユーザーに寄り添った満足度の高いサービスの提供を目指しましょう。