スマホのデザインやUIに悩んだらヒートマップが◎~Ptengineの使い方

公開日: : 最終更新日:2015/05/14 スマホ


LINE facebook twitter URLコピー
B! pocket note 楽天


RSS購読のURLが変わりました。
新しいFEED購読方法を見る

ヒートマップ

スマホサイトのデザインに悩んだらヒートマップがいいですよ。

こんにちは。Webまわりのマーケッターをしていますカグア!です。

モバイルフレンドリーなどスマホサイトへのリニューアルニーズが高まる中、デザインやUIに悩む人は多いと思います。自分ではこれ!と思ってもなかなかクライアントに理解されないなどなど。

今日はそんな方にオススメなツールを紹介します。ヒートマップといって、ユーザーのページ内での動きがわかるツールです。

ビジュアル的にインパクトがあるので、クラアントと共通認識を持つのにも役立ちますよ!ちなみに、べた褒めしていますがステマじゃないですよw。

ヒートマップ ツール Ptengineとは

ptengine
>>ヒートマップ付きアクセス解析ツール | Ptengine

Ptengineは、株式会社Ptmindが提供するヒートマップツールです。特徴は、リアルタイム解析や通常のアクセス分析も実装しながらも、ヒートマップやアテンションなどの高度なユーザートラッキング機能をもっているところです。

これまでもヒートマップツールは登場してきましたが、スマホやタブレットを明確に分けたUIや、Googleアナリティクスと似たファネル分析など通常の分析機能も充実し、かつ低価格で提供してきたところに人気がひろがりました。

最近ですと、はてなブログのユーザーは無料で使えるなどのリリースをして話題になりました。もちろん、通常版でも特定の1ページを月間25000PVまでなら無料で使えます。

>>はてなブログユーザー専用プラン|Ptengine

改善が必要と思われるページだけに仕込んで、吟味するなどしてお試しできます。

Ptengineの設置方法

トラッキングコード

申し込みは簡単で、上記公式サイトから登録を進め、URLなどを入力しますと、トラッキングコードが表示されますので、それを計測したいページに貼り付ければOKです。

>>料金プラン | Ptengine

有料プランであれば、計測できるURLは無制限になりますので、全ページのヘッダーやフッタにつけましょう。

トラッキングコードはBODY内であればどこでもOKです。

無料版の裏ワザ

PV上限は翌月リセットされる

無料版は計測URLが1ページ、月間PVが25000に制限されています。ただしこれは、2015年5月13日現在、PVがオーバーしたからといって課金がいきなりはじまるわけではなく、オーバーしたときから月末まで、その月の計測ができなくなる、ただ翌月はリセットされるという制限だそうです。

ですので、いきなり課金されるわけではないとのことですから、まずは安心して設置しましょう。

バッジをつければ上限アップ

バッジ

最近、たまに見かけると思います。フッタ部分にPtengineの小さな広告バナーを表示させれば、PV上限が10000追加される、というものです。とくに気にならなければ、サンプル数は大いにこしたことはないでしょうから、ONにしてPVゲットしちゃいましょう。

タグマネージャーで出したり引っ込めたり

タグマネージャー

タグマネージャーのカスタムHTMLでタグを発行します。タグマネージャーのタグがBODY内に設置されている必要はありますが、カスタムHTMLタグに、Ptengineのトラッキングコードを入れて、発行しても問題なく計測されます。

上図のように、タグ発行のトリガーを計測したいページにしたり、ある程度データがたまったら他のページを発火条件にしたり、上限25000PVが近づいてきたら発行をオフにしたり、などなど柔軟に計測が可能です。

ここまで無料プランを勧めていいものかと心配になる人もいるかもしれませんが、いちおう問い合わせたところ、まずはユーザー数が増えてくれることが嬉しいとのお言葉はいただきました。ご安心ください。それでも有料プランも1月からOKですので、有料がオススメですよ。

Ptengineの使い方

Ptengineの使い方

Ptengineのトラッキングコードを設置し、データ計測がはじまりましたら、上図のような分析が可能になります。

基本の分析メニュー

画面左上のタブが3つあります。左から、リアルタイム解析、通常分析、ヒートマップになります。

通常分析では、画面左にメニューが現れ、Googleアナリティクスでいう、ユーザー、集客、行動、イベントといったオーソドックスな指標が選べるようになります。表示されるデータ自体は見慣れたものでしょう。

画面右上にフィルタと書かれたボタンがありますが、それがGoogleアナリティクスでいうセグメントです。セッションを条件で絞り込んで分析できます。Googleアナリティクスの複数条件でセグメントすることも可能です。

ヒートマップの使い方

Ptengineの使い方~ヒートマップ

ヒートマップタブをクリックしますと、閲覧可能なページが表示されますのでどれかクリックします。すると上図のようにヒートマップが表示されます。

画面左側で、デバイスごとにわけて見られます。レスポンシブなWebデザインにしているときな、UIをどこまで厳選すればいいのかなど、デザインの参考になるはずです。

画面左のヒートマップは、タップされたところが暖色系になります。Googleアナリティクスでも類似の機能はありますが、それはあくまでAタグなどのリンクがあるところのみを計測可能です。しかし、Ptengineではクリックが仕込まれていないところも調べてくれます。

ですので、リンクがないけれどもユーザーが勘違いしてタップしてしまっているような箇所も知ることができます。そういう誤解の少ないデザインにするための参考になります。

アテンションは注目がわかる

アテンション

画面右は、スクロールが止まった時間の長さによって暖色系に色付けされるものです。つまり、画面を止めて長い時間見ているところ=注目度の高い部分がわかるのです。

ですから、注目度は高いけれどもページの下の方にあって、半分以下の人の目には触れないなどの文言があれば、ページ上部に持ってきたほうがいいかもしれません。また、ボタンなどもページの上と下とで注目度が変わるかもしれません。

Googleアナリティクスですと、そこまではわからず、クリックにしてもイベントトラッキングを仕込むなどある程度の準備が必要となりますが、Ptengineではタグを入れるだけでここまで分析が可能です。とても便利です、デザインやUIに迷ったら、いったんリリースしてみてヒートマップを導入し改善を図るほうが、思い込みによるデザインになる確率が減らせユーザーに優しいかなと思います。

Ptengineの便利な使い方まとめ

Ptengineは、開発のスピードも早く安心感の高いサービスを提供しています。

Googleアナリティクスのイベント用の設定を発行してくれたり、以下のようにOptimizelyと連携したりと、常に進化していて、現場で使いたいツールを認識してくれている感じが嬉しいです。

>>ヒートマップ型サイト改善ツールの「Ptengine」がABテストの「Optimizely」とシステム連携 – THE BRIDGE(ザ・ブリッジ)

公式ブログでも定期的にデザインやUIの改善事例を掲載してくれているので、とても参考になります。

>>ヒートマップによるUI改善術:第6回  インテリアショップECサイト | Ptengine Blog

ページグループなどまだまだ高度な分析機能がたくさんあります。通常の解析ツールとしてもとても便利です。

>>Webサイト制作の中心に分析を!Ptengineの便利な機能と使い方【導入編】 | 株式会社LIG

WordPress用のプラグインも提供しています。

>>Ptmind、アクセス解析ツールのWordpressプラグインを提供開始 | マイナビニュース

アプリ計測も。どこまで進化するのでしょうか。

>>アクセス解析ツール「Pt engine」、動的なネイティブアプリでのヒートマップ計測を実現:MarkeZine(マーケジン)

このように、安定した話題提供と、ユーザー増加にともなう情報量の増大が、現在、Ptengineの魅力の一つになっていると言えるでしょう。

Ptengineをオススメする本当の理由

Webマーケティングについては、すでにもう、ある程度成熟された市場ともいえ、打ち手や理想的な施策というものが定着してきた感があります。しかし、それを実践するリソースは有限であり、その采配が勝負を決めるといっても過言ではないのではないでしょうか。

Ptengineなどヒートマップツールを使えば、「ここはあまり注目されていないからデザインに議論はしなくて良いな」「画像のここが注目度が高いな、キャプチャとって、来月の商品撮影の時にはカメラマンに考慮してもらおう」といった、情報共有が高速になり、議論の優先順位をつけやすくなることが最大の価値だと思います。

効果が低いと思われるものはやらない、といったことが明確になり、それをチームのメンバー誰しもが理解しやすいという点では、ヒートマップのわかりやすさは絶大だと思います。

Googleアナリティクスはページ内の動きを計測することが苦手です。ですので、私がコンサルティング時には、GoogleアナリティクスとともにPtengineをオススメするのはそういう理由が大きいです。そしてチームの価値観共有にとても役だっています。おすすめですよ。

まとめ

いかがだったでしょうか。Ptengineは無料からはじめられ、デバイスごとのヒートマップもごく当たり前のようにビジュアル化してくれる稀有なツールです。

タグマネージャーと組み合わせて使いますと、より効果を発揮します。また、Googleアナリティクスがとつぜんの障害のときにも、通常分析も実装しているPtengineは役立つでしょう。

みなさんも、メンバー同士の情報共有、デザインやUIの判断、タスクの優先度の決定など、サイト運営のスキームにいれてみてください。

>>ヒートマップ付きアクセス解析ツール | Ptengine


コンセプトダイアグラムでわかる [清水式]ビジュアルWeb解析 (Web Professional Books): 清水誠: 本

「Aタグがないところもクリック検知!」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile


Yoshihiko Yoshida
ブロガー兼ユーチューバー。個人事業主でネット業界のお仕事24年目です。40代で2児の父。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑