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

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

This blog is kept spam free by WP-SpamFree.

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

関連記事

no image

ファビコンその後・・・。

この記事は約 2 分で読めます。3月2日投稿した「ファビコン」の話、その後・・についてです。 実は、IEでのファビコン表示が出来ずに苦戦していたんです。 そこで・・・いろいろ試した結果。 本日、やっと …

no image

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

no image

はじめてのHTML5。

この記事は約 1 分で読めます。 そろそろいろんなところで、HTML5を見かけるようになり・・・今イチバン気になっているのがHTML5です。 これからHTML5を覚えていこうと思っているところなので、 …

no image

Google Analyticsでユーザーの「年齢・性別・興味」を知るには?

この記事は約 1 分で読めます。昨年10月に追加されたGoogle Analyticsの「ユーザー属性・インタレストカテゴリ」。 サイトに訪問したユーザーの「年齢・性別・興味」が分かるようになりました …

エックスサーバーの無料独自SSL「Let’s Encrypt」をWordPressに設定して、カンタンhttps対応

この記事は約 1 分で読めます。 2016年6月30日から、「エックスサーバー」の全プランにおいて、「Let’s Encrypt」によるドメイン認証型SSL証明書の無料発行および設定機能の …