無料から始めるヒートマップ解析で、売上、流入改善。

ご相談はお電話でもお気軽にどうぞ

受付時間平日 午前 9:30 - 午後18:30

03-5545-5230

ヒートマップとは?Webサイト改善での活用方法を事例でご紹介

ヒートマップとは?原理や定義からわかりやすく説明。Web改善におけるヒートマップの使い方、スマホ時代でも使えるミエルカヒートマップの特徴は!?

ヒートマップ(英字:heatmap)とは?

「大量の多次元データを、一目で関係を指し示すために色を利用し、可視化する」

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

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



例)物事の関係性を、視覚的かつ直観的にわかるようにする例(R言語で描画した例)

heatmap-toha

あまり直感的にはわかりませんね。それもそのはず、ヒートマップは、元々ゲノム/遺伝子解析(マイクロアレイ解析)や統計の分野で、利用されていた手法です。
ただ最近では、サッカー選手のフィールド上での動きや、野球選手の投球コースなど、様々なところでヒートマップは利用されるようになりました。
次の例は、皆さんもお馴染みのエクセルで、ヒートマップを利用した例です。



【エクセルでのヒートマップ描画一例】

ヒートマップ無データ(左図)VSヒートマップ有データ(右図)


heatmap-EXCEL

※ヒートマップ無データだと、ボトルネックの発見に時間がかかることがわかる。




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

ヒートマップの色分けとその見方は?

データをもとに数字と色に適切な勾配をつけることで一目で把握

ヒートマップの基本的なカラーグラデーションは、数字と色に「適切な勾配」をつけ設定します。
わかりやすく言えば、一目で人間が分かりやすい配色を設定するケースが多いです。
数字で一覧を表示したリスト上に、カラーグラデ―ションで視覚的に配色したほうが、一目で数字の高低差を把握することが出来ます。



数字で一覧表示したリスト上に、カラーグラデ―ションで視覚的に配色したほうが、一目で数字の高低差を把握することが出来ます。

例えば、次のクリックヒートマップでは、ユーザーが良くクリックした箇所が、「濃い赤色(=最高値)」で示されています。「濃い青色(=中間値)」「灰色(=最低値)」とし、クリックされた箇所を視覚的に分かりやすく表示しています。



例)クリックヒートマップ

ヒートマップとはの説明画像

無料問い合わせはコチラ

ヒートマップをWebサイト改善にどう活用するのか?

Webサイトの改善において、ヒートマップはユーザー行動を可視化することができます。

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

1.熟読エリアの可視化

2.終了エリアの可視化

3.クリック位置の可視化

熟読エリアの可視化


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

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


終了エリアの可視化


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

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


クリックエリアの可視化


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

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



熟読エリアからわかるWeb改善での活用方法

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

1.読んでほしい箇所なのに読まれていない箇所

2.想定外によく読まれている箇所

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

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

・図や表が無く、文章だけのため、ユーザーにとってわかりにくい

・ユーザーが知りたいことと意図ずれが起こってしまっている。

・そもそも流入してきているユーザーにとってその内容は興味がない。

これらの理由への効果的な対処法は一つしかありません。それは、一度ユーザー目線に立って、じっくり文章を読んでみることです。

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



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

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

・ユーザーが本当に知りたいことであった。

・キャッチ―な内容で思わず読んでしまった。

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



終了エリアからわかるWeb改善での活用方法

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

1.大幅に離脱している箇所

2.コンバージョン地点とその前後



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

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

1.ページ内の画像がユーザーに不親切であった。

2.ユーザーが内容を見限ってしまった。

例えば、画像の読み込み速度が遅いときや、画像がページの内容と逸れていた場合には、ユーザーは離脱してしまいます。また該当箇所まで読んだ結果、ユーザーが求める情報が手に入らないと感じても離脱してしまいます。



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



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

そもそもコンバージョン地点にユーザーがどのくらい存在していたのかを調べます。

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



クリックエリアの可視化からわかるWeb改善での活用方法

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



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

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

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

スマホ時代のヒートマップ活用特集~改善事例あり~

数種類のヒートマップ分析により、スマホ時代のデジタルマーケティングにおける、ユーザーペルソナの設計・サイト戦略の仮説を立てる。

2011~14年頃まで、PCがメインデバイスの時代は、「どこをクリックしたか」「どういう順にコンテンツを見ていったか?」が重要な指標の一つでした。その為「クリックヒートマップ」が良く利用されていました。


しかしながら、スマホ利用ユーザーの増加に伴い「縦に長いページをスクロールする」というページが増加し、その結果、ユーザーの行動がページを縦に動くという形式増えてきました。また「マウス」でなく「タップ」をいう動作を使い、コンテンツを読むという事が増えました。


そのような流れの中、「アテンションヒートマップ(どのコンテンツを熟読したか・下の図参照)」等にヒートマップの分析の主軸が変わってきました。



<スマホで見た際に、縦に長くなるヒートマップ>
ヒートマップとは?スクロールヒートマップ

また、スマホの画面ビューの中で確認できるコンテンツ範囲は限られてますので、どのコンテンツに着目したか?を言う点も重要です。



<ミエルカアテンションヒートマップ(熟読エリアの確認)>
img_03

※一定秒以上滞在した場合に、カウントされる。(スマホに最適化してます。)



アテンションヒートマップを使うことで、ユーザーの興味関心を喚起しているコンテンツ部分を把握することが可能です。


例えば、ここで一つ事例をご紹介します。

1)熟読エリアのコンテンツを可視化し、興味関心エリアの特徴を知る

2

2)ユーザーの知りたい情報を、ページ上に表記(本ケースは、特徴をタイトルタグに記載)

3


3)同時に、ユーザーの知りたい順に表記を変更することで(コンテンツの順番を変える)

5


4)最終的には、流入増だけでなく、熟読エリアの増加にもつながることもあります。

4


たとえば、「直帰率80%」といっても、
① ページのコンテンツが最後読まれて離脱したのか?
② ファーストビューで離脱したのか?によって、
貴社サイトが「ユーザーに必要なコンテンツ」を提供できているかの判断が変わります。

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


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


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

アテンションヒートマップ ユーザーが滞在(熟読)したコンテンツを表示します

スクロールヒートマップ  ユーザーが、どこまでスクロールしたか?を表示します



また、ミエルカでは、サイトレポート機能にヒートマップ化して課題を抽出する機能もあります。



heatmap-EXCEL

無料登録はこちら

お申し込み簡単30秒
会社名 必須
お名前 必須
メールアドレス 必須
電話番号 必須
お困り事 必須
ご予算 必須
備 考 任意