logo logo
Boardmixを無料で体験 arrow
あおい
あおい

投稿日 Jan 10, 2023, 更新日 Aug 16, 2023

ユーザーフロー図を活用

ユーザーフロー図は、Web上でのユーザー体験改善には欠かせないツールです。本記事では、ユーザーフロー図とは何か、また、活用場面や作り方について紹介します。ぜひ本記事を参考にして、ユーザー体験(UX)の向上を目指しましょう。

1. ユーザーフロー図とは?

ユーザーフロー図とは

ユーザーフロー図とは、Webサイトの各ページでユーザーが体験する要素を可視化したものです。ユーザーの行動を把握することで、よりユーザーに寄り添った、満足度の高いWebサイトの構築が可能になります。

主にユーザーフロー図は以下の要素からできています。

① 開始点と到達点

ユーザーフローの開始点と到達点を明確にした点のこと

② プロセスと行動

ログインや購入など、ユーザーが実行するステップを示した情報のこと

③ 意思決定ポイント

ユーザーが購入する上で判断基準となるページや要素のこと

④ 矢印

決定に基づいてユーザーが向かう方向を示す矢印のこと

ユーザーフロー図は、現時点でのサイト上での戦略を評価、改善する際に便利なツールです。ユーザー体験や購入プロセス、無料トライアルの実施など、事業目標達成に必要な要素を明確にしましょう。

2. ユーザーフロー図の活用場面とは?

ユーザーフロー図を作成

では、ユーザーフロー図は具体的にどのような場面で活躍するのでしょうか?ここでは、ユーザーフロー図の活用場面について紹介します。

2.1 UX設計

ユーザーフロー図を作成することで、ユーザの満足に必要なUI条件が明確になります。このUIを向上させることが、UX設計の向上につながります。なぜなら、UIはUXを向上させるための一つの要素であるからです。

例えば、スマホの画面でいうと「解像度」、「ボタンの配置」など実際にユーザーが触れる部分がUIです。

一方、「画面が綺麗でみやすい」、「片手で簡単に操作ができる」などユーザーが製品やサービスを通して得られる体験がUXになります。

「解像度」は「画面が綺麗でみやすい」の一部の要素です。このことから、ユーザーフロー図はUX設計に活用が可能です。

3. ユーザーフロー図作成のメリット

ユーザーフロー図のメリット

ユーザーフロー図作成は手間がかかり、めんどくさいと思われがちです。しかし、手間をかけてでも作る価値のあるメリットが存在します。ここでは、ユーザーフロー図作成のメリットを紹介します。このメリットを享受するため、ユーザーフロー図作成に取り組んでみましょう。

3.1 重要なステップを可視化できる

ステップ一つをとっても、人それぞれバックグラウンドや趣味嗜好の違いで、重要度や優先順位は変わります。

ワークフロー図で、このステップを可視化できます。可視化することで、ユーザーの行動やパターンが見え、ユーザー満足度の高いサービスが提供可能です。

3.2 ミスコミュニケーションの防止

例えば、「肉を買ってきて」と言われたとします。

あなた自身はどこでどの肉を買ってきますか?スーパーで買う人もいれば、精肉店で買う人もいます。牛肉を買う人もいれば、豚肉を買う人もいます。このように、「肉を買う」という一つのステップだけとっても、人によって認識がズレるのです。

ワークフロー図を作成することで、認識を一致させることができ、ミスコミュニケーションの防止につながります。

4. ユーザーフロー図の正しい作り方

実際にどのようにしてワークフロー図を作るのでしょうか?初めて作成する人は参考にしてワークフロー図を作成してみてください。

4.1 行動ステップを作る

今回は例として「Webサイトでの商品購入」のユーザーフロー図の作成を紹介します。ゴールは「商品購入」としました。

ユーザーフロー図の作成手順1

まずは、図の赤丸の部分の行動ステップを作成します。

今回の例は、「Webサイトでの商品購入」で多くの人が経験したことがある例ですが、ほとんどの人が経験したことのないテーマの場合もあります。

その場合、実際に経験したことのある人に聞いて、振り返ってもらうことが重要です。これにより、実際にユーザーが経験する正確なステップが書き出せます。

4.2 各ステップ毎のユーザー心理を書き出す

ユーザーフロー図の作成手順2

ステップごとにユーザーの気持ちをイメージしながら書き出しましょう。

ユーザーの気持ちを書き出すことで、課題や必要条件などをイメージしやすくなります。ユーザーの気持ちはポジティブでもネガティブでもどちらでもいいです。

なぜなら、ポジティブな気持ちはそうなるために必要な要素、ネガティブな気持ちはそうならないために必要な要素をイメージできるからです。

4.3 必要となる機能を書き出す

ユーザーフロー図の作成手順3

ステップごとに必要な画面や機能を書き出します。

書き出すことで、ユーザーの状況がイメージしやすくなり、課題や必要条件が明確になります。必要な画面や機能を書き出さずに進めると、ユーザーが何に困っているかイメージが湧きません。

4.4 ユーザーが求める機能を洗い出す

最後に、ユーザーが画面や機能に求める条件を書き出します。

この条件とは、各行動ステップを進めるために必要な条件のことです。例えば、「商品検索」をして次の「商品の詳細をみる」に進むには、商品検索が簡単でわかりやすい必要があります。

このように、次のステップに進むための前提条件を書き出すことで、必要なものを想定することが可能です。

5. ユーザーフロー図が無料で作れるツールboardmix

ユーザーフロー図の作成ツール

ユーザーフロー図を作るためのツールは多く存在しますが、今回は無料でユーザーフロー図を作成できる無料ツール「boardmix」を紹介します。無料とは思えない機能性を備えていますので、無料でユーザーフロー図を作成してみましょう。

5.1 Boardmix

boardmixは、オンラインホワイトボードにより共同での編集や閲覧を可能にした次世代型無料ツールです。多くのテンプレートを備えており、さまざまな図や資料の作成に役立ちます。

boardmixの特徴は以下になります。

  1. 無料で使用可能
  2. 無料とは思えない多機能性
  3. オンラインでの共有が可能
  4. シンプルな設計
  5. 直感的な操作性
  6. チームで共有・編集が可能

boardmixは、他社のツールにはない機能性を備えていますので、無料でのユーザーフロー図の作成に最適です。

5.2 Boardmixの機能性

boardmixの機能を紹介します。

ユーザーフロー図のテンプレート

上の図のように、boardmixにはたくさんのテンプレートが用意されています。

そのため、今回紹介したユーザーフロー図だけでなく、さまざまな資料や図を簡単に作成可能です。先ほど紹介したユーザーフロー図も、実際にboardmixを使って作成したものです。

boardmixは無料で使えるため、導入コストも抑えられます。ぜひboardmixを使って、さまざまな資料や図を作成してみてください。

boardmixを無料で体験 矢印

6.まとめ

本記事では、ユーザーフロー図とは何か、また活用方法や作成方法を紹介してきました。ユーザーフロー図についてまとめると以下になります。

  1. ユーザーフロー図を活用することで、ユーザー満足度の高いサービスを提供できる
  2. ユーザーフロー図はUX設計に活用可能
  3. 正しい作り方を知ることで、より有効なユーザーフロー図を作成可能
  4. 無料ツールboardmixを使うことで、導入コストを抑え、手軽に作成できる

ユーザーフロー図作成は、ユーザーの満足度に直結します。より有効なユーザーフロー図を作成し、よりユーザーに寄り添った満足度の高いサービスの提供を目指しましょう。

go to back
twitter share
facebook share