ユーザーフロー図とは:概要、重要性、作成方法

webサイトやアプリのユーザーエクスペリエンス(UX)は、利用者が自社から購入する、長期的な顧客となる、競合他社に乗り換えてしまうなど、重要な意思決定を左右する可能性があります。ユーザーフロー図は、訪問者をサイトに留め、長期的な顧客に転換することのできる理想的なユーザーエクスペリエンスの構築に役立ちます。

この記事では、次のことを解説します。

ユーザーフローとは?

ユーザーフローとは、顧客がwebサイトやアプリケーションを利用する上で通る可能性のあるあらゆる経路のことです。ユーザーフローという用語は、ユーザージャーニーの可視化やマップ化を意味することもあり、フローチャートUXフローと呼ばれることもあります。 ユーザーフロー図では、利用者が製品に触れて購入するまでのあらゆるステップを図で示し、製品内の移動をマップ化します。

Diagram Description automatically generated

ユーザーフロー図の目的は、サイトやアプリのどこで特定の情報を提供すれば、特定の行動を取るように利用者を促し、最終的なやり取りに導くことができるかを明らかにすることです。

ユーザーフローとユーザージャーニーはよく混同されます。ユーザーフロー は、サイトやアプリを利用する上で通る利用者の経路に注目しますが、ユーザージャーニー または カスタマージャーニー は、あらゆる基盤やチャネルにおける、利用者と企業とのやり取り全体を網羅するものです。この経路は、利用者が、サイトやアプリを利用し始めるかなり前から始まり、製品から離れた後も続く可能性があります。ユーザーフローは、カスタマージャーニーのひとつの要素です。

ユーザーフロー図の重要性

ユーザーフロー図は、可能な限り優れたユーザーエクスペリエンスを実現するためのロードマップのようなものであり、いくつかの重要な目的を達成します。

ユーザーナビゲーションの過程を示す

ユーザーフロー図で、webサイトやアプリを閲覧する利用者が体験していることを追体験することができます。自社製品に慣れ親しんでいると、そのユーザーナビゲーションやユーザーエクスペリエンスがシンプルでわかりやすいものと思いがちです。しかし、それは顧客の体験とは異なるかもしれません。

ユーザーフロー図を利用することで、利用者の視点からサイトやアプリを利用する流れを見ることができます。利用者が遭遇することを観察することで、つまずきや障害を特定し、体験をシームレスにする方法を見つけ、自社の目標と利用者のニーズを一致させることができます。

ユーザーエクスペリエンスを可視化する

ユーザーフロー図は、アプリを俯瞰し、それぞれの要素やページがどのように連動しているかを示すこともできます。特定の企画や季節的なwebサイトでは、視野が狭まり、全体像を見失ってしまいがちです。ユーザーフロー図は、体験全体を視覚化するため、あらゆるジャーニーに対して最適化することができます。

ユーザーフロー図は、ページやステップが連動して、製品ナビゲーションのユーザーエクスペリエンスを強化または阻害する様子を描き出します。これにより、行き止まり、孤立ページ、不十分な経路などを容易に特定することができます。

ユーザーフローを無理なく最適化する

ユーザーフロー図が不可欠であるもうひとつの理由は、本番運用を開始する前に変更を検証することができるからです。ナビゲーションの変更や新しいセクションの追加が必要な場合は、まずはユーザーフロー図に追加しましょう。これにより、その変更がサイト構造やユーザージャーニーにどのような影響を及ぼすのかを検討できるようになります。

ユーザーフロー図で変更を可視化することで、アプリで利用者重視の姿勢を維持し、ローンチ前に課題を捉えることができます。ユーザーフローに深刻な影響を与え、事後修正に多大な時間とリソースが必要になる、未検証の急な変更を避けることができます。

フィードバックの入手を容易にする

複数のチームメンバー、特に営業部門やマーケティング部門などのUXチーム以外の関係者からフィードバックを集める場合、ユーザーフロー図は、そうしたインサイトを収集するための効率的な方法となります。

ユーザーフロー図は視覚的な媒体であるため、あらゆる部門の関係者にアプリのナビゲーションを容易に示すことができます。ユーザーフロー図は、シンプルな図形、わかりやすい経路、最小限のテキストで構成されているため、重要な関係者が容易に貴重なフィードバックを提供することができます。

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

ユーザーフロー図の作成には、利用者調査、製品の価値に関する深い知識、クリエイティブな思考が必要です。

1.カスタマージャーニーを把握する

ユーザーフロー図を設計するための最初のステップは、利用者とそのジャーニーについて把握することです。

魅力的なバイヤーペルソナを構築することで、利用者について把握することができます。バイヤーペルソナとは、重要なオーディエンスセグメントを表現したもので、利用者のニーズ、欲求、動機、行動を把握するのに役立ちます。バイヤーペルソナは、利用者を次のステップに促すために、サイトの各ページにどのような情報を掲載すべきかを決めるのに役立ちます。

また、バイヤーペルソナだけでなく、顧客との初めての接触から購入に至るまでのあらゆるステップをまとめたカスタマージャーニーマップの構築も検討しましょう。各ペルソナのカスタマージャーニー全体を把握することで、webサイトやアプリの位置づけが明確になり、提供すべきユーザーエクスペリエンスに関する重要なインサイトを得ることができます。カスタマージャーニーの初期にwebサイトにアクセスするペルソナと、ジャーニーの終盤にアプリにアクセスするペルソナでは、異なるユーザーフローが必要になります。

2.自社の目標を特定し、利用者の目標と整合性をとる

webサイトのセクションやページには、購入、ニュースレターの購読、無料トライアルの申し込み、ウェビナーへの参加など、さまざまな目標があります。しかし、それが利用者の目標を正確に反映しているとは限りません。

利用者の目標を特定するのは難しいことですが、構築したペルソナやカスタマージャーニーマップを参考にすることができます。利用者がアプリを利用する過程で、どのような悩みを抱えているかを調べます。利用者の目標がわかれば、ユーザージャーニーの現在の場所に合わせてユーザーフローを設計または調整し、利用者の求めているものを提供し、自社が望んでいる終点に利用者を到達させることができます。

自社の目標ではなく、利用者の目標から始めるのは直感に反するかもしれませんが、利用者が求めていることがわからなければ、フローの最後までナビゲートすることはできないのです。

3.利用者の検索手段を把握する

ユーザーフローの終点が明らかになったら、次は始点を確認します。カスタマージャーニーマップを見直し、利用者が自社、自社製品、自社サイトを見つける方法をすべてリストアップしましょう。これらがユーザーフローの始点になります。

ユーザーフロー図の一般的な始点には、次のようなものがあります。

利用者がサイトにアクセスする経路によって、ニーズや終点に到達するまでの時間が異なります。たとえば、直接トラフィックでサイトに到達した利用者は、すでに欲しいものが決まっていて、そのまま製品ページに移動するかもしれません。一方、広告をクリックした利用者は、その企業についてまだよく把握しておらず、サイト内をランダムに移動するかもしれません。

4.利用者が必要とする情報を見極める

次に、ユーザーフローの終点とさまざまな始点の間の空白を埋め、オーディエンスの体験を最適化してサイト内を導く方法を正確に特定する必要があります。バイヤーペルソナとカスタマージャーニーマップを利用して、各ステップを決定します。これらのステップでは、利用者の悩みに対処し、不安や疑問を解消し、購入者が求める情報を提供する必要があります。

たとえば、有料広告をきっかけにwebサイトにアクセスした潜在顧客が、「会社概要」のページをクリックした場合、その顧客は「誰から買おうとしているのか」を知りたがっていることを意味します。このようなユーザーエクスペリエンスを円滑化するためには、ターゲットとなるランディングページに会社情報を掲載したり、製品ページから会社概要ページに移動するための、わかりやすいCTAを作成したりすることができます。

利用者がユーザーフローを先に進めるためには、それに必要な情報を提供するタイミングも重要です。利用者が何を達成したいのか、何を躊躇しているのか、どのような疑問を持っているのかを、各ステージで考えてみてください。そして、それらの課題に適切なタイミングで対処できるように、ユーザーフローのステップを最適化します。

5.フローをマップ化し、可視化する

既にこの段階では、始点から終点までのユーザーフローの各ステップにおいて、利用者がいつ何を必要としているのかを把握しています。次は、それを可視化しましょう。ユーザーフローをマップ化するには、物理的ホワイトボードやデジタルホワイトボード、構築やコラボレーション用のソフトウェアなどを利用します。

どのツールでも、ユーザーフロー図の標準的な記号を使用します。

記号の意味

ユーザーフロー図では、わかりやすい共通の形や記号を使います。これらの記号を使用して、ユーザーフローにおける経路や意思決定を表します。

  • 楕円形:ユーザーフローの始点と終点を表します
  • 長方形:プロセスのステップ(webサイトやアプリのページ)を表します
  • 矢印:記号と記号を結び、利用者の移動の方向を示します
  • 菱形:ページやステップで利用者がおこなう意思決定を表します
  • 平行四辺形:利用者が連絡先などの情報を入力する場所を示します。

これらの記号を短いテキストと組み合わせることで、ユーザーフローの各ステージで何が起こっているのかを容易に表すことができます。

6.フィードバックを得て、改良し、最終調整する

ユーザーフロー図が完成したら、チームメンバーと共有し、フィードバックを得ます。

デザイナー、開発者、製品エンジニア、営業担当者、マーケティング担当者など、組織の関係者全員に渡しましょう。こうした関係者の視点は、フローの中で起こりうるつまずきを特定し、ユーザーエクスペリエンスを円滑化して、改善するための優れた方法を見つけるのに役立ちます。フィードバックを適用し、必要に応じて変更します。

最終調整したユーザーフロー図の承認を受けたら、UXデザイナー、web開発者、ソフトウェア開発者、エンジニアに最終的なユーザーフロー図を渡し、実用的なデジタルリソースに作り変えてもらいます。デザイナーや開発者は、実際の利用者の協力を得てユーザーフローを検証し、そのフィードバックをwebサイトやアプリのさらなる改善に活かします。

ユーザーフロー図の例

ここでは、ユーザーフロー図の実例をふたつ紹介します。

このシンプルなユーザーフロー図では、一般的な図形や記号といくつかの色を使用して、各ステップを表しています。

このユーザーフロー図では、矢印の線にテキストを追加し、利用者が「はい」をクリックしたか「いいえ」をクリックしたかの判断の結果を示しています。

ユーザーフローの構築を始める

ユーザーフロー図は、デジタルアセットの計画を立て、最適なユーザーエクスペリエンスを提供することで、訪問者を顧客に、顧客をロイヤルティの高い顧客に転換するのに役立ちます。webサイトやアプリのユーザーエクスペリエンスを変革する準備ができたら、顧客ペルソナとジャーニーマップからインサイトを獲得することから始めましょう。

Adobe Customer Journey Analyticsを利用すれば、カスタマージャーニーを構築するための重要なデータを収集し、webサイトやアプリのユーザーフロー図の作成に利用できます。

Adobe Customer Journey Analyticsなら、あらゆるチャネルから収集した数年分の顧客行動データをひとつインターフェイスにまとめ、堅牢なユーザーフローを構築することができます。その方法については、概要動画をご覧ください。