Webの記録

サイトのどこを見られているかを可視化出来る「User Heat」を試してみた♪

投稿日:

この記事は約 4 分で読めます。

「GoogleAnalytics」など様々なアクセス解析ツールがあります。

その中でとても興味深く、これからサイトを制作するのに役立ちそうな「User Heat」というツールがあったので、早速試してみました♪

無料版でも結構便利です!
WordPressでの設置も簡単でした♪

特徴

  • 登録が簡単で、無料で出来る!(有料版もあります)
  • 設置はjavascriptを貼りつけるだけ
  • マウスの軌跡、クリック場所、読まれた場所がヒートマップになっているので、分かりやすい!

(注)詳しい情報は「User Heat」で確認してください!

「User Heat」から引用

「訪問者が、Webのページのどこの段落を注目して読んでいるのか」と「どの場所がクリックされているか」を調べて、その調査結果を共有するシステムです。
 あなたのウェブサイトに設置することで、その読まれ方を、無料で調べることができます。サーモグラフィ画像としてビジュアライズ(=可視化)することができます。結果画像は、あなたのウェブサイト上にオーバーレイ表示されます。この結果は、あなたのサイトを見ている他の訪問者に対しても公開されます。

設置方法

User Heat」に登録をします。
メールアドレスと簡単な情報だけしか入力しなくて良いので楽です!

しばらくするとメールが来ます!そのメールにあるリンクからログインして、「HTMLタグ発行」画面のスクリプトをコピーします。

貼りつけ場所はサイトやブログによって違うと思いますが、私はWordpressを使っているので以下の方法でやってみました。

  1. 新しくphpファイルを作り、スクリプトを貼りつけて、アップします。
  2. 貼りつける場所はbodyの終了タグの前。以下のコードを入力します。
  3. あとは・・・ある程度データが蓄積されるまで、待ちます!
<?php include_once("1.で作ったファイルの名前.php") ?>

解析結果

解析ページの一覧

ある程度アクセスが集まらないと、計測結果が出ません。URL1つ1つに対しての判定なので、アクセスが少ないページはなかなか結果を見る事が出来ません。
「VIEW」表示が出ても、アクセスが足りずに見る事が出来ない場合もあります。

Mouse Track

マウスの動きをトレースしたものです。結構広範囲まで動いているのが分かります。
※画像をクリックするとかなり縦長い画像になりますのでご注意ください!

Click Track

クリックされている部分が分かります。リンクの部分が主にクリックされているのが分かります。(赤い部分が主にクリックされている場所です)
※画像をクリックするとかなり縦長い画像になりますのでご注意ください!

Gaze Heat Map

赤い部分が主に見られている場所です。結構スクロールしてると思うのだけれど、ソースコード部分が赤くなっていました。
※画像をクリックするとかなり縦長い画像になりますのでご注意ください!

使ってみての感想

閲覧される方が意外にスクロールして見てくださっている事に気づかされます。やはり、コンテンツ部分に集中して見られているのが分かります。コンテンツの重要さを実感します!

これからサイトを作っていくのに、かなり参考になるデータだと思います。これを活かしていきたいです!

WordPressにプラグインがあった

今回、私は「User Heat」サイトを登録して利用したのですが、Wordpressにも似たようなプラグインがあるようです。
私はこのプラグインを利用していませんが、面白そうだったので紹介したいと思います。

-Webの記録
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

カラーミーショップ無料テンプレート「Bit」のフリーページ表示順を変えてみた

この記事は約 1 分で読めます。 比較的安価でネットショップ初心者でも始められる「カラーミーショップ」。 スマホからのアクセスにも対応できる、シンプルなレスポンシブデザインの無料テンプレート「Bit」 …

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

Google Mapの吹き出しを消してみた

この記事は約 1 分で読めます。 Google Mapをサイトに表示させる方法は、たくさんあると思います。 単純にGoogleMapを開いて、「ウェブサイトへの地図埋め込み用 HTMLコード」をそのま …

no image

WordPress 簡単にスライダーを投稿内に追加出来るプラグイン「SlideDeck」

この記事は約 1 分で読めます。 WordPressには、とても素敵なスライダープラグインがあります。まだ試せていないものもたくさんあるので、少しずつ試していく予定です。 今回は、投稿する記事の中にス …

WordPressのウィジェットに表示した「タグクラウド」をカスタマイズしてみる

この記事は約 2 分で読めます。 WordPressのタグクラウドを表示させる方法として、「ウィジェットに表示させる方法」と、「オリジナルのsidebar.phpにテンプレートタグを記述させる方法」と …