ヒートマップとは、Webページ上のユーザーの行動を色で視覚的に把握できるツールです。Webページのなかでよく読まれている箇所、ページのどこまで読まれたか、どこがよくクリックされているかなどがわかります。

ヒートマップで頻繁に読まれている箇所や、反対にあまり読まれていない場所などを把握すると、Webページの改善に役立ちます。ユーザーの行動が把握できるため、ユーザー目線を意識する必要のあるUIやUXの改善にヒートマップの活用は欠かせません。

ここでは、ヒートマップの種類を詳しくみていきます。

クリックヒートマップは、ユーザーがWebページ上のどこをクリックしたのかを示すヒートマップです。スマートフォン用のWebページでは、ユーザーがタップした場所を示します。

アテンションヒートマップは、Webページ上の滞在時間を計測し、ユーザーによく見られた箇所やあまり見られなかった箇所を示すヒートマップです。ユーザーが興味を持っている部分や、読み飛ばしている部分を把握できます。

スクロールヒートマップは、特定の部分までスクロールしたユーザーの割合を示すヒートマップです。ページのどの部分まで読まれたのか、どこで離脱してしまうユーザーが多いのかなどがわかります。

マウスフローヒートマップは、Webページ上のマウスの動きやカーソルを合わせた場所を示すヒートマップです。「クリックされなかったもののリンクにカーソルが置かれた」など、クリックヒートマップだけではわからないユーザーの行動も把握できます。

タッチアクションヒートマップは、スマートフォンやタブレットのタッチ操作を把握できるヒートマップです。タップやスワイプ、ピンチイン、ピンチアウトといった指の動きがどこで起きているのかがわかります。

ここでは、ヒートマップの主な機能や、ヒートマップでできることを紹介します。

ユーザーがどこでタップやクリックをしたのかがわかります。タップやクリックが多いエリアほど、濃い色や目立つ色で表示されます。

例えば、ただのテキストや画像が多くクリックされている場合、ユーザーがリンクだと勘違いしている可能性があると判断できます。この場合は該当のテキストや画像にリンクを設置するなど、Webページの操作性を改善させるポイントを抽出するのに役立ちます。

ユーザーの滞在時間から、Webページのなかでよく読まれているエリアを特定できます。よく読まれているエリアは赤、あまり読まれていないエリアは青など、色によってユーザーの熟読エリアが可視化されます。

「読んでもらいたい部分が読まれていない」「想定外によく読まれている部分がある」などを発見できます。これにより、読み飛ばされているエリアの改善やユーザーニーズの発見に役立ちます。

ユーザーがWebページのどの部分までスクロールしているのか、どこでページから離脱しているのかがわかります。何%のユーザーがそのエリアまで読み進めたのかが表示され、数値が大幅に下がっている部分があればそこで離脱したユーザーが多いと判断できます。

例えばスクロールされていないエリアに重要な情報がある場合は、ページのレイアウトを改善する必要があるでしょう。

閲覧者が減っているポイントは、別のページへのリンクが設置されているケースが多いです。ただし、リンクがないのにユーザーが離脱している場合はコンテンツの内容がユーザーに刺さっていない可能性が高いため、改善が求められます。

クリックやスクロール以外に、ユーザーがどのようにマウスを動かしたのかがわかります。

例えば、多くのユーザーがマウスカーソルを合わせているテキストや画像がある場合、そこにリンクがあると勘違いしている可能性があります。この場合、該当の箇所にリンクを設置するとユーザーにとって使いやすいWebページに近づけられるでしょう。

各分析項目について、パソコン・スマートフォン・タブレットなど、デバイスごとの解析結果を表示できます。

「スマートフォンからの閲覧だけページ前半の離脱率が高い」など、デバイスごとにどのようにユーザー行動が変わるのかを分析して、改善すべき点がないか確認します。これにより、どのデバイスからも快適に利用できるサイトが目指せます。

ここでは、ヒートマップツールを活用するメリットを紹介します。

ヒートマップツールを活用すると、クリックやスクロールなどユーザーのこまかな動きがわかります。「どこがよく読まれているのか」「誤クリックが発生している箇所がないか」「ユーザーがどこで離脱しているのか」といった情報は、ヒートマップツールを使わなければ見えてこない部分です。

ヒートマップツールで取得したユーザーの行動傾向のデータは、Webページの改善策を抽出するのに活用できます。ユーザーのこまかな行動を把握できるため、ユーザー目線での改善策を抽出できるのが大きなメリットです。ヒートマップでクリックやスクロール、マウスの動きなどを視覚的に表してみると、これまで気付かなかった改善ポイントが見えてくるかもしれません。

ここでは、ヒートマップツールを使ったWebページの改善について、具体的な方法を紹介します。

「リンクを設置していないテキストやバナーがよくクリックされている」場合や、反対に「リンクを貼っているのにクリックされていないテキストやバナーがある」といった場合には、ボタンなどのデザインや配置を変更してみましょう。リンクがあるように見えるのにリンクではない箇所や、クリックされにくいデザインのバナーになっている可能性があります。

「ユーザーの誤解を招くデザインや配置になっていないか」「クリックしたくなるようなデザインのボタンになっているか」などを考え、デザインや配置を修正してみましょう。

効果的なボタンのデザインや配置について、こちらの記事でも詳しく解説しています。ぜひ併せてご覧ください。

「CTAとは？　意味やクリックされやすくなる改善方法を解説」を読む

「読んでほしい内容なのに熟読率が低い」「重要な情報にたどり着くまえにページを離脱しているユーザーが多い」などのケースでは、読まれないコンテンツの修正や変更をおこなう必要があります。

例えば、読み飛ばされている文章がある場合は画像や箇条書きなど視覚的にわかりやすい表現に改善したり、離脱されて読まれていない重要な情報をページの上部に移動させたりしてみましょう。企業側が伝えたい情報を、ユーザーに見てもらいやすくなります。

熟読エリアを確認すると、ユーザーに注目されている箇所を特定できます。コンバージョン率の改善をしたい場合、ユーザーの注目度が高いエリアにCVポイントを設置してみてください。また、注目度の高い情報をページの上部に移動させ、最初にユーザーの興味を強く引いてCVにつなげる方法もあります。

ここでは、ヒートマップツールを活用する際に押さえておきたいポイントを紹介します。

ヒートマップツールでよく読まれているエリアやクリックされている箇所がわかったら、デザインやボタンの配置を入れ替えたページを複数用意して、ABテストを実施しましょう。ABテストとは複数パターンのWebページを運用して成果を比較し、より成果が出たものを採用しながら改善を進めていく手法です。

ユーザーにとってわかりやすいWebページを作成するには、ヒートマップツールで複数パターンのWebページの結果を比較し、より効果のあったデザインを取り入れていくと効率的です。

ヒートマップツールはユーザーのこまかな行動を把握できますが、「なぜこのような行動をとったのか」まではわかりません。ヒートマップだけでは把握が難しいユーザーの行動心理を把握するために、ユーザーテストにも取り組みましょう。

ユーザーテストでは、実際のユーザーにWebページの使い勝手を試してもらうことでユーザーの意見を収集できるため、企業側では気付かなかった改善点が見つかるかもしれません。

ここでは、ヒートマップツールを活用するときの注意点を紹介します。

ヒートマップツールは、利用するサービスによって解析データの保存期間やデータ量に制限があります。また、ツールによっては無料版はアクセス数や分析できるサイト数に制限がある場合もあります。無料サービスから有料サービスまで多くのヒートマップツールが提供されているため、データの保存期間などの制限については利用前にチェックしておきましょう。

先ほどユーザーテストとの組み合わせをおすすめしたとおり、ヒートマップツールだけではユーザーが行動した理由まではわからない点にも注意が必要です。熟読されているエリアやクリックされている箇所の特定は可能ですが、なぜそのような行動につながったのかは推測するしかありません。

企業側の推測が当たっているケースもあれば、ユーザーの行動理由を正しく理解できていないケースもあるでしょう。必要に応じてABテストやユーザーテストを取り入れながら、ユーザーの行動理由の把握にも力を入れることが大切です。

先述のとおり、ヒートマップツールだけではユーザーの行動理由まではわかりませんし、Webサイト自体の品質を判断することはできないことも理解しておきましょう。ヒートマップはユーザーの行動傾向を把握するためのもので、ユーザーがコンテンツに満足しているかどうかなど、Webサイトの品質を測定するためのツールではありません。

最後に、ヒートマップに関するQ&Aを2つ紹介します。

アイトラッキングは、特殊な機材を使って人の目の動きを計測する方法です。視線がたどった順番や、エリアごとの注視した時間などがわかります。

アイトラッキングが目の動きを分析するのに対して、ヒートマップはマウスの動きやスクロールなどの操作を分析するのが違いです。また、ヒートマップは無料ツールもあり手軽に利用できますが、アイトラッキングは専用の機材が必要で、調査にかかる費用も高額です。

ヒートマップでは、以下のようなことはできません。

• コンテンツが注目されている・注目されていない理由の特定
• 離脱されている原因の特定　など

ヒートマップでわかるのはあくまでもユーザー行動の結果だけで、その理由までは特定できない点に注意してください。

ヒートマップとは、Webページ上のユーザーの行動を把握できるツールです。頻繁に読まれている箇所やクリックされている箇所、あまり読まれていないエリアやページを離脱する人が多い場所など、ユーザーの詳細な行動を色によって視覚的に理解できます。

WebページもUI/UXが重視されるようになり、ユーザー目線で使いやすいかどうかが重要なポイントです。ヒートマップツールを活用して、ユーザーに興味を持ってもらいやすいWebサイトの改善に取り組みましょう。