目次
料理や食の道具などに関する記事を書いているこのブログでは、googleAnalyticsを利用していますが、最近PTengineというアクセス解析も合わせて導入してみました。
ヒートマップを使った改善
このPTengineというアクセス解析で、他のアクセス解析と違うサービスといえばヒートマップです。今回は、このヒートマップを利用して、ブログのトップページの改善に取り組んでみた様子をリポートしてみたいと思います。
ヒートマップには上記のクリックという測定だけではなく、アテンションという測定結果を確認することができます。次の画像がアテンションです。スクロールで注目している部分がわかります。
今回は、高さの短いトップページなので、スクロールではなく、「クリック」のヒートマップに注目してみたいと思います。改善方法
ヒートマップを利用した改善は、ひと目でどこがクリックされていて、どこがクリックされていないのかがわかります。クリックされるだろうと思って配置した要素が、全くスルーされていてショック！ということはよくある話です。
画像のように、インパクトのある結果を示してくれて、自分の思い込みから抜け出すキッカケを作ってくれるのが、ヒートマップの素敵な役割だったりします。意図した通りに、リンクをクリックしてもらえるように改善することで回遊率をあげる（直帰率を下げる）ように改善するのが今回の目的です。
先に結果をみてみると
改善方法を見る前にどのような結果がでたのかを確認してみます。改善前のトップページの数字
直帰率が60.19でした。
改善後のトップページの数字
直帰率が56.81に下がりました。少し改善されたことがわかります。
このようにPTengineはヒートマップだけではなく、数字も見やすく確認することができます。検証、仮説、変更を繰り返す
では、実際にどのように改善のサイクルを進めていけばよいでしょうか。検証に入る前に、どれぞれの工程をどのように進めるか、簡単にまとめてみました。
検証
PTengineのヒートマップの結果をみて、現在の状況を検証をします。この要素は意味が無いとか、この要素を大きくしている意味は無いとか、とにかく、意図したクリックがされていないことがわかります。
仮説
検証をして、現状を把握したあと、次に改善のための仮説をたてます。この部分をリストにしたらクリックされるのではないか？要素を少なくすることで、直帰率が下がるのではないか？などなど、考えを巡らしながら、変更したあと意図したクリックがされる方法を考えます。
仮説を立てていると、改善案が生まれてきます。
変更
仮説から生まれた改善案を元に、UIの変更を実行します。現状がダメだからといって、大胆にリニューアルするのはオススメできません。
変更したあと、現状との比較ができることが大切なので、現状使われているソースコードを少し変更してみたり、サイズを変更してみたり、要素を変えてみたり、消してみたり、小さなところから改善を進めていきます。
検証
改善してみた結果と、改善前の状況を比較して、意図したような結果になっているかを確認します。結果がどうであれ、なぜその結果になったのか検証をすることで、そのブログにとっての知識が深まります。
自らの知識を増やしていくことこそが、改善にとって一番重要な部分です。
変更する前のデザイン
まずは、改善する前のデザインを検証してみましょう。改善前のデザイン
縦に少し長いページです。一番上に大きなアイキャッチ画像があります。次に、注目してもらいたいコンテンツをリストで表示し、クリックしてもらいたいソーシャルへのリンクを設置しました。
真ん中に新着の記事を大きく３つ表示しています。その下に新着ニュースが３件あります。
改善前の１週間のヒートマップ
PTengineのヒートマップの画像を１枚に結合してみました。全体のクリックの様子がよくわかります。現状を検証してみます
文字へのリンクが多いのがわかります。画像にもリンクは設置していますが、クリックされていないのをみると、画像はただの飾りと捉えられている可能性が高そうです。
ロゴのクリックが多いのも気になります。右上のカテゴリボタンをクリックするとナビが表示されるのですが、認識されていないようです。
カテゴリー一覧へのリンクが多く押されていることもわかります。もっとコンテンツを表示させたいと思っている方が多いのかもしれません。
ソーシャル関係は、スルーされていることがわかりました。
上のほうは注目されていますが、下のほうにスクロールするにしたがって、クリック数が減っています。
検証結果をまとめると
- 画像はスルーされやすい。
- 文字のリンクが注目されている。
- 記事一覧へのリンクが最もクリックされている。
- ページの下は特に注目されていない部分が多い。
変更した後のデザイン
では、どのような仮説を作り、どのようなデザインにしたのかみてみましょう。仮説をたてる
すでに検証のフェーズで、予想はできておりますが、仮説という形で落としこんでおきます。- 多すぎる要素を減らせば、コンテンツへのリンクが増える。
- 今より小さな一覧を設置することで、クリック率があがる。
- 一覧へのテキストリンクをわかりやすくすることで、さらに多くのリンクが生まれ、直帰率が下がる。
- ソーシャルボックスを消しても、ソーシャルへの流入に変化はない。
改善をしたデザイン
見た目は大きく変わりましたが、ソースコードは、アーカイブページから流用したりと、小さなところから改善を進めております為、工数はそこまで大きくありません。作業時間は３時間程度です。
デザインの変更部分
改修してみた部分をみてみます。- 画像のついた一覧は横並びに２列だけにする。
- ソーシャルに関するコンテンツは、見られないので極力消す。
- 上のほうにあるキャッチーな画像エリアは、まずはそのままで、下の部分から改善に取り組み数字をみることにする。
- 全体のコンテンツ量を減らして、リンクを明確にして、直帰率が下がるようにする。
- 一覧画像の下に、一覧ページへのリンクをバランスよく設置する。
- ヘッダーに隠れていたナビゲーションを表にだした。
改善後の１週間のヒートマップ
コンテンツの要素が整理されたこともあり、クリックが増えたのがわかります。前はロゴがクリックされていましたが、その分ヘッダーのナビゲーションがすごく押されるようになりました。
真ん中の一覧にしたエリアでは、クリックされやすいテキストとされないテキストがありますが、これは今後のタイトル付けの参考にもなります。
一覧へのリンクはやはり多いので、一覧へのリンクを見やすくすることが重要だなと再認識しました。
数字も確認する
ヒートマップだけでは、わかりにくい部分は、数字も確認します。改善前 直帰率60.19%
改善後 直帰率56.81%
トップページだけの改善ですが、直帰率が少し下がったことがわかりました。今後も今回のヒートマップを元に、仮説を考えて、さらに改善を進めて行こうと思います。
bitbucketなどを利用したリポジトリ管理
何度も改善を繰り返すと、実は前に作っていたソースのほうが良かったということがあります。また、前に作ったソースが別の部分の改善で役にたつことがあります。
個人ブログであっても、ソースは変更したら元も戻すのは大変ですので、bitbucketなどを利用して、ソースを保存しておくと良いかと思います。昔のソースが残せて、かつ変更部分の差分がわかるので、どこをどのように更新したのかがわかるので便利です。
PTengineとは？
今回、ヒートマップを利用した改善をしました、PTengineについて少しご紹介をしたいと思います。
PTengineとは、googleアナリティクスと同じような、サイトのアクセス数を図るツールです。googleアナリティクスとの大きな違いは、グッドデザイン賞を受賞したとても見やすい画面と、ヒートマップが利用できることだと思います。リアルタイムの数値がとれて、流入元の詳細、コンテンツの詳細、ユーザー環境の詳細が見られて、などなど、個人ブログの運営者が、googleAnalyticsで確認するような内容が確認できます。
そして、とても見やすいので、googleAnalyticsよりも、直感的で確認しやすいツールだと思います。
最近７日間の様子も簡単に知ることができます。
解析ツールを使いこなせない！という不安がある方でも、ヒートマップを利用すれば、直感的に改善を進めることができるかと思います。
ヒートマップを見た瞬間に、サイトの改善をしたくなる気持ちにしてくれたところが、このツールの素敵な部分かなと思います。
ちなみに、有料の「イベント」という機能も利用してみたかったのですが、私のアカウントは無料版なので、利用できませんでした。
Ptengineリニューアルについて
2014年10月14日にPTengineは、大きなリニューアルがありました。無料プランにおける月間PV上限数：〜2.5万PVへ変更
※変更日以降の新たなお申込みにつきましては月間PV上限数が〜2.5万PVとなります。
※現在ご利用中の無料ユーザーの方々に関しましては月間PV上限数は〜10万PVでご利用頂いておりますが上記変更日より1ヶ月後にあたる平成26年11月13日（木）に月間PV上限数の変更を実施させていただきます。
「Ptengine」無料プランのその他の機能としましてはこれまで同様ご利用頂けます。
Ptengineはこれからもユーザー様の様々な声をいただきながら機能開発、サービスの向上
をして参りますので、変わらぬご支援のほど、よろしくお願いいたします。
という内容です。
ぎりぎりビジネスプラン（125,000PVまで）で利用できそうです。ちなみに、32,184円/月（税込み）。
ただ、その上のPVを目指しているので、200,000PVまで対応しているファーストプランを頭に入れると、53,784円/月（税込み）。
個人のブログを計測するのには、どちらもだいぶ高い金額です。PTengineの機能は素晴らしいので、ブロガーが利用するような機能を限定した、安いプランが出てくるのを期待といったところでしょうか。
とはいえ、実際は、無料の25,000PVでも、今回行ったようなヒートマップを利用したテストは可能なので、使い方次第かと思います。
ちなみに、プランの上限に達すると、
【Pt engine】PV上限超過のお知らせ
お世話になっております。
アクセス解析ツール「Pt engine」のサポート部でございます。
いつもPt engineをご利用いただきましてありがとうございます。
現在ご利用いただいているPt engineについて、10万PV/月の上限を超過し、データ計測を停止しました。翌月の1日より計測が再開されます。
さらにPV上限枠を利用したい場合、下記お問い合わせ先までご連絡ください。
というメールでお知らせがきます。
改定後は、月のはじめから25,000PVを達成するアラートになります。
ブロガーユーザーとして、まずは、「月のはじまりから25,000PVを月ごとに比較するツール」として利用してみて、必要な機能やさらに解析を進めたいと思ったら、エコノミープランを検討してみようと思います。
商用利用のサイトを持っている方で、利益が安定している方は、有料プランの利用を検討する価値があるのではないでしょうか。
インフルエンサー限定特別プランについて
追記です。通常の無料プランとは違い、そのほとんどが有料プランとは変わらない内容を無料で利用できるプランがあります。
それが「インフルエンサー限定無料特別プラン」といって、個人のKloutスコアが50をクリアしていることが条件だったりします。
他にも、個人運営のアカウント及びサイトであることや、ご利用開始前およびご利用に対しての感想をSNS上でシェアすることが条件だったりします。
Kloutスコアが50を超えたので申し込んでみた所、無事インフルエンサープランとなりました。
インフルエンサープランでは、イベント機能と、ヒートマップを複数ページにわたって利用できます。
無料版だと、ヒートマップが１ページだけだったり、10万PVというPVの上限があります。（2014年10月14日、10万PVは2.5万PVの上限に変更されました。。）
今後は、PTengineの各機能を利用した、ブログの改善をお伝えしていきたいと思います。