Webサイト上のユーザーの行動を分析しサービスのUI/UXをよりよいものにしていくことは、ユーザーの満足度を向上させるために欠かせない営みです。

サービスページのレイアウトやデザインひとつで、ユーザビリティ・アクセシビリティは大きく改善します。

とはいえ、

「サービスページを改善したいが、何から手をつければよいか分からない」

「なんとなく活用されていないコンテンツがありそうだが、根拠がない」

「どんなツールを使って分析を行うべきか悩んでいる」

こんな方も多いのではないでしょうか。

このようなお悩みの解決に役立つツールが、ヒートマップです。

ヒートマップを活用することで、視覚的・直感的にWebページ上のユーザー行動の傾向を把握し、改善すべきポイントを発見できます。

この記事では、ヒートマップの基本的な機能から、その他のアクセス解析ツールなどとの違いや具体的な活用方法まで解説していきます。

ヒートマップとは？

ヒートマップとは

ヒートマップとは、データの強弱や多寡を色の濃淡で可視化したグラフの一種です。

一般になじみのあるヒートマップの一種としては、温度の高低を色で表す「サーモグラフィー」がイメージしやすいでしょう。

サーモグラフィの場合、温度の高い箇所は赤で、中程度の箇所は黄〜緑で、低い箇所は青で表示されます。

Webページの分析におけるヒートマップも同じように、ユーザーが注目している箇所やクリックしている箇所を色の濃淡によって分かりやすく可視化できます。

Webページ上のマウスの動きや滞在時間、クリックのデータをトラッキングすることで実現している仕組みです。

Webページを訪問したユーザーの行動傾向をとらえ、改善すべき課題を数字だけから見いだすことは容易ではありません。

例えば「サービスのある機能の利用率が低い」という数値データがあったとしましょう。利用率の低さにつながっている背景はさまざまなものが考えられます。

「機能を利用する導線を見つけた上で使っていない」

「機能の存在は認知しているのに、導線をクリックしていない」

「そもそも機能を利用するための導線が見つけられていない」

いずれの状況かによってとるべき改善策は全く異なりますが、利用率のデータだけを見ていてはわからないことです。

しかしこれらはヒートマップを活用することで、特別な分析の経験やノウハウがなくとも明らかにすることが可能です。

ユーザーが強く興味を持っているコンテンツや、提供者側の意図と異なる使い方をされている箇所などを効率的かつ直感的に把握することができるのがヒートマップのメリットと言えます。

ヒートマップとアクセス解析ツール・ユーザーテストとの違い

ヒートマップはWebページ上でユーザーが何に注目しどのような行動をとっているのかを把握するために、非常に有効なツールです。

しかし、ヒートマップだけでサービスページの効果測定や課題把握がすべてできるわけではありません。

その他のツールや手法もうまく組み合わせて、多角的に分析することが重要です。

ここからはアクセス解析ツールとユーザーテストを取り上げ、ヒートマップとの違いとそれぞれの強みを説明します。

アクセス解析ツールとの違い

Googleアナリティクスなどに代表されるアクセス解析ツールは、ページのPV数や閲覧ユーザー数、対象ページへの流入経路などを定量的かつマクロに把握するためのツールです。

アクセス解析ツールで問題のある箇所や問題の大小をつかんだ上で、ヒートマップを用いてその問題がどういった要因により発生しているかを分析するというのが効果的な組み合わせ方でしょう。

ユーザーテストとの違い

ヒートマップはあくまでユーザーの行動を可視化するツールです。「なぜ」ユーザーがそのような行動をとったかまではわかりません。

アクションの理由まで知るためには、ユーザーの生の声を聞けるユーザーテストを組み合わせる必要があります。

実際にユーザーにサービスページを閲覧・操作してもらった上で、注目した箇所や操作に困った箇所の理由をヒアリングすることにより、よりユーザーニーズに寄り添った改善につなげることができるでしょう。

ヒートマップからわかること

一般的にヒートマップは、主に3つの機能を備えています。

「熟読エリア」「終了エリア」「クリック位置」の可視化機能について、それぞれ解説します。

ヒートマップの主な機能

熟読エリア

熟読エリアの可視化は、ページ内でユーザーによく読まれている箇所を色別に表示する機能です。

ユーザーに注目されている箇所ほど赤く、あまり読まれていない箇所は青く表示されます。

ページ内のどのコンテンツにユーザーニーズがありそうか、またはなさそうかを捉えるために役立つ機能です。

終了エリア

終了エリアの可視化は、ユーザーがページをスクロールしてどの部分まで読んでいるのかを示す機能です。

ユーザーがページから離脱する箇所を把握することで、コンテンツのレイアウト改善につなげることができます。

クリックエリア

クリックエリアの可視化は、文字通りユーザーがページ内のどこをクリックしているかを表す機能です。

よくクリックされている箇所ほど赤く、クリックされた割合が少ない箇所は青く、ヒートマップ内で示されます。

クリックしてほしい箇所の実際のクリック率や、逆にクリック不可のエリアでクリックされているデータを知ることができます。

ヒートマップ分析の活用方法

ヒートマップの機能の基本を理解したところで、各機能別にどのようなポイントをチェックして分析・活用すべきかについても知っておきましょう。

熟読エリア分析の活用方法

熟読エリア分析を活用する際は、サービス提供側の意図とユーザー行動が相反している箇所をまずチェックしましょう。

具体的には「読んでほしいが、実際は読まれていない箇所」「想定していなかったが、実際はよく読まれている箇所」の2点です。

対象の箇所を把握したあとは、以下のような観点で分析してみましょう。

・対象ページを閲覧しにきたユーザーが知りたい情報やとりたい行動はそもそも何か？

・知りたい情報やとりたい行動につながるコンテンツはページに含まれているか？

・含まれている場合、位置や大きさ、表現がわかりづらくないか？

・知りたい情報やとりたい行動と無関係なコンテンツを、上部など目立つ場所に配置していないか？

・よく読まれている箇所に設置したほうが望ましいコンテンツはないか？

また、ページのデザインやレイアウトの改修を行った場合、改修前後の熟読エリアのデータを比較することでどの要素が効果につながったかを検証できます。

終了エリア分析の活用方法

終了エリアのデータで特に見るべき点は、多数のユーザーが離脱している箇所です。

離脱箇所を特定した上で、以下のような観点でチェックしてみましょう。

・適切なリンクの押下による離脱か？

・離脱箇所より上部に、ユーザーが知りたい情報やとりたい行動に沿わないコンテンツを配置していないか？

・離脱箇所付近に読み込みに時間のかかるコンテンツを配置していないか？

・熟読エリアと見比べたとき、離脱箇所より下部に熟読されているコンテンツがないか？

特に、熟読されているコンテンツが多数のユーザーの離脱箇所より下部にある場合、内容はユーザーニーズに沿っているのに見せ方が適していないという可能性が大いにあります。

上部に配置しなおすことで、パフォーマンスを改善できるかもしれません。

クリックエリア分析の活用方法

クリックエリア分析も熟読エリア分析と同様、サービス提供側の意図とユーザー行動に差異が生じている箇所を重点的に確認しましょう。

「クリックしてほしいが、実際は押下されていない箇所」「リンクがないのに、実際はクリックされている箇所」の2点がチェックポイントです。

対象の箇所を見つけたら、以下のような観点で分析してみましょう。

・クリックしてほしいボタンやリンクの位置や大きさ、表現がわかりづらくないか？

・熟読エリアや終了エリアと見比べたとき、クリックしてほしい箇所はそもそも見られているか？

・リンクがないのにクリックされている箇所に、一般的にリンクを想起させるUIを用いていないか？

・リンクがないのにクリックされている箇所に、設置したほうが望ましいリンクはないか？

・リンクがないのにクリックされている箇所のテキストや画像のサイズが小さすぎないか？

特に、リンクがないのにクリックされている箇所は要注意です。

ユーザーがページ遷移を期待してクリックしている場合だけでなく、小さくて見づらいテキストや画像を拡大したい意図でクリックしている場合もあります。

まとめ

この記事では、ヒートマップの機能の基本から、ユーザー行動を把握しサービス改善につなげるための活用方法を解説しました。

ヒートマップは、Webページ上でユーザーが何に注目しどのように行動しているかを視覚的・直感的に把握できる便利なツールです。

ヒートマップやその他の分析ツールを組み合わせることで課題を発見・改善し、効果検証を行うサイクルを回していくことで、サービスページの品質向上に努めましょう。

【Onboarding】 -株式会社STANDS

Onboarding（オンボーディング）は、ウェブサービスにユーザーを導くガイドを設置するUI/UX改善ツールです。

エンジニアのリソースを使わず、ノーコードで簡単にチュートリアル、ヒントなどのガイドを作成することができます。ユーザー属性や利用状況を分析し、データをもとにした施策を実行・改善といった、PDCAに必要な機能をワンストップで提供しています。

▼サービスページ