Ptengineを活用したウェブサイトの改善方法

Ptengineを活用した
ウェブサイト改善の手順
2016年4月8日

目次
2
I ヒートマップでどのウェブページを分析するべきか P3
1. ウェブサイト改善にヒートマップを活用すべき理由 P4
2．ヒートマップ分析によるサイト改善の目的 P5
3. 具体的にヒートマップで分析するページを絞り込む P6
II ヒートマップ分析の手順(1)
トップページ、詳細情報ページ、各ページ共通のヘッダー、フッター P7
1. トップページのヒートマップ分析 P8
2. 詳細情報ページの分析法：ヒートマップを使用しないウェブ分析と、ヒートマップを使用するウェブ分析との違い＝「ページ内遷移」に
注目する P9
3. 各ページ共通のヘッダー部、フッター部のヒートマップから改善点を見つけ出す P10
III ヒートマップ分析の手順(2)
PtengineのDATA CENTERの数値データを使って、サイトの問題を発見する P12
IV ヒートマップ分析の手順(3)
数値データで見つけた問題点を、ヒートマップを使って確認し、改善策を選ぶ P20

I ヒートマップでどのウェブページを分析するべきか
3

1. ウェブサイト改善にヒートマップを活用すべき理由
4
事業に成果をもたらすウェブサイト改善を行うだけでは足りない
たとえば、EコマースのSmart Phone向けサイトにおいて、商品写真の画像サイズを大きくして、枚数を増やすことで、CVRが上がることが
あります。こうしたことは、事業に成果をもたらすウェブサイト改善です。
上記の例で、なぜそもそも、商品写真は長い間、小さい画像サイズで掲載されていたのでしょうか。なぜ、写真は1枚しか掲載されていな
かったのでしょうか。
事業に成果をもたらすウェブサイト改善が行われたことは評価されるべきですが、なぜ、改善されるべき箇所が長い間そのままになって
いたのかというシステム的な問題に目を向ける必要があります。
もしこのEコマースサイトの日々の改善フローの中で、「数値データを確認した後、商品詳細ページのヒートマップを確認する」というフロー
ができていたとしたら、訪問者が、「1枚しか掲載されていない小さな商品写真をクリックし、拡大もされないし、他の写真を見ることもでき
ない」状態に、がっかりしているということに、しばらく前に気が付いていたかもしれません。
ヒートマップ分析は、「ユーザーが感じているストレスに近づく」こと
「もっとしっかり商品を見たいのに」というユーザーのストレスは、直帰率などの数値データからだけでは、なかなか気づくことができません。
別の例を挙げると、「新規訪問ユーザーの直帰率が高いページで、ファーストビューを見たらすぐ離脱されている」という実態も、スクロー
ル到達率のデータを見なければ、気が付くことができません。
このように、ウェブ解析の対象データにヒートマップを加えることは、ウェブサイトの「ユーザーが感じているストレスに近づく」ことです。ウェ
ブサイト改善のフローにヒートマップを加えることで、「気が付きさえすれば改善できる機会損失ポイント」を、早く見つけることができます。

2．ヒートマップ分析によるサイト改善の目的
5
「ヒートマップで何を分析するのか」を決めるためには、ヒートマップを活用したウェブサイト改善の目的を明らかにしておく必要があります。
その目的とは、「事業に成果をもたらすこと」にあります。具体的には、「CVR（コンバージョンレート）」をアップさせることで、ウェブサイトを
きっかけとした売上をアップさせることです。
下記の2点の表はいずれも、左端の列の「現状」に対して、どの要素をどれくらい変えると、売上がどれくらいアップするか試算したもので
す。上の表では、「CVR」「流入」「客単価」を変えて試算しています。下の表では、「受注率」「CVR」「流入」を変えて試算しています。上下
の表とも「改善策2」の列はCVRをアップさせることで、他の数字を「現状」と変えることなく「売上」をアップさせる試算を行っています。
この試算のように、「流入」などのCVR以外の数字が変わらないと仮定した場合に、 CVRを改善し、売上をアップさせることがヒートマップ
分析によるサイト改善の目的です。
現状改善案1 改善案2 改善案3
C V R 1.00% 1.00% 1.25% 1.00%
流入 40,000 50,000 40,000 40,000
客単価 15,000 15,000 15,000 18,750
売上（円） 6,000,000 7,500,000 7,500,000 7,500,000
現状改善案1 改善案2 改善案3
受注率 40.00% 40.00% 40.00% 50.00%
商談率 15.00% 15.00% 15.00% 15.00%
C V R 1.00% 1.00% 1.25% 1.00%
流入 40,000 50,000 40,000 40,000
客単価 12,000,000 12,000,000 12,000,000 12,000,000
売上（円） 288,000,000 360,000,000 360,000,000 360,000,000
イーコマース
リードジェネレーション

3. 具体的にヒートマップで分析するページを絞り込む
6
ウェブサイトは複数のウェブページから構成されています。構成要素のウェブページは大きく分けて、以下の5つに分類することができま
す。
(1)トップページ
(2)インデックスページ（目次の役割を果たすページ）
(3)詳細情報ページ（ECサイトであれば商品詳細ページ、求人サイトであれば、求人詳細ページ）
(4)機能ページ（会員登録など、主に入力フォームによって構成されたページ）
(5)インフォメーションページ（会社概要、沿革、採用案内、プライバシーポリシーなどのコンテンツ）
(5)は、「この企業と取引しても大丈夫か」と考えている人や、「この企業で働きたい」と考えている人にとっては重要なページですが、ヒート
マップ分析の目的である、「事業に成果をもたらすこと」から考えると、分析対象とする優先度は低くなります。（採用案内コンテンツの
ユーザービリティを改善するといった、特別なミッションがある場合は別ですが。）
(4)は、CVRアップに直接的な影響をもたらす部分で、ヒートマップ分析によってエントリーフォームを改善することも可能ではありますが、
どちらかというと、EFO（エントリーフォーム最適化）という別プロジェクトとして扱った方が分かりやすいと言えます。
したがって、
(1)トップページ
(2)インデックスページ（目次の役割を果たすページ）
(3)詳細情報ページ（ECサイトであれば商品詳細、求人サイトであれば、求人詳細）
がヒートマップ分析をする上で、重要なページと考えられます。ただし、(2)と(3)、とくに(3)に関しては、ページ数が多くなること多いので、ま
ずセグメント別に問題となりそうなページにあたりを付けた上で、それらのページを分析し、1つのページ（またはページグループ＝似たよ
うなレイアウトのページを集めて集計するように設定したページ群）の改善が成功したら、似たフォーマットの別のページ（ページグルー
プ）にも適用するという形で、改善を進めていくのがよいでしょう。

II ヒートマップ分析の手順(1)
トップページ、詳細情報ページ、各ページ共通のヘッダー、フッター
7

1. トップページのヒートマップ分析
8
トップページは、上から、以下の4エリアに分けて、下記の表にある視点で分析します。
番号パートヒートマップによる分析ポイント
1 ファーストビュー ●無駄な面積を占有している要素は無いか？
（例）ほとんどクリックされていないバナー、ほ
とんどアテンションを集めいていないバナー
●ファーストビューが終わって、一気にスクロー
ル到達率が下がる場合は、続きを読ませる力が足
りないので、改善の余地があります。
2 優先度の高い情報 ●詳細な情報への導線は明確か？
●（スマートフォンサイトの場合）右側に、タッ
プしやすい大きなボタンはあるか？ ※クリック
ヒートマップの分析結果から、右手で持って親指
でタップしやすい位置に大き目のボタンを置くこ
とで、訪問者を誘導できることが分かっています。
3 普通の情報・
参考程度の情報
●アテンションが集まっておらず、クリックもさ
れていないコンテンツは削除することができない
か検討すべきです。
●逆に、アテンションが集まっているコンテンツ、
よくクリックされているコンテンツは、上の位置
に上げられないか、検討すべきです。
4 フッター ●コンバージョン、お問合せにつながる要素は、
見つけやすく、クリック（タップ）しやすいか。
（例）小さなテキストなのに、よくクリックされ
ているリンクは無いか。
1. ファーストビュー
2. 優先度の高い情報
3. 普通の情報・
参考程度の情報
4. フッター
サンプルサイト：
パン教室生徒募集サイト

主張の
繰り返し
データ、事例など
根拠、理由
主張
2. 詳細情報ページ（例：商品詳細ページ、求人詳細ページ）の分析法：ヒートマップを使用しないウェブ分析と、ヒートマップを使用するウェ
ブ分析との違い＝「ページ内遷移」に注目する
9
ヒートマップを使用しないウェブ分析では、「ページ間」の遷移の状況に注目します。これは、「ページ内」の遷移を分析することがむずかし
いから、そうせざるを得ないと言えます。しかし、キャンペーンのLPの例を持ち出すまでもなく、ウェブページ1ページで、ユーザーをどの程
度説得し、どこまで買う気（求人サイトなら応募する気）にさせるこができるかは、ウェブページを改善する上で、重要な視点です。ウェブ
ページの1ページは、業種にもよりますが、下記のような「主張」「根拠、理由」「データ、事例など」「主張の繰り返し」で構成されていること
が理想的です。
エリア1
ファーストビュー
エリア2
エリア3
エリア4
フッター
商品詳細、求人詳細などの
ウェブページ
スクロール到達率
アテンション
ヒートマップ
どこまで
読まれたか確認
どこが熟読
されたかを確認
Ptengineのスクロール到達率で、「主
張」「根拠、理由」「データ、事例など」
「主張の繰り返し」のどこまで読まれ
たか」を確認します。
Ptengineのアテンションヒートマップ
で、「主張」「根拠、理由」「データ、
事例など」「主張の繰り返し」のどこ
が熟読されたかを確認します。

ヘッダー部
フッター部
ヘッダー部
フッター部
3. 各ページ共通のヘッダー部、フッター部のヒートマップから改善点を見つけ出す
10
「インデックスページ」「詳細情報ページ」で共通に使用されている「ヘッダー部」「フッター部」のヒートマップを見ると、特定のページに限定
しない、ユーザー行動の一定の傾向が見つかることがあります。「よく使われているナビゲーションはどれか」「それが分かりやすい位置
に分かりやすいデザインで設置されているか」を確認して改善することで、訪問者のサイト内移動がスムーズになり、結果として、CVRアッ
プにつながります。
ヘッダー部
フッター部
インデックスページ
（目次の役割を果たすページ）
ヘッダー部
フッター部
ヘッダー部
フッター部
ヘッダー部
フッター部
詳細情報ページ（ECサイトであれば
商品詳細ページ、求人サイトであれば、
求人詳細ページ）

3. 各ページ共通のヘッダー部、フッター部のヒートマップから改善点を見つけ出す
11
各ページ共通のヘッダー部、フッター部では、ユーザーがよく使っているリンクに注目します。下記のサイトの例では、ヘッダー部（図(1)）、
フッター部（図(2)）共にブログのリンクがよくクリックされています。このサイトの場合、Smart Phone向けサイトでは、ブログへのリンクはメ
ニューの中に隠れているので(図(3))、ブログへのリンクをファーストビューの部分に設置した方がよいと考えられます。
なお、図(4)の
（1）
（2）
（3）
Smart Phone
フッター部
（4）
PC
ヘッダー部
サンプルデータの分析例

III ヒートマップ分析の手順(2)
PtengineのDATA CENTERの数値データを使って、サイトの問題を発見する
12

いきなりヒートマップを見始めるのではなく、ヒートマップで解決したい問題を確認する
13
DATA CENTERの数値データを使って、サイトの問題を発見する
ヒートマップを活用してウェブサイト改善を行うには、まず、ウェブサイトのどこに、ヒートマップ分析で解決できる問題があるかを探すことから始めます。
具体的には、PtengineのDATA CENTERの数値データを使って、下記の例のように問題点を発見していきます。
サンプルデータ（パン教室生徒募集サイト）の分析例
1: ユーザー分析
「Smart Phone – 新規訪問」の訪問者の直帰率が高く、CVRが低いことが分かります。このセグメントのユーザーが直帰しないよ
うに、また、CVするようにするにはどうすべきかを、ヒートマップで分析する必要があります。
DATA CENTER の数値データから分かった問題
P14
このドキュメントの
参照ページ
2: トラフィック分析
PC、Smart Phone共に、新規訪問で検索から入って来たユーザーの直帰率が比較的高くなっています。新規訪問ユーザーが検
索で、どのページに入ってきて、なぜ直帰しているのかを、ヒートマップで分析する必要があります。
P15
3: コンテンツ分析【PVランキング】
「レッスンの内容」と「レッスンの流れ」は関連性の強いコンテンツで、両方見てもらうことで、どんなレッスンが受けられるかがよく
理解できます。その結果として、CVRアップが期待できます。しかし、新規訪問、再訪問共に、「レッスンの内容」に比べると「レッ
スンの流れ」の訪問数は約半分です。「レッスンの流れ」を見た訪問者が「レッスンの流れ」を見る流れがスムーズにできていない
ようです。ヒートマップで確認する必要があります。（PC、Smart Phoneの両方で見られる課題）
P16、P17
3: コンテンツ分析【入口回数ランキング】
「レッスンの流れ」から入って来た新規ユーザーの直帰率が70％と高くなっています。「レッスンの内容」→「レッスンの流れ」の順
で見てほしいコンテンツが、順番通りに見られていないことで直帰率が高くなっていると考えられます。
P18、P19
「DATA CENTER の数値データから分かった問題」に基づいて、
「ヒートマップで分析すべきこと」を整理する。
1 「Smart Phone – 新規訪問」の訪問者の直帰率が高く、CVRが低い「Smart Phone – 新規訪問」の訪問者が入口にしているヒートマップ分析する。
2 「Smart Phone・PC共通 – 新規訪問検索からの流入」の訪問者の直帰率が高い。「Smart Phone・PC共通 – 新規訪問検索からの流入」の訪問者が入口にしているヒートマップ分析する。
3 Smart Phone・PC共通「レッスンの内容」→「レッスンの流れ」の順で見てほしいコンテンツが、順番通りに見られていない「レッスンの内容」「レッスンの流れ」のページをヒートマップで分析する。
P21
P24
P26

ページビュー数 17,936 新規セッション率 27.14%
セッション数 6,298 ページ/セッション 2.85
直帰率 50.12% CVR 7.80%
セッション数直帰率ページ/セッション CVR
1,709 52.93% 3.12 5.97%
4,589 49.07% 2.75 8.52%
PC／Smart Phone 新規訪問／再訪問セッション数直帰率ページ/セッション CVR
新規訪問 424 41.27% 4.11 9.67%
再訪問 1,031 46.85% 2.91 8.54%
新規訪問 1,125 56.41% 2.71 5.07%
再訪問 3,345 49.87% 2.70 8.70%
CVした／CVしてない PC／Smart Phone 新規訪問／再訪問セッション数直帰率ページ/セッション
新規訪問 32 0.00% 8.28
再訪問 59 13.56% 7.59
新規訪問 43 11.63% 8.00
再訪問 216 39.81% 4.50
新規訪問 392 44.64% 3.77
再訪問 972 48.87% 2.63
新規訪問 1,082 58.19% 2.50
再訪問 3,129 50.56% 2.58
新規訪問／再訪問
PC
Smart Phone
PC
Smart Phone
CVした
CVしてない
PC
Smart Phone
新規訪問
再訪問
Ptengine DATA CENTER のデータから、セグメント別のユーザー行動の特徴を把握する
14
Ptengine DATA CENTER のデータから、セグメント別のユーザー行動の特徴を把握します。上記の表中の(1)、(2)のデータを見ると、「Smart Phone – 新規訪
問」の訪問者の直帰率が高く、CVRが低いことが分かります。このセグメントのユーザーが直帰しないように、また、CVするようにするにはどうすべきかを、ヒー
トマップで分析する必要があります。
1: ユーザー分析
(1) (2)
サンプル
データ

Ptengine DATA CENTER のデータから、流入元別のユーザー行動の特徴を把握する
15
2: トラフィック分析
新規訪問／再訪問新規訪問／再訪問セッション数直帰率ページ/セッション平均滞在時間 CVR
ノーリファラー 323 35.29% 4.45 0:03:02 12.07%
検索 82 62.20% 3.22 0:02:05 1.22%
ソーシャル 2 0.00% 3.00 0:01:42 0.00%
参照サイト 9 44.44% 1.89 0:01:06 0.00%
キャンペーン 8 75.00% 2.13 0:01:47 12.50%
ノーリファラー 884 46.49% 2.90 0:03:15 8.48%
検索 75 49.33% 3.67 0:02:26 8.00%
ソーシャル 10 30.00% 2.70 0:02:24 0.00%
参照サイト 17 41.18% 2.41 0:03:04 23.53%
キャンペーン 45 55.56% 2.18 0:02:58 6.67%
再訪問
新規訪問
PC
新規訪問／再訪問新規訪問／再訪問セッション数直帰率ページ/セッション平均滞在時間 CVR
ノーリファラー 959 55.43% 2.79 0:01:01 5.63%
検索 115 62.61% 2.37 0:01:02 1.74%
ソーシャル 33 66.67% 2.03 0:00:56 0.00%
参照サイト 10 52.94% 3.70 0:00:59 5.88%
キャンペーン 1 0.00% 3.00 0:00:45 0.00%
ノーリファラー 2,733 50.90% 2.77 0:01:19 10.17%
検索 435 46.44% 2.45 0:00:55 2.76%
ソーシャル 86 24.42% 2.50 0:01:08 0.00%
参照サイト 36 47.22% 2.61 0:01:00 0.00%
キャンペーン 55 67.27% 1.51 0:00:56 1.82%
新規訪問
再訪問
Smart Phone
サンプル
データ
PC、Smart Phone共に、新規訪問で検索から入って来たユーザーの直帰率が比較的高くなっています（表(1)(2)）。新規訪問ユーザーが検索で、どのページに
入ってきて、なぜ直帰しているのかを、ヒートマップで分析する必要があります。
(1)
(2)

Ptengine DATA CENTER のデータ PVランキングから、問題点を探す【PC】
16
3: コンテンツ分析【PVランキング】
PC 新規訪問
サンプル
データ
「レッスンの内容」と「レッスンの流れ」は関連性の強いコンテンツで、両方見てもらうことで、どんなレッスンが受けられるかがよく理解できます。その結果として、
CVRアップが期待できます。しかし、新規訪問、再訪問共に、「レッスンの内容」に比べると「レッスンの流れ」の訪問数は約半分です。（表の(1)と(2)、(3)と(4)。）
「レッスンの流れ」を見た訪問者が「レッスンの流れ」を見る流れがスムーズにできていないようです。ヒートマップで確認する必要があります。
順位 URL タイトル PV 訪問数入口数離脱率平均滞在時間新規率直帰率
1 /tipo 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用540 307 277 34.44% 0:01:01 100.00% 34.30%
2 /tipo/lesson レッスンの内容 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用245 136 9 11.02% 0:01:00 100.00% 55.56%
3 /pan_blog 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 172 112 47 25.58% 0:01:05 100.00% 40.43%
4 /tipo/kodawari 講師のこだわり | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用154 110 40 18.83% 0:01:10 100.00% 30.00%
5 /tipo/lesson/flow レッスンの流れ | レッスンの内容 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用102 74 14 19.61% 0:00:37 100.00% 71.43%
6 /tipo/photo_gallery パンの写真集 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用88 68 2 20.45% 0:00:50 100.00% 50.00%
7 /tipo/contact お問合せ・お申込み | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用64 49 2 20.31% 0:01:14 100.00% 0.00%
8 /tipo/makoto_hotta ロティ・オラン堀田誠先生特別レッスン in 鹿児島市 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用57 44 16 35.09% 0:00:59 100.00% 87.50%
9 /pan_blog/?p=390 11月のレッスンです♪ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 37 24 1 18.92% 0:02:09 100.00% 100.00%
3 /tipo/?gclid=CLPA3evBlsUCFY-UvQod8AsAxA鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用268 219 218 44.40% 0:01:15 0.00% 40.37%
5 /pan_blog/?page_id=2 鹿児島市天然酵母パン教室【TIPO（ティポ）】のホームページに移動 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog124 99 99 79.03% 0:00:21 0.00% 78.79%
PC 再訪問
(1)
(2)
(3)
(4)

Ptengine DATA CENTER のデータ PVランキングから、問題点を探す【 Smart Phone】
17
手順3: コンテンツ分析【PVランキング】
Smart Phone 新規訪問
サンプル
データ
前ページのPCのデータでも見ましたが、Smart Phoneのデータでも、新規訪問、再訪問共に、「レッスンの内容」に比べると「レッスンの流れ」の訪問数が少なく
なっています。（表の(1)と(2)、(3)と(4)。）「レッスンの流れ」を見た訪問者が「レッスンの流れ」を見る流れがスムーズにできていないようです。ヒートマップで確認
する必要があります。また、表(5)の「パンの写真集」は多くの写真が掲載されているのに、平均滞在時間が19秒しかありません。UIに改善の余地が無いか、
ヒートマップで確認する必要があります。
Smart Phone 再訪問
8 /pan_blog/?p=399 ロティ・オラン堀田先生の特別レッスンのお礼。 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog70 58 38 61.43% 0:00:50 100.00% 76.32%
9 /tipo/makoto_hotta ロティ・オラン堀田誠先生特別レッスン in 鹿児島市 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用67 63 37 65.67% 0:00:29 100.00% 91.89%
10 /tipo_miyazaki 宮崎市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用66 37 26 34.85% 0:00:29 100.00% 73.08%
8 /pan_blog/?p=409 オニオンブレッド★ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 213 167 16 34.74% 0:00:46 0.00% 62.50%
10 /tipo/info/miyazaki TIPO 宮崎教室のサイトとブログがOPENしました。 | インフォメーション | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用172 155 30 43.60% 0:00:50 0.00% 43.33%
(1)
(2)
(3)
(4)
(5)

順位 URL タイトル入口数平均訪問PV数平均滞在時間新規率直帰率
1 /tipo 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用405 3.30 0:04:33 0.00% 42.47%
2 /tipo/?gclid=CLPA3evBlsUCFY-UvQod8AsAxA鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用214 2.77 0:02:05 0.00% 39.25%
3 /pan_blog 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 190 2.75 0:02:11 0.00% 52.11%
4 /pan_blog/?page_id=2 鹿児島市天然酵母パン教室【TIPO（ティポ）】のホームページに移動 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog99 1.53 0:00:29 0.00% 78.79%
5 /tipo/?utm_source=TIPO_Web_Miyazaki&utm_medium=WebLinkGNB&utm_term=TIPO_Web_Miyazaki_GNB&utm_content=TIPO_Web_Miyazaki_GNB&utm_campaign=WebGNBPR鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用52 2.46 0:02:55 0.00% 50.00%
6 /tipo/kodawari 講師のこだわり | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用22 4.09 0:01:44 0.00% 54.55%
7 /pan_blog/?p=299 大きなカンパーニュ★ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 20 5.55 0:05:15 0.00% 10.00%
8 /tipo/contact お問合せ・お申込み | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用12 2.08 0:02:32 0.00% 75.00%
9 /tipo/makoto_hotta ロティ・オラン堀田誠先生特別レッスン in 鹿児島市 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用11 1.91 0:03:19 0.00% 72.73%
10 /tipo_miyazaki 宮崎市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用10 1.60 0:00:41 0.00% 50.00%
4 /tipo/makoto_hotta 【過去のイベント】ロティ・オラン堀田誠先生特別レッスン in 鹿児島市 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用16 1.75 0:01:44 100.00% 87.50%
5 /tipo/lesson/flow レッスンの流れ | レッスンの内容 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用14 1.86 0:01:16 100.00% 71.43%
6 /tipo_miyazaki/?utm_source=Yahoo&utm_medium=cpc&utm_term=%E3%83%91%E3%83%B3%E6%95%99%E5%AE%A4&utm_content=Yahoo%E5%88%9D%E5%9B%9E%E8%A8%AD%E5%AE%9A&utm_campaign=%E5%A4%A宮崎市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用12 2.92 0:00:57 100.00% 50.00%
7 /tipo/lesson レッスンの内容 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用9 2.33 0:01:28 100.00% 55.56%
9 /tipo/info/%E3%80%8C%E3%83%AD%E3%83%86%E3%82%A3%E3%82%AA%E3%83%BB%E3%83%A9%E3%83%B3-%E5%A0%80%E7%94%B0%E8%AA%A0-%E5%85%88%E7%94%9F-%E7%89%B9%E5%88%A5%E3%83%AC%E3%83ご参加ありがとうございました！「ロティ・オラン堀田誠先生特別レッスン in 鹿児島市」 | お知らせ | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用6 3.50 0:01:10 100.00% 66.67%
Ptengine DATA CENTER のデータ入口回数ランキングから、問題点を探す【PC】
18
手順3: コンテンツ分析【入口回数ランキング】
PC 新規訪問
サンプル
データ
サイトのトップ、blogのトップが入口になる回数が多く、それ以外の入口ページは参考程度に見ます。表(1)の「レッスンの流れ」から入って来た新規ユーザーの
直帰率が約71％と高くなっていますが、これは、「レッスンの内容」（表(2)）→「レッスンの流れ」の順で見てほしいコンテンツが、順番通りに見られていないこと
で直帰率が高くなっていると考えられます。「レッスンの流れ」から入って来たユーザーの行動をヒートマップで確認する必要があります。
PC 再訪問
(1)
(2)

Ptengine DATA CENTER のデータ入口回数ランキングから、問題点を探す【Smart Phone】
19
手順3: コンテンツ分析【入口回数ランキング】
サンプル
データ
前ページのデータで見た、PCのデータの場合と同様に、表(1)の「レッスンの流れ」から入って来た新規ユーザーの直帰率が70％と高くなっています。「レッスン
の内容」（表(2)）→「レッスンの流れ」の順で見てほしいコンテンツが、順番通りに見られていないことで直帰率が高くなっていると考えられます。Smart Phoneに
ついても、「レッスンの流れ」から入って来たユーザーの行動をヒートマップで確認する必要があります。
Smart Phone 再訪問
4 /pan_blog/?p=399 ロティ・オラン堀田先生の特別レッスンのお礼。 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog38 1.45 0:00:49 100.00% 76.32%
6 /tipo/photo_gallery パンの写真集 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用33 2.24 0:01:01 100.00% 57.58%
7 /tipo/makoto_hotta 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用55 1.84 0:00:39 0.00% 74.55%
9 /tipo/info/miyazaki TIPO 宮崎教室のサイトとブログがOPENしました。 | インフォメーション | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用30 1.80 0:00:54 0.00% 43.33%
(1)
(2)

IV ヒートマップ分析の手順(3)
数値データで見つけた問題点を、ヒートマップを使って確認し、改善策を選ぶ
20

21
PC、Smart Phone共に、新規訪問ユーザーの主な入口はトップページです（表(1)、(2)）。トップページの直帰率を比較すると、Smart Phoneユーザーの直帰率は、
PC直帰率より約20ポイント高くなっています。 Smart Phone向けトップページの直帰率を下げることができないか、ヒートマップで分析する必要があります。
1 「Smart Phone – 新規訪問」の訪問者の直帰率が高く、CVRが低い「Smart Phone – 新規訪問」の訪問者が入口にしているヒートマップ分析する。
6 /tipo_miyazaki/?utm_source=Yahoo&utm_medium=cpc&utm_term=%E3%83%91%E3%83%B3%E6%95%99%E5%AE%A4&utm_content=Yahoo%E5%88%9D%E5%9B%9E%E8%A8%AD%E5%AE%9A&utm_campaign=%E5%A4%A宮崎市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用12 2.92 0:00:57 100.00% 50.00%
9 /tipo/info/%E3%80%8C%E3%83%AD%E3%83%86%E3%82%A3%E3%82%AA%E3%83%BB%E3%83%A9%E3%83%B3-%E5%A0%80%E7%94%B0%E8%AA%A0-%E5%85%88%E7%94%9F-%E7%89%B9%E5%88%A5%E3%83%AC%E3%83ご参加ありがとうございました！「ロティ・オラン堀田誠先生特別レッスン in 鹿児島市」 | お知らせ | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用6 3.50 0:01:10 100.00% 66.67%
PC 新規訪問
4 /pan_blog/?p=399 ロティ・オラン堀田先生の特別レッスンのお礼。 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog38 1.45 0:00:49 100.00% 76.32%
6 /tipo/photo_gallery パンの写真集 | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用33 2.24 0:01:01 100.00% 57.58%
(1)
(2)
入口ページ
ランキング
「Smart Phone – 新規訪問」ユーザーのトップページの直帰率が高い
分析例

22
セグメント「Smart Phone – 新規訪問」トップページのクリックヒートマップ（1ページを5分割）
分析例
(1)
(2)
ファーストビューの少し下で、スクロール到達率が47％になっています（図(1)）。図(2)
の位置にあるメニューをタップすると、サイト全体のコンテンツを一覧することができ
ますが、新規訪問者にとって現状のファーストビューは、「サイト運営側が特に伝えた
いことが何なのか、よくわからない」状態になっています。ファーストビューですぐ視界
に入る位置に、重要なコンテンツへの導線を設置しておくことで、直帰率を下げること
ができると考えられます。
改善策の例
サイトロゴ
現在もあるメニュー＝優先度の高い
コンテンツへの導線
ファースト
ビュー
【改善策】
メニューを展開しなくても、
重要な導線がが視界に入
るようにする。

23
セグメント「Smart Phone – 新規訪問」トップページのアテンションヒートマップ（1ページを5分割）
分析例
「Smart Phone – 新規訪問」のユーザーは、
ファーストビュー以外は、じっくり見ていません。
（図(1)）
Ptengineの「ページ分析」機能を使うと、スマート
フォンでよく使われる展開メニュー（図(2)）の展開
後のクリック数を知ることができます。また、よくク
リックされた箇所ほど、透明→水色→黄色→赤色
となっていくので、どこかクリックされたか、パッと
見て把握できます。このサイトの場合、「レッスン
の内容」と「Blog」がよくクリックされているので（図
(3)、(4)）、展開メニューに入れておくだけでなく、
ボタンなどの形で、導線として外に出しておくべき
です。
セグメント「Smart Phone – 新規訪問」
トップページ右上
展開メニューのページ分析
(2)
(3)
(4)
改善策の例
(1)

8 /pan_blog/?p=114 栗の渋皮煮。 | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 6 2.67 0:00:59 100.00% 83.33%
8 /pan_blog/?p=220 ハニーセザム♪ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 6 1.17 0:00:03 100.00% 83.33%
10 /pan_blog/?p=216 高加水チャバタ♪ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 5 1.40 0:00:21 100.00% 60.00%
6 /tipo/info/%E3%80%8C%E3%83%AD%E3%83%86%E3%82%A3%E3%82%AA%E3%83%BB%E3%83%A9%E3%83%B3-%E5%A0%80%E7%94%B0%E8%AA%A0-%E5%85%88%E7%94%9F-%E7%89%B9%E5%88%A5%E3%83%ご参加ありがとうございました！「ロティ・オラン堀田誠先生特別レッスン in 鹿児島市」 | お知らせ | 鹿児島市天然酵母パン教室【ＴＩＰＯ（ティポ）】ホシノ天然酵母、自家製のルヴァン種を使用6 3.50 0:01:10 100.00% 66.67%
7 /pan_blog/?p=171 ライ麦パン☆ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 4 1.75 0:01:02 100.00% 50.00%
8 /pan_blog/?p=213 オレンジくるみパン★ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 3 1.00 0:00:15 100.00% 100.00%
8 /pan_blog/?p=216 高加水チャバタ♪ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 3 1.00 0:00:25 100.00% 100.00%
8 /pan_blog/?p=238 雑穀パン★ | 鹿児島市天然酵母パン教室【TIPO（ティポ）】のBlog 3 2.00 0:01:07 100.00% 66.67%
24
PCで直帰率が高いのは表(1)のトップページです。Smart Phoneサイトよりも一覧性が高く、直帰しにくいはずのPCサイトトップページが、なぜ、直帰率が高く
なっているのかは、ヒートマップで分析する必要があります。Smart Phoneサイトの表(2)は、過去のイベントを紹介したページですので、講師の先生の情報を目
的に流入してきたユーザーは直帰しても仕方ありません。表(3)のSmart Phoneトップページについては、P21、22で述べた改善案が有効です。
2
PC 新規訪問検索からの流入
(1)
検索からの
入口ページ
ランキング
「PCとSmart Phone – 新規訪問 – 検索からの流入」ユーザーのトップページの直帰率が高い
分析例
「Smart Phone・PC共通 – 新規訪問検索からの流入」の訪問者の直帰率が高い。「Smart Phone・PC共通 – 新規訪問検索からの流入」の訪問者が入口にしているヒートマップ分析する。
Smart Phone 新規訪問検索からの流入
(2)
(3)

25
アテンションヒートマップを見ると、写真とテキストを組み合わせてブロック状に並べた箇所（図(1)）には、アテンションが集まっています。また、このブロック内に
ある、詳細ページへのリンクも、比較的よくクリックされています（図(2)）。この写真とテキストを組み合わせたブロック状の箇所が終ると、スクロール到達率が
下がり、アテンションもあまりありません。このことから、ページ後半に並んでいる情報もブロック状にすることで、アテンションが集まりやすくなり、クリックされて、
結果として直帰率が下がることが期待できます。
セグメント「PC – 新規訪問 – 検索からの訪問」トップページのアテンションヒートマップ（1ページを3分割）
セグメント「PC – 新規訪問 – 検索からの訪問」トップページのクリックヒートマップ（1ページを3分割）
(1)
(2)
分析例改善策の例

26
上記は「レッスンの流れ」のヒートマップです。「レッスンの内容」から「レッスンの流れ」に遷移してきたユーザーは、コンテンツの構造が把握できているため、図
(1)、(2)にあるように、「『レッスンの内容』戻る」をよくクリックしています。一方、「レッスンの流れ」から見始めたユーザーにとっては、説明を途中から聴き始めた
感があり、コンテンツの内容が理解できないまま離脱する可能性があります。図(3)、(4) に、「先にレッスンの流れをお読みください」というリンクを設置する
ことで、このページを入口として入って来たユーザーの直帰率を下げることができると考えられます。
3
Smart Phone・PC共通「レッスンの内容」→「レッスンの流れ」の順で見てほしいコンテンツが、順番通りに見られていない「レッスンの内容」「レッスンの流れ」のページをヒートマップで分析する。
PC 「レッスンの流れ」ページ
Smart Phone 「レッスンの流れ」ページ
クリックヒートマップアテンションヒートマップ
クリックヒートマップ
(1)
(2)
(3) (4)
アテンションヒートマップ
※1画面を2分割

27
上記は「レッスンの内容」のヒートマップです。「レッスンの内容」から「レッスンの流れ」に遷移させることができれば、訪問者がレッスンの内容を把握することが
でき、CVRが高くなるはずですが、現在は、「レッスンの内容」から「レッスンの流れ」に遷移させるリンク（図(1)、(2)、(3)、(4))が目立たないため、訪問者をしっか
り誘導出来ていません。はっきり目立つボタンの形にして、訪問者の視界に入るように改善する必要があります。
3
Smart Phone・PC共通「レッスンの内容」→「レッスンの流れ」の順で見てほしいコンテンツが、順番通りに見られていない「レッスンの内容」「レッスンの流れ」のページをヒートマップで分析する。
PC 「レッスンの内容」ページ
(1)
(2)
Smart Phone 「レッスンの内容」ページ ※1画面を2分割
(3)
(4)

Ptengineを活用したウェブサイトの改善方法

Recommended

Recommended

More Related Content

More from Ptmind_jp

More from Ptmind_jp (20)

Ptengineを活用したウェブサイトの改善方法