ヒートマップを基礎から解説！分析・活用方法、企業の成功事例も紹介

ヒートマップとは、WEBサイトデータを可視化するために、データを数字ではなく色によって視覚化する分析手段です。

ユーザーのマウスやスマートフォンの指の動きを追跡して、WEBページ上で動きが少ない場所を寒色、多い場所を暖色で表す仕組みになっています。

マウスの動きは人間の目と80％以上の相関関係（※）があるとされています。そのため、クリックなどの具体的なアクションだけでなく、ユーザーの思考までを可視化できると考えられています。

ヒートマップの特徴

ヒートマップはサーモグラフィのように色分けされており、色の濃淡によってユーザーの動きを表しています。暖色が濃いほどユーザーの関心が高いエリアとなります。

まずは、色が何を表しているのかを理解しましょう。

ヒートマップにはいくつかの種類があります。各ヒートマップによってわかることは異なりますが、概ね次のようなことがわかります。

これによって、具体的には次のようなことがわかります。

なお、ヒートマップの種類については、本コラム内「ヒートマップの種類」で詳しく説明します。

パソコンとスマートフォンにおけるヒートマップの違い

通常、パソコンとスマートフォンではヒートマップの結果が多少異なります。そのため、デバイスの特徴を踏まえて分析することが大切です。

例えば、パソコンよりもスマートフォンのほうが熟読率は低くなる傾向にあります。なぜなら、スマートフォンは隙間時間に使用されることが多く、移動時間やちょっとした合間では、ユーザーは一つひとつのページをしっかり読み込めないからです。

一方で、スクロール率はスマートフォンのほうが高くなる傾向にあります。スマートフォンユーザーは指で直感的にスクロールするからです。また、画面上に表示される情報がパソコンよりも少ないため、該当ページ上の情報を把握するためにはページを送る必要があるからだと考えられます。

ヒートマップを活用するメリットについても見てみましょう。

初心者でもWEBサイトの改善策を考えやすい

一般的に、WEBデータの解析には経験やノウハウが必要です。しかし、ヒートマップなら、初心者でも直観的にユーザーがどこに注目して何に興味を持っているのかを知ることができます。WEBページの問題点にも気付きやすいでしょう。

そのため、マーケティングのプロはもちろん、マーケティング部に所属されたばかりの方をはじめ、社内のさまざまな方が改善点に気づけるのです。

数値での分析よりも細かく問題点を把握できる

数値で分析するアナリティクスツールでは、各ページにおけるクリック数や、そのページが平均何分読まれたかなどを知ることができます。しかし、クリックしようとしたけれどやめたケースや、ページの何％までが読まれたのかなどはわかりません。

ヒートマップではこれらを把握することができ、どこをどう改善すればよいのかを考えやすいため、分析から改善へのPDCAを素早く回すことができます。

デザイナーやエンジニアへの改善依頼がしやすい

WEBページの改善にはデザイナーやエンジニアの協力が欠かせません。しかし、専門職以外の方からデザイナーやエンジニアに指示を出すのは難しいケースも多いでしょう。

ヒートマップがあれば「このボタンは押されているけれどこのボタンは押されていないのでデザインを変えたい」や「ここには視線が行っていないので、別の場所に置き換えたほうがよい」など、改善依頼をしやすくなります。

また、ヒートマップの結果を見せることでデザイナーやエンジニア自身からも改善案を引き出せる可能性が高くなります。

ヒートマップには、さまざまな種類があります。ここでは主な5つのヒートマップを紹介します。

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

アテンションヒートマップは、ユーザーが熟読している部分を把握するためのヒートマップです。色は、よく読まれている箇所ほど赤く、読み飛ばされている箇所ほど青く表示されます。

ページがスクロールされる途中で、どこが熟読されているのかを分析でき、ユーザーがどんな情報に興味を持っているのかを把握できます。

ただし、熟読されているからといって必ずしもユーザーの興味関心が高いというわけではありません。「テキストが読みづらい」「意味がわかりづらい」という理由でユーザーがじっくり読んでいる可能性もあるからです。

他の箇所と比べて文字が小さくないか、文章が冗長になっていないかなどを確認しましょう。

クリックヒートマップ

クリックヒートマップは、ユーザーがクリックしている部分を示すヒートマップです。クリックしたユーザーが多いほど色が赤く表示され、少ないほど緑や青で表示されます。

クリックヒートマップでは、ユーザーがクリックしやすい場所にリンクやボタンが設置されているかや、リンクがないところがクリックされていないかなどを確認できます。

スクロールヒートマップ

スクロールヒートマップは、ユーザーがページをどれくらいスクロールしたのかを表すヒートマップです。これによって、何％のユーザーが記事のどの部分までを読んだのかがわかります。

読んでいるユーザー数が多いWEBページの上部ほど赤く、下にいくほどユーザーが少なくなるため緑や青になります。まだページの半分にも至っていないのに緑や青が出てくるようなら、ほとんどページが読まれていないということになります。

ページのどのあたりで離脱するユーザーが多いのかによって、記事の構成を考え直したり、画像を設置するかどうかを検討しやすくなります。

ただし、上部で離脱するユーザーが多いからといって、必ずしもコンテンツに興味がないとはいえません。欲しい情報がすぐに得られたという理由で離脱している可能性もあるためです。

例えば、上部に情報をさらに深堀りできる資料DLを促すCTAを置き、クリック率を計るなどによって、仮説検証できるサイト構築が望ましいでしょう。

マウスフローヒートマップ

マウスフローヒートマップは、パソコン用のページを見にきたユーザーのマウスの動きを可視化するヒートマップです。

マウスの動きは視線の動きと関連しているとされています。そのため、視線が向いている場所の分析が可能です。注目されている文章や画像を把握したり、視線が集まっていない場所を理解することでレイアウト変更などの場合に役立ちます。

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

タッチアクションヒートマップは、スマートフォン用やタブレット用のページを見にきたユーザーの動きを可視化するヒートマップです。スワイプ・タップ・拡大縮小などの動作が多い、または少ない箇所を把握できます。

ユーザーが興味関心を持つコンテンツがわかるのはもちろん、ユーザーの動作をきっかけにサイトの改善点が見つかるケースもあります。

例えば、拡大して読んでいるユーザーが多い場合、画像や文章が見づらい可能性がある、といった判断ができます。

ファーストビュー（FV）の分析

ファーストビューとは、ユーザーがWEBページを訪れたときに最初に表示されるページ上部のエリアです。つまり、ユーザーが必ず見る部分ということです。

ユーザーはファーストビューをもとにそのページやWEBサイトをじっくり読むかどうかを判断します。ファーストビューで興味喚起できなければ、ユーザーはすぐに離脱してしまうのです。

また、ファーストビューのどこに何を設置するかによってクリック率やコンバージョン率は大きく変わります。ファーストビューの改修によって、コンバージョン率が10％近くアップすることもあります。

ヒートマップをもとにユーザーが注目しているポイントを分析して構成を再考したり、離脱率によってはメイン画像やコピーを改善したりしましょう。

熟読エリアの分析

熟読エリアは、ユーザーがじっくり読んでいるエリアです。しっかり読んでほしいのに読まれていない部分や、想定していないのによく読まれている部分を確認しましょう。

読んでほしいのに読まれていない場合は、なぜ読まれていないのか分析して改善しましょう。

改善方法例としては、次のようなケースがあります。

終了エリアの分析

終了エリアは、多くのユーザーが離脱している部分のことです。単にそのページを読むのをやめたのではなく、コンバージョンによってページ遷移している可能性もあります。

コンバージョン用のボタンなどがヒートマップ上で赤くなっている場合は問題ありません。しかし、ボタンが押されていないのにページ上部で離脱しているユーザーが多いなら、改善しなければなりません。

申し込みボタンや購入ボタンを上部に設置することで解消されるケースもあれば、コンテンツ全体を見直したほうがよいケースなどさまざまです。

また、WEBメディアとして記事をじっくり読んでほしいのにページ上部で離脱しているユーザーが多いなら、構成や画像挿入などで工夫するのもよいでしょう。

クリックエリアの分析

クリックエリアは、ユーザーがクリックした箇所です。申し込みボタンや購入ボタンなど、クリックしてもらうべきところで多くクリックされているのが望ましい状態です。

優先度の低いボタンがクリックされている場合は、改善の余地があります。また、クリックしても意味のない場所が押されている場合は、ユーザーにとってボタンやリンクかどうかわかりづらいデザインになっているということです。

ユーザーを迷わせることなく、想定したところがクリックされるよう、デザインや配置を改善していきましょう。

ヒートマップで分析した内容をWEBサイトの改善に活かすにはどうすればよいのでしょうか。具体的な方法を紹介します。

ユーザーの興味関心を理解する

ヒートマップの最大の特徴は、ユーザーの興味関心がわかることです。

なかでもページ内リンクとして記事の目次を設置している場合、その記事でユーザーが特に直接アクセスしたい情報はどれなのかを知ることができます。その箇所に、あわせて読んでもらいたい関連記事やコンバージョンを促すページへの内部リンクを設置するなどの工夫をするとよいでしょう。

また、人気記事や関連記事を掲載している場合、次にどのコンテンツをクリックしたかによって、ユーザーの興味関心を理解できます。ユーザーの興味関心が高いコンテンツを増やすことで、PV数やコンバージョン率もアップしていくでしょう。

コピーライティングやデザインを改善する

ヒートマップの分析は、コピーライティングやデザインの改善にも役立ちます。

例えば、ファーストビューで離脱しているユーザーが多いことがわかれば、メイン画像内のコピーライティングに問題があるかもしれません。また、ボタンにマウスオーバーされていなかったり、クリックされていなかったりする場合には、ボタンの位置やデザインがわかりづらい可能性があります。

意図した通りにユーザーが行動していない場合は、コピーライティングやデザインを見直しましょう。

コンテンツの位置を変更する

コンテンツの位置を見直すためにも、ヒートマップの活用が大切です。

例えば、コンバージョンを促すボタンがページ下部にある場合、スクロール分析をすると全体の30％程度しかボタンに到達していないことがわかるようなケースがあります。この場合、ボタンを上部に置き直すほうがよいでしょう。

反対に、すでに上部にあってよく読まれているコンテンツなら、ある程度、下部に移動させても読まれる可能性が高いでしょう。例えば、人気記事一覧がよくクリックされているなら少し下げて、別のよりコンバージョンに近いコンテンツと入れ替えるとよいかもしれません。

コンテンツの順番によってユーザーの行動は変わるため、よく検討し、変更したあとも分析をくり返して移動し直すなど、最適な構成を模索することが大切です。

適切なクリックを誘導する

ヒートマップを分析すると、ユーザーが誤ってクリックしている部分がないかを確認することができます。

リンクを設定していない箇所をクリックしているユーザーが多い場合、コンテンツにリンクがあると勘違いさせている可能性があります。とくに記事コンテンツで強調したい文字に下線を引いている場合や、リンクで使われやすい青色などで太字にしている場合によく見られます。誤クリックはユーザーのストレスになり、離脱率を上げてしまいます。

ヒートマップ分析によって、適切なクリックを誘導しましょう。

デバイスによって最適化する

ヒートマップは、デバイスによって結果が異なるケースも少なくありません。パソコンとスマートフォンでは、ユーザー属性もユーザーの行動も異なるからです。

パソコンではよくクリックされているのに、スマートフォンだとあまりクリックされていないコンテンツがあれば、スマートフォンではクリックしづらい可能性があります。例えば、スマートフォンで表示するとページ遷移ボタンが小さすぎる場合などがあります。このようなときは、スマートフォン上でコンバージョンを促すボタンを固定表示にすることで改善が見込めます。

また、文字サイズや画像サイズなどに原因があるかもしれません。総合的に分析し、デバイスによって最適化しましょう。

ヒートマップ分析によってWEBサイト改善に成功している企業事例についても見てみましょう。

ネントリーズ株式会社

トラックの中古車販売事業を展開するネントリーズ株式会社は、オウンドメディア運用でヒートマップを活用することで、検索順位の上昇につなげています。

オウンドメディアでは1記事5,000文字以上の記事を公開していますが、SEOに苦戦していました。そこで、ヒートマップを活用し、よく読まれているところを分析しました。

ヒートマップを見てみると、ページ下部がよく読まれていることが発覚します。そこで、熟読部分を上部に移動するようになります。これによって当初50位近かった検索順位が2位まで上がった記事もあります。

ニーズの高いトピックスをページ上部へ移動させたり、画像や図解イラストを入れたりと、ヒートマップをもとに改善を重ねたことで、よりユーザーの理解を促し、熟読率も3%アップしています。

アヴァンス法務事務所

過払い金請求・個人再生・自己破産などの借金問題をサポートするアヴァンス法務事務所は、ヒートマップを活用してユーザーの興味関心が高いコンテンツや最後まで読まれているコンテンツを分析しています。

なかでもアクセスが多いスマートフォンの分析によって、よく拡大されている部分が浮き彫りになりました。また、よく拡大されている部分では同時に離脱も多く発生していることがわかりました。

そのためユーザーが見づらい部分を発見して画像や文字のサイズや表現を改善し、さらにファーストビューのキャッチコピー改善なども行ったことで、お問合せの完了件数や電話ボタンのタップ数が最大125.1％も改善しています。

バニラエア

ANAグループの航空会社バニラエアも、ヒートマップの活用に成功している好例です。

クリック・スクロール・ユーザー属性ごとに行動の差などをヒートマップによって分析し、UIやUXを改善する際にはABテストを実施して、効果を検証しています。

ヒートマップによって、例えば、座席指定のページでシートの種類を確認するアクションが多いことに気づきました。そこで、どんなシートなのかや、追加料金などが手間なく確認できるように改善しました。

ヒートマップの活用によって、よりよい結果につながる例が増えています。

また、ヒートマップは誰でも視覚的に理解しやすいため、会長や社長の経営層などの普段アクセス解析などに慣れていない社内の人たちから理解を得るためのツールにもなっています。