CANVAS LAB デキるシゴトを増やすメディア
【BtoBマーケティング】ヒートマップ活用で ランディングページの最適化
2021.08.06

BtoB企業がコーポレートサイトや、商品ごとのLP(=ランディングページ)を作ることは主流になっています。では、訪問者がサイト内のどこに興味を持ち、どこをクリックし、どこを熟読、どこまで読んだのかを、確認することができるのを知っていますか?
訪問者の行動を把握し適切に改善していかなければ、特にLPのようにCV(=コンバージョン)が明確に決まったサイトで見込み客を見つけ出しビジネスの目標達成に繋げることは難しいといえます。今回はヒートマップの基礎知識とサイト改善の方法ついて解説します。
※LPとは商品やサービスの専用Webサイト※CVとは、サイトを訪問した人が、問い合わせや購入、資料請求などの行動を起こすこと
目次
ヒートマップとは

ヒートマップとは、Webサイト内で訪問者の行動を解析できるツールで、サイト訪問者の行動やマウスの動き、記事の熟読時間を、色の強弱で数値を色分けした画像のことです。
訪問者がサイト内で、どのようにページ閲覧しているかを把握しておかなければ、ページへのアクセスがあったとしても、「新規見込み客を見つけ出し、適切なメッセージを届けて育成する」という目的を成し遂げることは不可能です。
アクセス解析ツールを利用すれば、何人が訪問して、どのサイトから遷移して来て何のページを見たのかなどは解りますが、ヒートマップではどこまで見て、どのくらい注視していたのかを分析できます。訪問者の行動を可視化することは、Webサイトの改善施策の仮説立てをする際にとても効果的です。
ヒートマップで訪問者の行動を可視化

ヒートマップで可視化するとサーモグラフィーのようにグラデーションでWebサイトを画像で表示することができます。例として、クリックを解析できるヒートマップであれば、クリックされた部分ほど赤く表示され、反対に動きがあまりない部分は黒や青で表示されます。
Webサイト内での行動を、色によって可視化しデータの分析ではなく、直感的に見て理解できるのがヒートマップです。
ヒートマップは、Webサイトを分析するツールで、トップページやランディングページ、アクセス数の多いブログページなどに設置します。
ヒートマップの種類
ヒートマップには大きく4つの種類があります。
- アテンションヒートマップ
- スクロールヒートマップ
- クリックヒートマップ
- マウスムーブヒートマップ(ホバーマップ)
アテンションヒートマップ

どこを注目?
訪問者がWebサイト上でスクロールを止め、読んでいる時間を計測しています。「アテンションマップ」では、よく読まれている箇所が赤く表示され、緑色・青色と寒色になるほど熟読されていない箇所です。
スクロールヒートマップ

どこまでスクロール?どこで離脱したか?
Webサイトをどこまでスクロールして、閲覧していたかが分かります。同時に「スクロールマップ」は、何%の人がどこまで読んだのかページの離脱率も分かります。
クリックヒートマップ

どこをクリック?
クリックヒートマップでは、どこの位置をクリックしているのか可視化する機能があります。クリックされた回数が多い箇所ほど、赤色になり、クリックされた回数が少ないほど、緑色になります。
マウスムーブヒートマップ(ホバーマップ)

どうカーソルを動かした?
ホバーマップとも呼ばれるヒートマップです。クリックした部分だけでなく、スクロールや注視している部分に、マウスのカーソルを合わせ読み進めていきます。
マウスの動きを追いかけ、多数の訪問者がカーソルを合わせた箇所が、赤く表示されます。「ホバーマップ」を分析することで、Webサイト内での行動を細かく推定できます。
スマートフォンもヒートマップで可視化

BtoB企業向けの会社もスマートフォン(以下スマホ)での見え方を無視できません。ネット利用の7割はスマホからのアクセスが占める時代となりました。ヒートマップ解析もスマホ中心の行動に合わせて改善していくことが必須です。
アクセス解析ツールではスマホユーザーの行動は、パソコンユーザーと異なる動きをしているために把握は困難です。
ヒートマップの機能でスクロール・アテンション・クリック使用し、効果的な改善ができます。
ヒートマップでのLPの改善手法

ヒートマップによる分析でLP内での行動を把握し、CVを増加させるための方法や原因を、可視化した結果をもとに探します。
アテンションマップでの分析箇所
- 注目してほしいのに読まれていない箇所
- 想定外に注目を集めた箇所
ランディングページの構成はワンプレート化されていることが多く、自社サービスの魅力をファーストビューで一言で伝えるキャッチコピーが目に入ります。そして、サービスの特徴・お客様の声や料金表などの記載が続きます。
ランディングページのCV率が悪い場合、訪問者が注視しているコンテンツを特定し、ランディングページ上部に移動させたり、逆に全く注目されない箇所を特定することで、訪問者の目線で文章を読み込み改善します。改善案として、表や図を適度に増やすことや、読まれていない箇所は削除してしまうなど改善も行います。場合によっては、動画を活用するなどの対策も有効的かもしれません。
想定外に注目を集めた部分は、制作者でも気がつきにいようなニーズの発見につながります。しかし、内容が難しいため何度も読み返している可能性もあり、検証してみることが大切です。
スクロールマップでの分析箇所
- 大幅に離脱している箇所
- コンバージョンボタン付近
スクロールマップを利用することで、ファーストビューの離脱率※と、ページのどこまでの到達したかを知ることができます。※ファーストビュー:LPやWebサイトに訪れた際、最初に目に入る部分。離脱率:他のページに遷移せずに離れてしまうこと。
では、なぜ離脱しているのか?画像の読み込み速度が遅かったり、ページの内容とイメージが違うなど様々な理由で、離脱してしまいます。該当箇所まで読んだが必要な情報がないと感じても離脱してしまいます。また、離脱箇所を可視化し読まれていない箇所を洗い出しなぜ訪問者が離脱をするのかを、熟読箇所と比較し改善していきましょう。
コンバージョン地点付近にはそもそもどのくらい訪問者がいたのかを調べます。もしかしたら、ページの早い段階でコンバージョン地点を探していたかもしれません。少し上部に持っていくだけでコンバージョンが増えるケースもあります。
クリックヒートマップでの分析箇所
リンクが無いのにクリックされている箇所
クリックする意図は、「リンク先に飛びたい」か「画像を拡大したい」の主に2つ。実際にリンクを貼るか、もしくは拡大できるようにしてみましょう。
空クリックの原因は、クリック出来そうなのに何も変わらない場合、不満を感じます。何を必要なのかを突き止めリンク先を用意する必要があります。
ヒートマップに併用するツール

Google Analyticsを始めとしたアクセス解析ツールは、ページビュー数や属性など、行動を分析するツールです。さらにヒートマップを活用することで、訪問者の動きを把握することができ、改善につなげることができます。
Googleアナリティクス
Googleアナリティクスとは、Google社が提供するアクセス解析ツールです。
基本無料で使えます。PC・スマートフォン・タブレットという媒体別、顧客の属性なども確認することが可能です。管理しているWebサイトの流入状況や行動データなどを集計・分析ができるツールです。
その他、デジタルマーケティングを始めるのに役立つツール記事はこちらから↓
デジタルマーケティング 7つの手法とツール
まとめ

Webサイトを持つことが企業で主流となり、インターネットを閲覧する際のメインデバイスがスマホとなった現在では、ヒートマップツールを、サイト改善には必須であるといえます。色で表現されているため、数値よりも直感的に理解することができ、問題点も把握しやすいという大きなメリットがあります。ヒートマップを使用して訪問者の行動を正確に理解し改善することで、成果の出るWebサイトを制作しましょう。
弊社ではコンバージョンの取れるランディングページ・Webサイト制作についてのご相談も承っております。お困りの方はお気軽にご相談ください。