サービス

ジャンル

職種：エンジニア

職種：ビジネス職

職種：デザイナー

職種：バックオフィス

職種：その他職種

技術

こんにちは！ DMM inside編集部です。

今回お届けするのは、1月31日に行われた「DMM.com&times;Ptmind」ヒートマップセミナーの様子です。DMMで活用しているヒートマップツール｢Ptengine(ピーティーエンジン)｣は主に事業部単位でLPの分析などに使用されていますが、十分に活用しきれていない部分が多いのも実情です。そこで基礎的な活用方法と今後効果的に使っていくためのポイントを事例を交えながら解説していきます。

<img alt="" height="390" src="https://image.dmm-corp.com/f6rkk4g2fc9p5vri900wg71mtws8" width="566" />

写真左：栗原裕明(くりはら・ひろあき)/ 合同会社DMM.com マーケティング本部 デジタルマーケティング部 トレーディングデスク クリエイティブディレクター&nbsp;

▼プロフィール

2015年入社。前職の広告代理店では新規サイトの立ち上げからWEB広告クリエイティブのPDCAまで幅広い業務を担当。現在はマーケティングチームにて、WEB広告を中心にクリエイティブのPDCAプランニングに従事する傍ら、社内へヒートマップを活用したPDCAを推進している。

&nbsp;

写真右：窪田知昭(くぼた・ちあき)/株式会社Ptmind Senior Customer Success Manager&nbsp;

&nbsp;▼プロフィール

2011年情報メディア系大学を卒業後、制作兼広告代理店に入社。データ解析、AD運用、制作ディレクションなど、デジタルマーケティング領域全般を経験。中小～大手企業向けの推進プロジェクトに従事するなか、業界全般において人(リソース)とデータがビジネス成長に転換されるまでのエネルギーロスに疑問を感じる。こうした課題を抱いていた折り、『データ＝バリュー』を先駆けて掲げていた株式会社Ptmindへ2017年2月に参画。 
現在はSaasツール「Ptengine」「Datadeck」のカスタマーサクセス部署をリードすると同時に、企業のWebコンサルティングも多数手掛け、CVR2倍以上の伸びを実現成功させるなど、多くのクライアントにエンジンとなる核を構築。 
データ領域において、ビジネスにインパクトを与える&quot;グロースドリブン組織&rdquo;メイキングの啓蒙も含めて活動中。

<h3>Ptengineとは</h3>

窪田：Ptengineはサイトにトラッキングコード1つ設置することで、Webサイトに訪問した顧客がどのような行動しているか、どのようなことに関心があるのかといったさまざまなアクションデータを取得します。そのデータを用いて施策に対してのインパクト計測やサイト内でのユーザー体験を最大化するインサイトの抽出、またカスタマージャーニーの再設計に用いたりすることが可能です。このようにWebサイト制作やマーケティングで必要な情報を簡単に抽出できるものであり、&quot;顧客を知る&quot;ことに特化しております。

&nbsp;

Ptengineの中にはGoogle AnalyticsやWeb解析でもよく出る基本用語のほかに、ヒートマップツールのスクロール到達率やクリックヒートマップといった言葉が新たに出てきますので、代表的な取得できるデータを掘り下げていきます。

<ol>
	<li>
	<h4>スクロール到達率</h4>
	</li>
</ol>

<img alt="" height="315" src="https://image.dmm-corp.com/poix3cz60r5gxtw2ojcoeytny4bl" width="567" />

窪田：スクロール到達率とはセッションごとにスクロールの値を取得したデータです。Webページ上のどの深さまでユーザーが来たのかを取得でき、一番深く到達したラインを見ることができます。こちらは流入元によって数値は変わりますが、ユーザー動向の定点観測で使用する場合が多いです。また、ページのどこまで到達したかが分かるので、Call To Action(行動喚起)のための定点観測に用いる場合もあります。

&nbsp;

<ol start="2">
	<li>
	<h4>クリックヒートマップ</h4>
	</li>
</ol>

<img alt="" height="278" src="https://image.dmm-corp.com/4jlx641b57zrp0vtu9154q71aky2" width="567" />

窪田：クリックヒートマップはページ上でクリックが集中している箇所を表したデータです。ページ上で一番クリックされている部分が赤くなります。使い方の例として、ページ上で3つの特徴が並んでいたとき、なぜかクリックできない特徴部分がクリックされていたとすると、そこからユーザーが何を求めているのかを知ることができるので、ユーザー動向の可視化ができます。

&nbsp;

<ol start="3">
	<li>
	<h4>アテンションヒートマップ</h4>
	</li>
</ol>

<img alt="" height="314" src="https://image.dmm-corp.com/hobsivqzjlxzyassgo1habs4ltqx" width="567" />

窪田：アテンションヒートマップは縦長のサイトの中で、どこのエリアにクリックが集中されているかを見て、ユーザーの興味関心を知ることができるデータです。より長く見た（=滞在時間が長かった）場所が赤くなり、赤い色の面積や温かみのある色が増えるほどユーザーの関心度が高いページというのが分かるので、定性的なデータとして活用することができます。また、ユーザーのページ集中の持続度も表しているので、色がバラバラですとページが読み飛ばされており、離脱の原因があるということが分かります。

&nbsp;

下の図はコンテンツを正しく修正することで、 
来訪したユーザーのページを読む姿勢を180度好転させた例となります。

<img alt="" height="451" src="https://image.dmm-corp.com/yevakrsbzimekotjd6pkivv0fg02" width="800" />

&nbsp;

<ol start="4">
	<li>
	<h4>ページ分析</h4>
	</li>
</ol>

<img alt="" height="317" src="https://image.dmm-corp.com/kffi57myiuxx6vrwmk1r1nl1prqs" width="567" />

窪田：これはページ上の実際のクリック数がわかるデータです。ページ内のテキストやコンバージョンボタンなどの画像や要素単位で数値が分かります。例えば、クリックヒートマップでたくさん押されていると思ったものが実際には押されていないなどの感覚的な誤差もこちらで見直すことができます。

&nbsp;

これらの4種類のヒートマップデータをまとめると、定性データは施策提案やミーティングでの説得材料として活用いただき、定量データは日々のサイト運用をしていくことに活用いただくことがおすすめです。

<img alt="" height="317" src="https://image.dmm-corp.com/p6xyuz4php4qlni48wg6w3tzq6ry" width="567" />

<h3>ヒートマップ使用の前に</h3>

窪田：これらの機能を踏まえると、最初にやることや必要になることはあくまで、ヒートマップを見ることではなく、目的を定義することになります。

<img alt="" height="317" src="https://image.dmm-corp.com/gafmqmh280yv85bxw83mggbd4cnp" width="567" />

例えば、目的を売上げ1.5倍にするのとCVR1.5倍にするのではアプローチがまったく異なります。指標を分解していくとCVRを上げるためには直帰率を下げる・回遊率を上げる・かご落ち率を下げるなどの各変換率を変えていく必要があります。また下記のように各KPIとアクションと仮説を考え、よりビジネス成長に繋がるインパクトある結果を出すためにヒートマップを見ていきましょう。

<img alt="" height="318" src="https://image.dmm-corp.com/u0shlt99ddz1p9dwkyoid6243672" width="567" />

&nbsp;

<h3>事例の紹介</h3>

栗原：次に、ヒートマップを利用し、LP改善をしたDMM光の事例をご紹介します。

<img alt="" height="446" src="https://image.dmm-corp.com/vv1pqy8l5k2ddsv9pxwwqu8rtzmx" width="800" />

<h4>課題と現状分析</h4>

栗原:このLPの課題としては、それまで定期的にユーザー動向を細かくチェックしていなかったため、現状の閲覧傾向がよく分からないという点でした。また、ページ経由の獲得効率アップのためにLPを改修したいが、予算やスケジュールを考慮した際に、どこから改善していけば良いかが分からないという話があったので、ヒートマップを導入しました。

&nbsp;

まずはGoogle Analyticsで現状のページ分析と、取得できたユーザー情報をヒートマップでセグメントを切り、そこで見た結果、以下のような分析結果となりました。

<img alt="" height="318" src="https://image.dmm-corp.com/z10wwy00vx9dhhpwq6rklkucnv1j" width="567" />

ここで改修の方針をプランナーと相談し、「関心の高いコンテンツがユーザーに届いていない」という課題を改善していく方針となりました。

&nbsp;

<h3>仮説立て</h3>

栗原:上記結果からの仮説としては、ユーザーは多くのアフィリエイト媒体を介してさまざまな会社のページを行き来していることから、「決め手となるポイントを端的に掴みたい」というマインドがあるのではないか。また、複数回アクセスしているユーザーは「ポイントだけさらいたい」というマインドがあるなか、現状のページ上部に推しポイント概要の掲載がないため、セカンドビューまでに離脱するユーザーが多くなっているのではないかとの仮説立てをし、改修アイデアを出しました。

<img alt="" height="317" src="https://image.dmm-corp.com/bqkomcp4rjq29x29xuq5w26r47xs" width="567" />

<h3>改修実施</h3>

栗原:その後、実施に至った改修は以下となります。

&nbsp;1.他社の事例も踏まえた結果、ファーストビューに限定感を押し出している企業も多く見受けられたので同様に限定感を強調。またテキストは代えずにボタンのジャンプ率を上げて強調。

&nbsp;

2.キャンペーン内容をまず見てほしいので、意図的にタブを分けてエリアも大きく表示。

また、ユーザーは新規と転用があるので、的確に内容を区分け。

&nbsp;

3.ヒートマップでよく見られていた「DMM光が選ばれるポイント」のサマリー部分のポイントを、3つから6つに拡張。サイト訪問ユーザーが少なくなるセクションで大きく広く展開することで、クリックの誘発を狙う。

<h3>最後に</h3>

Ptengineはさまざまな使い方がありますが、デザイナーだけでなくライターやエンジニアの方が自分自身でデータを見ながらさまざまなパターンで分析し、改善実装をするケースもあるので、実際に触ってみて使用感を感じていいただければと思います。

この度は取材にご協力いただきありがとうございました！

DMMのマーケティング部ではこのようなイベント登壇情報も発信しております。ご興味ある方はぜひ下記よりマーケティング部へご応募ください！

<div data-oembed-url="https://dmm-corp.com/recruit/">
<div>
<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 52.5%; padding-top: 120px;"><iframe allowfullscreen="" src="//if-cdn.com/lYoH0j6?app=1" style="top: 0; left: 0; width: 100%; height: 100%; position: absolute; border: 0;" tabindex="-1"></iframe></div>
</div>
<script async="" charset="utf-8" src="//if-cdn.com/embed.js"></script></div>

<a href="https://dmm-corp.com/recruit/" target="_blank">dmm-corp.com</a>

イベント

デザイン

【イベントレポート】 ヒートマップツール Ptengine勉強会～DMM.com クリエイティブチームの活用法～

【イベントレポート】ヒートマップツール Ptengine勉強会～DMM.com クリエイティブチームの活用法～

シェア

関連する記事

【イベントレポート】 ヒートマップツール Ptengine勉強会～DMM.com クリエイティブチームの活用法～

シェア

関連する記事

【イベントレポート】ヒートマップツール Ptengine勉強会～DMM.com クリエイティブチームの活用法～