Webサイト改善の手順

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」

Web サイト改善の手順

ver. 1.3.2Ptmind

https://www.facebook.com/groups/Website.Improvement.Open.Source/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」目次

■ はじめに P3

■ サイト改善の手順第 1 章　サイト改善の手順　全体像 P7

第 2 章　改善のインパクトが大きくなる場所を候補にする P9

第 3 章　ヒートマップ読み解き Check List P18

第 4 章　トップページやランディングページなどサイトの入口ページの改善策を練る P39

第 5 章　 A/B テスト P63

第 6 章　広告の選択Ｐ 90

第 7 章　 EFO （エントリーフォーム最適化） P95

■ 参考資料１：用語の説明 P114

■ 参考資料 2 ：ヒートマップの基本操作　（例： Ptengine ） P120

■ 参考文献一覧Ｐ 133

2


はじめに

3

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」1. この Project の Goal と背景

• Project のゴール : 「 Web サイト改善手法から属人性を排除する＝ Web サイト改善手法の標準化」

• Project の背景Web サイト改善コンサルティングの問題解決の手法や考え方が、担当コンサルタントのスキルが属人的に紐付いている場合、退職や休暇取得に伴いパフォーマンスが不安定になりコントロールが難しくなる。また、一部のコンサルタントにノウハウが集中することは、コンサルティング企業、クライアントの双方にとってリスクを高めることとなる。

コンサルタントの立場に立つと、日々の対応に追われることで慢性的な忙しさが続く状況から脱することが困難となる。また、クライアントの立場に立つと、 Web サイト改善コンサルティングが属人性を伴う商品である程、人件費の高いコンサルタントが長い時間を費やすことになるので、高額なコンサルティング費用の支払いを強いられることになる。

本 Project はこうした状況を改善することを目的としている。

4

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」2. この Project で期待される成果

• Web コンサルティング業界のサイト改善手法の標準化のきっかけとなる。• サイト改善手法や、ベストプラクティスを、企業の壁を越えて蓄積できるようになる。　＝　蓄積した改善手法や

ベストプラクティスは、一企業のナレッジではなく、業界全体のナレッジとなる。• Web コンサルティング業界全体の人材の育成に寄与する。• 複数社の Web コンサルティング企業が直面する類似の問題について、効率よく対応できるようになる。• 現在の Web コンサルティング業界に見られる、以下の課題を解決する。

(1) 属人的なスキル属人的なスキルに依存した運営体制のため、退職や休暇取得によるパフォーマンスへのリスクが高まる。

(2) コンサルティング手法のばらつき問題解決の手法や考え方、コンサルティング・ノウハウがコンサルタントによって異なり、コンサルタント毎のばらつきが大きく、コンサルティング企業としてのパフォーマンスが安定しない。

(3) コンサルティング手法標準化の阻害Web コンサルティング企業として組織で構築したマネジメント・フレームワークが、それを構築した企業以外の業界内の他の企業で活用されることはない。そのため、コンサルティング手法の標準化が実現できない。

5


サイト改善の手順

6


第 1 章　サイト改善の手順　全体像

7

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」サイト改善の手順　全体像

• サイト改善は、以下の手順に従って行うことで、効率的に進めることができる。

8

Step 項目内容使用するツール、手法等この手順書の該当箇所

Step 1▼ サイト分析サイト全体を分析し、ボト

ルネックとなっているページを特定する。

Google Analytics 、 Adobe Analytics 、 Ptengine

第 2 章

Step 2▼ ページ分析 Step 1 で洗い出したページ

を分析する。Ptengine 、ユーザーテスト（オフライン／オンライン）

第 3 章

Step 3▼ 改善策を

練るボトルネックを解消するための改善策を練る。

〃第 4 章Step 4

▼ A/B テスト練った改善策をテストする。 Optimizely 、 Google Analytics ページテスト

第 5 章Step5

▼Step 1 に

戻る

改善策の実装

A/B テストの結果を元に、ボトルネックを解消する。▼ユーザーと環境は変化し続けるので、 Step 1 に戻る。

Web 制作会社、ペライチ、Instapage 、など

－


第 2 章　改善のインパクトが大きくなる場所を候補にする

9

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善のインパクトが大きくなる場所の当たりを付ける

• 最初に、改善するインパクトが大きくなる場所の当たりを付ける。 Web サイトから改善のインパクトが大きくなりそうな場所を、改善する場所の候補としてピックアップし、その場所が現在どのような状態化を把握する。サイト全体から、ユーザー心理が大きく動く場所を、改善する場所の候補として選んでいく。代表的な場所は次の 3 つ。1. トップページやランディングページなどサイトの入口ページ2. 購入や会員登録などコンバージョンに至るプロセスのページ3. 「サイト内検索」「ランキング」「レコメンド」など、ユーザーの動きを変え、コンバー

ジョンに向ける重要なポイントとなるページ・機能

10

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 1 ：入口回数　上位 50 位までの URL を CSV ダウンロードする

• 入口回数が少ないページを改善しても、改善インパクトは小さい。まず、入口回数が多い上位50URL の CSV ファイルをダウンロードする。なお、次のように「直帰率が高くて当然」というページはダウンロードしたリストから削除する。「 Access Map のページ」「営業所一覧など電話番号等を確認するのが目的のページ」「計測対象外の他のサイトに遷移させるのが目的のページ」「コンバージョンを伴わない、 1 ページ完結のページ（例：事前申し込み不要のイベント告知ページ）」など。

• このデータは、 PC と Smart Phone に分けて使用するので、デバイス： PC 、デバイス： Smart Phone

のセグメントを掛けた上で、それぞれの CSV ファイルをダウンロードする。（ Google Analytics の場合、「セカンダリディメンション」で「ページタイトル」を表示させてからダウンロードする。）

11入口回数が多い入口ページ一覧

ユーザーが利用した端末、 PC とSmart Phone それぞれについて、入口ページの一覧をダウンロード。

ユーザーの利用端末でフィルターを掛ける。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 2 ：入口ページを 4 象限に分ける

• 「手順 1」でダウンロードした入口ページを「直帰率 60％」「平均滞在時間　 PC 30秒 /Smart

Phone 15秒」で下記の図のよう 4象限に振り分ける。（ PC と Smart Phone に分けて作成する。）「手順 1」で入口回数の上位 50位までにしてあるので、 4象限とも、トラフィックは多いはずだが、サイトを構成する Web ページの数が少ない場合は、 30位まで、あるいは 20位までというように調整する。

12

平均滞在時間：PC 30 秒 /Smart Phone 15 秒未満

平均滞在時間：PC 30 秒 /Smart Phone 15 秒以上

直帰率： 60 ％未満 C A

直帰率： 60 ％以上 D B

• 象限 B （平均滞在時間長、直帰率高）は、平均滞在時間が長いページはユーザーの興味を引き付けることに成功しているので、直帰率を改善することで大きな効果が期待できる。 4象限の中で改善インパクトが最も大きいのはここ。

• 象限 C （平均滞在時間短、直帰率低）は、ゴールへの貢献度が高い割に平均滞在時間が短いので、平均滞在時間を延ばすことができれば、ある程度の効果が期待できる。

• 象限 D （平均滞在時間短、直帰率高）は、簡単には改善効果が見込めないので、改善を見送るか、改善する場合は抜本的な作り変えをする。象限 A （平均滞在時間長、直帰率低）は、更に入口回数を増やしたり、同じパターンで成功できるコンテンツを作ったりすることで、サイト全体のパフォーマンス向上に寄与する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 3 ：象限 B （平均滞在時間長、直帰率高）に集中して分析する①• 前ページで見た 4象限の中で、改善インパクトが最も大きい「象限 B （平均滞在時間長、直帰率高）」に集中して分

析する。「象限 B」に入った Web ページに下記の合計 10種類のセグメント（注）でフィルターを掛けて、「直帰率が高い」 Web ページワースト 5 を確認する。このワースト 5 が P32 以降で改善する対象の Web ページとなる。

• （注）セグメントとは、似た属性を持つ集団のこと。たとえば、ユーザーの Cookie情報を見て、サイトを初めて訪れたユーザーか、 2回以上訪れたユーザーかを分けることで、「新規」「再訪問」という 2 つのセグメントに分け、サイトを訪問した目的や商品の認知度が違う 2 つの集団として見ることができる。

• 「検索」と「キャンペーン」に関しては、更なる深堀りが必要。（次ページ参照）

13

and

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 3 ：象限 B （平均滞在時間長、直帰率高）に集中して分析する②

• 「検索」に関しては、特にどのキーワードに関して「平均滞在時間長、直帰率高」だったのかを確認する必要がある。同様に、「キャンペーン」に関しても、特にどのキャンペーン（＝広告）が「平均滞在時間長、直帰率高」だったのかを見ておく必要がある。

14

キャンペーンの確認検索キーワードの確認

【参考】キーワードには「ブランドキーワード」と呼ばれるものがある。「ブランドキーワード」は会社や商品の検索に使用するキーワード（商標用語を含む）のことで、「ブランドキーワード」で流入してきたユーザーの直帰率は、低くなるのが一般的。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 4 ：サイト改善策の選択• 「象限 B」の Web ページを平均滞在時間長、直帰率高にさせていた主なセグメントがどれかによって、当該ページの改

善策も違ってくる。改善対象ページが、どのセグメント（下記の表の左側の列）に対して改善が必要かが分かったら、表の 1 から 11 の改善策の中で「●」印が付いている改善を行う。各改善策の具体的な内容は、第 3 章で解説。

15

1. ページレイアウトの改善

2. CTA の改善

3. 「読まされるストレス」の軽減

4. 見たいものを見せる

5. サクセスを感じさせる

6. Don’t worry. 7. ユー

ザーを助ける情報を提供する

8. 関連情報を提供する

9. ユーザー・レビュー等を提供する

10. シンパシー

11. Webページのロード時間を短く

新規訪問ノーリファラー

● ● ●

検索 ● ● ● ● ● ● ●

ソーシャル

● ● ● ● ●

参照サイト

● ● ● ●

キャンペーン

● ● ● ● ● ● ● ● ● ●

再訪問ノーリファラー

● ●

検索 ● ● ● ●

ソーシャル

● ●

参照サイト

●

キャンペーン

● ● ● ● ● ● ●

指標の数値が悪かったセグメント

Web サイト改善策

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 5 ：象限 B （平均滞在時間長、直帰率高）改善の効果測定方法

• 象限 B （平均滞在時間長、直帰率高）の効果測定は、下記の「遷移率」を KPI として行う。

16

ボタン or テキストリンク

入口ページ入口ページの次に見てほしいページ遷移

(a) 入口回数

(b) このページを入口として入って来たユーザーがこの「ボタン or リンク」をクリックした回数　※計測方法については次ページを参照。遷移率（％）＝ (b)/(a)

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」手順 5 ：当該ページを入口として入って来たユーザーが特定の「ボタン or リンク」をクリックした回数の計測方法

• 「ボタン or リンク」がクリックされた数をカスタムイベントで計測しても、当該ページから入って来たユーザーに加えて、サイト内の他のページを入口として遷移してきたユーザーの分も含まれてしまう。そこで、当該ページを入口として入って来たユーザーセグメントのフィルターを掛けることで、ほぼ正確に計測することができる。（当該入口ページから他のページに遷移し、再び当該入口ページに戻ってきてクリックした分も含まれるので完全に正確ではない。）

17

イベントの回数に入口ページでフィルターを掛ける


第 3 章　ヒートマップ読み解き Check List

18

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 」について• ヒートマップは、ただ眺めているだけも、様々な気づきが得られる可能性がある。しかし、業務の

効率化という観点から考えると、次ページ以降で紹介する「ヒートマップ読み解き Check List 」を脇に置いてヒートマップを見て行くことで、ヒートマップをより効率的に活用することができる。

19

ただ眺めているだけ＝非効率

たまたま気が付く

「ヒートマップ読み解き Check List」を使う＝効率的

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 」一覧• 次ページ以降で、以下の項目について解説する。

1. 重要でない現象はスルーする2. ファーストビューはしっかり見られているか3. ユーザーのニーズを読み取る4. LP （ランディングページ）の余計な出口をふさぐ5. もっとユーザーに詳しく伝えるべき情報はないか6. コンテンツの評価の基本は、平均滞在時間とスクロール到達率7. 情報を見せる順番を検討する8. スクロール到達率の大きな段差は、レイアウト失敗の可能性あり9. 要素が多すぎるページは、すっきりさせてヒートマップで検証

20

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 1 ：重要でない現象はスルーする①

• 以下の現象は、多くの Web ページで見られる日常的な現象。これらについては、ユーザーの自然な動きなので、原則として、改善策を考える必要は無い。

21

ファーストビューを過ぎると、一気にアテンションが少なくなる＝　多くのサイトで見られる現象。問題は無い。

ページの一番下のスクロール到達率が、 10％未満＝　 5～ 10％がよく見られる値。問題は無い。

トップページなのにサイトロゴ（＝トップページに戻るリンクが張られている）がよくクリックされる＝　多くのサイトで見られる現象。問題は無い。

サイトロゴ

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 1 ：重要でない現象はスルーする②

• EC サイトの場合は、初めから改善できない“壁” が存在する。下記のヒートマップは、あるアパレル EC サイトのスマートフォン用商品詳細ページ 1 ページを 5 分割したもの。 5 分の 1 の終わり付近で、早くもスクロール到達率は 31％（＝約 7割がここまでで離脱）となっている。しかしこれは「買おうとしない人はそれ以上見ない」という状況であるので、 Web ページを改善してスクロール到達率を上げることはむずかしい。

22

スクロール到達率 31%

EC サイト　スマートフォン用商品詳細ページ　 1 ページを 5 分割

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 2 ：ファーストビューはしっかり見られているか①

• 下記の A～ H のヒートマップは、入口ページ（以下、 LP ）のアテンションヒートマップとして、よくあるパターンを 8点集めたもの。ここでクイズ。以下の 8点のうち、一般的に、コンバージョン率（以下、 CVR ）が高いと考えられる LP のアテンションヒートマップはどれか。

23

A B C D E F G H

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 2 ：ファーストビューはしっかり見られているか②

• クイズの答え。 CVR が高いと考えられるのは、 A， B， C 、 D 。 LP はディスプレイ広告やリスティング広告等で、予めその LP

のターゲットになりそうな人を集客しているので、もし、アテンションヒートマップで赤色の箇所が 1箇所も無ければ失敗。そういう意味では、 E 、 F 、 G 、 Hも集客が完全に失敗しているわけではない。

• しかし、無視できないのがファーストビューの色。 Web ページが上から順番に見られるものである以上、どんなページでも最も多くのユーザーが見るのはファーストビュー。 LP のファーストビューは、最もユーザーに訴求したい大事な情報が掲載されているはずのエリアで、正しいターゲティングに基づく集客ができていれば、ファーストビューが赤色になる可能性は高い。そして、逆の言い方をすれば、ファーストビューがユーザーに注視されないのなら、そこから下のエリアでユーザーの心をつかむことはむずかしく、また、ファーストビューから遠くなればなるほど程、スクロール到達率が下がる、すなわち、閲覧するユーザーの数自体も減少していくので、ファーストビューでの失敗を、ページの下の方で挽回するというのは極めて困難。

24

A B C D E F G H

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 2 ：ファーストビューはしっかり見られているか③

• A は、ファーストビュー以外は、注視されている箇所が少ないので、 CVR が低くなりそうだと思われるかもしれない。しかし、ユーザーにとって、信頼できる企業、ブランドが運営しているサイトであれば、ファーストビューの情報だけで納得出来れば、即座にコンバージョン、たとえば、すぐに資料請求という行動に移る可能性がある。したがって、 A は必ずしも悪い型ではない。 Cも、ファーストビュー以外は、あまりじっくりとは見られてないが、 A と同じ理由で、必ずしも悪い型ではない。知名度の高い企業、ブランド等が運営している LP の場合、 A 、 C で CVR が高いという例はある。

• 一方、 B 、 D は、ファーストビュー以外もよく見られている。これは、サービスの内容、たとえば購入後のサービスなどもよく読んでから購入したいと考えるようなユーザーが多い場合に見られる型。 D は上から下までじっくり見られている型。途中に分かりにくい説明、むずかしい説明があると、赤色は途切れてしまうので、最初から最後まで、ユーザ－にとって分かりやすい説明が掲載されている、優れた LP である可能性が高い。

25

A B C D

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 2 ：ファーストビューはしっかり見られているか③

26

A B C D

LP は、あるターゲット層を狙って集客し、集客したユーザーにコンバージョンしてもらうためのページ。うまく狙い通りのユーザーを集められたかは、通常、アテンションヒートマップのファーストビューの部分に現れる。（例外については次ページ参照）ここが濃い赤色になっていなかったら、集客の方法、ファーストビューで訴求する内容をそれぞれ変えてみて、CVR の変化とヒートマップの変化の両方を見て行く必要がある。

Check

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 2 ：ファーストビューはしっかり見られているか④

27

EC サイトの商品一覧ページ（特にアパレル等）などは、下記のヒートマップの例のように、ページ内の個々の商品の魅力がそのままヒートマップとなって表れる。ファーストビューにアテンションが集まらなかったとしても、それは、たまたまファーストビューに、ユーザーが関心を持つ商品がなかった無かっただけという可能性もある。

Check

Spring フェア　 LP GW フェア　 LP

ファーストビューのエリアにたまたまユーザーの興味を引く商品が無かった。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 3 ：ユーザーのニーズを読み取る

• 複数の FAQ が 1 ページにまとめられているような場合、アテンションヒートマップを使えば、ユーザーはどの Q&A をよく読んでいるかを知ることができる。ここから、ユーザーがどんな情報を必要としているのか分かる。

28

サポート系ページを分析すると、ユーザーが何に困っているかを知ることができる。Check

【事例】Web 分析ツールのFAQ ページ

各 Q&A の「 Q]

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップ読み解き Check List 4 ： LP （ランディングページ）の余計な出口をふさぐ

• 一般的な LP のフッター付近のクリックヒートマップを見ると、右の図のように、「会社案内」や「プライバシーポリシー」が比較的多くクリックされている LP が多く見られる。これは、登録などをする前に、念のため、どのような会社か確認しておこうと考える慎重派のユーザーがある程度いるため。しかしここで、コーポレートサイトの会社案内にリンクを張ってしまったのでは、ユーザーがもう LP に帰って来なくなる可能性がある。

29

コンバージョン

ページ


ページ


ページ

ランディングページ

（ LP ）

CTA

CTA

CTA

LP専用会社案内

LP専用プライバシー

ポリシー

• その対策としては、右の図のように、 1 ページのLP 毎に専用の「会社案内」ページ等を作って、ユーザーが会社案内を確認し終わったら、必ずLP に戻って来てくれるようにする。この LP専用の「会社案内」等には、 LP に戻る以外は一切リンクを設置しない。（ SEO 対策としては、同じ内容のページを 2URL 以上持つのはよくないので、検索エンジンにインデックスされないようにするか、 canonical 属性を使って、本来インデックスしてほしいページを示す。）

CTA=Call to Action の略。コンバージョンにつながるボタン、リンクなどのことを指す。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 5 ：もっとユーザーに詳しく伝えるべき情報はないか①

• ユーザーのニーズがあるのに、詳しく伝えることができていない情報を探す。クリッカブルではないのに、よくクリックされている箇所があったら、そこからユーザーのニーズが推測できる可能性がある。

30

クリッカブルではないのに、よくクリックされている箇所はないか？

ユーザーが検索に使用したキーワードに関するコンテンツは、スクロール到達率が高い位置にあるか？

Checkクリックできないのにクリックされている箇所

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 5 ：もっとユーザーに詳しく伝えるべき情報はないか②

• 右のヒートマップは EC サイトの掃除機の商品詳細ページ。 1枚の画像の中で、「レバーを押すとブラシが出ます」の部分だけが、よくクリックされている。写真をクリックするユーザーの多くは拡大画像を期待しているので、クリックヒートマップから、この商品のどの点に興味があるのかを読み取ることができる。（この事例の場合は、写真をクリックしても何も起こらない。）

31

クリックヒートマップから、ユーザーの興味・関心を読み取ることができる。Check

「レバーを押すとブラシが出ます」の説明写真

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 5 ：もっとユーザーに詳しく伝えるべき情報はないか③

• クリックヒートマップは、クリッカブルになっている箇所、クリッカブルになっていない箇所、両方のクリックの記録を残すことができる。このことから、ユーザーがどのようなテーマ、トピックに関心を持っているのかを推測することができる。右の図のようにクリックとアテンションが集まっている箇所からキーワードを抜き出していくことで、ユーザーが関心を持っているキーワードを探ることができる。

32

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 5 ：もっとユーザーに詳しく伝えるべき情報はないか④

• 下記のヒートマップは、 EC サイトの布団の商品紹介ページ。「素材の説明」欄の素材の写真がよくクリックされているが、リンクは張られていない。このような場合、素材の説明をより詳しく掲載することで、この商品の CVR （コンバージョン率）をアップできる可能性がある。

33

購入ボタン購入ボタン購入ボタン購入ボタン購入ボタン購入ボタン購入ボタン購入ボタン

素材の説明素材の説明

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 6 ：コンテンツの評価の基本は、平均滞在時間とスクロール到達率

• 右の図のアテンションヒートマップを見ると、「導入事例 2」（真ん中のコンテンツ）について次の 3点が分かる。

1. 3点の中で最も短い記事であることを勘案しても、他の 2 つの記事より、明らかに平均滞在時間が短い。

2. 最後まで読んだユーザーの割合が、他の 2

つの記事よりも明らかに低い。3. 他の 2 つの記事よりも図が多めの記事で

あることを勘案しても、じっくり見られている箇所が少ない。

• 以上のことから、「導入事例 2」は、コンテンツとしては、あまりじっくりと読まれていない可能性が高いことが分かる。

34

コンテンツを評価する際には、平均滞在時間とスクロール到達率を見る。Check

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 7 ：情報を見せる順番を検討する①

• 「ファーストビュー」と「フッター」除いた部分は、ユーザーに見てほしい箇所がアテンションを集めているか？見てほしい箇所が見られていない場合は、まずは順番を変えてみることを検討すべき。

35

ABC

D

見せたい要素は上に設置ユーザーが関心を持っている要素は上に設置（理由：ユーザーに探させない）

順番を変える場合は、 A/B テスト（後述）により、ユーザーの反応を見てから、最終決定をする。

Check

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 7 ：情報を見せる順番を検討する②

• 「重要なコンテンツは上」ルールは破ってもよい。スクロール到達率を見て、ページの下の方までユーザーを十分にひきつけていれば、あえてレイアウトを変更する必要は無い。下記の例は、キッチン用品 EC サイトの商品詳細ページの例。キッチン用品を実際にキッチンに置いた様子はページのかなり下にあるが、約 7割のユーザーが到達している。「商品画像」「特長の製品」よりもユーザーが注視しているが、これだけのユーザーが到達していれば、改善は必要ない。

36

商品画像

特長の説明

ギャラリー（キッチンに置いた様子）

スクロール到達率67％順番を変えるべきかどうかの判断基

準はスクロール到達率。

Check

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 8 ：スクロール到達率の大きな段差は、レイアウト失敗の可能性あり

• 通常、ページの上から下に行くにしたがって、スクロール到達率は下がっていく。しかし、目立って急激に下がっている箇所（目安は－ 30％）があったら、その箇所は、レイアウトが失敗している可能性がある。

37

スクロール到達率が 30％以上一気に下がっている個所は要注意。

途中で「終わった感」があるレイアウトは、ユーザーを離脱させ、機会損失を発生させる。

Check－ 34 ％

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」「ヒートマップ読み解き Check List 9 ：要素が多すぎるページは、すっきりさせてヒートマップで検証

• 「ページにクリックできる要素が多くて、どの要素もあまりクリックされていない」という状況があるとする。「クリックされない要素をカットして、すっきりしたデザインにすることで、それぞれの要素がよりクリックされるようになるか？結果として、そのページの直帰率は下がるか？」このような仮説は、ヒートマップに A/B テスト（後述）を組み合わせることで、検証することができる。

38

要素を削った場合のユーザーの行動もヒートマップで確認。Check


第 4 章　トップページやランディングページなどサイトの入口ページの改善策を練る

39

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 1 ：　ページレイアウトの改善①　• ユーザーにとって有用なコンテンツ・機能をファーストビューに近い位置に持って来る。

【ケーススタディ①】• 《問題点》　❶のエリアは❷のエリアに比べてクリックされていないのに、広いスペースを取っている。❶のエリアが広すぎること

で、❶のエリア内で、スクロール到達率が下がってしまっている。• 《改善策》　❷と❶のエリアを入れ替えることで、トップページの直帰率が下がる可能性が高い。また、❸のボタンは、あまりク

リックされておらずニーズが少ないので、ボタンの一番最後に移動させた方がよい。

40

❶

❷❸ 左：クリックヒートマップ右：アテンションヒートマップ

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 1 ：　ページレイアウトの改善②　• ユーザーにとって有用なコンテンツ・機能をファーストビューに近い位置に持って来る。

【ケーススタディ②】• 《問題点》　❶のクリックできないバナー、❷のほとんどクリックされない動画の下に、本来クリックしてほしい❸があるため、機会損失が発生している。

• 《改善策》　最上部に❸を置き、❶の情報は❸と合成する。次に❷を置く。

41

❶

❷

❸

クリックヒートマップ

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 1 ：　ページレイアウトの改善③• 「終わった感」があるレイアウトを改善する。

【ケーススタディ】• 《問題点》　ページ上部にスクロール到達率が 100％から 67％に一気に下がっている箇所がある。「終わった感」を感じさせるレイアウ

トになっていることが問題。• 《改善策》　ユーザーに「終わった感」を感じさせる主な原因は、「レイアウトが急に違うパターンに変わる」「必要以上に上下に余白が

取られている」。この 2点を改善することで、スクロール到達率が急に下がるのを防ぐことができる。

42

スクロール到達率　 100%

左：クリックヒートマップ右：アテンションヒートマップ

スクロール到達率　 67%

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 2 ：　 CTA の改善①　• テキストを変える、設置する位置を変える、大きくする。

「 CTA」とは「 Call To Action」の略で、 Web サイトの訪問者に、サイト運営側がしてもらいたい行動をしてもらうことを指す。具体的には、ボタンやリンクを設置して、それをクリックしてもらうことによって実現する。

■ CTA の改善 1 ：テキストを変える下記のように、 2 つ以上のバリエーションを制作し、 A/B テストでコンバージョン率が高いテキストを見つける。

43

問合せ相談するバリエーション 1 バリエーション 2

■ CTA の改善 2 ：設置する位置を変えるCTA の位置の変更を検討する場合は、下記の事例のように、「どこに置くか」というより「どう見せるか」を検討すべき。

左の 2 つの事例では、記事をスクロールしても、 CTAが同じ位置に固定表示されている。

【事例】Kissmetrics Bloghttps://blog.kissmetrics.com/

■ CTA の改善 3 ：大きくするCTA が設置してあるページでは、 CTA よりも目立つ要素が無いのが理想的だが、 CTA 以外の目立つ要素も設置しなくてはならない場合は、 CTA を大きくして、ページ内で一番目立つ要素にする。

【事例】The Daily Egghttp://blog.crazyegg.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 2 ：　 CTA の改善②• 「ユーザーに次にしてほしいアクション」が 1 つでない時は、 1 箇所にまとめる。

特に BtoB サイトの場合、 Web ページを見て製品・サービスに関心を持ったユーザーが次の取る可能性があるアクションは 1 つではない。下記の事例のように、可能性のあるアクションへの導線が 1箇所にまとまっていれば、ユーザーにとっては探す必要が無いので時間の節約となり、同時にユーザーの直帰、離脱を防ぐことができる。

44

【事例】LAN スイッチ - スイッチ - Cisco Systemshttp://www.cisco.com/web/JP/product/hs/switches/lan_switches.html

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 2 ：　 CTA の改善③• 「ボタンを押さないなら、直帰（離脱）するしかない」という状況を作らない

人間は、選択肢を 2 つ与えられると、どちらかを選ばなくてはと考える習性がある。この習性を利用して下記の事例では、「資料ダウンロード or お客様事例を見る」という 2 つの選択肢を与えることで、直帰（離脱）の可能性を低くしている。

45

【事例】サービス概要 - Treasure Datahttp://www.treasuredata.com/jp/product

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 3 ：　「読まされるストレス」の軽減①　• 長文のテキストだけのページはユーザーを離脱させる。

長文のテキストだけのページはユーザーを直帰させる原因になる。チャート、図、グラフ、イラストを多用するようにする。複数の項目についてユーザーにアピールしたい場合は、下記の事例のように、短時間で全体の項目を一覧できるようにした上で、詳しく知りたい項目を読むことができるようにする。

46

【事例】Dropbox トップページhttps://www.dropbox.com/

全項目をはじめから詳しく説明すると、文章の多い長いページとなり、ユーザーが途中で直帰または離脱してしまう可能性が高くなる。そうなると、全項目を見てもらうことができない。まずはユーザーに全体を知ってもらうことを優先する。

「詳しくはこちら」をクリックすると、詳しい説明のページが開く。

イラストを使って、親しみやすい雰囲気を演出する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 4 ：　「読まされるストレス」の軽減②　• 途中で長文のテキストが現れると、そのエリア以降が読まれなくなってしまう可能性がある

多くのユーザーは、長文のテキストを時間を掛けて読むことが好きではない。下記の事例の EC サイトの Smart Phone向け商品詳細ページでも、長文のテキストが表示されたところで、ユーザーの集中力が途切れてしまっていることが推測される。 Smart Phone向けサイトにおいては、 1画面のほとんどを長文テキストが占めるようなページは避けるべき。

47

【事例】アパレル EC Smart Phone向けサイト商品詳細ページ

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 5 ：　見たいものを見せる①　• クリッカブルではない箇所がクリックされていたら、そこにユーザーが欲しいものがある可能性がある。

左下の事例は、ホテルのキャンペーン用ランディングページの客室の写真のクリックヒートマップ。ユーザーは客室の拡大写真を見ることを望んで、クリックしていると考えらえるが、このページでは、クリックしても何も起こらない＝拡大写真は表示されない。このように、クリッカブルではない要素がクリックされていたら、そこにユーザーのニーズが現れていると考えるべき。このサイトの場合は、客室の写真をタップしたら、拡大写真が表示されるよう、改善した方がよい。右下の事例では、リンクが張られていない「 RANKING」の文字がクリックされている。このアパレル EC サイトの Smart Phone 用トップページには売上ランキングの 1～ 3位までしか掲載されていないが、 4位以降も見たいユーザーがいることが分かる。

48【事例】ホテルのキャンペーン用ランディングページ、 Smart Phone 用サイト

【事例】アパレル EC サイト、 Smart Phone 用トップページ。

クリッカブルではない客室の写真がタップされている。クリッカブルではない「 RANKING」の文字がタップされている。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 5 ：　見たいものを見せる②　　• ユーザーのアテンションが集まっている場所に、ユーザーの欲しいものがある。

下記のアテンションヒートマップは、マンション物件サイトの「周辺環境」のページ。最もアテンションが集まっているのは、「交通アクセス」（図❶）。次にアテンションが集まっているのは、「教育」（❷）、「子育て」（❸）。このマンションの購入を検討している見込み客は、「子育て」と「教育」に関心が高いことが分かるので、この 2 つの情報を追加することで、直帰率を下げ、購買意欲を高めることができると考えられる。

49

【事例】マンション物件サイト「周辺環境」のページ

❶

❷

❸

交通アクセス

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 5 ：　見たいものを見せる③• 流入元で訴求しているキーワードが、ランディングページで目に飛び込んでくるようにする。

リスティング広告などから集客する場合、広告の訴求ポイントがランディングページで、すぐにユーザーの目に飛び込んで来るようにする。

50

広告訴求ポイント

訴求ポイント

集客

訴求ポイントがユーザーの目に飛び込んで来るようにする

流入元の Web ページランディングページ

〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇

■訴求ポイントの説明〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇〇

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 5 ：　見たいものを見せる④• コンテンツマーケティングでは、完読率の改善を行う

記事を読み終えたユーザーの割合を「完読率（ read-through-rate： RTR ）」と呼ぶ。コンテンツマーケティングにおいては、 RTR が低いコンテンツについては、改善の余地があると言える。 RTR はヒートマップツールの「スクロール到達率」で計測することができる。下記の記事の場合、完読率は約 28% 。完読率が 10％未満の場合は、改善優先度が高い。改善策は、下記の 2点。• サイトユーザーの好みを知る。• 説得力があって、視覚に訴える（＝キャプチャー等を多用した）記事を書く。

51

記事の終了地点

スクロール到達率

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 6 ：　サクセスを感じさせる①• 商品の仕様、スペックが主役ではなく、その商品を使うことで、ユーザーがどのように Happy になるかを示すことが重要。①

ユーザーは自分が抱えている問題を解決するために、解決策を探している。収納の悩みを抱えた人は、収納用品によって、物を片付けることがゴール。商品単体の写真ももちろん必要だが、下記の事例のように、「その商品を購入したら、自分が抱えている問題をどのように解決できるのか」を見せることが重要。「解決策」を見せることで直帰率は下がり、コンバージョン・レートは上がる。

52

【事例】日用品サイトの EC サイト収納用品商品詳細ページ

収納用品を実際に部屋に置いて、物を入れた写真がよくクリックされている

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 6 ：　サクセスを感じさせる②• 商品の仕様、スペックが主役ではなく、その商品を使うことで、ユーザーがどのように Happy になるかを示すことが重要。②

ユーザーが、どのような問題を、どのように解決できるのかを示す。下記の事例では、 Square 社のクレジットカードリーダーが、 IC

カードと磁気ストライプの両方に対応していることが一目で分かるように、写真を効果的に使用している。

53

【事例】SQUARE リーダー｜スマホ決済なら Squarehttps://squareup.com/jp/reader

ICカード、磁気ストライプの両方に対応していることが一目で分かる。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 7 ：　 Don’t worry.

• ユーザーが不安に感じている点を解消する。「丁寧にサポートします」と書いても、ユーザに対する説得力はあまり無い。下記の事例のようにユーザーを安心させる具体的な情報を掲載すべき。

54

【事例】Unbounce 　 TOP ページhttp://unbounce.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 8 ：　ユーザーを助ける情報を提供する①• 「ビジネスのどのような課題をどのように解決できるか」を示さなくてはならない。まずは「どのような課題を」を示してクリックを誘う。

複数の「課題」とそれに対する「解決方法」を同時に見せると、説明の多い、ユーザーにとって読むのが大変なページになる。下記の事例のように、まずユーザーの課題を整理して見せ、ユーザーの課題を理解していることを示した上で、「解決法を見る」で入口ページからサイト内へと誘導するのは、直帰率を下げるための効果の高い構成の方法。

55

【事例】クラウド型顧客管理 (CRM) - 課題解決http://www.salesforce.com/jp/smallbusinesscenter/solutions.jsp

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 8 ：　ユーザーを助ける情報を提供する②• すべてのユーザーは業務の効率化を行いたいと考えているので、業務の効率化に関わるフレーズが目を引けば、ユーザーを直帰させずに済む。

ユーザーを助けるとは、「ユーザーが今までやりたかったができなかったこと」を「できるようにしてあげる」こと。下記のように、「何ができるようなるのか」という切り口で文章を書くと、ユーザーを引き留めることができる可能性が高まる。

56

【事例】Features | Domohttps://www.domo.com/jp/product

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 9 ：　関連情報を提供する• 何かを調べるためにサイトを訪問したユーザーを直帰させないために、関連する情報のリンクを見せる。

真剣に情報を探しているユーザー程、入口ページに掲載されている情報にある程度満足したら、関連性の高い記事へのリンクが視界に入れば、クリックする。ユーザーが関連情報のページに遷移してくれれば、直帰率は下がる。

57

事例After-School Snacks: KidsHealthhttp://kidshealth.org/parent/nutrition_center/healthy_eating/afterschool_snacks.html

この記事のテーマは” After-School Snacks” 。“MORE ON THIS TOPICS” の欄には、このテーマに関連性が高い記事のタイトルが並んでいる。

関連性が高い記事

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 10 ：ユーザー・レビュー等を提供する①• 「これがあれば売上が上がる」というように、直感的に刺さるレビューを掲載する。①

下記の事例のタワーレコードは、アーティストのライブ会場に出向いて行って CD の販売を行う。支払いが現金でしかできない場合と、クレジットカード決済もできる場合とでは、売上が大きく変わってくることが容易に想像できる。ユーザーレビューは、見込み客に成功を予感させるものを掲載することが重要。

58

【事例】Square - iPhone 、 Android 、 iPad でクレジットカード決済。http://square-prom.jp/lp/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 10 ：　ユーザー・レビュー等を提供する②• 「これがあれば売上が上がる」というように、直感的に刺さるレビューを掲載する。②

導入事例はたくさんあった方が良いが、入口ページにおいてユーザーは、たくさんの事例を読む時間は無い。したがって、印象に残る、刺さるユーザーレビューを 1点掲載し、そこから、導入事例集のコンテンツに誘導するのがよい。

59

【事例】Unbounce 　 TOP ページhttp://unbounce.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 10 ：サイト改善の手法 (9) 　ユーザー・レビュー等を提供する③• 注目度が高いユーザーレビューは、コンバージョンのきっかけになる。

下記の事例（＝ホテルのキャンペーン用ランディングページ）のユーザーレビューは、長いページの後半の中で唯一アテンションを集めている。ここでは、家族旅行でこのホテルを利用したユーザーが、ホテルが子供たちに好評だったというレビューが、アテンションを集めている。こうした場合、「子供たちに好評だった」というレビューが予約増のきっかけになる可能性があるので、同様のレビューをもっと掲載すべき。

60

アテンションが集まっている箇所には、以下の文章がある。「多分、次回の家族旅行も子供達のリクエストで●●さんにお邪魔すると思います。ありがとうございました」【事例】ホテルのキャンペーン用ランディングページ。 Smart Phone 用サイトのため、縦に長く、右の 2列で 1ページ分のアテンションヒートマップ。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 11 ：　シンパシー• 「こうすれば上手くいく」とは違った切り口もある

ユーザーが求めているのは成功に関わるツールやスキル、ノウハウだけではない。ユーザーの職場には多くの「失敗」があふれており、下記の事例のように「失敗」を経験したユーザーに共感することも、ユーザーを直帰させない Web コンテンツを作る際に重要。これはビジネス書のタイトルを考える作業に似ている。ユーザーと問題を共有するところから、コンテンツの書き出しを始める。

61

【事例】なぜ、プロジェクトの 7割が失敗するのか？ (1/4) - Cisco Customer Bridge - Cisco Systems http://www.cisco.com/web/JP/news/cisco_news_letter/mail/0210/special/index.html

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」改善策 12 ：　ロードタイムを短くする• ロードタイムを短くすることが、直帰率の引き下げに繋がる。

長いロード時間はユーザーにストレスを与え、直帰させる原因になる。競合他社のサイトのロード時間が短ければ、今後ユーザーは他社のサイトを利用する可能性がある。スクリプトを追加したり、ページをリニューアルしたりした場合は、ロード時間が長くなっていないか確認する必要がある。ユーザーに読み込み完了まで待ってもらう必要がある時は、読み込みが何％完了したか（または、読み込み完了までの残り時間）を表示すべき。

62


第 5 章　 A/B テスト

63


第 5 章　 A/B テスト第 1節 Google Analytics + Ptengine で A/B テスト

64

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」1. Google Analytics 「ウェブテスト」の設定

• Google Analytics の「 A/B テスト」は、「ウェブテスト」という項目で、「行動」カテゴリーの中にある。「ウェブテスト」のページで、まず「テストを作成」をクリック。

65

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」1. Google Analytics 「ウェブテスト」の設定　

• 「このテストの名前」を入力し、「このテストの目的」を入力。「テスト対象のトラフィックの割合」「重要な変更内容に関するメール通知」「詳細オプション」は特に変更する必要がない。「次のステップ」をクリック。

66


• ここからは「オリジナル」のページと「パターン 1」「パターン 2」の 3種類のページでテストを行うという前提で進める。「テストするウェブページ」にそれぞれの URL を入力して、「次のステップ」をクリック。なお、「オリジナル」は Ptengine のヒートマップで画面を呼び出す際にもA/B テストが実行され、確認したい画面が呼び出せないので、「オリジナル」のヒートマップを確認したい場合は、「オリジナル」と同じ「パターン」を別に 1 パターン設定しておく必要がある。

67

「オリジナル」と同一の画面をヒートマップで確認したい場合は、「オリジナル」と同一の「パターン」の URL を 1つ用意しておく必用がある。


• 「手動でコードを挿入」をクリックして表示されるテストコードを、「オリジナル」ページのhead開始直後に貼り付ける。「オリジナル」ページと「パターン」ページの両方をアップロードして、「次のステップ」をクリック。

68


• 「テストを開始」をクリックして、テストを開始。なお、 Google Tag Manager を使用している場合、「テストコードの検証」で「 Google アナリティクストラッキングコードが見つかりません。」と表示されても問題ない。

69


• Google Analytics の「ウェブテスト」の場合、ユーザーが「オリジナル」の URL （ここでは、 http://steam.sakura.ne.jp/mixpanel/index_abtest010.html ）にアクセスすると、ユーザーによって、異なる URL にリダイレクトされる。「オリジナルのページ」と「パターン 1」「パターン 2」にパラメータが付けられている。なお、複数の「パターン」を公開すると、 URL が複数できてしまうので、 SEO 的に不利になることがある。（その対策は、 Google の公式ヘルプに解説がある。（https://support.google.com/analytics/answer/2613318?hl=ja）

70

http://steam.sakura.ne.jp/mixpanel/index_abtest010.html

http://steam.sakura.ne.jp/mixpanel/index_abtest030.html?utm_expid=106920529-6.C0sbNcXvSp-BjWZZUT3f9A.2


オリジナル


オリジナル

パターン 1

パターン 2

https://support.google.com/analytics/answer/2613318?hl=ja

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」2. Google Analytics 「ウェブテスト」で設定したページのヒートマップを Ptengine で見る　

• Google Analytics のページテストで設定した各「パターン」のそれぞれの Web ページについて、 Ptengine のヒートマップで確認することができる。なお、「オリジナル」はヒートマップで画面を呼び出す際にも A/B テストが実行され、確認したい画面が呼び出せないので、ヒートマップで確認できるのは「パターン」のみ（前出）。「 PAGE SCENE」で「パラメータ除去」 (注 ) をクリックして、 Google Analytics のページテストで設定したと各「パターン」の Web ページを探す。

　　（注）「パラメータ除去」は Ptengine有料版の機能

71


• 1 つの「パターン」のヒートマップが表示されたら、「比較対象の追加」（注）をクリックする。　　（注） 2 つ以上のヒートマップを見ることができるのは Ptengine有料版の機能。

72


• 「比較対象の追加」をクリックすると、左右に同じヒートマップが表示される。まず図の❶で、見たいヒートマップの種類を指定する。次に、図の❷に比較したい別の「パターン」の URL を入力し、リターンキーを押すと、候補の URL が表示されるのでクリックする。これで、 2 つの「パターン」のヒートマップの比較ができる。

73

❶ ❷


第 5 章　 A/B テスト第 2節 Optimizely + Ptengine で A/B テスト

74

※Optimizely とヒートマップの連携ができるのは、 Ptengine有料版の　 BUSINESS 、 FIRST 、 PREMIUM のプランです。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」1. Optimizely （無料版）の設定　

• Optmizely のアカウントを取得するところからスタート。 Optimizely のトップページ（ https

://www.optimizely.co.jp/）でメールアドレスを入力して、必要事項を入力。次のページで、「ウェブプロジェクト」を選択。

75

https://www.optimizely.co.jp/






• テストする Web サイトの URL を入力して、「編集の開始」をクリック。

76


• オリジナルが「バリエーション #1」として読み込まれる。（図の❶）「オリジナル」も後でヒートマップで見ることができるので、「オリジナル」をバリエーションとして保存する必要はない。実験名は図の❷を編集できる。

77

❶

❷


• ページ上で実験したい場所を選択し、「要素の編集」→「 HTML の編集」をクリックすると、左下のような HTML編集用のウィンドウが開く。ここで編集をして、「完了」をクリック。

78


• 「バリエーション #1」の編集が終わったら、「 +バリエーションの追加」をクリック。「バリエーション番号 2」の画面が表示されるので、「バリエーション #1」の場合と同様に、実験したい箇所を編集する。

79


• 「バリエーション」の編集が終わったら、「今すぐ保存」（図の❶）をクリックして、「実験の開始」（図の❷）をクリック。左下のウィンドウが開くので、「スタータープランに登録して実験を開始する」をクリック。次の画面で、「 Starter Plan」の「 Test it Out」をクリック。

80

❶

❷

❸

❹


• 実験名の一覧が開く。実験は Project に所属する。 Project名は、図の❶で編集できる。先程設定した実験名をクリックすると、実験の詳細が開く。「設定」タブ（図の❷）をクリックする。

81

❶❷


• 「設定」画面でコードが表示されるので、コピーして、実験対象ページの <head> の直後に貼り付ける。

82


• 再び「概要」に戻って実験名（図の❶）をクリックし、「開始ボタン」（図の❷）をクリックする。これで、実験はスタート。実験を停止する場合は、再度❷をクリックする。

83

❶

❷


• 次に、「 URL ターゲット設定」の「編集」（図の❶）をクリックすると、左下のウィンドウが開くので、「＋」（図の❷）をクリックする。

84

❶

❷


• 「 ptengine.jp 」と入力し、「部分文字列一致」を選択してから「保存」をクリック。この設定を行わないと、 Optimizely の実験を Ptengine のヒートマップで見ることができない。以上で、 Optimizely側の設定は完了。

85


• なお、別の実験を追加する時は、「新しい実験」をクリックする。

86

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」2. Ptengine の設定　

• プロファイル設定で、「ヒートマップ」→「実験」で Optmizely のスイッチを ON にする。• Ptengine で Optmizely の実験結果のヒートマップが見られるようになるのは、実験日の翌日から。

たとえば今日が 8月 20 日であれば、レポートの日付指定を 8月 19 日以前に設定する必要がある。

87

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」3. Ptengine のヒートマップで、 Optmizely の実験結果を比較する。　

• 日付を前日以前（注）に指定して（図の❶）、 Optimizely のアイコンが表示されていることを確認（図の❷）。「比較対象の追加」（図の❸）をクリック。

　（注） Ptengine で Optmizely の実験結果のヒートマップが見られるようになるのは、実験日の翌日から。たとえば今日が 8月 20 日であれば、レポートの日付指定を 8月 19 日以前に設定する必要がある。

88

❶ ❸❷

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」3. Ptengine のヒートマップで、 Optmizely の実験結果を比較する。　

• 見たいヒートマップを指定して（図の❶）、図の❷、❸で、❹の Optmizely のアイコンの横の「▼」をクリックし、 Optmizely で指定した実験名を選択すると、それぞれの実験のヒートマップを見ることができる。

89

❶

❷ ❸❹ ❹

Optmizely で設定した実験名


第 6 章　広告の選択

90

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」広告の選択

• 「コンバージョン・レート」を上げ、「直帰率」を下げる広告に予算を集中させることは、 Web サイトを効率的に運営し、ビジネスを成功させるために重要である。直帰率を下げる広告については、第 2 章の「手順 5：サイト改善の手法 (4) 　欲しいものを見せる」でも述べたが、メディアに広告を出稿する場合は、出稿先のメディアに貴社のターゲットとなる見込み客があまり訪れていないのなら、そのメディアへの広告出稿をとりやめるべき。

• 広告流入元別にコンバージョン・レートを見て、広告予算の配分を決めるのは当然だが、必ずしもサイト上でユーザー行動が完結しない場合は、以下の 3 つの基準を考慮して広告を選ぶ必要がある。1. 下までスクロールするユーザーを連れてくる広告2. クリックしてほしいところをクリックしてくれるユーザーを連れてくる広告3. 読んでほしい箇所をじっくり読んでくれるユーザーを連れてくる広告

91

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」サイト改善に貢献する広告の選択 1. 下までスクロールするユーザーを連れてくる広告

• ヒートマップツールの「スクロール到達率」で、到達率 50% のラインを比較。 50％のラインがWeb ページの下にある程、その広告で集客したユーザーの興味関心と貴社が提供できる製品・サービスがマッチしていると言うことができる。

92

リスティング広告の場合は、1 ワードずつ比較すると分析の工数が膨大になるので、ターゲット別にグループを分けて、比較を行う。（例）グループ１：経営層向けグループ 2：情報部門の管理職グループ 3: 「グループ 2 の」ために　　　　　　情報収集する人

広告 1 広告 2 広告 3

流入流入流入

スクロール到達率50%



50% のユーザーが離脱した位置を比較

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」サイト改善に貢献する広告の選択 2. クリックしてほしいところをクリックしてくれるユーザーを連れてくる広告

• ヒートマップツールの「クリックヒートマップ」で、流入元広告毎にクリックの状況を比較。「クリックヒートマップ」は、パッと見て、よくクリックされているかどうかを直感的に把握することができる。

93


流入流入流入

ファーストビュー付近だけでなく、ページ途中のクリックの状況にも注目する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」サイト改善に貢献する広告の選択 3. 読んでほしい箇所をじっくり読んでくれるユーザーを連れてくる広告• たとえば、貴社の製品の強みについての解説など、「ユーザーにここはぜひ読んでほしい」という

部分がヒートマップツールの「アテンションヒートマップ」で確認して、アテンションを集めている広告の場合、ホットなリード（見込み客）を連れてきてくれている可能性が高いと言える。

94


流入流入流入

広告 3 で集客したユーザーは、ページ全体を比較的よく見てくれている。


第 7 章　 EFO （エントリーフォーム最適化）

95

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO （エントリーフォーム最適化）とは

• エントリーフォームは通常、下記の図のようなフローで構成されている。 EFO （エントリーフォーム最適化）は、入力を開始したセッション数（入力開始ページの訪問数）を 100％とした場合、入力完了画面（＝サンクスページ）に至るまで離脱のパーセンテージをできる限り小さく抑えるための最適化の手法。

96

入力開始画面支払方法選択、ギフト指定等オプショナルな入力画面

入力内容確認画面入力完了画面

途中離脱はほとんどの場合、入力画面で起こる

通常、確認画面まで到達すれば、ほとんどのユーザーは離脱しない

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 1: 　入力項目は必要最小限に①

• Web 分析ツールで各入力項目のフォームにマウスカーソルがインしたことをイベントとして計測することができる。下記の図のようにマウスカーソルが入った数を上から順番に計測していくと、ユーザーが入力をやめた項目を推測することができる。

97

項目 1

項目 2

項目 3

項目 4

マウスカーソルが 1回入る＝1回のイベントとして計測

イベント回数が急に減った 1 つ前の項目が離脱の原因になっている可能性がある。

＝イベント 1回

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 1: 　入力項目は必要最小限に②　ユーザーがどこで入力をやめているかを推測する

98

設定画面の「イベント」の項目で「カスタム」をクリックすると、カスタムイベントの設定をすることができる。カスタムイベントとは、 Web上でユーザーが行う計測可能なアクションの全てを指す。「 Add」をクリックすると、設定を追加することができる。

たとえば、下記の入力フォームで、「お名前」の入力を、イベント名「 eventNAME」と命名して計測する場合を例に説明する。

入力フォームの URL を入力し、「取得」ボタンをクリック。（次ページに続く）

例： Ptengine「カスタムイベント」機能を使って、ユーザーがどこで入力をやめているかを推測する

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 1: 　入力項目は必要最小限に③　ユーザーがどこで入力をやめているかを推測する

99


赤色の枠線で囲まれているところが、全て、カスタムイベント計測可能な部分。 Ptengine の場合、どの部分を計測する場合でも、 Web ページのHTMLソースを変更する必要がない。「お名前」のフォームにカーソルを入れると、ポップアップ Window が表示されるので、「確定」をクリック。

「カテゴリ」「アクション」「ラベル」「バリュー」を記入して「保存」をクリックすれば設定完了。

項目必須内容カテゴリ必須計測したい対象のグループアクション必須計測したい対象でのユーザーのアクショ

ンラベルオプ

ション追加の任意の項目

バリューオプション

イベントに付与させたい数値（整数）。レポートで集計される。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 1: 　入力項目は必要最小限に④　ユーザーがどこで入力をやめているかを推測する

100


カスタムイベント機能を使って、入力フォーム最適化をすることが可能。右の図のように、フォーム入力欄の上から順番にイベントを設定し、それぞれのフォームにマウスカーソルが何回入ったかを調べる。マウスカーソルが入る回数が目に見えて減った箇所があったら、その直前のフォームが、ユーザーにとって、何らかの理由で、入力が面倒な箇所である可能性がある。

① フォームの URL を入力する

②管理画面に　フォームが表示され、　ユーザーが何らかの　アクションができる　ところが赤枠で選択　可能になる。

124110103100987654

③各フォームにマウスカーソルが入った回数を調べることで、ユーザーがどこで入力をやめているかが推測できる。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 2: 　受け付けない理由をリアルタイムで示す

• 入力した内容の「何が受け付けられないのか」「なぜ受け付けられないのか」は、確認画面に進んでからではなく、入力中にリアルタイムで示す方が、ユーザーのストレスを軽減することができる。

101

入力したパスワードが、なぜ受け付けられないのかを、その場で示す。

入力した内容の何が受け付けられないのか、その場で示す。

【事例】ebayhttp://www.ebay.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 3: 　入力ステップの現在位置を示す

• 「入力ステップは幾つあるか」「自分は今どこまで進んだのか」を、ユーザーに分かりやすく示す。

102

航空券の予約が 5 つのステップで完了することが示されており、現在 2 ステップ目まで進んでいることが示されている。

【事例】Southwest Airlineshttps://www.southwest.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 4: 　気が散る要素は削除

• 入力のプロセスにおいて、不要な導線は全て削除することで、ユーザーが入力プロセスから離脱することを防ぐ。

103

【事例】ebayhttp://www.ebay.com/

• 左のユーザーアカウント新規登録画面の事例では、ヘッダー部のグローバルナビゲーション・バーは削除されている。（＝サイト内のほぼ全てのページに設置される共通のナビゲーション・バー）グローバルナビゲーション・バー

ユーザーアカウント新規登録画面

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 5: 　「必須」「任意」のラベルを分かりやすく付ける

• 「必須」「任意」の表示は入力フォームの前に分かりやすく示す。また、先に必須項目だけまとめて、その後に任意の項目を並べる。

104

【事例】Ptenginehttp://www.ptengine.jp/contact/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 6: 　プルダウン、チェックボックス、ラジオボタンを適切に使う

• 選択肢が多くある場合はプルダウン、少ない場合は、チェックボックスかラジオボタンを使う。

105

【事例】British Airwayshttp://www.britishairways.com/travel/register-now/public/en_gb

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 7: 　リセットボタンは不要

• リセットボタンを設置すべきではない。全ての項目をもう一度入力し直す状況は、まずない。また、ユーザーは間違ってリセットボタンをクリック（タップ）した場合、最初から入力しなおす気力を失ってしまう可能性が高い。

106

【事例】MOZhttps://moz.com/checkout/freetrial

リセットボタンが設置してあるフォームはほとんどない。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 8: 　 submit は「名詞」ではなく「〇〇する」

• ボタンは「〇〇する」という文言にするべき。

107

【事例】Yahoo! Mailhttps://www.yahoo.com/

【事例】Salesforcehttps://www.salesforce.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 9: 　 Smart Phone ユーザーが入力しやすいインターフェイス

• Smart Phone ユーザーが入力しやすいよう、１つ１つの入力フォームが十分な大きさになるようにする。また、入力項目が多い時は、右下の事例のように、ページを分割する。

108

【事例】Walmart スマートフォンサイトhttps://www.walmart.com/

【事例】HubSpot スマートフォンサイトhttps://www.walmart.com/

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 10: 　 type 属性

• input要素の type 属性を指定することで、自動的にキーボードが切り替わる。例えば、 type 属性に「 email」を指定すると最初から入力モードが英数字になる。（ HTML5 から追加された。）

　【入力フォームにおける type 属性の指定例】• <input type="tel">

• <input type="email">

• <input type="url">

• <input type="password">

• <input type="date">

• <input type="time">

• <input type="number">

109

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 11: 　 placeholder 属性

• input要素の placeholder 属性を指定することで。指定の文字列が入力欄内に薄いグレー色で入力例として表示される。（ HTML5 から追加された。）

　【 HTMLソースの記述例】• お名前【必須】： <input type="text" placeholder="例）山田太郎 ">

　【表示例】

110

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 12: 　住所は郵便番号から自動検索

• 郵便番号から住所を取得できるようにする。ユーザーの手間を省くことで、最後まで入力してくれるユーザーの割合を高くすることができる。

111

【事例】日本郵便https://www.post.japanpost.jp/question/contact_us/inquiry.html

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 13: 　半角・全角を指定しない

• 電話番号、郵便番号、住所等の入力欄は、半角・全角の指定をすると、使い勝手が悪くなる。入力欄は半角・全角のどちらも入力可能なようにしておく。半角・全角の入力ミスは意外と多く、これだけで入力を完了させるユーザーの割合が変わる可能性がある。

112

【事例】日本郵便https://www.post.japanpost.jp/question/contact_us/inquiry.html この例のように、半角・全角をしていると、ユーザーが入力を完了してくれる割合が下がる可能性がある。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」EFO の手法 14: 　 1年以内の日付指定はカレンダー入力

• 生年月日の場合は、「年」「月」「日」をプルダウンメニューにすることが一般的だが、予約日などの 1年以内の日付指定は、カレンダー入力を使うとユーザーの作業負荷が少なくなる。

113

【事例】Southwest Airlineshttps://www.southwest.com/


参考資料１：用語の説明

114

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」用語の説明①

115

用語同義語定義ページビュー数 PV 数、閲覧数、閲覧回

数Web ページが閲覧された回数。

訪問回数訪問数、セッション数訪問者がサイトに入ってきてから離脱するまでの一連の行動を 1回の訪問とみなす。サイト内で 30 分以上、新たな行動が起きなかった場合は（例：離席した場合など）、訪問は終了したとみなす。 30 分は Google Analytics をはじめとする幾つかのツールのデフォルト設定。この値はカスタマイズできるツールが多い。 Ptengine では、スマートフォンの場合、セッションが切れる時間を 5 分に設定してある。

訪問者数ユニークユーザー数、UU 数、ユニークブラウザ数、 UB 数

集計期間中、何人のユーザーがアクセスしてきたのかを、ブラウザの Cookie に基づいて集計した値。1 人のユーザーが複数のブラウザ（デバイス）を使用した場合は、重複カウントとなるが、 Cookie とユーザー ID と連携させることで、これを防ぐことができる。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」用語の説明②

116

用語同義語定義参照元流入元、リファラーサイトを訪れた訪問者が、訪問直前までどこのサイトにい

たのかを集計したデータ。流入元は、以下の項目のいずれかに分類される。 ●検索エンジン　＝　 Google 、 Yahoo! 、 bing などの検索エンジンからの流入。 ●外部サイト（参照サイト）　＝　外部サイトから張られたリンクをクリックして訪れた流入。 Fasebook 、 Twitter などからの流入は「ソーシャル」として別途計測する場合がある。●直接アクセス（ダイレクトアクセス、ノーリファラー）　＝　ブラウザのお気に入り、履歴からのアクセス、ブラウザに URL を直接入力してのアクセス。メールソフトで　受信したメールに掲載されていた URL をクリックして訪れた場合も、直接アクセスに含まれる。 Yahoo! メールなど Web メールで受信したメールは「外部サイト」として集計されるが、 Gmail はリファラーを残さない仕様なので、「直接アクセス」に含まれる。●キャンペーン（広告流入）　＝　リンク先の URL にパラメータ（通常、「 ?」で始まる文字列）を付与することで、広告からの流入をを検索エンジンからの流入や外部サイトからの流入、直接アクセスと区別する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」用語の説明③

117

用語同義語定義直帰率 ■ サイト全体に関して見る場合：全訪問回数のうち、入

口となった 1 ページだけを見てサイトを離脱した訪問の割合。■ 特定の 1 ページに関して見る場合：当該ページを入口としてサイトに入って来た訪問のうち、サイト内の他のどのページにも遷移せずに離脱した訪問の割合。

離脱率当該ページを訪問した訪問のうち、当該ページを最後にサイトを離脱した訪問の割合。100％－離脱率＝遷移率

新規率新規訪問の割合全訪問回数のうち、新規訪問の割合。 Google Analytics は、過去 2年間、 1度もサイトを訪問していないブラウザが訪問した際に、新規の訪問とみなす。（ブラウザの Cookieで判別しているため、過去に何度も訪れている人ユーザーが新しいブラウザで訪れた場合も、新規の訪問とみなす。） Ptengine の場合は、計測開始後 2年以上経過した再訪問も再訪問とみなす。（対義語：再訪問率、再訪問の割合、リピート率、リピート訪問の割合）

平均滞在時間 1訪問あたりの滞在時間 1回の訪問の際に、サイト内で過ごした時間の平均値。平均閲覧数平均閲覧ページ数、平

均 PV 数、 1訪問あたりの PV 数

1回の訪問の際に閲覧したページビュー数の平均値。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」用語の説明④

118

用語同義語定義完読率 RTR （ read through

rate ）記事を読み終えた読者の割合

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」Web 分析ツールによる計測値の違いについて

• 異なる Web 分析ツールを併用すると、計測値に違いが生じることがある。たとえば、 Google

Analytics と Ptengine とでは、滞在時間の計測方法や 1訪問あたりの有効セッション時間等、計測上の仕様が異なるため、同じ計測箇所でも計測値に差異が生じる。【誤差が生じやすい項目の一例】• 訪問数（ Ptengine ではスマートフォンのセッションを 5 分と定めている。　※ GA は PC 、ス

マートフォンとも 30 分）• 平均閲覧時間• 訪問者数（ UU 数）

119


参考資料 2 ：ヒートマップの基本操作

120

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは①

• ヒートマップツールとは、ユーザーが「どこをクリックしたのか」「どこを見たのか」などをサーモグラフィーを通してビジュアライズすることができるツール。本ドキュメントでは、 Ptengine を例に説明する。

• Ptengine には、 Web ページ上でどこがクリック（タップ）されたのかを集計した「クリック」と、サイト上でどこが注視されたかを集計した「アテンション」の 2種類のヒートマップがある。また両方のヒートマップには「スクロール到達率」を示す罫線が表示される。

121よくクリックされる箇所よく閲覧される箇所

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは②　ヒートマップの操作方法

122

1 23

4

1ユーザーがＷｅｂページのどこに注目しているか、どのコンテンツを目指しているかをマウスのクリック（ PC ）やタップ（スマートフォン）を元にヒートマップで表したものが「クリックヒートマップ」。

2 ページのどこが注視されたかを、各エリアの滞在時間から判断してヒートマップで表したものが「アテンションヒートマップ」。3「 PAGE SCENE」はサイトの Web ページの画面が縮小されるが、「ウェブビュー機能」を利用することで、実寸の大きさでヒートマップを確認することができる。

4 「デバイス・センター」と呼ばれるこの箇所で、ユーザーが閲覧に使用したデバイスを絞り込むことができる。例えば、タブレットやスマートフォンからの PC サイト閲覧者を除外し、 PC からの閲覧者のみのデータを抽出することができる。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは③　クリックヒートマップ

• 「クリックヒートマップ」では、サイトがどのように利用されているかを確認する。クリックヒートマップ上にマウスカーソルを合わせると、以下のような表示になる。

123

1

1

34

2

5

＜クリックヒートマップの見方＞クリックヒートマップはユーザーがサイトをクリック（タップ）した場所がヒートマップで表され、クリック（タップ）回数が多かった場所はより赤くなり、少なかった場所はより青くなる。スマートフォンの場合、スクロールやフリック等、タップ以外での画面タッチは除外されて表示される。スクロール到達率は、ユーザーがサイトを閲覧した際に、どこまでスクロールしたのかをユーザーの割合で示しており、どの部分まで見たのかが分かるようになる。スクロール到達率 100％＝ファーストビューとなり、ページ下部になればなる程、数値は下がる。 50％のラインが表示された場合、訪問者の2 人に 1 人はその箇所までスクロールし閲覧したことになる。【色の目安】　※下記の数値は相対的なものです。赤→一番クリック数が多いエリア橙→赤の 80％程度黄→赤の 60～ 70％程度緑→赤の 50％程度青→赤の 20％～ 40％程度

1スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→ P13参照）。

2 スクロール到達率を表す数字、およびライン。3 スクロール到達率のオン / オフを切り替えるボタン。（画面上ではオン）4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし、再読み込みを行う。5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常は Ptengine側で自動調整される。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは④　アテンションヒートマップ

• 「アテンションヒートマップ」では、サイト内の該当箇所の滞在時間から、 Web ページがじっくり見られているかを確認する。クリックマップ上にマウスカーソルを合わせると、以下のような表示になる。

124

＜アテンションヒートマップの見方＞アテンションヒートマップはユーザーがサイトで見ていたエリアをその場所での滞在時間から総和し、ヒートマップの濃淡で表す。よく見られている場所ほど赤くなる。スクロール到達率は、クリックヒートマップ同様、ユーザーがサイトを閲覧した際に、どこまでスクロールしたのかの到達率を表している。【色の目安】　※下記の数値は相対的なものです。赤→一番閲覧されたエリア橙→赤の 80％程度黄→赤の 60～ 70％程度緑→赤の 50％程度青→赤の 20％～ 40％程度

1

1

34

2

5

1スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→ P13参照）。

2 スクロール到達率を表す数字、およびライン。3 スクロール到達率のオン / オフを切り替えるボタン。（画面上ではオン）4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし再読み込みを行う。5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常は Ptengine側で自動調整される。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは⑤　ページ分析 (i)

• 「ページ分析」は、サイト内リンク、外部リンク、ボタン、フォーム等のエリアを自動的に判別し、各エリアにおけるクリック数と割合を表示する機能。クリックヒートマップでは視覚的にしか確認できなかった、クリック数や訪問者数に対するクリック率を数値化し表示させる機能。

125

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップツールとは⑤　ページ分析 (ii)

126

1スクロールバーでサイト下部を確認することができるが、「→」マークをクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範囲を確認したり、レポートとして出力することができる。

2 目の形のアイコンクリックすると、計測範囲をインタラクティブ要素 ( クリックでアクションが生まれる箇所、リンク等 ) のみに絞るか、リンクが存在しない箇所も含め全体を計測するかを選ぶことができる。3 計測箇所は基本的に、一番クリックされた箇所と比較して多いほど赤に近い色、少ないほど濃い青に近い色で描画され、該当箇所にマウスオンすることでその数値を知ることができる。4 右側の「クリック分布」にて、左側のページ分析マップにて存在するクリック箇所を数値で表示している。右上のフロッピーディスクのアイコンをクリックすることで、データを CSV形式で保存することができる。

1 2

33

43


• ページ上部にあるフィルターアイコンをクリックする。

ヒートマップにフィルターを掛ける

• 127

特定のユーザの動向だけを知りたい場合、フィルター機能を利用してセグメントを掛ける。

フィルターアイコン

予めセグメント条件として保存してある（後述）フィルターの条件を設定する。ラジオボタンをクリックし、「実行」ボタンをクリックする。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップのフィルターを追加する①

128

よく利用する絞り込み条件をフィルターに保存する。

フィルターを呼び出し「追加」ボタンをクリックする。

右の例ではリピーターのみに絞り込むフィルターを追加している。「フィルター選択」で「訪問タイプ」を選び、「再訪問」にチェックを入れて「確定」ボタンをクリック。

「追加」ボタン

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップのフィルターを追加する②

129

作成したフィルターの内容やフィルター名を変更したい場合は編集を行う。• ページ上部にあるフィルターアイコンをクリックし、編集したいフィルター名の右端にあるペンのアイコ

ンをクリック。• 編集画面でフィルター名やフィルター条件を変更し「保存」ボタンをクリックすれば編集は完了する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップのフィルターを追加する③

130

不要になったフィルターを削除することもできる。• フィルター編集画面右上にある「削除」ボタンをクリックすれば、削除が完了する。

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップを比較する①

131

作成したフィルター条件を使用するか、その場でフィルター条件を指定するかして、ヒートマップを比較することができる。• ページ上部にある「比較対象の追加」ボタンをクリックする。クリックヒートマップが 2 つになる。そ

れぞれのフィルターボタンをクリックし、条件を選択する。※片方条件なし、片方フィルター条件あり、という比較も可能。

131

「比較対象の追加」ボタンフィルターボタン

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」ヒートマップを比較する②

132

• アテンションヒートマップを確認したい場合は左上の「アテンション」ボタンで表示を切り替える。• 比較表示を中止する場合、画面右上端の × ボタンをクリックすることで、元の表示に戻る。

「アテンション」ボタン

「 ×」ボタン

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」参考文献一覧①

• サイト改善の手順　第 2 章• アナリティックスアソシエーション『新しいアナリティクスの教科書データと経営を結び付ける Web 解析の進化したステージ [ アナリティクスアソシエーション公式テキスト ] (a2i BOOKS) 』（ 2015年、インプレス） P.37, 59-62

• サイト改善の手順　第 4 章• The Only Metric That Matters For Content Marketing | TechCrunchn

http://techcrunch.com/2015/07/28/the-only-metric-that-matters-for-content-marketing/

• What You Can Learn from Bounce Rate & How to Improve It: kissmetrics blog

https://blog.kissmetrics.com/what-you-can-learn-from-bounce-rate-how-to-improve-it/

• The Simple Step-By-Step Guide to Landing Page Optimization: The Daily Egg

http://blog.crazyegg.com/2015/06/24/landing-page-optimization-guide/

• 12 Ways Web Designers Can Improve Website Bounce Rates: The Daily Egg

http://blog.crazyegg.com/2012/04/24/improve-website-bounce-rates/

• How to Reduce Your Bounce Rate and Raise Interaction on Your Website: The Daily Egg

http://blog.crazyegg.com/2013/08/12/reduce-your-bounce-rate/

133

Web サイト改善手法　 Open Source 化 Project 　「 Web サイト改善の手順」参考文献一覧②

• サイト改善の手順　第 4 章• Web Analytics Segments: 3 Key Category Recommendations | Occam’s Razor by Avinash Kaushi

• http://www.kaushik.net/avinash/web-analytics-segments-three-category-recommendations/

• Excellent Analytics Tip#2: Segment Absolutely Everything | Occam’s Razor by Avinash Kaushi

http://www.kaushik.net/avinash/excellent-analytics-tip2-segment-absolutely-everything/

• アナリティックスアソシエーション『新しいアナリティクスの教科書データと経営を結び付ける Web 解析の進化したステージ [ アナリティクスアソシエーション公式テキスト ] (a2i BOOKS) 』（ 2015年、インプレス） P.61, 71, 79, 82, 83

• 用語の説明• The Only Metric That Matters For Content Marketing | TechCrunchn

http://techcrunch.com/2015/07/28/the-only-metric-that-matters-for-content-marketing/

134


Web サイト改善手法　 Open Source 化 Projecthttps://www.facebook.com/groups/Website.Improvement.Open.Source/

Internet

Webサイト改善の手順