ヒートマップとは？　効果的な活用法と直感的に使えるツールも紹介！

「LPからの成約率が低い」や「オウンドメディアに流入はするがCVにつながらない」など、SEOや広告から流入が発生しているにもかかわらず何らかの原因でその先の成果につながっていない、ということはないでしょうか。そんな時に活用したいのがヒートマップです。ヒートマップはページ上のユーザーの動き、興味関心の移り変わりを色のグラデーションで視覚化してくれるものです。このヒートマップを上手に活用することで「なぜユーザーが離れてしまうのか」や「なぜCVにつながらないのか」などの理由を紐解くことができます。

本稿では、そもそもヒートマップとはどういったものなのか、種類や活用法方法、オススメのヒートマップツールまでを紹介しています。ぜひご一読いただいてヒートマップへの理解を深め、Webサイトの改善に活用してください。

ヒートマップとは

前提として本稿では、LPやオウンドメディアの記事ページなどを改善するために用いるヒートマップに絞って解説します。ページ分析用のヒートマップとは、ユーザーの様々な行動に基づいた2次元データを色の濃淡をつけることで視覚化して、分かりやすく表現したものです。ユーザーのマウスの動きを追跡することで、ページ内のよく見られている箇所やクリックされている箇所、離脱されている箇所などを可視化できます。ヒートマップは「ヒートマップツール」と呼ばれるアクセス解析ツールを用いてデータを収集し生成されます。

また、Webサイト分析に使用するもの以外にも、数多くのヒートマップが存在しています。そもそもヒートマップとは、アメリカの起業家であるコーマック・キニーが自社で取り扱う金融商品の取引やシステムの管理を迅速に行うために開発した技術です。その理念自体は19世紀から既にありましたが、キニーが「ヒートマップ」として商標登録を行ったことで多くの研究論文など引用され、身近なサービスなどでも広く活用されるようになりました。

例えば、天気予報の降雨量やサーモグラフィー、タクシー需要予測サービスなどにもヒートマップの技術が取り入れられています。このようにページの分析以外にも幅広い分野やサービスでヒートマップは活用されています。 

ヒートマップツールで分かること&活用方法

Webサイトにヒートマップツールを導入することで、そのページを訪れたユーザーの様々な行動が視覚化できるようになります。ツールによって機能は多少異なりますが、主に以下の3つの観点に基づいたエリアを知ることができます。

ヒートマップでは上記の箇所が色の濃淡で表示されます。これによりページのどの部分がユーザーに多く見られているのか、どの辺りで離脱しているのかなどを知ることができます。これらのデータを活用すれば、ページ内で改善すべきポイントがどこなのかを一目で判断することが可能になります。ではこれら3つの情報をどのように改善に活用するのでしょうか。下記で詳しく解説していきます。

＜１＞ページ内の熟読されているエリア

ページ内でユーザーに多く読まれているエリアを判断できます。マウスやスマホのスクロールによるページ内での動きを元に、同じ箇所にどれくらいの時間停止していたかを算出します。ユーザーがよく見ている箇所を赤、あまり見ていない箇所を青や灰色といった具合に色分けしてくれます。この情報を基に以下のようなことが分かります。

ヒートマップによる熟読エリアの解析は、ページのレイアウトの調整やコンテンツのリライトやCTAの設置箇所など、さまざまなページ改善の検討材料になります。例えば、ユーザーから注目を集めている箇所が特定できた場合、その要因を解析することで他ページの改善に活用できる場合があります。また、注目を集めているコンテンツの近くにCTAを設置することでCVの可能性を少しでも高くする、などを行なえます。

＜２＞ページ内で離脱されているエリア

「スクロールヒートマップ」を活用することで、ユーザーがどの位置で多く離脱しているのか知ることが可能です。同時に「どのエリアまでスクロールされたのか」も分かるため、この機能を活用すると以下の情報を得ることができます。

離脱位置を把握することで、コンテンツの配置や訴求内容、Webサイトのデザインの見直しなどに活用できます。LPなどでは特にこの離脱位置の把握がCVRの改善に大きく役立つことがあります。例えば、離脱エリアよりも下部にあるCTAを離脱エリアよりも上部に移動させることでCTAを見てもらえる確率を上げたり、離脱ポイントとなっているエリアのテキストや画像をより分かりやすい内容に変更して離脱されずらくする、などが挙げられます。

＜３＞ページ内のクリックされているエリア

ページ内でクリックまたはタップされている箇所を可視化させることもできます。一般的なアクセス解析でも、リンク先のクリック数やクリック率などを計測することは可能です。しかしヒートマップツールを使うと「本来クリックを想定していない箇所がクリックされている」といった、より鮮明なユーザーの行動が分かります。

ページ内のクリックされた箇所が分かれば、WebサイトやLPが狙い通り機能しているかを知ることができます。誤クリックやタップが多く発生している箇所も分かるので、その理由を分析することでリンクのクリック率向上や機会損失を防ぐための改善につなげられます。

ヒートマップの種類

ヒートマップと一言で言っても、実は様々な種類があります。それぞれ分析できる内容がことなるため、目的ごとに使い分ける必要があります。主にLPやページの分析で活用されるヒートマップは以下の５種類です。

以下でそれぞれ詳しく解説していきます。

＜１＞アテンションヒートマップ

アテンションヒートマップは、「ページ内でのエリア別のユーザーの滞在時間」を視覚化します。ページをエリアごとに色分けして、滞在時間が長いほど色が赤く、短いほど青く表示されます。これにより以下の2点が確認できます。

「滞在時間が長い＝ユーザーがそのエリアの要素に興味を持っている」と考えることができ、ページの改善に活用できます。例えば、通常ではユーザーの滞在時間が短くなりがちなページ中盤以降のエリアにも関わらずアテンションヒートマップが赤くなっていた場合、そのエリアにある要素（テキストや画像）がユーザーの興味を強く引いた、と考えることができます。そこからユーザーの興味を引いた要素を因数分解して他のページに落としこむことができます。ただし、「読みづらい」「意味が分かりにくい」といったネガティブな理由で滞在時間が長くなっている場合もあるので注意が必要です。

（引用：BRUCE CLAY）

＜２＞クリックヒートマップ

クリックヒートマップは、ユーザーがクリックした箇所を色で示してくれます。多くのユーザーにクリックされている箇所は赤く表示され、クリック率が低い箇所は緑色や青色で表示されます。クリックヒートマップから分かるユーザーの情報は以下のとおりです。

クリックヒートマップは「ページやLPがユーザーにとって使いやすいデザイン、レイアウトになっているのか」を確認するのに適しています。問い合わせや商品購入につながるCTAが分かりづらいデザインになっていないか、反対にCTAと誤認されてしまうようなデザインが配置されていないか等を調べることができ、機会損失を減らすための改善などに活用できます。

（引用：User Insight）

CTAとはそもそも何か？　という疑問についてはこちらの記事でお答えしています。併せてご覧ください。

CTAとは？基本解説と外せない11のポイント【事例あり】

CTAとは「行動喚起」と訳され、購入や登録のようなユーザーの行動を促すことを指します。CTAの成果は、メディアのCVR(転換率)を大きく左右します。本記事では、「そもそもCTAとは何なのか」から、CTAの成果を高める具体…

＜３＞スクロールヒートマップ

スクロールヒートマップは、ユーザーがページをどこまでスクロールしてどこまでページを見たのかを視覚化します。色とパーセンテージで表示され、ページに訪れたユーザーの何%がどの位置までスクロールして読み進んだのかを知ることができます。傾向としてページの上部が最も色が濃くなり（＝最も見られている）、下部に下がっていくほど色が薄くなります（＝離脱されている）。これらの情報から以下のことが分かります。

よく離脱されている箇所を特定することは、より効果的なページやLPの改善につながります。例えば、離脱部分の前後のコンテンツを魅力的な内容に変更して離脱されないようにする、といったアクションも取ることができます。また、そもそもあまり見られていないページ下部の内容を変更するよりも、まずはよく見られているファースビュー部分から改善していこう、といった意思決定の参考にもなります。

（引用：User Insight）

＜４＞マウスフローヒートマップ

マウスフローヒートマップは、ユーザーのマウスの動きを可視化します。マウスの動きと視線の動きには関連性があると言われており、このことからマウスの動きは擬似的に視線の動きを表していると言うことができます。つまり、マウスフローヒートマップを使うことで「ユーザーの注目度の高いテキスト・画像」を確認することができます。この情報から以下のことが分かります。

注目度の高いテキスト・画像が分かるので、ABテスト等に活用することができます。例えば、複数のバナーをページ内の近い場所に配置し、どのバナーが一番ユーザーの関心を集めているのかを確認する、といった使い方が挙げられます。また、ユーザーがどのような視線の流れを経てCTAをクリックしたのか（＝ユーザーの動向）が分かるため、ページのレイアウトの改善にも活用できます。ただし注意していただきたいのが、マウスフローヒートマップは「マウスを使うPCのユーザー動向しか分からない」という点です。スマホでのユーザー動向の確認には、下記で紹介している「タッチアクションヒートマップ」を活用しましょう。

（引用：mouseflow）

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

タッチアクションヒートマップは、スマホ・タブレット専用のヒートマップです。スマホやタブレットで行なわれるタップやスワイプ、拡大・縮小の動きなどがどこで発生しているのかを視覚化します。これらの情報から分かることは以下のとおりです。

タッチアクションヒートマップで特に注目すべき点は、タップと拡大の操作です。ユーザーがスマホからページを閲覧している時、もっと詳細を見たいと思ったテキストや画像をタップしたり拡大したりする傾向があるからです。これにより、ユーザーの興味を持っている要素を知ることができます。しかし反対に、タップや拡大がよく発生しているテキストや画像はユーザーにとって見づらくなっている、というケースも考えられます。そのためタッチアクションヒートマップにおいてタップや拡大が発生している箇所は、ポジティブとネガティブの2つの観点から改善を検討する必要があると言えるでしょう。

（引用：appsee）

オススメのヒートマップツール

ヒートマップを確認するためには、専用のヒートマップツールの導入が必要です。数多くあるヒートマップツールの中から、無料と有料のツールやサービスをそれぞれ3つ紹介します。

ヒートマップを初めてWebサイトに導入する場合、まずは無料ツールからお試しで始めることをオススメします。ここまで紹介してきた通りヒートマップにも様々な種類があり、その用途も異なります。自社のWebサイトに最適なヒートマップを見極める意味で、まずは無料のヒートマップツールから始めるべきでしょう。

ただし無料のヒートマップツールはコストがかからない一方、導入時や運用の際のサポートはありません。また有料版と比較して機能が少なかったり、機能をフルで使うには条件があったりもするので注意が必要です。まずは無料版から始めて、今の機能だと物足りないと感じた時に有料版を検討するようにしましょう。

無料のヒートマップツール

User Heat

（引用：User Heat）

User Heatは株式会社User Localが提供する完全無料のヒートマップツールです。今回紹介する無料のヒートマップツールの中では利用できるヒートマップの種類が多いのが特徴です。さらに同じく無料版では唯一、PCとスマホの両方に対応しています。無料で主要なヒートマップをPC・スマホ問わずに使うことができるため、試験的にヒートマップを導入したい、という時にオススメのツールです。

ただし注意点もいくつかあります。登録できるURL数は無制限ですが、1つのWebサイトあたり月間30万PVまでと制限があり、それを超過すると計測がストップします。また、ヒートマップを表示できるページの幅と長さに制限があり、長すぎるページの場合はヒートマップが途切れる場合があります。

Microsoft Clarity

（引用：Microsoft Clarity）

Microsoft ClarityはMicrosoft社が提供している無料のWebサイト分析ツールです。ヒートマップ機能も備えており、どこで離脱したか、どこがクリックされたか（スクロールヒートマップとクリックヒートマップ）の２種類が使用できます。期間やブラウザの種類などある程度条件を細かく設定してヒートマップを表示することも可能です。さらにテキストや画像などのページ内の要素をクリックされた順にリスト化することも可能です。さらに2つのヒートマップを並べて比較できるABテストに特化した機能もあり、総じて使用できるヒートマップの種類は限定されているものの、細かな設定やある程度の分析を一気通関で行なえるヒートマップツールとなっています。

ただし他の無料ヒートマップツールと同じくヒートマップを表示できる範囲には限りがあります。

Page Analytics

（引用：Page Analytics）

Page AnalyticsはGoogleが提供する完全無料のヒートマップツールです。GoogleChromの拡張機能となっており、Googleアナリティクスに設定されているWebサイトのヒートマップを見ることができます。ヒートマップの機能としては、主にリンクのクリック率のみを確認することができます。Page Analyticsは本来は各ページのPV数や滞在時間を見るためのツールであるため、ヒートマップはメインの機能ではありません。本当に最低限の機能から試してみたい、という時にオススメのヒートマップツールです。

有料のヒートマップツール

SiTest

（引用：SiTest）

Sitestは株式会社グラッドキューブが提供するヒートマップツールです。最大の特徴としてはヒートマップ機能以外にもアクセス解析やABテスト、EFO（エントリフォーム最適化）といった機能も搭載されている点です。これにより、ヒートマップの確認だけでなく、ヒートマップの結果を踏まえたLPやページの改善までを1つのツールで完結して行なうことができます。

また、有料ではありますがSitestのデータを元にコンサルティングを提供してくれるサービスも用意されています。ツール導入初期はヒートマップから得たデータを具体的な改善施策に結びつけることが難しいため、コンサルティングの導入も十分検討の余地があります。

User Insight

（引用：UserInsight）

User Insightは株式会社ユーザーローカルが提供しているヒートマップツールです。国内1,000社以上で導入されており、大手企業の導入実績も豊富です。本稿で紹介したヒートマップ機能は全て取り揃えており、さらにユーザー属性や使用デバイスなどの詳細な絞り込み機能も備えており、他ツールと比較してヒートマップからより精度の高い情報を入手できます。その分操作が少し複雑ですが、導入から運用までをサポートしてくれるカスタマーサクセスがあり、定期的に機能の使い方の勉強会も開催してくれます。

Ptengine lnsight

（引用：Ptengine lnsight）

Ptengine Insightは株式会社Ptmindが提供するヒートマップツールです。ただヒートマップツールというよりは高機能なヒートマップ機能を有したアクセス解析ツールという方が正確であり、ヒートマップ分析とアクセス解析を高いレベルで同時に行えるのが大きな特徴です。

各種ヒートマップ機能も備えた、高機能なアクセス解析ツールです。必要なヒートマップ分析とアクセス解析を同時に行えるのが大きな特徴。ヒートマップケーススタディ機能により、ヒートマップの結果がどのような状況なのか初心者にもわかりやすいよう解説してくれます。また異なる条件（セグメント）のヒートマップを並べて比較分析なども可能です。

まとめ

ヒートマップはユーザーの行動を可視化することができ、上手くLPやWebサイトの改善に活用できれば、ユーザーの利便性を飛躍的に高めることができます。ユーザーの利便性や満足度を高めることは結果的にSEOにも良い影響を与えてくれます。初心者でも直感的に使えるヒートマップツールも多数ありますので、まずは無料プランなどから試してみてはいかがでしょうか。