ヒートマップとはなんぞや「CrazyEgg」序章

2008-08-15 Fri[Web制作]

いきなりですが、ヒートマップというものをご存じですか。

ヒートマップとは、Webページ上で多数の閲覧者の視線がどのように分布しているかや、Webページ上の各所に配置されたバナー広告やナビゲーションボタンなどのクリック率を、Webページに重ね合わせる格好で頻度や程度を色分けして示した図。Webページのレイアウトデザインやユーザビリティの検証、広告の出稿位置の検討などに用いられる。

ヒートマップ自体は一般用語であり、もともとは2次元平面で温度の高低を色の違いで表現した温度分布図を意味する。ただしネットマーケティング分野では、Webページ上での閲覧者の視線分布、または広告などのクリック率の分布をカラー表示した図を意味する場合がほとんどである。（ヒートマップとは：ITpro）

…と、文字の羅列に拒否反応(笑)のある方でも、実際どう見えるものかはChocolateさんの訪問者のクリックを視覚的にトラッキングできる『Crazy Egg』で一目瞭然と思います。クリックされたところがホワンホワンと明るくなっているのね。あるJavaScriptをHTMLソース中に埋め込むことにより、ユーザがページのどの部位をリンクしているかがわかるというものです。

余談というか、関連ですが、地域別アクセス状況ブログパーツに思うで書いていた日本地図型のユーザー分布アクセス解析。これも、ひとつのヒートマップです。

話を戻して、Webページ解析としての「ヒートマップ」。
これまで言葉としては理解していたものの、お恥ずかしながら実際それが稼働している様子を見たのは、今の会社が初めてなんです。

通常アクセス解析というと、どのページへのアクセスが多いかとか、どこのサイトからどのくらいユーザが来るのかとか、日別のページビューは、ユニークアクセスは…という数的なハナシがメインとなります。が、ユーザが１ページの中でどう動いているのかを知ること。見えないユーザを、見ずしてどれだけ把握できるか。これもサイト作りに欠かせないものだと改めて感じましたね。

で、今更ながらCREAMUさんのヒートマップでクールなアクセス解析『crazyegg』という記事を目にして、無料で5,000ビュー＆4ページ分の解析ができるというので試しに登録してみました。（無料のコースでもアカウント作成はする必要があります）

CrazyEggのURL登録画面

※写真右上の×か、写真上をクリックでclose

URLを登録する画面です。まあ、いたってシンプルなナニですが。

左下のSAVEボタンをクリックして次画面へ。運が良ければ解析用のスクリプトが表示されるので、それをページソースの中にぺったんこ。

運が良ければというのは、これをやっているとよく会社のFirefox3が落ちるのです。そしてやたら重たいです。まあ無料ですし、もしもうちょっとイイ感じでやりたいとなったら、また違うヒートマップを探しましょう。

CrazyEggの管理画面（Dashboard）

※写真右上の×か、写真上をクリックでclose

こちらはDashboardと呼ばれる管理画面。JavaScriptを埋め込んで時間が経っていないので、ほとんど数字が動いていませんけれども。新しいページの追加は「ADD NEW PAGE」から行います（すると上の登録画面）。

それぞれの項目ごとの「VIEW RESULTS」をクリックするとそのページの解析画面に移動するのですが、それはまた結果が出てからのお話と言うことで。

くり返しになりますが、ヒートマップがWeb屋にとって有効なのは、通常のアクセス解析では分からない、ページの中のユーザの動きが分かること。

せっかく設置した広告バナーがまったくクリックされていない → 場所が悪い、デザインが目立たない、あるいは目立ちすぎる、クリックしたい内容のバナーではない
クリックすると拡大するようにしている画像がクリックされていない →「クリックすると拡大する」ということがユーザに伝わっていない、そこそこ画像が大きいのでクリックしなくても用が足りる
ヒートマップが全然ヒートしていない → どこもクリックしたい内容ではない、メニューやナビゲーションが分かりにくく、次のページにも行かずに皆さん、即お帰り。（寂しいっ！）

などなど。データが溜まっていけば溜まっていくほど、作成側にとっては予測不能で興味深い結果がどんどん出てくるんですよね。広告バナーを出している企業さんやアフィリエイターなら勝負の分かれ目。そうでない、私のような個人ブログでも、ユーザビリティを考えるにはよい材料だと思います。

さて、うちのブログ二つはどんな結果を返してくれるでしょうか。

参考URL

自分へのブックマーク。

コメントの投稿はこちらから。

いただいたコメント

トラックバックはこちらから。

この記事のトラックバックURL :

☆上記のURLを、ブログ投稿画面の「トラックバック先URL(livedoor/FC2)」「トラックバックURL(excite/JUGEM/So-net/goo)」「トラックバック先のアドレス(Yahoo!)」「相手先のトラックバックURL(楽天)」「相手先のトラックバックアドレス(ココログ)」…などの入力欄にコピーして、記事を作成（投稿/保存）してください。
（既存の記事からも、トラックバックURLを入力して「更新（投稿/保存）」することで送ることができます。トラックバックの説明はトラックバックとは？（レシピブログ）などをお読みください。

※当記事へのリンクがないトラックバックは拒否される場合があります。
※ツールなどで無差別に発射されたと思われるものは削除させていただく場合があります。
※商品の広告・宣伝目的、アダルトサイト、スパムブログ等からのトラックバックは即刻削除します。