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

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

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

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

\ナイルのサイト改善提案の紹介はこちらから!/

ヒートマップとは

ヒートマップツール例

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

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

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

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

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

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

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

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

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

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

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

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

ページング

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

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

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

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

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

click

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

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

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

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

pc

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

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

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

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

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

read

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

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

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

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

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

tag

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

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

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

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

Ptengineの無料プラン

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

まとめ

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

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

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

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

\ナイルのサイト改善提案の紹介はこちらから!/

編集者情報

金子 光
金子 光(かねこ ひかる)
新卒で楽天グループ株式会社に入社。
営業管理として40人規模のチームをマネジメント。その後社員3人のベンチャー企業に入社し新規事業立ち上げを経験。
現在はナイルのマーケティング相談室編集長として、Webマーケティングに従事している。
無料相談はこちらから

監修者情報

ナイル編集部
ナイル編集部

2007年に創業し、約15年間で累計2,000社以上の会社にマーケティング支援を行う。また、会社としても様々な本を出版しており、業界へのノウハウ浸透に貢献している。(実績・事例はこちら

PIVOTにもスポンサード出演しました!

PIVOTにもスポンサード出演しました!
チャンネル登録者数が100万人を超えるYoutubeチャンネルPIVOTにスポンサード出演しました!
動画内では、マーケティング組織立ち上げのための新しい手段についてお話しています。
マーケティング組織に課題がある方はぜひご覧下さい。
動画を見る

関連記事

CM制作会社の選定ポイントとは

CMの制作会社の選定ポイントは?おすすめの制作会社6選【2021年版】

カスタマージャーニーマップの無料テンプレート7選!作り方や作成時の注意点も解説

カスタマージャーニーマップの無料テンプレート7選!作り方や作成時の注意点も解説

デジタルマーケティング

デジタルマーケティングとは?6つの手法について解説

新着記事

就活企業リサーチ行動調査

【就活における企業リサーチ行動調査】

Webマーケティング外注先の選び方ガイド!おすすめ企業や費用相場も紹介

Webマーケティング外注先の選び方ガイド!おすすめ企業や費用相場も紹介

【完全ガイド】Webマーケティングの依頼の仕方と相場・ポイントを紹介

Webマーケティングの依頼の仕方と相場・ポイントを紹介

サイト内検索

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。