Webの最新トピックを配信中!

ヒートマップを活用しサイト設計の問題点を導き出そう

ヒートマップを見ることで、ユーザーがWebサイトのどこに注目しているかや、どこで離脱しているかをひと目でチェックできます。

Webデザイナーもヒートマップをチェックし、サイト設計の問題点を見つけ、レイアウトやバナーの改善ができると、成果を上げられるWebデザイナーとして活躍が期待できます。

ここでは、有名なヒートマップツール『Ptengine(ピーティーエンジン)』を紹介します。Ptengineは25000pv以下で1ページだけなら無料で使うことができます。


こちらは僕が運営する『オモシロ英会話』というWebサイトを、Ptengineの「アテンション」で見ている画面です。

赤色や緑色の部分がユーザーがよく見ている部分になります、…ちょっと残念ですがトップページのアクセス数が少なく調査に必要な数を満たしていないせいか、赤い部分が無いですね…。サイト上部のロゴと広告の部分については、青色でほぼ見られていないことがわかります。


スクロール到達率(ユーザーがどこまでスクロールしたか)もわかります。57%のユーザーがそこまで見たということは、単純にほぼ半分のユーザーがトッページでちょっとスクロールしたら離脱していることになりますね…。ちょっと改善が必要ですね、このサイト。自分のサイトなんですけど…。

こんなふうに、ヒートマップツールを見ると、「ファーストビューにもっと目を引く要素を持ってこよう」とか「ページの下の方だけどユーザーがしっかり注目している部分があるから、その部分はもっと見やすい上の方に移動しよう」などの改善策が導き出せます。ヒューリスティック(人の経験や感覚によった主観的判断)ではなく、解析結果を元にした客観的な判断ができる点が、ヒートマップの良さです。

Ptengineでは他にも、ユーザーがどこをクリックしているかもチェックできます。


ヒートマップだけではなく、GA(Googleアナリティクス)と同じようなアクセス解析機能もあります。GAよりも軽快に動き、見やすいですね。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

質問や感想などお気軽にどうぞ!

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

  • 管理人(ねこポン)について

    ぬるま湯でぬくぬくと週3日だけ働く30代半ばウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ