ヒートマップとは？意味や仕組み、種類、ページの分析、改善例

ヒートマップとは 

ヒートマップはWebサイトの分析機能の一つで、ユーザーの行動データを、サーモグラフィーを模した色でエリアごとに視覚化したもの。ヒートマップの作成には「ヒートマップツール」を使用する。Webページ上でクリックされた箇所や各エリアの閲覧時間、ユーザーのマウスの動きなどの細かい行動データを視覚的に捉えられ、直感的なページ解析が可能。Webサイト全体を分析するのではなく、特定ページにおけるユーザーの反応を分析するツールであるため、トップページやランディングページなど、アクセス数の多いページに設置する。

ヒートマップツールの種類 

 
ヒートマップツールにはさまざまな種類があるが、代表的なものにユーザーのマウスの動きを可視化する「マウストラッキング」と、目線の動きを可視化する「アイトラッキング」がある。その他、クリックされた場所を可視化する「クリックトラッキング」や、スクロール到達率 を可視化する「スクロールトラッキング」などがある。

ヒートマップの分析 方法

熟読エリアの分析：アテンションマップ

「アテンションマップ」 では、ユーザーがどの場所でスクロールを止めて、どれくらい滞在していたかを分析できる。画面全体がグラデーションで表示され、基本的に赤やオレンジといった暖色系はユーザーの熟読度や関心が高く、青などの寒色系がユーザーの関心が低い部分である。

終了エリアの分析：スクロールマップ

「スクロールマップ」 では、ユーザーがそのWebページをどこまでスクロールし、どこで離脱したかを分析できる。アテンションマップ同様、画面全体が関心度によってグラデーションで表示される。

クリックエリアの分析：クリックマップ

「クリックマップ」 では、Webページの中でどこがクリックされたのかを分析できる。クリック頻度が高い箇所は赤色、クリック頻度が低い箇所は青色に色分けして表示される。

カーソルの動きの分析：ホバーマップ（マウスムーブヒートマップ）

「ホバーマップ」 では、「ユーザーがどこにカーソルを置く傾向にあるか」を追跡できる。より多くカーソルが置かれていた箇所が赤く 表示される。また、カーソルの動きを再現する機能である「マウスリプレイ 」を備えたツールもある。

スマートフォン操作の分析：タッチアクションヒートマップ 

スマホやタブレットでの画面のタップやフリック、スワイプなどの操作を矢印で表示して可視化する。上下のスワイプが多く行われている箇所は何度も読み返されていると予想できるため、内容がわかりやすい表現になっているかどうかの確認と検討を行う。

ヒートマップを使ったページの改善例

アテンションマップ 

アテンションマップでは、ユーザーの注目を集めているコンテンツを把握し、コンバージョンにつなげることができる。Webページにおいて、有益な情報はユーザーの目に留まりやすいページ上部に配置する必要があるため、たとえばランディングページで多くアクセスされているコンテンツを上部に表示させるなどの対策によってCVRの向上が期待できる。また、ユーザーの関心が低いページについては、文章を簡潔にしたり、画像や動画を利用したりするなどの対策を実施する。

スクロールマップ 

スクロールマップでは、閲覧の終了箇所を把握することで、多くのユーザーが離脱しやすい場所を特定できる。そして離脱箇所の分析を行い、ユーザーニーズに適した改善を行う必要がある。たとえば、画像のサイズが大きすぎて表示に時間がかかる、なかなか知りたい情報にたどり着けない、といった理由でページを離脱した可能性も。サイトの表示速度の確認や、目次をつけるなどの対策が効果的である。

クリックマップ 

クリックマップでは、ユーザーに多くクリックされた箇所を特定し、必要があればデザインやコピーを修正し導線を改善する。特に、ボタンにクリックが集まっていない場合は、ユーザーの関心が低いか、ボタンだと認識されていない可能性があるため、内容やボタンデザインの変更を検討する。また、誤クリックされている箇所を把握することで 、ページを遷移したいのにリンクが張られていない、画像の拡大ができないといった改善箇所を発見できる。なお、Webサイトにおいて、クリックを誘うボタンや画像、テキストのことをCTA（Call To Action）と呼ぶ。 

ホバーマップ（マウスムーブヒートマップ ）

ホバーマップではカーソルの動きを追うことができるため、クリックマップと組み合わせて分析することで、より効率の良い導線を作ることができる。人は興味のある箇所にカーソルを動かす傾向があるといわれており、ユーザーの関心度に基づいたコンテンツ配置箇所の修正や、CVにつながりやすいページ作りのためのヒントになる。

タッチアクションヒートマップ  

スマートフォンやタブレットにおいて、フリック操作が多い箇所は素早くスクロールされており、ユーザーが読み飛ばしている可能性があるため、コンテンツの見出しや順序、内容、ボリュームなどを見直したい。
スワイプ操作の多い箇所は、ユーザーが繰り返し閲覧している場所であり熟読度が高い可能性があるが、複雑でわかりにくいものになっている場合も。表現を易しくするなどの工夫をするなどの対策が考えられる。
ピンチイン／ピンチアウト（拡大／縮小）が多い場所は、ユーザーの関心度が高いと考えられる一方、文字の大きさが適切でない可能性も。情報内容や読みやすさを確認しておきたい。

ヒートマップを活用する際の注意点

ヒートマップは、ページごとの改善を図るのには効果的であるが、Webサイト全体など広範囲の傾向を分析することは難しい。また、ユーザーの行動データを可視化することはできるが、その行動の理由については別途分析する必要がある。たとえば、ヒートマップで赤い部分は「ユーザーの関心度が高い」と捉えられるが、その理由がポジティブなものかどうかは分析してみないとわからない。
そのため、ヒートマップは単独で使用するのではなく、アクセス解析ツールやSEO対策ツールなどの解析ツールを併用することで、より効果を発揮するツールであるといえる。