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

ウェブサイトをお化け屋敷のようなものと捉えてみましょう。恐怖を最大限に高めるには、訪問者が屋敷内をたどる通路、見通しの効かない場所、ゾンビを解き放つべき場所などすべてを的確に把握しておかねばならないはずです。タイミングと調整が上手くいかなければ、誰もいない部屋にチェーンソー男が登場し、女子高生のグループが次の仕掛けに移った後で吸血鬼の花嫁が棺から起き上がるようなことになりかねません。

同様に、ウェブサイトをユーザーがどう移動するかが分かっていなければ、目指す利益も得られません。ただ、ユーザーを理解するのはそこまで難しくなく、ユーザーフロー図があれば事足ります。

ユーザーフロー図が重要な理由とウェブサイト用の図を作成する方法を確認してみましょう。

ユーザーフローとは？

「ユーザージャーニー」という言葉はよく聞かれますが、ユーザーフローはユーザージャーニーとは異なります。

違いは次のとおりです。

• ユーザーフロー：自社サイト上でユーザーが行うと想定されるあらゆるインタラクションを含む図のことで、一見シンプルに見える体験（ログインやサブスクリプションの更新など）を支える「舞台裏」のロジックを捉えます。ユーザーフローは、ロジックを視覚的にマッピングすることで、会話では見落としやすい条件、例外、代替パスをチームが把握するのに役立ちます。

• ユーザージャーニー：オフラインの影響からオンライン広告に至るまで、購入を取り巻く環境全体を含みます。ユーザーフローはユーザージャーニーの一部にすぎず、その対象は、訪問者が自社サイトやアプリケーションに到達した後だけです。ユーザージャーニーは訪問者がサイトを離れた後も継続されます。

ユーザーフロー図を使う理由

ユーザーフロー図は主に、カスタマーエクスペリエンスやユーザーニーズの検討が終わった後に、製品チームや UX チームがウェブサイトやアプリケーションのフローを検討するために使用します。こうしたニーズや実現したいエクスペリエンスを的確に理解するには、マッピングと視覚化が重要です。

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

• プロセスにおける重要なステップの見落としを防ぐことができます。

• 意思決定を行い、ステークホルダーのフィードバックを集め、デザインに多くの時間を投じる前に低忠実度で反復できます。

• 体験の各部分がどのように組み合わせられるかを示した共有のフォローしやすいリファレンスをエンジニアに提供し、開発のエラーや手戻りを減らすことができます。

• 複数人の知識に分散しがちなエッジケースや隠れた複雑さ（例：条件分岐ロジック、アカウントの状態、権限チェック）を顕在化させることができます。

• 組織に蓄積された暗黙知や長い説明を、単一の視覚的な信頼できる情報源に置き換えることで新しいチームメンバーのオンボーディングを迅速化できます。

要するに、時間と費用を重視するならば、ユーザーフロー図の作成に時間をかけることで、将来的な障害を減らすことができます。

例えば、予算管理ソフトウェアを販売しているとします。お客様は、貴社のウェブサイトで、以下のように AIDA の各段階をたどるでしょう。

• 認識 (Awareness) : 訪問者が「クレジットカードの債務返済をスピードアップ」ランディングページに到達します。

• 関心 (Interest) : 訪問者がページをスクロールし、クレジットカード債務 $30,000 を返済したカップルが登場するお客様の声動画を視聴します。

• 欲求 (Desire) : 訪問者がソフトウェアのコストに関するページを数カ所クリックし、債務を全額返済できたらどんなによいだろうと想像します。

• 行動 (Action) : 訪問者がソフトウェアを購入します。

訪問者がユーザーフローの各ページで探しているものが理解できていなければ、苛立って最終的にはサイトから離脱してしまいます。ユーザーがしていることを把握できれば、ウェブサイトの体験の最大化に集中できます。

同じ原則はマーケティングフロー以外にも当てはまります。シンプルな製品の場面（サインインなど）でさえ、数十もの条件分岐が隠れていることがあります。ユーザーフロー図はこれらの分岐を明確に示すため、チームはバグやサポートチケットを通じて発見するのではなく、意図的にそれらを構築（または修正）することができます。

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

推測だけでユーザーフロー図を作るのではなく、データを活用してプロセスに役立てましょう。正確なユーザーフロー図を作成するために必要な情報を集めるには、以下の手順に従います。

1. 自社の目的とユーザーの目的を決定する

目的地がわからなければ指示は出せません。同様に、ユーザーにどこに到達してほしいか、ひいてはユーザーが自社アプリやウェブサイトから求めるものが何かがわからなければ、ユーザーフローは作成できません。

ユーザーに製品の購入、ニュースレターへの申し込み、個人情報の提供を要するコンテンツのダウンロードを行ってもらうなど、会社の目的は承知していても、ユーザーが何を目的に自社サイトにアクセスしているかはそれほど明確でないこともあるでしょう。

こうした場合は、カスタマージャーニーマップを作ってみましょう。ジャーニーの各段階での顧客の感情に加え、遭遇するタッチポイントをビジュアル化したマップで、顧客が何を期待しているか、社内でビジョンを共有するのに役立ちます。カスタマージャーニーマッピングソフトウェアを使えば、ユーザーがサイトを訪問する際の方法、サイト離脱後の行動、サイト上での操作などが手軽に把握できます。

キャプション付きの カスタマージャーニーマップテンプレートを挿入します。このカスタマージャーニーマップテンプレートは無料で利用でき、チームで顧客の企業体験のプロセスを明確に視覚化するのに役立ちます。

シングルサインオン（SSO）、エンタープライズ権限、サブスクリプションの状況など、フローが複雑な機能をサポートしている場合は、それらのシナリオの成功基準も前もって定義しておきます。そうでないと、見栄えの良い理想的なパスであっても、エッジケースによって体験が損なわれる可能性があります。

2. 訪問者が自社ウェブサイトをどのように見つけるかを判断する

すでに完成しているウェブサイトやアプリを改善する場合は、データをさらに精査します。Google Analytics を使うと、以下のサイト訪問方法を比率別に確認できます。

• ダイレクトトラフィック

• オーガニック検索

• 有料広告

• ソーシャルメディア

• 紹介サイト

• メール

こうした訪問方法から、ユーザーについて分かることを検討し、ユーザーが必要とする内容を提供するには体験をどう変えるべきかを考えます。これがユーザーフロー図の開始点となります。

3. ユーザーが必要とする情報とそのタイミングを特定する

開始点が決まったところで、ユーザーが求める情報、ユーザーに取ってほしい行動について考えます。ユーザーをコンバージョンに導くには、最も必要とするタイミングで適切な情報を配信することが大切です。

図を作成する過程では、「自分が顧客だとしたら、このページでとるべき行動は？」、「決済プロセスの移動方法は？」、「自分がこの顧客だとしたら、お客様の声動画を見てどう思うだろう？」など、顧客の視点に立つよう心がけます。特定のページに顧客が求めているもの、そこで浮かぶ感情や考えなどに思いを巡らせましょう。

既存のウェブサイトを最適化するなら、現在うまく機能している部分、つまり、ユーザーが購入などの成果につながるアクティビティを行う際にサイト内で辿っている経路などに注目します。購入に至るまでには数回サイトを訪問する場合もありますので、購入だけでなく、ニュースレター申し込みやポップアップ経由でのテキスト通知送信なども成功例として数えます。

これは、パスワードリセット、期限切れのトライアル、支払いの失敗、アカウント統合、権限エラー、その他の例外といった、発生頻度は低いが影響の大きいパスを洗い出すタイミングでもあります。こうしたシナリオは、図によってページ上に落とし込まれるまで、人々の頭の中（あるいは散在するメモ）にとどまりがちです。

4. ユーザーフローをマッピングする

オーディエンス、そのモチベーション、さまざまなアクションの実行のために一般的にたどるパスが判明したところで、ユーザーフロー図の作成に移ります。Lucidchart など、ユーザーのパスへ簡単に図形をドラッグ・アンド・ドロップでき、顧客を喜ばせ、情報を提供できる機会を示せるビジュアルワークスペースを選びましょう。

オーガニック検索や有料広告など、訪問地点を示す図形から作図を始めます。幾何学的な図形の代わりに低忠実度のワイヤーフレーム図形を使って、サイトやアプリの構造や行動喚起の場所などを表すこともできます。

次に、ランディングページの内容と、顧客がそのページで下すべき意思決定について検討します。図形や意思決定点の追加を続け、フローを完成させます。

不必要な複雑さを避けつつ、完全性を目指しましょう。読者が十分な情報に基づいて意思決定を行うために必要なすべての詳細を含める一方で、流れを阻害するような冗長な情報は避けましょう。提供する詳細レベルは、関係者によって異なります。

• 高次的なビュー：経営幹部は、ビジネスロジックを理解するために、ユーザーの行動経路の概略だけを把握すれば十分な場合があります。

• 技術的な詳細：エンジニアは、システムの状態、クエリ、APIの接点など、詳細な情報を必要とすることがよくあります。

ワイヤーフレームをユーザーフローに統合すると、基盤となるシステムロジックに UI をつなげる上で役立ち、各画面が次のステップをサポートしていることを検証しやすくなります。多くの場合、一連のワイヤーフレームによって必要なコードが示唆され、長い文章による説明の必要性が減ります。

ただし、網羅的なドキュメントを作成するよりも効率を優先してください。コンポーネントについてチームが標準的な語彙を共有している場合は、すべての画像を埋め込むよりもパターンに名前を付ける方が効果的なことがあります。図が負担ではなく有用なリソースであり続けるよう、視覚的な詳細のレベルを調整してください。また、オーディエンスが進化し、サイトをナビゲートする動機がシフトするにつれて、ユーザーフロー図は時間の経過とともに変化する可能性があります。

5. フィードバックを収集し、まとめて共有する

サイトやアプリケーションを新規に構築する場合であれば、ユーザーフロー図を他のステークホルダーと共有してフィードバックを集め、調整を行います。提案する体験をステークホルダーがひと目で分かるようにビジュアルで伝えることができます。

ユーザーフロー図が完成したら、UX デザイナー、ウェブ開発者、ソフトウェアエンジニアなどのチームメンバーと共有し、ウェブサイトやアプリの構築を開始する前にコンテキストを提供します。

Lucidchart でユーザーフローを設計すると、図の特定の部分に関するフィードバックを簡単に得ることができます。また、付箋を残したり、コメントに同僚をタグ付けしたりするだけで、リアルタイムまたは非同期で共同作業できます。

さらに、Lucidchart は、プロジェクトを開始した瞬間からコードがリリースされるまで、唯一の信頼できる情報源として機能します。チームがプロジェクト追跡ソフトウェア（JiraIRA や Confluence など）やナレッジ共有ツールを使用している場合は、Lucidchart の図をそれらのツールに埋め込んで、チケットやドキュメントの近くに表示することをご検討ください。双方向同期により、Lucidchart の図を更新すると、他の場所に埋め込んだ図がすべて自動的に更新されるため、チームは常に最新の情報をもとに作業することができます。

ユーザーフロー図の例

作図の参考になるユーザーフロー図の例を集めました。例えば、ワイヤーフレーム図形と標準のフローチャート図形を組み合わせたワイヤーフローを使うと、ウェブサイトやアプリの外観に加え、ユーザーがたどるべきプロセスを視覚化できます。

ユーザーフロー図が完成すれば、より具体的で使いやすいユーザージャーニーを構築し、そこからビジネスの実践にも役立てることができます。また、顧客をより的確に理解し、ウェブサイトやアプリケーション上に加え、製品や企業の想定するライフサイクル全体において、スムーズなジャーニーを提供できるようになります。