user-flow-web

ユーザーフロー図

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

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

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

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

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

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

ユーザーフロー図とは?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

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

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

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

ユーザーフロー図

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

関連テンプレート
low-fidelity-prototype-thumb-web
プレビュー

ローファイプロトタイプテンプレート

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

デザイン, デスクリサーチ, ワイヤーフレーム

ローファイプロトタイプは、製品またはサービスの実用的な初期ビジョンとして機能します。これらのシンプルなプロトタイプは、最終製品と一部の機能しか共有していません。大まかなコンセプトの検証やアイデアの妥当性を確認するのに最適です。ローファイプロトタイプは、製品やサービスの機能性を検討するために、製品開発チームや UX チーム が迅速なイテレーションとユーザーテストに焦点を当てて、将来のデザインに反映させるためのものです。コンテンツ、メニュー、ユーザーフローをスケッチしたマッピングに重点を置くことで、デザイナーとノンデザイナーの両方がデザインとアイデア出しのプロセスに参加することができます。リンクされたインタラクティブな画面を作成する代わりに、ローファイプロトタイプは、ユーザー ニーズ、デザイナー ビジョン、関係者の目標の一致についてのインサイトに焦点を当てています。

ローファイプロトタイプテンプレート
Remote-Design-Sprint-web-thumb
プレビュー

リモートデザインスプリント

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

デザイン, デスクリサーチ, スプリントプランニング

デザインスプリントでは、4、5日間かけてプロトタイプの設計、反復、テストを集中的に行います。デザインスプリントは、旧態依然の作業プロセスから脱却し、新鮮な視点を見出し、ユニークな方法で問題を捉えて、迅速にソリューションを開発するための手法です。デザインスプリントは、Google によって発案された高速フレームワークであり、問題に対するチーム間で認識の統一や、複数の解決策の考案、プロトタイプの作成とテスト、ユーザーからのフィードバックを短期間での収集するために使用されます。このテンプレートは、ビジネス中心のデザインコンサルタントである JustMad が初めて考案し、世界中の分散したチームによって活用されています。

リモートデザインスプリント
User Personas Thumbnail
プレビュー

ユーザーペルソナテンプレート

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

マーケティング, デスクリサーチ, ユーザーエクスペリエンス

ユーザーペルソナとは、調査または分析した製品やサービスの対象となる顧客層を表し、要約するツールです。コンテンツマーケティング、製品マーケティング、デザイン、営業、販売のいずれの場合でも、対象者を念頭に置いて運営します。通常、顧客または見込み客がペルソナ作成の対象になります。自社が提供する製品やサービスに対して何かしらのメリットを感じる顧客層かもしれません。通常、個性やニーズが興味深い形で表現されたひとまとまりの情報です。ユーザーに関する知識を抽出することで、対象となるユーザーモデルを作成します。これがペルソナです。

ユーザーペルソナテンプレート
Kubernetes-2-thumb-web
プレビュー

Kubernetes アプリケーションテンプレート

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

図表作成, ソフトウェア開発

Kubernetes アプリケーションテンプレートを使用すれば、企業向けにコンテナ化されたアプリケーションをより適切に管理できます。ポータビリティ、ライセンス、統合課金の処理に対するチームのアジリティを高めることができます。Kubernetes アプリケーションテンプレートは、どこでもデプロイを実行できるため、アプリケーションの管理が容易になります。まずはお試しはいただき、あなたやあなたのチームにとって最適な選択肢かご確認ください。

Kubernetes アプリケーションテンプレート
Kanban Thumbnail
プレビュー

カンバン フレームワーク テンプレート

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

カンバンボード, アジャイル手法, アジャイル ワークフロー

プロセスの最適化、フローの改善、顧客に提供する価値の向上が、カンバン方式によって実現できます。カンバンは、一連のリーンの考え方と実践(1950年代にトヨタ自動車の社員によって考案)に基づいており、無駄を省き、その他の多くの問題に対処し、問題を協力して解決することができます。シンプルなカンバンテンプレートを使って、すべての作業の進捗状況を綿密に監視すると同時に、自分自身や複数部門の同僚に作業を提示し、ソフトウェアの舞台裏を見える化することができます。

カンバン フレームワーク テンプレート
Infographic Thumbnail
プレビュー

インフォグラフィックテンプレート

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

マーケティング, デスクリサーチ, ドキュメンテーション

データ内の数字だけを見るのは、疲れる作業であったり、途方もなく感じることがよくあると思います。また、プレゼンなどでこのようなデータを共有する時に、どうやってわかりやすく、説得力のある情報として使用するか悩むこともあるでしょう。そのような悩みを Miro のインフォグラフィックテンプレートが解決してくれます。インフォグラフィックは、膨大なデータや数値を可視化するためのツールであり、定量的データと質的データに関わらず、さまざまな種類のデータをわかりやすいイメージやテキストに変換することができます。顧客やチーム、クラインアントなどに感動を与えるプレゼンやレポートなどの資料や情報を Miro のインフォグラフィックテンプレートを活用して作成しましょう!

インフォグラフィックテンプレート