ユーザーフロー図

ユーザーフロー図について

ユーザーフロー図は web サイト上の各ページでユーザーが体験する要素を「見える化」することができるフローチャート（フロー図）です。ユーザーフローをマッピングすることにより、web サイトの構成やアプリの機能、ユーザーがサイト上の各ページで実行する行動、意思決定プロセスを事前に予測することができるようになります。そして、ユーザーに対するインサイトを深めることにより、web サイトを最適化するためのタスクの判断や、web サイト上でのサービス改善に必要なプロセスを特定することも可能です。

また、ユーザーフロー図を作成することにより、ユーザーが目的のページまで辿り着くまでのプロセスを理解することができます。このプロセスやユーザー体験を理解することによって、目的のページや製品ページに到着するまでにかかったステップ数や、どのようなプロセスを経てユーザーが抱える課題を解決するための製品や情報を紹介したページに到達したのかなどを明確化することができます。

ユーザーフロー図と共に画面遷移図が web サイト上でのユーザー体験の改善によく使用されますが、あくまでユーザーフロー図は、ユーザーのサイト上での行動に焦点を当てているため、サイトの構造やデザイン自体を表現したワイヤーフレームの画面遷移図とは少し用途が異なります。この２つの図表を上手に使い分け、洗練されたサービスの提供を自社の web サイトで実現しましょう。

この記事では、ユーザーフロー図の詳細と書き方について説明しています。また「テンプレートを使用する」のボタンから簡単にテンプレートを Miro ボード上に展開することができます。

ユーザーフロー図とは？

ユーザーフロー図は、web サイト上でのユーザーの行動をマッピングする際に非常に便利なツールです。ビジュアルを通してユーザーの行動を「見える化」することにより、よりユーザーフレンドリーな web サイトを構築することができると共に、製品ページやブログなどのコンバージョンにつながるようなページにユーザーを誘導しやすいワイヤーフレームの設計にも役立てることができます。

主にユーザーフロー図は以下の要素から構成されています：

• 開始点と到着点：その名の通り、ユーザーフローの開始地点と到着地点を明確にした点のことを指します。

• プロセスと行動：「ログイン」や「購入」などのユーザーが実行するステップを示した情報のことを指します。

• 意思決定ポイント：ユーザーが製品を購入する上での判断基準とするページや要素を指します。

• 矢印：決定に基づいてユーザーが向かう方向を示します。

ユーザーフロー図は、現時点で実行しているサイト上での戦略においてのコンバージョン率を評価または改善したい際に便利なツールとなります。評価や改善において、ユーザー体験や、購入プロセス、ニュースレターの登録促進、無料トライアル（フリーミアム）の実施など、事業目標達成に必要な要素を明確化しましょう。

ユーザーフロー図活用においてのメリット

ユーザーフロー図は以下の点で役立ちます。

• ユーザーフレンドリーなインターフェースの構築：

ユーザーが必要とする情報や製品ページにたどり着くためのフローや操作は、ユーザーフレンドリーなものとなっているのか？

• 既存のインターフェースが事業目標に適しているかの判断：

既存のインターフェースにおいて事業目標達成のために現在機能しているもの、機能していないもの、また改善が必要なものは何か？また、この目標を達成するためのユーザーフローは、シームレスで分かりやすいものになっているか？

• 社内チームやクライアントへの製品フローの提案：

デザインチームは、購入、登録、ログインプロセス時のお客様のフィードバックや行動を把握できているのか？クライアントは、ビジョンに合った施策の実施状況を把握できているのか？

ユーザーフロー図作成においてのコツ

ユーザーフロー図の作成や再作成時、自分自身やチームに以下のことを確認するようにしましょう。

• ユーザーは、どこで自社サイトを見つけるのか？（例：検索エンジン、有料広告、ソーシャルメディア、ブログなど）

• ユーザーが自社サイトに来るための目的は何か？（例：学習、情報収集、製品調査、製品購入など）

• サイトに来たユーザーが必要とする情報や製品を購入するための動機を与える要素は何か？（例：ポップアップ、関連ページ、CTAボタンなど）

• これらのユーザーの課題を解決するためにはどのようなコンテンツが必要か？（例：ブログ、ホワイトペーパー、ガイドなど）

• ユーザーが課題を解決する上で障害となり得る要素が存在するのか？（例：複雑すぎるサイトインターフェース、エラーページ、過剰な広告表示など）

ユーザーフロー図を活用することによりユーザー視点で web サイトをマッピングすることができます。それにより、特定のユーザーのニーズに合った web サイトやアプリのページ、画面、インターフェイスのデザイン方法を定義し、そこに含まれるコンテンツやボタンなどのサイト要素の編集を効率良く実行することが可能になります。

ユーザーフロー図の作成方法

ユーザーフロー図の作成は思ったよりも簡単なものです。以下では Miro を使用したユーザーフロー図の作成方法をご紹介したいと思います。Miro は、図の作成や共有に最適なキャンバスです。まずボード内左側のテンプレートライブラリからユーザーフロー図テンプレートを選択しましょう。その後、以下の手順で図表の作成を開始します。

1. 事業目標やユーザーの目標を定義

まずは事業目標やユーザーの目標を定義しましょう。まだ、明確な目標が定義されていない場合や再定義が必要な場合は、カスタマージャーニーマップを作成して、明確なビジョンの構築をしましょう。このビジョンを共有することによりチームメンバーは、製品やサービスのあらゆるタッチポイントをユーザー視点で分析することができるというメリットがあります。ユーザーに対する共感を高めることで、ユーザーフローにおいてのプロセスの詳細をより明確なものにすることができます。

2. ユーザーはどのようなプロセスでサイトにたどり着いたのかを調査

ユーザーがどのようにして自社のサイトにたどり着いたのかを調査しましょう（例：ダイレクトトラフィック、オーガニック検索、有料広告、ソーシャルメディア、紹介リンク、メール）。この調査により、ユーザーフロー図の開始地点を特定することができるようになります。

3. ユーザーの必要な情報や必要なタイミングを定義

適切な情報が適切なタイミングで表示された場合、ユーザーのコンバージョン率は大幅に向上します。そのため、デジタルタッチポイントからユーザーのニーズや感情について考えてみましょう。例えば、チャットボットのやり取りのような取り組みはまだ成功の可能性を示すだけの指標であり、最終的な購入につながるものではありません。

4. ユーザーフローのマッピング

ユーザーフロー図テンプレートに図形や矢印を追加して、上記のステップで行ったユーザーリサーチを図に反映させましょう。ユーザーが最初のタッチポイントに到達した後の次のステップは何か？ユーザーが目的のページに到達するまでにかかるステップ数は？ Miro のユーザーフロー図では、これらの情報を分かりやすく整理することができます。タッチポイントやドロップオフ、コネクター線の矢印の方向を変更して、ユーザーフロー図に追加していきましょう。

5. チームからフィードバックを収集

チーム、クライアント、または複数部門の関係者が Miro ボードの閲覧ができるようにボードを共有しましょう。相互評価を行うため、付箋や @メンションを使用して、各自のタイミングでフィードバックを残すことができます。また、Miro ボード内のビデオチャットに参加し、チームの誰かを記録係に任命することもできます。チームのフィードバックを収集後、それらの意見をユーザーフロー図に反映しましょう。

フィードバックや意見交換が終了した後は、必要に応じてユーザーフロー図を編集しましょう。顧客の製品やサービスに対する興味や購買意欲の変化に合わせて、ユーザーフロー図も変化していきます。変化に応じて内容を調整し、顧客の視点に立った製品やサービスを常に提供できるようにしましょう。

まとめ

この記事では、ユーザーフロー図とその作成方法について簡単にご紹介しました。web サイト上の各ページでのユーザーの体験をユーザーフロー図を活用して「見える化」することにより、web サイトの構成やアプリの機能、ユーザーがサイト上の各ページで実行する行動、意思決定プロセスを事前に予測することができるようになります。Miro のワイヤーフレームテンプレートを使用してあっという間にユーザーフロー図を完成させましょう。ユーザーへのインサイトを深めることができれば事業目標を達成するための web サイトを実現することができます。