user-flow-web

ユーザーフロー図

ユーザーフロー図は、web サイト上でのユーザー体験改善には欠かせないツールです。そのため、常にユーザーインサイトをサービス向上のために収集している、UX デザインチームやプロダクトチームにとっては特に便利なツールだと言えるでしょう。Miro のユーザーフロー図テンプレートを活用して、イノベーションに溢れたソリューションを創造しましょう。

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

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

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

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

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

ユーザーフロー図とは?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

ユーザーフローテンプレートよくある質問

ユーザーフロー図の例を教えてください。

自社イベントのためのサイトを開発としていると想定しましょう。ユーザー体験改善のためには、イベントの登録やチケットの購入に必要な手順をすべてマッピングする必要があります。まずは、ユーザーが通るプロセスやイベントのチケットを購入する過程の追跡から開始しましょう。ユーザーフロー図を使用すれば、登録から支払いページまで、(イベントサイトの最終目標となる)顧客が購入を完了するプロセスをわかりやすく視覚化することができます。

ユーザーフロー図

このテンプレートで作業を開始する

関連テンプレート
UML Activity Diagram
プレビュー

UML アクティビティ図

活躍するシチュエーション:

図表作成

アクティビティ図のテンプレートは、アクティビティをより小さな決定やサブプロセスに分解することに役立ちます。IT や経営管理などのシステムやプロセスの改善や、最適化に Miro のアクティビティ図テンプレートを活用しましょう。

UML アクティビティ図
Jobs to be Done Thumbnail
プレビュー

ジョブ理論テンプレート

活躍するシチュエーション:

アイデア出し, デザイン思考, ブレインストーミング

すべてはジョブを適切に完了するためにあります。顧客は「ジョブ」を実行するために製品やサービスを「採用」します。もし「ジョブ」が上手く完了できなければ、より上手く完了できる他の誰かを探します。このシンプルな前提に基づいて構築されたジョブ理論(JTBD:Jobs To Be Done)フレームワークは、起業家、スタートアップ企業、経営者が、顧客が誰かを定義し、市場で満たされていないニーズを発見するのに役立ちます。標準的なジョブストーリーでは、「~のときに、~がしたいので~します」というストーリー構成で顧客ストーリーが語られ、顧客目線で物事を見ることができます。

ジョブ理論テンプレート
User Story Map Framework
プレビュー

ユーザーストーリーマッピングテンプレート

活躍するシチュエーション:

マーケティング, デスクリサーチ, マッピング

ユーザーストーリーマッピングは、2005 年にジェフ・パトンが考案したアジャイル手法であり、ユーザーの行動を時系列で分析し、整理することで、ユーザーがどのように自社の製品やサービスと出会い、体験しているのかをより深く理解できるほか、プロダクトバックログもユーザーストーリーマップで視覚化、管理できるようになります。個人での使用やチームでの使用にかかわらず、Miro のユーザーストーリーマップにより、製品やサービスを通してユーザーに提供するビジネス価値に焦点を絞り、ユーザーが関心を持つ機能をリリースすることができます。このマッピングフレームワークは、ユーザーのニーズを満たすための要件や実施事項についてプロジェクトやプロダクトチームで認識を共有することに役立ちます。さっそくユーザーストーリーマップを使用して、ユーザーインサイトを手に入れましょう。

ユーザーストーリーマッピングテンプレート
product-backlog-thumb-web
プレビュー

プロダクトバックログテンプレート

活躍するシチュエーション:

アジャイル手法, カンバンボード, プロダクト管理

開発チームは、たいてい同時に複数の製品に対応しています。プロダクトバックログは、チームがプロジェクトの構築とイテレーションを行う際に進行中のプロジェクトの進捗状況を把握するのに役立つプロジェクト管理ツールです。これにより、全員のアイデアを管理し、エピックを計画して、タスクの優先順位付けを行うことができます。最も優先順位の高いタスクは、プロダクトバックログの上位に表示されるので、チームは、最初に着手するべき作業を把握できます。プロダクトバックログにより、チームはリソースの計画や、割り当てを簡単に行うことができ、開発チームが取り組んでいる内容を全員が把握できる情報源を提供することもできます。

プロダクトバックログテンプレート
UML Diagram Thumbnail
プレビュー

UML 図テンプレート

活躍するシチュエーション:

Diagrams, Software Development

UML は元々、UML は元々、ソフトウェア工学でモデリング言語として使われていたため、アプリケーション構造やソフトウェアの文書化によく使われるツールです。UML は、「Unified Modeling Language(統一モデリング言語)」の略称で、ビジネスプロセスや、ワークフローのモデリングにも使用することができます。フローチャートと同様に、UML 図は、段階的なプロセスをマッピングすることができます。これにより、チームはシステムとタスク間の関係を簡単に表示することができます。UML ダイアグラムは、新入社員が状況を素早く把握し、文書作成、職場やチームの管理、プロジェクトの合理化に役立つ効果的なツールです。

UML 図テンプレート
BCG Thumbnail
プレビュー

BCGマトリクステンプレート

活躍するシチュエーション:

戦略プランニング

ある製品は、相当な収益を上げる「金のなる木」です。また、ある製品は「負け犬」で、吠えることすらありません。他に、「花形」や「クエスチョンマーク」もあります。BCG マトリクスは、ポートフォリオの製品を分析し、それぞれについて「これはビジネス成長を促すだろうか?」「市場のシェアを獲得するだろうか?」「価値はあるか?」という難しい質問を投げかけることで、どの製品をどう定義するかを見極められるようにするために利用します。BCG マトリクスにより、市場での機会を理解し、投資に値する製品はどれなのかを把握できるインサイトが得られます。

BCGマトリクステンプレート