転換率アップのための秘密兵器！ヒートマップツールを使いこなそう

デジタルマーケティング

2020.07.30

「Webサイトを立ち上げてみたが、なかなか転換率が上がらない…」この記事をお読みの方の中にも、そんな悩みをお持ちの方が少なからずいらっしゃるのではないでしょうか。この記事では、転換率アップのための強い味方である「ヒートマップツール」をご紹介します。

そもそもヒートマップツールとは

「ヒートマップ」は、2次元の行列データの個々の値を色の違いや濃淡で表現したグラフです。人口密度の違いを地図上に表したり、地域ごとの需要の状況を可視化したりと広い分野で用いられていますが、Webマーケティングの世界では、主にWebページ上におけるユーザの行動を可視化するためにヒートマップを使います。

ヒートマップは通常、「ヒートマップツール」と呼ばれる専用のソフトウェアを用いて作成します。ヒートマップツールの原理は、大きく以下の2つに分類することができます。

マウスの動きをもとに作成する

Webページを訪問したユーザのマウスの動きをトラッキングしてヒートマップ化します。

【ヒートマップ活用例：サイトクリック箇所の表示】

この図で青が強くなっている部分は、ユーザーが特にクリックしやすいことが分かります。記事の順番によるクリック率や、バナーへの遷移がどの程度か、などを確認することができます。

視線の動きをもとに作成する

アイトラッカーと呼ばれる専用のデバイスを使用して、Webページを訪問したユーザの視線の動きをトラッキングしてヒートマップ化します。

１の方式は実際のユーザの視線をトラッキングできるため、視線の動きを正確に捕捉することができますが、専用のデバイスが必要となるため、やや導入のハードルは高いといえます。より一般的に用いられているのは１のマウスを使う方式です。

ヒートマップツールで何ができるのか？

ヒートマップを用いると、以下のような情報を可視化することができます。

Webサイトを訪問したユーザの視線やマウスの動きクリックされた箇所
Webページのどこまでスクロールされたか
Webページのどのあたりでユーザが離脱したか

これらの情報を可視化して把握することで、WebサイトのUI設計や導線設計の改善に役立てることが可能です。たとえば、ユーザにぜひとも見てもらいたいコンテンツへの導線がユーザの視線が届かない場所に設置されていては、狙ったような効果を上げることはできません。また、離脱が多発している個所について分析することで離脱の原因を探り、離脱率を下げる工夫を講じることもできるでしょう。

Webサイトの改善は1.測定→2.仮説→3.施策の実施→4.検証のPDCAを回して進めていきますが、ヒートマップは1.の測定を手助けするツールだといえます。

ヒートマップの種類

ヒートマップには、分析の目的に応じていくつかの種類があります。ツールによって作成できるヒートマップには違いがありますが、以下では主な種類を紹介します。

熟読エリア

熟読エリアは、ユーザの視線（マウス）がある個所に留まった長さをもとにヒートマップを描いたものです。色分けはツールにより若干異なりますが、通常はユーザが注目していた個所を赤、あまり注目されていなかった部分を青として、赤から青へのグラデーションのような形で表示されます。

熟読エリア分析の結果をもとに、ユーザに特にみてもらいたいコンテンツを注目度の高いエリアに配置するなどの改善を行うことができます。

クリックエリア

クリックエリアは、ユーザがマウスでクリックした個所をヒートマップと化したものです。ユーザが多くクリックしたポイントを赤、クリックの少ない個所を青としたグラデーションで表示されます。

クリックエリア分析の結果をもとに、クリックされやすいところにCTA（Call to Action：行動を促すボタンやリンクなど）を設置する、クリックされていない場所に置かれた不要なリンクは削除する、といった改善を行うことができます。

終了エリア

終了エリアは、ユーザが当該ページから離脱したポイントを可視化するヒートマップです。ユーザが多く離脱したポイントを赤、離脱数の少ないポイントを青とするグラデーションで表示されます。

終了エリア分析の結果からは、ユーザがWebページをどこまで閲覧してくれているのかを把握することができます。特に重要なコンテンツは離脱ポイントよりも上に設置する、離脱の多い個所にはユーザの気を引く仕掛け（画像や動画、リンクなど）を設置するといった改善を行うことができます。

ヒートマップが示すWebサイトの姿

ヒートマップはWebページによって様々な形を示しますが、ノーマン・ニールセングループの研究の結果、PC版のWebサイトにおけるユーザの視線の動き（マウスの動き）は下図のようなF字型を示す場合が多いことがわかっています。これを「F字パターン」と呼びます。

【図1：ヒートマップのF字パターン】

上記より、主に次のようなことがわかります。

ページの冒頭は同じページの後続の行よりも注目されやすい傾向がある
各行の左端にある単語は、同じ行の後続の単語よりもユーザの目に触れやすい

このような傾向を知っておくだけでも、WebサイトのUI設計を行う上での有力なヒントとなります。

なお、上記のF字パターンの他にも、ケーキの層のように水平方向に視線が移動する「レイヤー・ケーキ・パターン」、コンテンツの大きな塊だけを飛び石状にスキップする形で視線が動く「スポット・パターン」など、いくつかのパターンが報告されています。

また、スマホやタブレットなどの端末用に特化したWebページでは、ヒートマップが示す形はPC版と異なります。本記事ではスマホのヒートマップに関する詳細は割愛しますが、「PC版とスマホ版ではユーザの視線の動き方が異なる」という点については、ぜひ頭の片隅に入れておいてください。

ヒートマップツールの活用方法（上級編）

続いて、ヒートマップツールの一歩進んだ活用法について触れておきましょう。

ヒートマップはそれ単体でも有力なツールとなりますが、A/Bテストと組み合わせることで、施策の効果を高めることが可能です。具体的には、ヒートマップによる分析結果をもとに仮説を立て、仮説に沿って施策を実施した上で、その結果をA/Bテストの技法で比較検証します。

たとえば、「終了エリア分析」を行った結果、Webページのとあるポイントで離脱が多く発生していることが明らかになったとします。この場合、離脱しているポイントにユーザの気を引く仕掛けを設置することで離脱を抑止できる可能性がありますが、問題はどのような仕掛けが効果的であるかという点です。

そこで、「動画」「キャッチコピー」「キャンペーンページへのリンクバナー」など、離脱ポイントに設置する仕掛けをいくつか試作してA/Bテストにかけてみます。その結果を受けてもっとも効果が高かったものを正式に採用してやることで、より効果的かつ効率的な改善を行うことができます。

【図2：ヒートマップとA/Bテストの併用】

ヒートマップを活用して「ユーザにやさしい」Webサイトを構築しよう

この記事では、ヒートマップの概要およびヒートマップ分析の活用方法をご紹介しました。

マーケティングを推進する上でもっとも大切なのはユーザを理解することです。Webマーケティングでもそれは同様で、ユーザの行動ただしく理解することがWebサイト改善への最短距離となります。

ぜひ、貴社のWeb施策の一環としてヒートマップを取り入れ、ユーザにやさしいWebサイトの構築に取り組んでみてください。

関連記事｜なぜUXが重要なのか？―WebサイトのUXを改善するための5つの施策

Innovaブログ