
@JUNP_Nです。多くの人がアクセス解析に利用している「Google Analytics」ですが、Google Analyticsだけではわかりにくいことがヒートマップを利用することでわかります。「サイトのどのページが見られているのか」等だけではなく、「ユーザーがどこに注目していたのか」のようなことがヒートマップを使うことで明らかになります。
サイト解析はGoogle Analytics、ページ解析はヒートマップ
Google Analyticsは「どのページが読まれている」「サイト内をどう巡回している」などサイトの状況を解析してくれるサービス。ヒートマップは「ページのどこをクリックした」「ページをどこまでスクロールした」などページを解析してくれるサービスです。

ヒートマップを活用したサイト改善のわかりやすい事例として、Yahoo!ニュース(スマホブラウザ版)がヒートマップを活用してA/Bテストを行いの「見出しの行間を5ピクセル拡大した」という記事がありました。
個人のサイトではここまでのテストを行うことは難しいかもしれませんが、最近では「はてなブログ」でヒートマップを利用できるアクセス解析ツール「Ptengine」の特別無料プランで利用することができるようになるなど、ヒートマップも一般的になってきました。
そこで、せっかく手軽に使えるようになったヒートマップでサイト改善をする際に何を見たら良いのか、超基本的なことをまとめてみました。
ヒートマップ解析を利用してサイト改善する際のポイント
ヒートマップを使ったサイト改善で超基本的なことは以下の5つ。他にもあると思いますが、最低限これくらいはヒートマップで見ておきたいポイントです。
- ページがどこまでスクロールされているかチェック
- ユーザーが最も注目した場所はどこかチェック
- ユーザーが無駄なクリックをしていないか、ボタンやリンクがクリックされているかチェック
- PCユーザーとスマートフォンユーザーがサイト内でどう動くのかチェック
- 流入元からユーザーの行動をチェック
今回は「Ptengine」のヒートマップを利用して男子ハックを検証してみます。
ページがどこまでスクロールされているかチェック
ちゃんとページの下まで読まれているのかということはヒートマップで簡単に確認できます。

男子ハックでは記事の最下部まで読んでくれている人が50%だそうです。ページ毎に検証することができるので、色々なページをチェックしてみる必要がありそう。
記事によって最後まで読まれている、読まれていないページがわかりそうです。
ユーザーが最も注目した場所はどこかチェック
リンクやバナーなど、ユーザーがどこをクリックしているのかもヒートマップで視覚的に確認することができます。

意外にもページ上部にある「本日の人気記事」のトップがクリックされています。

また、記事下にある「関連する記事」もトップが多くクリックされているようです。
ユーザーが無駄なクリックをしていないか、ボタンやリンクがクリックされているかチェック
リンクなどもないのにユーザーがクリックしてしまっている場所や、クリックして欲しくておいたボタンなどが意図通りクリックされているかチェックします。

アイキャッチ画像はリンクになっていないのに、ここが思った以上にクリックされています。これは全く無駄なクリックです。
PCユーザーとスマートフォンユーザーがサイト内でどう動くのかチェック
当然ですが「Ptengine」のヒートマップはスマートフォンだけでなく、PCブラウザも表示できます。

スマートフォンでは表示されていない要素があったり、PCとスマートフォンではユーザーの動きがだいぶ違いますね。

思った以上にサイドバーの人気記事ランキングはクリックされていませんね。
流入元からユーザーの行動をチェック
「Ptengine」では、ワンクリックで「はてなブックマーク」「Twitter」「Facebook」などユーザーの流入元別にヒートマップを確認することができます。

先ほど無駄クリックが多かった「アイキャッチ画像」ですが、はてなブックマークから流入したユーザーは全くクリックしていませんでした。

流入元の設定は自分で追加することも可能です。流入元からユーザーの傾向を分析するのも面白いですね。
手軽にヒートマップを使ってみたいなら「Ptengine」がオススメ

今回利用した「Ptengine」はグッドデザイン賞も受賞した見やすいデザインなのでオススメです。
無料プランでは月間2.5万PVまで利用可能。Kloutスコアが50以上だと月間200万PVまで利用可能な「インフルエンサー限定無料特別プラン」が利用可能。ブログ運営していててTwitterなどSNSをフル活用している人は意外と対象になっている人も多いはず。
是非お試しください!