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

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較
今すぐ無料ダウンロード

無料で資料をダウンロード

※フォーム送信後、メールにて資料をお送りいたします。

WEB戦略に基づくサイトリニューアル成功事例集BeforeAfter比較

サイトリニューアル実例を、Before/After比較でご紹介!
 
■こんな方におすすめ
・サイトリニューアルをしようか迷っている方
・どのようなWebサイトの課題がある際に、リニューアルすればいいか分からない方
・実際に、他社がどのようなサイトリニューアルを行っているのか知りたい方
 
■資料内容
・BtoC,BtoBにおける、それぞれのリニューアル実例5種
・各実例における、Webサイトの課題とリニューアル施策内容
 
自社のサイトリニューアルをご検討の方は、ぜひご活用ください!

※フォーム送信後、メールにて資料をお送りいたします。

STEP 1


フォームでの問い合わせが
完了いたしました。
メールにて資料をお送りいたします。

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

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

ヒートマップとは

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

▲ヒートマップのイメージ図。赤色が最もユーザーに見られている箇所を表しており、反対に青色は最も見られていない箇所を表している。

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

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

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

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

<1>ページ内で熟読されているエリア
<2>ページ内で離脱されているエリア
<3>ページ内のクリックされているエリア

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

<1>ページ内の熟読されているエリア

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

  • ユーザーの興味や関心を得ている情報が何か判断できる
  • ユーザーに見てほしい情報がしっかりと見られているか確認できる
  • 意図しない箇所で読まれているを確認できる
  • ユーザーが興味のあることとWebサイトで届けたい情報のズレを確認できる

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

<2>ページ内で離脱されているエリア

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

  • どの位置までどれくらいの割合のユーザーが見ているのかが分かる
  • ページのどの辺りでユーザーが興味を失ったのかが分かる

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

<3>ページ内のクリックされているエリア

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

  • クリックして欲しいリンクに対してユーザーの反応はあるか
  • TOPへ戻るリンクなどは活用されているのか
  • ボタンリンクと勘違いされてクリックされている箇所があるか

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

ヒートマップの種類

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

<1>アテンションヒートマップ
<2>クリックヒートマップ
<3>スクロールヒートマップ
<4>マウスフローヒートマップ
<5>タッチアクションヒートマップ

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

<1>アテンションヒートマップ

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

<1>ユーザーがどのコンテンツに注目しているか
<2>読み飛ばされているコンテンツがあるか

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

(引用:BRUCE CLAY

<2>クリックヒートマップ

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

<1>クリックが多い箇所
<2>リンクがユーザーに正しく見つけられているか
<3>リンクと勘違いされているデザインがないか

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

(引用:User Insight

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

<3>スクロールヒートマップ

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

<1>ユーザーはページのどの部分で離脱しているか
<2>ページは下部まで見られているか

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

(引用:User Insight

<4>マウスフローヒートマップ

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

<1>クリック以外でのページ内の注目されている要素
<2>ユーザーの動向

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

(引用:mouseflow

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

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

<1>ユーザーが興味を持っている要素
<2>小さすぎて読みづらいテキスト、画像の有無

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

(引用:appsee

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

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

無料のヒートマップツール
・User Heat
・Microsoft Clarity
・Page Analytics

有料のヒートマップツール
・SiTest
・UserLocal
・Ptengine lnsight

ヒートマップを初めて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種類が使用できます。期間やブラウザの種類などある程度条件を細かく設定してヒートマップを表示することも可能です。さらにテキストや画像などのページ内の要素をクリックされた順にリスト化することも可能です。さらに2つのヒートマップを並べて比較できるABテストに特化した機能もあり、総じて使用できるヒートマップの種類は限定されているものの、細かな設定やある程度の分析を一気通関で行なえるヒートマップツールとなっています。

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

アテンションヒートマップ×
クリックヒートマップ

スクロールヒートマップ

 ◯

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

 ×

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

 ×

日本語対応

 ◯

カスタマーサポートの有無

 ×

Page Analytics

(引用:Page Analytics

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

アテンションヒートマップ ×
クリックヒートマップ ◯(リンクの部分のみ)

スクロールヒートマップ

  ×

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

  ×

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

  ×

日本語対応

  ×

カスタマーサポートの有無

  ×

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

SiTest

(引用:SiTest

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

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

アテンションヒートマップ×
クリックヒートマップ

スクロールヒートマップ

◯ 

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

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

日本語対応

カスタマーサポートの有無

 要問い合わせ(別料金でコンサルティングあり)

無料トライアル

有料プラン価格

 要問い合わせ

契約期間

3ヶ月〜 

User Insight

(引用:UserInsight

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

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

スクロールヒートマップ

◯ 

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

◯  

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

 ◯ 

日本語対応

 ◯ 

カスタマーサポートの有無

 ◯ (メール、チャット、専属のカスタマーサクセス)

無料トライアル

要問い合わせ

有料プラン価格

 要問い合わせ

契約期間

 6ヶ月毎

Ptengine lnsight

(引用:Ptengine lnsight

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

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

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

スクロールヒートマップ

◯ 

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

× 

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

○ 

日本語対応

◯ 

カスタマーサポートの有無

◯(チャットサポート) 

無料トライアル

◯(無制限で2週間、利用可能)

有料プラン価格

 4,980円/月〜(3,000PV〜/ドメイン無制限)

契約期間

 1ヶ月毎 又は1年毎

まとめ

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

株式会社PLAN-Bについて
SEO対策インターネット広告運用などデジタルマーケティング全般を支援しています。マーケティングパートナーとして、お客様の課題や目標に合わせた最適な施策をご提案し、「ビジネスの拡大」に貢献します。

■SEOサービスについて
SEOコンサルティング
5,200社を超える支援実績に基づき、単なるSEO会社ではなく、SEOに強いマーケティングカンパニーとして、お客様の事業貢献に向き合います。

②SEOツール「SEARCH WRITE
SEARCH WRITE」は、知識を問わず使いやすいSEOツールです。SEOで必要な分析から施策実行・成果振り返りまでが簡単に行える設計になっています。

■その他
関連するサービスとしてWebサイト制作記事制作なども承っております。

成果に直結する、オウンドメディア立ち上げサービス