パッと読むための見出し
Ptengineをブログに導入してみました
Ptengineというブログやウェブサイトの解析ができるツールがあります。有名なのはヒートマップ(ウェブサイトのどこがクリックされているか、どこが注目されているか)で、これが素晴らしいです。
言葉で説明するより画像で見てもらったほうがわかりやすいので、みてもらうことにしましょう。
![ままはっく.jpg ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/2620769a2b75c3b33ff697cc4880ef611.jpg)
これは当ブログのトップページです。ヒートマップという名の通り、クリックされた箇所には色がついていることがわかりますね。
これはトップページ下部。
ほとんどなにもマークされていないので、ほとんどクリックされていないことがわかります。(寂
![ままはっく.jpg ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/2620769a2b75c3b33ff697cc4880ef61.jpg)
もちろんスマホビューも確認できます。左がクリックされた箇所を表示していて、右が注目されている箇所を表示しています。
![Banners_and_Alerts_と_Ptengine___Page_Scene.jpg Banners and Alerts と Ptengine Page Scene](https://mama-hack.com/wp-content/uploads/2015/02/48805b7d04512f482a30706910627f2f.jpg)
Ptengineをブログに導入してわかったこと
で、ここからが大事です。入れてみてわかったことを私の場合ですがまとめておきたいと思います。
下に行けば行くほど見られていない
これはスクロール到達率という指標でわかります。何%という数字がスクロール到達率を表しているのですが、見事に下に行けば行くほど離脱していることがわかります。
![Banners_and_Alerts_と_iPhoneからワイモバイルのスマホ・Nexus5にMNP。評判、料金とMNPした理由_-_ままはっく.jpg Banners and Alerts と iPhoneからワイモバイルのスマホ Nexus5にMNP 評判 料金とMNPした理由 ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/d96d4d7acb8d144e79319dd656d6040c.jpg)
こちらのトップページのフッター部分も、わずか3%しかスクロールされていないことがわかります。低い・・・w
![ままはっく.jpg ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/2620769a2b75c3b33ff697cc4880ef61.jpg)
つまり、見てもらいたいコンテンツは上に!ということですね。ユーザーに過度にスクロールさせないコンテンツ作りも必要なのかなと。
特に記事ページの場合、長い場合は結論を先に持ってきてユーザーにわかりやすく説明してあげるなど、工夫も大事だなと思いました。
また、アドセンスなどの広告を記事本文に入れている場合、下にありすぎてもそもそものスクロール到達率がよくないので、なるべく上に入れるよう改善しました。
スマホ表示の場合
特にスマホの場合、下まで見られているのは5%程度だったりするので、縦にコンパクトにすべきですね。
![Ptengine___Page_Scene.jpg Ptengine Page Scene](https://mama-hack.com/wp-content/uploads/2015/02/Ptengine___Page_Scene1.jpg)
PCのサイドバーがそのまま下に連なっているブログが多いと思いますが(うちもそうです)、あまり見られていないならいっそのこと削除してしまい、もっと上にメニューとして持ってくるとかして改善したほうが良さそうです。
見られていないのに表示してても、その分サイトの表示速度は遅くなりますからね。
サイドバーコンテンツはあまりクリックされていない
![ままはっく.jpg ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/2620769a2b75c3b33ff697cc4880ef612.jpg)
これはPC表示のトップページの場合ですが、サイドバーで表示させている人気記事などはあまりクリックされていないことがわかりました。
やはり2カラムだとメインコンテンツ部分に目が行くのだろう、という想像ができます。サイドバーはシンプルにした方が、ユーザーも目が行ってクリックされるかもしれませんね。
Table of Contentsは思ったよりクリックされている
![超簡単!赤ちゃん・子供用ダッフィーの着ぐるみの作り方_-_ままはっく.jpg 超簡単 赤ちゃん 子供用ダッフィーの着ぐるみの作り方 ままはっく](https://mama-hack.com/wp-content/uploads/2015/02/fce035c2d7c95e079ba3c71184b088f0.jpg)
Table of Contentsという、上の図のように見出しをまとめて表示してくれるプラグインがあります。ユーザーの見たい見出しに一気にジャンプできるという点で採用しているのですが、これが思った以上にクリックされています。
例えば上の記事はダッフィーの子供用着ぐるみの作り方のページなのですが、2の「材料」部分がめちゃくちゃクリックされて赤くなっています。
なるほど、このページに来た人は「材料」が気になって気になって仕方がないんだ・・・ということがとてもわかりますね。そのページのどんな内容に需要があるのかがよく見て取れます。
カエレバのリンクは商品名よりも商品検索リンクがクリックされている
![Ptengine___Page_Scene.jpg Ptengine Page Scene](https://mama-hack.com/wp-content/uploads/2015/02/Ptengine___Page_Scene.jpg)
上のページの続き、材料の部分なのですが、ここでその材料を紹介している部分です。ブログツールであるカエレバを使用して紹介しているのですが、赤くなっているところは商品検索部分で、商品名よりもクリックされていることがわかります。
カエレバのCSSをいじっているので結果的に目立ってクリックされているのですが、この場合は検索よりも商品名にダイレクトに飛んだ方がユーザーのためですので、このCSSは改善の余地があります。
まとめ
以上、Ptengineを導入してみてわかったことをまとめてきました。色々と改善ポイントが見えて楽しいなーと思いました。記事を書くのもいいですが、やはり改善が好きですね、私は。ウェブディレクター職種とか好きかもしれません・・・
GoogleのアナリティクスのChromeツールでもヒートマップのように確認できるツールがあります。こちらのほうが導入の手順が簡単なのでライトユーザー向きだと思います。
実は上の記事を書いたところ、あめたまさんにPtengineを教えてもらったのでした。あめたまさん、ありがとうございますヽ(=´▽`=)ノアメタマ! あめたまさんのブログ
Ptengineは無料のものだとトップページくらいしか解析できないのですが、キャンペーンでSNSを使っている人だとインフルエンサープランが使えるので、是非試してみてくださいね。
おしまい。