それ見られてる？押されてる？ヒートマップで確かめよう

2016.08.19

レポート

こんにちは、igguです。
今回からWebデザインのヒートマップを利用したアクセス解析や効果測定のお話をします。

折角、チームメンバーとデザイナーで考え抜いて決めたレイアウトやテキスト、ボタンの見た目など「これでよい！綺麗にできてる！」とリリースしたのに、その改修自体が誰かの思い込みだった…なんてことありませんか。

もちろん様々な解析ツールを利用して検証した結果のもと改修しているとは思いますが、ヒートマップを取り入れることでその改修内容に自信が持てたり、より確証がもてることで制作メンバーの意思統一ができたりします。

今回はヒートマップを導入することで得られたメリットをお伝えし、次回からはABテストを計画する方法や実例を紹介していきたいと思います。

現場でよく起こる議論

実際にメリットをお伝えする前に、よく現場でおきている議論を紹介します。

Webページの変更や改善の際に、企画者とデザイナーでよく話し合いをしますよね。リニューアルする時とかは議論が白熱するものです。

「このボタンはもっと目立たせましょ！」

「ファーストビューに収めると押されるから！」

「広告を上に」

上記は大抵の場合PVや売上に対して効果がありそうです。ですが、レイアウトやコンテンツによっては効果が薄かったり、使い勝手のみが悪化する可能性もあったりします。

「赤くて大きく！」

「新機能だから一番良い位置に置いて！」

「メニューを小さくして広告をもっと上に」

喝ッッ！

仕方ないのです。
皆、Webサイトを良い物にするために様々な目標を持ってプロジェクトに向き合っています。しかし、主観的な意見をぶつけあうだけでは埒が明きませんし、成功する確率も一か八かになってしまいます。

現在のページがどう使われているかを視覚的に理解できれば、こんな意味のない議論もなくなるはずです。

知りたい！ユーザーがページのどこをどのように見ているのか！

ヒートマップというモノがそれを解決してくれます。ヒートマップツールはいくつかあるのですが、以下の理由によりPtengineを導入することにしました。

Ptengineを導入した理由

これは、このクリエイターズブログのトップページのヒートマップです。

ページを訪れた人がクリックした箇所に色がつき、それが集まっている場所ほど色温度が上がるようになっています。

ヒートマップの色味

まるで特殊部隊が使う熱感知ゴーグル

導入してすぐ実感できました。Ptengineは低コストなのにとても刺激的な結果を返してくれます。

http://www.nicovideo.jp/ を計測しました。

heat.top

特に押されている箇所をピックアップして個人的な解釈を添えてみました。

よく押されている箇所	解釈
左上サービスヘッダメニュー	各niconicoサービスに移動している。動画と生放送、特に生放送が強い。
左コンテンツ/サービス枠	同様に各種特化したサービス/ページに移動している。アニメが飛び抜けて強い。ここでも動画・生放送がヘッダメニューと同様に強くなっている
右上ユーザー関連メニュー	ログインやマイページなどアカウント関連へ、ランキングへのリンクもここにある。どのリンクも強くなっている。よく使うリンクを効果的に配置出来ているという事なのだろうか？
検索	検索入力欄と検索ボタンが強い、キーワード入力＞Enterキーではなくマウスを使っている証拠だ。検索の種類切り替えは生放送がよく使われている。
ニコニコニュース枠	ニュースカテゴリ切り替えがよく使われていることがよく分かる。カテゴリ名のチョイスが良いのだろうか？

よく押されている箇所	解釈
左上サービスヘッダメニュー	“動画”を押して動画トップに戻ろうとするユーザーが比較的多いようだ。
カテゴリ合算24時間総合ランキングへ	全カテゴリ合算の順位が見られるランキングへ移動するユーザーが多くみられる。 ※以前はこのリンク先が最初に表示されるランキングページだった。
「エンタメ・音楽」「生活・一般・スポ」「その他」の展開ボタン(下向き矢印)	親カテゴリに飛ぶリンクよりも、子カテゴリメニューを開くユーザーが多い事がわかった。子カテゴリをピンポイントで見たいという需要が読み取れる。
検索	ページ内で3〜4番目ぐらいに利用されているように見える。動画を見つける事が目的のランキングページで検索が利用されている事になる。
「アニメ・ゲーム・絵」大カテゴリと子カテゴリ展開ボタン	どちらもこのページで最も押されているリンクに見える。この大カテゴリのくくりを好むユーザーと、その中でもピンポイントで子カテゴリを見たいユーザーが同程度いると読み取れる。