ヒートマップの種類

ヒートマップには大きく分けて次の３つの機能が備わっております。

• 熟読エリアの可視化
• 終了エリアの可視化
• クリック位置の可視化

① 熟読エリアの可視化（アテンションヒートマップ）

アテンションヒートマップでは、ページのどこの箇所がよく読まれているのか？
ということを、色を用いて可視化する機能が備わっています。

赤色の場所がよく読まれている箇所であり、緑色、青色と寒色になればなるほど
ユーザーに熟読されていない箇所になります。

② 終了エリアの可視化（スクロールヒートマップ）

スクロールヒートマップでは、ページのどこまで読まれていて、どこで離脱してしまっているのか？
可視化する機能が備わっています。

ページを読みに来たユーザーの何％が、その箇所まで残って読んでいるのか確認することができます。

③ クリック位置の可視化（クリックヒートマップ）

クリックヒートマップでは、ユーザーがどこの位置をクリックしているのか？
可視化する機能が備わっています。

クリックされた割合が多い箇所ほど、赤色になり、クリックされた割合が少ないほど、緑色になります。

熟読エリアの読み解きとWeb改善での活用方法

熟読エリアで注目すべき点は主に次の2点です。

• 読んでほしい箇所なのに読まれていない箇所
• 想定外によく読まれている箇所

① 読んでほしいのに読まれていない理由を考える

なぜ読まれていないのか、その理由をまず考える必要があります。代表的なケースとしては、次の3点が考えられます。

• 図や表が無く、文章だけのため、ユーザーにとってわかりにくい
• ユーザーが知りたいことと意図ずれ（例：答えが書いていない、自分の状況と合致していない）が起こってしまっている
• そもそも流入してきているユーザーにとってその内容は興味がない

これらの理由への効果的な対処法として、たとえば
広告流入であれば、クリエイティブや出稿を変更することが検討できますが、最も重要なことは一度ユーザー目線に立って、じっくり文章を読んでみることです。

改善案としては、表や図を適度に増やすことや、読まれていない箇所は削除してしまうなどの大胆な改善も行います。

② 想定外によく読まれている理由を考える

こちらも同様にして、まずはなぜ想定外に読まれているのか考えます。代表的なケースとしては、次の2点が考えられます。

• ユーザーが本当に知りたいことであった
• キャッチ―な文章、画像、表現方法で思わず読んでしまった

こちらは、サイト制作者が気づいていなかった、ユーザーニーズの発見につながります。しかし、内容が難しいため何度も読み返している可能性もあり、検証してみることが大切です。

終了エリアの読み解きとWeb改善での活用方法

終了エリアで注目すべき点は主に次の2点です。

• 大幅に離脱している箇所
• コンバージョン地点とその前後

① 大幅に離脱している箇所の理由を考える

なぜユーザーが大幅に離脱しているのかを考えます。代表的なケースとしては、次の3点が考えられます。

• 適切なリンクがあったので押して離脱した
• ページ内の画像がユーザーに不親切であった
• ユーザーが内容を見限ってしまった

適切なリンクによる離脱はポジティブなものですが、その一方で画像の読み込み速度が遅いときや、画像がページの内容と逸れていたときには、ユーザーは離脱してしまいます。
また該当箇所まで読んだ結果、ユーザーが求める情報が手に入らないと感じても離脱してしまいます。

改善案としては、サイトの表示速度を上げることや画像を取り除いてしまうことが大切です。目次をつけるのも一つの手です。

② コンバージョン地点にはユーザーがそもそもいたのかを知る

そもそもコンバージョン地点の内容やリンクが、ユーザーの何％に表示されていたのかを調べます。

そうすることで、実はコンバージョン地点を少し上部に持っていくだけでコンバージョンが増えるケースもあります。

クリックエリア読み解きとWeb改善での活用方法

クリックエリアで主に注目すべき点は一つ、リンクが無いのにクリックされている箇所です。

なぜリンクが無い箇所をクリックしているのかを考える

ユーザーがクリックする場合の意図は、「リンク先に飛びたい」か「画像を拡大したい」の主に2つでしょう。ですから実際にリンクを貼るか、画像を拡大できるようにしてみましょう。

空クリックに関しては、コンバージョンの機会損失に直結するので、ぜひ早急に検証したい箇所になります。

ヒートマップから読み取れるデータをもとに改善に繋げる方法を実例と共にご紹介します。
※くわしくは以下の動画をご覧ください ↓

ここではユーザーの熟読エリアをヒートマップより分析し、ユーザーが真に求めていることを読み取りました。それを元に簡単な改善を行った結果、流入増だけでなく、熟読エリアも広がりました。

たとえば、「直帰率80%」といっても、
① ページのコンテンツが最後まで読まれて離脱したのか？
② ファーストビューで離脱したのか？

どちらなのかで、貴社サイトが「ユーザーに必要なコンテンツ」を提供できているかの判断が変わります。

このように、アテンション（熟読）・スクロールヒートマップを使うことで、スマホ時代のデジタルマーケティングにおける、ユーザーペルソナの設計・サイト戦略の仮説を立てる使い方も可能になりました。

このように、ヒートマップは、クリックヒートマップ（クリック箇所）を含め、
複数のヒートマップツール会社を比較してみると、以下3種類のヒートマップが基本的に利用されていることが分かります。

クリックヒートマップ

ユーザーがクリックした箇所をデータで蓄積、表示します

アテンションヒートマップ

ユーザーが滞在（熟読）したコンテンツを表示します

スクロールヒートマップ

ユーザーが、どこまでスクロールしたか？を表示します

※関連記事

そもそもヒートマップ (英: Heat map) とは、大量の多次元データを、一目で関係を指し示すために色を利用し、可視化するための手法を指します。

あくまで手法であって、マーケティングツールだけを指す訳ではないのがポイントです。例を見てみましょう。

あまり直感的にはわかりませんね。それもそのはず、ヒートマップは、元々ゲノム/遺伝子解析（マイクロアレイ解析）や統計の分野で、利用されていた手法です。

ただ最近では、サッカー選手のフィールド上での動きや、野球選手の投球コースなど、様々なところでヒートマップは利用されるようになりました。

次の例は、皆さんもお馴染みのエクセルで、ヒートマップを利用した例です。

しかしながら、WEB上での「ヒートマップ」の使われ方としては、「デジタルマーケティング担当者が、ウェブページの各要素と何人の訪問者が接点をもったか？を一目で理解するため」に利用されているケースが増えています。

世界では、SmartlookやHotjar、Crazy Egg、Clarity、Contentsquare、UXCam、cux.io、Zoho PageSense、Mouse flow、Browsee、VWOなども有名ですし、SiTestやPage Analytics、Ptengine、USERDIVE、User Insightなどの多様なバリエーションのUX改善・ヒートマップツールがリリースされています。

ミエルカヒートマップは1URLであればずっと無料で使えるので、この機会に皆さんのWebサイトを分析してみませんか？