Untitled_design__8_

こんにちは。マーケティング担当のつなぎです。

Ptengine Blogでは自分たちで利用していたり、良さそうなサービスを紹介しています。

本日はこのPtengine Blogで過去に書かれているサービス紹介記事のうち、2つの記事をピックアップし、「どのように読まれているのか?」「どこに注目されているのか?」を分析しました。

具体的にはPtengineのヒートマップを使って分析し、どのような知見が得られたのかを明らかとします。

※今回はPCのヒートマップのみを紹介しています。

ヒートマップとは?

記事の分析の前にヒートマップで何がわかるのか?ご存知ではない方もいらっしゃると思うので簡単に紹介しておきます。

Ptengineのヒートマップには2種類の機能があります。

クリックヒートマップ

1つはサイトを訪れた方がクリックした箇所をサーモグラフィーで表示するクリックヒートマップです。

111FD0B8-A5A6-4B67-A009-ACBB47ADAE91

クリックが多ければ多いほど赤くなります。上図だと右上にクリックが集中しているのがわかります。

リンクがある箇所がクリックされるのは当然で、ヒートマップを使用しなくても分析は可能ですが、リンクがない箇所はヒートマップを使用しなければ表示する事はできません。

サイトを作成した側が意図しない動きを簡単に見える化できるのもヒートマップのもつ特徴の1つです。(リンクがない場所をクリックされた無駄クリックなど)

アテンションヒートマップ

2つめはサイトを訪れた方が注目した箇所をサーモグラフィーで表示するアテンションヒートマップです。

FED9F33C-69C9-4E1D-BDC0-34E937B882B6

アテンションヒートマップは注目された順に赤>緑>青という色で表現されます。

サイトを見ていると、じっくり読む箇所はスクロールを止めて読みますよね?スクロールを止めているセクションの滞在時間をサーモグラフィーで表示しています。

一方、自分に興味がない箇所や知っている箇所などはスクロールを止めずに流し読みするかと思います。こういった箇所は青くなります。

これも数値ではわからない部分ですので、特にブログなどを運営されていて記事中のどの部分に興味を持っているのか?を簡単に知りたいと思う方は非常に重宝すると思います。

過去記事「マーケ担当でもお手軽にLPがつくれるペライチを試してみた!」を分析してみた

4月20日に更新した簡単にLP(ランディングページ)が作れるサービスの「ペライチ」を紹介した記事です。

98B5C8F4-8AB4-4031-8D7C-5C149A4EF093

マーケ担当でもお手軽にLPがつくれるペライチを試してみた

この記事ではペライチを使用してLPを作成する手順から実際にLPが完成するまでを紹介させていただきました。

1. クリックヒートマップ

まずは記事のファーストビューから。

F0E15C51-1B74-489C-B7BE-184AC77FE884

前回もLPが簡単につくれるサービスを紹介しましたが、関連として紹介しました。

そこのリンクにクリックが集中し、赤くなっています。これはブログの回遊を促すものなので率直にクリックされていると嬉しいです。

CDC3BC46-F490-4B1E-AC2C-50A1D19ECB3F

ペライチのサービス紹介の部分です。

こちらもペライチに興味を持った方がペライチのWebサイトのリンクをクリックし赤くなっています。ツールの魅力を紹介した記事でしたが、興味を持って遷移してくれています。さて、注目してもらいたいのは、リンクの上にある画像のクリックです。

こちらは「ペライチ」のWebサイトのファーストビューをキャプチャして貼り付けているのですが、ペライチのサイトではYoutubeのプレーヤーが設置されており動画でサービスが紹介されています。

その「再生ボタン」の箇所がクリックされています。

クリックした方は「クリックできる」と思いクリックされたのかと思われますが、キャプチャなので実際はクリックしても当然動画が再生されるわけではなく画像が別タブで開くだけです。

これはクリックした方の思惑とは別の挙動をしたので、クリックした方にとっては「なんだよ…再生できないのか」となります。

訪問者の満足度を上げるためにも、このようなことがないように記事を作成しなければなりません。

キャプチャとわかるようなストーリーが必要ですし、飛ばし読みしているユーザーには、画像の示し方でキャプチャだとわかりやすくする必要がありました。

2. アテンションヒートマップ

クリックヒートマップの所でも紹介したペライチの紹介の部分です。そこそこ見られていることがわかります。

13B928A4-0E74-4DF7-98BB-C402224652BD

クリックヒートマップの所でも紹介したペライチの紹介の部分です。

ここも青くならず見られていることがわかります。

ここで注目してもらいたいのは、右端に表示されているパーセンテージです。これは「スクロール到達率」という指標です。これはこのブログに訪問した方のうち、その部分までスクロールした方はどのくらいなのかを割合で表示します。

サービス紹介の部分まで全体の81%の方に見て頂いているということです。逆に残りの19%の方は、ここまでに離脱してしまっているということになります。

途中で離脱してしまった方は、途中で興味をなくしたと考えられるため、スクロール到達率がどの部分で大きく減ったのかは非常に重要となります。

6F5BF61A-545A-4E65-AC4A-78B880FB891F

LPの作成手順や方法を紹介している箇所です。

この辺りはところどころ緑にはなっていますが、ほとんど青くなっていて読み飛ばされている事がわかります。作業的な部分なので、やはり、この辺は流し見する方が多いことが考えられます。

7FB670E3-E559-40EC-B58A-F651FBDBD9EE

記事のほぼ最後の箇所です。

ページの作成が終わり実際にページができました!と紹介している所ですね。

これまでの作業的な部分では青が多かったのですが、ここは緑になっており、よく見られています。

大抵、ページの下部にいけばいくほど青くなるのですが「ペライチを使ってどんなLPができたのだろう?」と興味をもった方が多かったのでしょうか。

やはり具体的な事例が好まれることがわかりました。

スクロール到達率を見ると、40%の方が記事の最後まで読んでくれた事がわかります。

記事は読んでもらう事が目的だと思うので、記事の最後の箇所のスクロール到達率を1つのコンテンツの評価とすると良いかもしれません。

更にここで注目すべき箇所は真っ赤になっている箇所。

ここは個人的にペライチに対して気になった点などを書いた箇所です。記事の最下部にも関わらず、かなり注目されています。

これは実際の使用感や、これからペライチを使用してみようかな?と思った方がAmazonのレビューを見るような感覚で見られたといえます。やはり実際に使う前にそのサービスの事を知りたいですよね。実際に使用した者にしか分からないような情報などは、注目されるコンテンツです。

過去記事「マーケ担当だけでイケてるバナーを無料で簡単に作れるCanvaを使ってみた」を分析してみた

2記事目は4月21日に更新したイケてるバナーを簡単に作れる「Canva」を紹介した記事です。

39628707-4772-4F07-A4D7-EF70B2952811

マーケ担当だけでイケてるバナーを無料で簡単に作れるCanvaを使ってみた 

この記事ではCanvaへの登録からバナーの作成まで紹介させていただきました。

ペライチの紹介では作業的な部分は読み飛ばされていましたがこの記事でも同じ動きが見られるのでしょうか??

それではどうぞ!

1. クリックヒートマップ

ファーストビューから見ていきます。

2F3D806E-0A33-4F51-89F8-E09B4004BA91

マーケ担当だけで何でもできてしまうツールというくくりで同じ部類に入るのでLP作成のInstapageとペライチを紹介していますがこちらも関連記事とあわせてクリックされています。

しかし…右端のスクロール到達率ですが、88%から一気に78%に減少していて「こんにちは。マーケ担当の繋です。」の部分で、10%減少しています。

「またおまえか。」と思われている可能性が高いのでしょうか…正直ヘコみますね(泣)

おそらく実際のところはファーストビューの画像がよくなかったので離脱したと考えられます。

D5601312-0037-4E71-8F97-6B0CE417EF9B

次はCanvaの紹介の部分です。

CanvaのWebサイトへのリンクにクリックが集中していますね。こちらでもサービスへの誘導がうまくできていて安心しました。

D0954E99-4C99-48E1-8BEC-DA4AE192C0DA

こちらはバナーが完成した後の記事の最後の箇所です。

この記事では実際にCanvaを使いバナーを作成し、作成したバナーをこのブログのサイドバーに設置してみました。

上図を見てみると枠で囲んだバナーがクリックされていますが、よく見ると、あれは「この位置に設置しました」というスクリーンショットです。記事内で「Canvaで作成したバナーをみなさんクリックしてください!!とお願いしたところ、スクリーンショット上のバナーがクリックされてしまいました…

意図した動きとは違った行動をされることがこちらでもやはりありました。丁寧にわかりやすくコンテンツを用意しなければなりません。

2. アテンションヒートマップ

次はアテンションヒートマップです。

6C355F88-946D-4AA3-B6F2-44301D69CE8B

今回はファーストビューがあまり見られていないですね…

先ほどのペライチの記事ではヘッダーを除いて緑になっていたのですが記事タイトルの箇所以外は真っ青です。

D7F7F81F-8E5E-43BD-BB81-98FA9DA2899D

Canvaのサービスの紹介文言の部分だけ緑、赤くなっています。

特に赤くなっている所は「画像を作るためのイケてる素材もたくさん用意されています。ローカルに保存されている画像をアップして作ることもできます。」という特徴を紹介している部分です。

端的にこのサービスはどういうものなのか?という事を知れる情報の部分を要所要所で見ていく方が多いのでしょう。

思い返してみると自分も無意識のうちにそういった読み方をしているのかもしれません。

さて、ペライチの記事では作業的な部分はほとんどが青くなっており、流し読みされているような感じでしたが今回はどうでしょうか。

B9037C9C-10A3-4EC5-90CB-90543EFD4310

はい。ほとんど同じでした。

1つ参考になりました。

「サービス紹介記事の登録方法や利用シーンの箇所は流し読みされる」

ただし、この登録方法等の部分ではスクロール到達率が大きく下がっている箇所はありませんでした。大きく下がっていないという事は登録方法や利用シーンの紹介の部分も必要な部分であったと考えられます。

3E27DA85-BE42-4499-833A-27ACBE0BD2B1

バナーが完成し、このブログのサイドバーに設置した箇所です。

やはりこの箇所はこれまで青ばかりだったのが一転して緑一色になっています。

ペライチの記事もそうでしたが、分析してみて思ったのが「このサービスで何ができるのか?このサービスを使うとどういったものができるのか?」という部分に非常に興味を持たれた方が多かったという事です。

サービスの紹介系の記事では、この何ができるのか、という部分が注目を浴びやすく、そのサービスを使うかどうかに影響を与えている、といえます。

当然ですけど。当たり前ですけど。

88EB8ACE-A679-49F5-9165-78C48FBA2BE4

この記事の最下部まで読んでくれた方は36%でした。ペライチの記事と比較するとやや少ないですね…

また更に注目してもらいたいのが、赤くなっている箇所です。この箇所もペライチの記事に続き、Canvaの気になった点を
書いた部分が赤くなりました。

やはりそのサービスの個人的な評価や不満点などサービスをレビュー部分は興味を持たれる傾向があります。

まとめ

2つのサービス紹介記事からわかったポイントを下記にまとめました。
※サンプル数が2記事と少ないので、今後もアップデートして分析していきます。

  1. サービス紹介記事を最後まで読んでくれる割合は約40%
  2. 記事の書き方により意図しない箇所へのクリックが発生してしまう
  3. スクロールの到達率の下がり方を見ることで、サービスの利用方法や
    利用シーンなども必要な部分だとわかる
  4. そのサービスを使用すると何ができるのか?が注目される
  5. サービスを使用したレビューが注目される

今回の内容は自社サービスの紹介でもいかせますし、メディア運営企業の記事広告であったり、アフィリエイトサイトでも活きてくると思います。

さて、今回紹介した2記事の最後に、その記事のヒートマップが見られるURLを貼り付けています。

D71A8D73-5ED6-4A46-B9A2-EEE6EA817AF3

ブログを見ているのと同じ感覚で、その記事のヒートマップを見ることができるので実際にどういうふうに読まれていたのかを見ることができます!

マーケ担当でもお手軽にLPがつくれるペライチを試してみた!
マーケ担当だけでイケてるバナーを無料で簡単に作れるCanvaを使ってみた

今後も分析した記事の最後にヒートマップを載せていくのでご自身のブログの読まれ方と比較してみてはいかがでしょうか?

ブログの読まれ方を知りたい方は、Ptengineを導入すれば簡単に知ることができるのでぜひご利用ください!