ユーザー行動分析がひと目でわかる「ヒートマップ」とは？無料ツールと活用方法まとめ

広告運用以外の武器としてのサイト改善

Web 広告の担当者さんとお話しする際によく話題にあがるのが「広告運用以外の武器」についてです。

広告運用以外の武器として、タグの修正やサイト改善、広告クリエイティブの作成（画像や動画）がよく例としてあげられますが、あえて優先順位をつけるとするならば、コンバージョン率に最も影響を与えるサイト改善から着手するのがよいでしょう。

もちろん、サイト改善以外ができなくてもいいというわけではありません。

サイト改善のために活用したい「ヒートマップ」

サイト改善と言っても、そもそも改善を行うための分析が必要で、その分析方法は様々です。分析方法は主に以下の3つに分類されます。

• 「Google Analytics」「Adobe Analytics」で PV や UU などの数値を追う方法
• 「ミエルカヒートマップ」「Clicktale」など、サイトの見られている箇所やクリックされている箇所を特定する方法
• 記載するテキストやクリックボタンの色を変更し「A / B テスト」で比較検証する方法

今回は、ユーザーがサイトのどこをどのくらい見ているか・どこをクリックしているかを視覚化し、分析できるヒートマップツールについて解説し、事例をもとに活用と改善方法をまとめました。

ヒートマップとは

ヒートマップとは、コンテンツのどこがよく読まれているか（熟読率）、どこまで読まれているか（読了率）、どこがクリックされているのか（クリック）、ユーザーのマウスの動き（マウスムーブ）などのデータを色の濃淡で表現した可視化グラフです。

物体の温度を測るサーモグラフィーをイメージしてもらうとわかりやすいかもしれません。

ヒートマップのメリット

ヒートマップを使うメリットは主に3つあります。

• データ分析初心者でも理解しやすい
• 難しい説明なしで共有できる
• 一つのコンテンツ分析にかける時間を短縮できる

データ分析初心者でも理解しやすい

ヒートマップは、サーモグラフィーのようにユーザーの動きが色で分かる仕組みなので、誰が見ても「ここはよく読まれているな」「ここは読み飛ばされているな」という判断が瞬時にできます。

Google Analytics などの解析ツールのように使い方や分析方法を学ぶという工程が省けるので、すぐに取り入れやすいツールです。

難しい説明なしで共有できる

チーム内のメンバーや上司への報告、相談のときはもちろん、お客様への提案の際も誰が見ても一瞬で測定結果分かるヒートマップツールは分かりやすく、難しい説明をしなくても共有できます。

一つのコンテンツ分析にかける時間を短縮できる

サイトのコンバージョン率を上げることが最終目標だと思いますが、分析・改善方法の案出しやサイト改修など、コンバージョン率を上げるまでには色々な手順を踏まなければいけません。広告運用者は日々幅広い業務をおこなわなければいけないので分析にかける時間が取りづらいかと思います。

ヒートマップはユーザー行動を瞬時に分析できるので、一つのコンテンツにかける分析時間を短縮することができます。もちろんヒートマップだけでは見えないデータもあるので、それを理解した上で使用することが重要です。

ヒートマップのデメリット

デメリットをあげると以下の2点があげられます。

• 「なぜ」熟読されているか、クリックされているかは不明
• コンテンツ一つ一つの分析はできるが、サイト全体の動きを追うことは難しい

「なぜ」熟読されているか、クリックされているかは不明

メリットとして、熟練度が高くなくても始めやすいというお話をしました。

ただし、「なぜ」そのコンテンツが熟読されているのか、クリックされているのかまではわかりません。

ツールに関する熟練度はそこまで必要なくても、「どうしたら改善できるのか」という仮説思考や「ユーザーはどういう行動をとっているのか」というユーザー目線で考える力は必要です。

コンテンツ一つ一つの分析はできるが、サイト全体の動きを追うことは難しい

基本的にヒートマップは、コンテンツ一つ一つを分析ツールです。ページ遷移のユーザーの動きを見るのには向いていません。

コンテンツ間の動きを見たい場合であれば、 Google Analytics のようなアクセス解析ツールを使用したほうがよいでしょう。

※中にはサイト全体の動きを追える少し高価なヒートマップツール Clicktale もあります。

ヒートマップの機能

ヒートマップには主に4つの機能があります。サービスや契約内容にもよって使える機能が異なるので自社に合ったサービスを検討してみてください。

• アテンションヒートマップ
• スクロールヒートマップ
• クリックヒートマップ
• マウスムーブヒートマップ

ミエルカと SiTest が提供するヒートマップを例にあげて4つの機能の特徴を説明します。

熟読率がわかる「アテンションヒートマップ」

アテンションヒートマップでは、ユーザーが注目して読んでいる箇所を可視化できます。

ページの上部にあるのに、あまり読まれていないコンテンツがないか、ページの下部にあるのに、よく読まれているコンテンツがないかなどを見てみましょう。

もしページ下部によく読まれているコンテンツがあればページの上部に移動させることで、さらに多くのユーザーに見てもらえ、満足度の高いコンテンツになります。

逆に上部に読まれていないコンテンツがある場合、離脱や直帰につながる可能性があるので、コンテンツの差し替えや下部に移動させるなどの対応を検討しましょう。

ユーザーのスクロール率がわかる「スクロールヒートマップ」

スクロールヒートマップでは、ユーザーがページのどこまでスクロールしているかを可視化できます。

極端にスクロール率が下がっている箇所は、ユーザー行動を阻害する原因になっている可能性があるのでチェックが必要です。

実際に対象ページへアクセスし、スクロール率が下がっている箇所でのユーザーの行動はどんなものがあるかを考え、改善に努めましょう。

クリックされている箇所を把握できる「クリックヒートマップ」

クリックヒートマップでは、文字通りユーザーがクリックしている箇所を可視化できます。

ボタンやリンクがないのにクリックされているところがないか、よくクリックされているリンクはどんなもので、どんなデザインになっているのかを見ましょう。

もしボタンやリンクがないのにクリックされている箇所がある場合は、ユーザーが何を求めているのかを考え、それに応えるコンテンツにしましょう。

また、よくクリックされているリンクがわかった場合、遷移先のページをユーザーファーストの設計にするなどの対応を取ると良いでしょう。

マウスの動きがわかる「マウスムーブヒートマップ」

マウスの動きを可視化できるのが、このマウスムーブヒートマップです。

マウスの動きと視線の動きは84%～88%の相関性があると言及されており、PC ユーザーがどこに注目しているのかを知ることができます。

カーネギーメロン大学教授が2001年に発表した論文によると、マウスと視線の動きは84%～88% の相関関係にあることが言及されております。

引用元：SiTest｜マウスグラフィヒートマップで視線の動きを読み取る

クリックヒートマップとあわせて「マウスムーブはあるけどクリックはされない箇所がないか」を見つけたり、アテンションヒートマップやスクロールヒートマップとあわせて「横並びのコンテンツのうち、どこが注目度が高いのかもしくは低いのか」を確認したりしましょう。

マウスの動きが狙ったアクションと異なる場合は、どうすれば狙い通りの動きに繋がるのかを考えサイト改善につなげましょう。

ヒートマップツール比較

*計測サイト数とは、登録できるドメイン数を指します。

また、上記の情報は、各サイト内に記載している情報です。詳細は各社の窓口へお問合わせください。

選ぶ際のポイント

初期費用や有料プランの月額費はもちろんですが、以下の3つのポイントを選ぶ基準にしてみてはいかがでしょうか？

• 計測サイト数
• 上限 PV 数
• 使用したい機能

計測したいサイトが同じドメイン配下であればいいのですが、複数のドメインをもっている会社さんも多いと思います。その場合は複数のドメインを登録することができるかがポイントになってきます。

また、複数ドメインの登録が可能であっても、計測する合計 PV 数が上限に達すると計測ができなくなることがあります。なので計測サイト数と上限 PV 数はセットで確認するようにしましょう。

前述した比較表をもとに、サイト改善初心者さんに是非使ってみてほしいのが、ミエルカまたは SiTest です。

ミエルカは、無料プランがあり、期間に制限がないことや10,000PVの上限、有料プランに切り替えた場合も初期費用が無料というのがおすすめの理由です。

SiTest は、同じく無料プランがあり、その上限 PV 数が30,000と多く、有料プランでは A / Bテストや EFO（Entry Form Optimization：入力フォーム最適化）のサービスも含まれます。

費用を抑え、まずはヒートマップを試したいという方はミエルカを、EFO 等含め網羅的にサイト改善に力を入れたいという方は SiTest が良いのではないでしょうか。

ヒートマップの活用方法を事例とともに紹介

ここからは弊社のサイトをもとに事例と各機能の活用方法を紹介させていただきます。

記事の続きはこちら