![ヒートマップとは?使い方や分析方法まで詳しく解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/9f194d8e7bb5488bbc691b21d44d9e12/Group%20474.png?w=1200&fm=webp)
マーケティング
更新日: 2023/12/20
ヒートマップとは?使い方や分析方法まで詳しく解説!
![character_balloon](/media/character/pink_normal_left.png)
ブルーちゃん、ちょっと教えてくれない?
どうしたの?
![character_balloon](/media/character/blue_normal_right.png)
![character_balloon](/media/character/pink_normal_left.png)
ヒートマップを導入しましょうって言われたんだけど、何のことかわからなくて…
あぁ、ヒートマップね
![character_balloon](/media/character/blue_normal_right.png)
じゃあヒートマップについて紹介するね
![character_balloon](/media/character/blue_normal_right.png)
使い方も一緒に説明するね
![character_balloon](/media/character/blue_normal_right.png)
ヒートマップとは
![ヒートマップとは?使い方や分析方法まで詳しく解説!の画像_2枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/faf297bdfc2343d3905ace9f84b436e9/%E3%83%92%E3%83%BC%E3%83%88.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップとは、Webサイト上のユーザーの動きを色の濃淡で教えてくれるグラフのことだよ
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップはユーザーのページ滞在時間やマウスの動きを可視化してくれるんだ
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップを使うことで、ユーザーはどこに着目しているのか、サイト側の意図がユーザーにちゃんと伝わっているかを知ることができるんだ
![character_balloon](/media/character/blue_normal_left.png)
そこからユーザー視点を分析し、Webサイトの改善を図っていくんだよ
![character_balloon](/media/character/blue_normal_left.png)
よくあるアクセス解析ツールだと、ユーザー数や個々のページの閲覧人数などがわかるけれど、その個々のコンテンツの分析はしにくいよね
![character_balloon](/media/character/blue_normal_left.png)
そこを解消してくれるのがヒートマップだよ
ヒートマップの機能は?詳しく紹介!
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップは主に3つの観点からみることができるようになるよ
1.熟読エリア
2.終了エリア
3.クリックエリア
こんなにあるのね!
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
1つずつ説明していくね
機能1.熟読エリア
![ヒートマップとは?使い方や分析方法まで詳しく解説!の画像_6枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/d7af2d44976a49fda9819247d098e90a/%E3%83%92%E3%83%BC%E3%83%882.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
まず熟読エリアを可視化してくれるよ
![character_balloon](/media/character/blue_normal_left.png)
熟読エリアとは、ユーザーがどこをよく見ているのか、どこをよく読んでいるのかを教えてくれるよ
![character_balloon](/media/character/blue_normal_left.png)
赤いところはとてもよく読まれている証拠
![character_balloon](/media/character/blue_normal_left.png)
逆に色がどんどん薄くなり黄色や寒色の緑、青色のところはあまり読まれていない所だね
![character_balloon](/media/character/blue_normal_left.png)
例えばこのサイトだと、会社のコンセプトのところは赤くなっていて、ユーザーがよく読んでいるんだね
![character_balloon](/media/character/blue_normal_left.png)
ところが会社の概要のところが青くなっている所を見ると、この辺りはあまり読まれていない、ということなんだ
機能2.終了エリア
![ヒートマップとは?使い方や分析方法まで詳しく解説!の画像_8枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/eafc18e891784feb9f8b37c446ea6635/%E3%83%92%E3%83%BC%E3%83%883.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
次に終了エリアを可視化してくれるよ
![character_balloon](/media/character/blue_normal_left.png)
終了エリアとは、ユーザーがどこまで呼んでくれ、どこから離脱してしまっているかを教えているよ
![character_balloon](/media/character/blue_normal_left.png)
ツールにもよるけれど、基本的にパーセンテージで教えてくれるよ
![character_balloon](/media/character/blue_normal_left.png)
例えばこのサイトは商品の題名のところは86%だから、ほとんどの人が読んでくれているね
![character_balloon](/media/character/blue_normal_left.png)
でも少し下がった商品の説明のところは30%だから、あまり読まれていない可能性があるんだ
機能3.クリックエリア
![ヒートマップとは?使い方や分析方法まで詳しく解説!の画像_10枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5f11360ed69c44609e43abce2027e906/%E3%83%92%E3%83%BC%E3%83%884.png?w=1200&fm=webp)
![character_balloon](/media/character/blue_normal_left.png)
最後はクリックエリアの可視化だよ
![character_balloon](/media/character/blue_normal_left.png)
クリックエリアは、ユーザーがどこをよりクリックしているかを教えてくれるよ
![character_balloon](/media/character/blue_normal_left.png)
クリックエリアは熟読エリアと同じように色で教えてくれるよ
![character_balloon](/media/character/blue_normal_left.png)
例えばこのサイトだと、会社のロゴのところは赤くなっていて、ユーザーがよくクリックしているんだね
![character_balloon](/media/character/blue_normal_left.png)
ところがメインバナーのところが青くなっている所を見ると、この辺りはあまりクリックされていない、ということなんだ
それぞれの機能で役割が違うのね!
![character_balloon](/media/character/pink_normal_right.png)
でもどうやってそれらを使って分析すればいいの?
![character_balloon](/media/character/pink_normal_right.png)
ヒートマップを使った分析方法は?
![character_balloon](/media/character/blue_normal_left.png)
じゃあそれぞれのどんな分析ができるか見てみよう
分析方法1.熟読エリア
![character_balloon](/media/character/blue_normal_left.png)
熟読エリアではこんな分析ができるよ
1.読んでほしいところが読まれているか
2.こちらの意図とは関係なく読まれているところはどこか
![character_balloon](/media/character/blue_normal_left.png)
熟読エリアを知ることで、ユーザーの視線をどんなふうに誘導できるか改善することができるよ
![character_balloon](/media/character/blue_normal_left.png)
読まれていない場合の多くは文章のわかりにくさ、図や表など一目でわかるものがないなどが考えられるね
分析方法2.終了エリア
![character_balloon](/media/character/blue_normal_left.png)
終了エリアはこんな分析ができるね
1.多くのユーザーが離脱してしまうところ
2.コンバージョン地点の前後の離脱率
![character_balloon](/media/character/blue_normal_left.png)
申し込みボタンや購入ボタンなど前で多くのユーザーが離脱しているよ、コンバージョン地点がうまく機能していないことがわかるよね
![character_balloon](/media/character/blue_normal_left.png)
画像の読み込みの遅さや、内容がニーズとずれていると離脱率が高くなる可能性があるよ
分析方法3.クリックエリア
![character_balloon](/media/character/blue_normal_left.png)
クリックエリアではこんな分析ができるよ
1.コンバージョン地点でクリックされているか
2.関係のないところをクリックしていないか
![character_balloon](/media/character/blue_normal_left.png)
コンバージョン地点のクリック数が多いほど、ユーザーのニーズに合った場所にコンバージョン地点があるということになるね
![character_balloon](/media/character/blue_normal_left.png)
逆にクリック数が多くなければ少し場所を変えるなどの工夫が必要だよ
![character_balloon](/media/character/blue_normal_left.png)
また、関係のない単語や画像のクリックが多い場合は、その単語の意味を書いたリンクを張ったり、画像を大きくするなどデザインの変更も考えられるね
ヒートマップを活用してWebサイトの改善をしていこう
![character_balloon](/media/character/blue_normal_left.png)
Webサイトで一番大事なことは何だと思う?
もちろん、ユーザーにとって有用で使いやすかよね!
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
そうだね、いわゆるユーザビリティだね
![character_balloon](/media/character/blue_normal_left.png)
でも自分が作ったサイトを客観的に評価するのはとても難しい
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップはユーザー視点を分析することができる優れたツールなんだ
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップを使うことで、Webサイトを効率よく改善していくことができるんだ
![character_balloon](/media/character/blue_normal_left.png)
Webサイトを持っている人はぜひ使ってみよう
![character_balloon](/media/character/blue_normal_left.png)
じゃあ、最後にまとめるね
まとめ
◆ヒートマップとは、Webサイト上のユーザーの動きを色の濃淡で教えてくれるグラフのこと
◆ヒートマップの機能は「熟読エリア」「終了エリア」「クリックエリア」の3つ
◆三つの機能を使い、それぞれの視点から分析することができる
◆ヒートマップを使うことでユーザビリティに優れたWebサイトを作ることができる
![character_balloon](/media/character/blue_normal_left.png)
ヒートマップについてよくわかった?
うん!Webサイトをよりよくするための大事なツールなのね
![character_balloon](/media/character/pink_normal_right.png)
ブルーちゃん、ありがとね!
![character_balloon](/media/character/pink_normal_right.png)
![character_balloon](/media/character/blue_normal_left.png)
どういたしまして
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。