ヒートマップでページの課題を把握。Ptengineの活用方法とGoogleタグマネージャを使った効率運用のコツ

※本記事は、2015年公開当時の情報を基にした記事です。

関係者が多いWebサイトですと、どうしても声が大きい人や決済権がある人の意見が通りやすくなってしまう、そんな経験をお持ちではありませんか？

しかし、ヒートマップツールを使えば、誰が見ても現状や効果が一目でわかり、共通認識を持つことができるレポートを用意できます。今回は、そんなヒートマップツールの使い方と、タグマネージャを使った効率計測のコツをご紹介します。

＼ナイルのサイト改善提案の紹介はこちらから！／

ヒートマップとは

ヒートマップとは、ユーザーの行動を可視化する分析手法です。おもには、スクロールやクリック、マウスの動きなどの座標データを取得し集計します。

集計時にその密度から、サーモグラフィのように色味に変化をつけるビジュアルから、ヒートマップと呼ばれるようになりました。

マウスなどの動きがブラウザで取得できるようになりはじめた2000年中頃から、利用が広がりました。今では上場企業の多くが導入し、利便性向上のための定番ツールとなっています。

種類は様々ありますが、代表的なツールとして下記のようなものがあります。

• Ptengine
• User Insight
• USERDIVE

低価格化がすすみ普及期へ

低価格帯の代表的ツール「Ptengine」

2010年台になりますと、スマートフォン計測などさらなるニーズの高まりから低価格化が広がります。上図のPtengineというヒートマップツールでは、無料プランからあるほどです。

とくにスマートフォンでは画面が狭いため、わずかなデザインのミスが成果に対して致命傷になりかねません。主観ではなく、データから適切にユーザーをゴールまで導きたいという声は年々高まりを見せています。

ヒートマップを使った課題発見の事例

ヒートマップツールを使うのはとても簡単です。多くのツールでは、サイトを登録しますとタグが発行され、それを計測したいページに組み込むだけです。

データ集計後は、ビジュアルを見るだけで誰でも簡単に、サイトの課題を発見することができます。

ケース1:ユーザーの利便性を損ねている

上図は、ブログのトップページや、サイト内検索結果画面でよく見ますページングのUIです。

赤くなっています部分は、非常に多くクリックされていることを意味します。上図ではユーザーの望む記事が見つけられないケースが多いと想像できます。

そして、マウスポインタに対し、クリック箇所が少々小さいように見えます。41%ものユーザーが到達しているにも関わらず使いづらいUIになってしまっているケースと言えます。

対策　ボタンデザインを大きめに取る、表示件数を多くする、などといった改善を行うことで離脱率や直帰率が改善するものと思われます。

ケース2:クリックされるはずという思い込み

こちらはあるWebサービスの決裁へ進む直前のボタンです。いくつかのボタンが表示されていますが、実際にユーザーがクリックしたのは、なんと文字のほうでした。

残念ながら「ボタンのデザインにすればクリックされる」というのは、運営者側の思い込みということがヒートマップによって露呈しました。

対策　文字にもリンクを入れる、ボタンの文言を変える（例：「購入」ではなく「購入する」といった動詞にしてみるなど）

ケース3:ファーストビューで見せすぎている

ヒートマップツールでは、画面のスクロールが止まった時間を計測し、長く止められているエリアを赤く色づけることができます。

上図はあるサイトのトップページですが、ほとんどのユーザーがスクロールしていないことがわかります。実際、滞在時間が短く直帰率もとても高い結果が出ていました。

※上図はぼかしを入れていますが、実際のツールでは本文等すべて表示されます。また、スクロールの到達率も表示されます。

対策　ページ下に続く目次などアウトラインを表示させ、まだ下がありますよといった表現にするなど。

アテンションでコンテンツチューニング

前述の機能を、ヒートマップツールではアテンションとよんでいます。ユーザーがクリックはしていないものの、画面を止めて注目している箇所がわかります。

うえの2つの画面をご覧ください。内容によって注目度がまったく異なることにお気づきいただけると思います。

Aの画面はほぼすべての内容に注目が集まっていて、精読されていることがわかります。いっぽうBでは、注目されているのはごく一部です。閲覧したユーザーが目的を果たして離脱しているのであれば良いですが、ファーストビューで「このページは違う」と思われて離脱されているとしたら機会損失です。

読ませるコンテンツを継続的に追加していくオウンドメディアなどでは、Aを目指すように運営の舵取りもできます。デザインやUIのチューニングだけでなく、内容や運営にも役立つのがヒートマップなのです。

Googleタグマネージャを使った効率計測のコツ

ヒートマップはページに組み込んで計測するツールですが、計測ページのPVによる従量課金制を採用しているツールが多いので、費用面がネックになり導入をためらわれるケースもあると思います。

LPなど改善優先度の高いページで計測したい期間のみツールを動作させるなど、柔軟性や機動力のある運用を望まれることも多いと思います。

そんなときにタグマネージャがおすすめです。タグマネージャは一旦設置してしまえば、あとは管理画面のなかだけで、タグのオンオフができるからです。

上図では、PtengineのタグをGoogleタグマネージャのカスタムHTMLに貼り付け、オンにしている様子です。計測期間が終了しましたら、トリガーの「Ｘ」マークをクリックすれば、そのタグは稼働しなくなります。エンジニアやデザイナーに発注することなく、このように簡単にタグのオンオフができる点が魅力です。

Ptengineの無料プラン

Ptengineでは無料プランが用意されていますが、”月間25,000PV（1URLのみ）”という制限がつきます。タグマネージャのトリガーで発動をコントロールすれば、無料プランでもヒートマップを十分に活用できます。

まとめ

ヒートマップは、UI改善だけでなく、デザインに対する思い込みや理解を共有するためにとても便利なツールです。使わない手はありません。

そして、タグマネージャを併用すれば柔軟な運用もできてしまいます。

Googleアナリティクスはサイト全体のページビューやコンバージョンなどの解析は得意です。いっぽう、ページ上でのユーザーの動きについては、ヒートマップの手軽さには及びません。

ヒートマップを組み合わせて、ぜひサイト（ページ）の改善に取り組んでみてください。

＼ナイルのサイト改善提案の紹介はこちらから！／