ヒートマップとは?活用方法からおすすめのツール6選まで解説!

皆さんは「サイト改善をして」と言われたら、どのような方法を思いつくでしょうか。

サイトそのものを見て、データと格闘して、競合サイトを見て…
どれも正解で、とても大切です。

この記事で紹介するのは、上記のような改善で使用する「ヒートマップ」というツールです。
数字のデータからでは見つけにくい改善箇所を視覚的に把握できて、ちょっと違った角度から改善案を調べられます。

今回はヒートマップの活用方法からおすすめのツールまで解説いたします。

ヒートマップとは

ヒートマップは、サイトを訪問したユーザーの行動をサーモグラフィのように表し、視覚的に把握できるツールです。
ページ内のよく読まれているコンテンツや離脱が多い箇所などを色で判別できるようになっていて、直感的に改善ポイントに気づくことができます。

下の写真は弊社のサイトをヒートマップツールで見たものです。
よく読まれている箇所は濃い赤色に、あまり読まれていない箇所は青色になっています。

何を分析できるの?

ヒートマップには種類があり、それぞれ分析できる項目が異なります。

クリックヒートマップ

ユーザーがどこをクリックしたのかを計測するヒートマップです。
クリックの多い箇所の色が赤く表示されます。

下の写真は弊社のサイトをクリックヒートマップにかけたものです。
例えばこのページではグローバルナビのボタンがよくクリックされていることがわかります。

マウスホバーヒートマップ

ユーザーはクリックした時以外にも興味を持ったコンテンツにカーソルを合わせます。

マウスホバーヒートマップでは、このようなカーソルの動きを追って、より多くカーソルが置かれていた箇所を濃い赤色で示します。
またマウスリプレイといって実際のユーザーのマウスの動きを再現する機能を持つツールもあります。

※参考:弊社サイトでのユーザーのマウスの動きを表したヒートマップです。

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

ユーザーがどこに興味を持って読んでいるのかが分かるヒートマップです。
そのため「熟読エリアヒートマップ」とも呼ばれています。
よく注目されているエリアが濃い赤色、逆にあまり読まれていないエリアは青色で表されます。

スクロールヒートマップ

何%のユーザーがどこまでスクロールしているのかが分かります。
例えば下の画像で説明すると、このページに訪問したユーザの25%しか”ジオコードのSEO対策実績”にたどりついていないことがわかります。

分析項目ごとのヒートマップ活用方法

ヒートマップは先に述べたような種類があります。
では実際にどうやって改善すればいいのか、種類ごとに説明いたします。

クリックヒートマップの活用例

クリックヒートマップのポイントは下記2点です。

  • クリックしてほしいのにクリックされていない箇所
  • クリックできないのにクリックされている箇所

弊社のサイトで見てみましょう。
ここでは「メインビジュアルのボタン」(青いボタン)をクリックしてほしいこととします。

この場合、押して欲しいボタンのクリックが少なく、グローバルナビの「料金プラン」がよくクリックされていることが分かります。

この結果から…

  • 押して欲しいボタンのテキストを変更
  • 目を引くデザインに変更
  • いっそ料金ページへのリンクをメインビジュアルに

といった施策につなげることができます。

アテンションヒートマップの活用例

注目箇所が分かるこのヒートマップでは、以下がポイントです。

  • ページ上部にあるのに色が薄いコンテンツ
  • ページ下部にあるのに色が濃くなっているコンテンツ

上記が分かれば

  • 読まれていないコンテンツを大胆に削除
  • よく読まれているコンテンツを並び替える

といった施策に活用できます。
また、なぜそのコンテンツがよく読まれているのかまで深堀りすることで、ユーザの求めているコンテンツのヒントにもなります。

スクロールヒートマップの活用例

このヒートマップの活用ポイントは下記です。

  • 読んでほしいコンテンツまでユーザーがたどり着いているか
  • 離脱が多いエリアはどこか

どんなに良いコンテンツも、見てもらわないと意味がありません。
ユーザーが到達してないなら、上の方に並び替える必要があります。
また、離脱されているコンテンツについては、見やすく整えたり、順番を下げるといった対応が可能です。

ヒートマップツールの仕組み

ヒートマップはどのようにできているのか気になりますよね。
そこでクリックヒートマップの仕組みを簡単にご説明します。

①:計測ページをいくつかのエリアに分割します
②:1 のどの箇所が何回クリックされたのか計測します
③:数字を一覧にしたリストにカラーグラデーションで配色します

下記の図のようにより多くクリックされた箇所は濃い色に配色することでヒートマップが作られていきます。
実際には、各エリアの境目はもっと細かく配色も分かりやすいものになっています。

※上記画像は下記のページを参考に作成しました
【今さら聞けない】ヒートマップとは?ユーザー行動を見極める分析手法

同様にアテンションヒートマップの場合は滞在時間を計測し、ユーザーが熟読している箇所を濃い赤色で示します。

マウスホバーヒートマップはユーザーのマウスの動きを元にして、長くマウスが置かれた箇所やカーソルが動いた箇所は濃く示されます。

スクロールヒートマップはユーザーのスクロールがどこからどこまでされたのかを元に作成されています。

おすすめのヒートマップツール

Ptengine

出典: Ptengine | 世界15万ユーザー導入の顧客体験を劇的に変えるプラットフォーム

2013年にグッドデザイン賞を受賞しているヒートマップツールです。
世界15万社に導入されていて他のツールと比較しても多いのが特徴です。
また、3,000PVまでの無料プランもあり、有料版も14,800円からと比較的安価となっています。

会社名株式会社Ptmind
機能ヒートマップ機能、アクセス解析
実績世界15万社導入
料金14,800円~
トライアル期間有(3000PVまでの無料プラン)
サイトURLPtengine | 世界15万ユーザー導入の顧客体験を劇的に変えるプラットフォーム

VWO

出典: 世界2500社以上導入のA/Bテストツール「VWO」

VWOはABテスト機能とヒートマップ機能の両方を使えるツールです。
どちらのツールも導入されていない方は、1つのツールで可能ですので、検討してみてはいかがでしょうか。

有名企業にも導入されていて、無料トライアル期間もあります。

会社名株式会社assion
機能ABテスト機能、ヒートマップ機能
実績世界6000社導入
料金要問合せ
トライアル期間
サイトURL世界2500社以上導入のA/Bテストツール「VWO」

Contentsquare(Clicktale)

出典: 世界No1顧客体験分析プラットフォームContentsquare(コンテントスクエア)

2019年の経営統合により、Clicktaleは従来の機能はそのままにContentsquareとなりました。
アクセス解析やヒートマップ機能に加えて、コンテンツ単位でROIを可視化する機能やカスタマージャーニー分析機能もあり、多機能なのが特徴です。

会社名株式会社ギャプライズ
機能ヒートマップ機能、コンテンツパフォーマンス分析、カスタマージャニー分析
実績不明
料金要問合せ
トライアル期間不明
サイトURL 世界No1顧客体験分析プラットフォームContentsquare(コンテントスクエア)

ユーザーヒート

出典: 無料ヒートマップ解析ツール User Heat

月間300,000PVまで無料で使用できるヒートマップです。
熟読エリア・終了エリア・クリックエリア・マウスムーブ・離脱エリアの5種類のヒートマップ機能があります。
トライアル可能なので、まずは無料でヒートマップを試してみたい方におすすめです。

会社名株式会社ユーザーローカル
機能ヒートマップ機能
実績不明
料金月間300,000PVまで無料
トライアル期間
サイトURL無料ヒートマップ解析ツール User Heat

Sitest

出典: ヒートマップ解析・ABテスト・EFO対策ツール

ABテストツールに加えてヒートマップ機能が搭載されています。
さらにマウス動作の録画再生機能があるのが特徴です。
ユーザーの動きを録画して、どのように行動したかを確認することができます。
ヒートマップだけではなく、アクセス解析やABテストも一緒に使用したい方におすすめです。

会社名株式会社グラッドキューブ
機能ABテスト、ヒートマップ機能、アクセス解析機能、AI分析機能
実績アジアで480,000サイト導入
料金要問合せ
トライアル期間
サイトURLヒートマップ解析・ABテスト・EFO対策ツール

MIERUKA

出典: ミエルカヒートマップ

10,000PV/月までの無料トライアルがあります。
複数のプランがあり、9,800円から使用できるため、費用を押さえたい方におすすめです。
SEO&分析ツールで有名なMIERUCAの姉妹ツールですね。

会社名株式会社Faber Company
機能SEO解析機能、アクセス解析機能、ヒートマップ機能
実績姉妹ツールミエルカは世界1500社導入
料金月額9,800円~
トライアル期間有(10,000PVまで)
サイトURLミエルカヒートマップ

まとめ

ヒートマップはGoogle Analyticsのような解析ツールとは異なり、ユーザー行動を視覚的に把握することができます。
また、直感的に改善ポイントを把握しやすいため、最近web担当になったばかりという方にもおすすめです。

ヒートマップツールを実際に使用した個人的な感想としては、

  • 簡単にユーザーの動きを把握できる
  • 意外にクリックされているコンテンツなど新しい発見ができる

そのため、施策の幅が広がって便利というものでした!
また無料で試せるツールもあるので気軽に取り入れやすいのも魅力ですね。

ぜひこの記事を参考にヒートマップを活用してもらえたら嬉しいです。