Webサイト改善の手順

Webサイト改善手法 Open Source化 Project 「Webサイト改善の手順」
Webサイト改善の手順
ver. 1.3.2
Ptmind
https://www.facebook.com/groups/Website.Improvement.Open.Source/

目次
■ はじめに 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

1. このProjectのGoalと背景
• Projectのゴール: 「Webサイト改善手法から属人性を排除する＝ Webサイト改善手法の標準化」
• Projectの背景
Webサイト改善コンサルティングの問題解決の手法や考え方が、担当コンサルタントのスキルが
属人的に紐付いている場合、退職や休暇取得に伴いパフォーマンスが不安定になりコントロール
が難しくなる。また、一部のコンサルタントにノウハウが集中することは、コンサルティング企業、ク
ライアントの双方にとってリスクを高めることとなる。
コンサルタントの立場に立つと、日々の対応に追われることで慢性的な忙しさが続く状況から脱す
ることが困難となる。また、クライアントの立場に立つと、Webサイト改善コンサルティングが属人
性を伴う商品である程、人件費の高いコンサルタントが長い時間を費やすことになるので、高額な
コンサルティング費用の支払いを強いられることになる。
本Projectはこうした状況を改善することを目的としている。
4

2. このProjectで期待される成果
• Webコンサルティング業界のサイト改善手法の標準化のきっかけとなる。
• サイト改善手法や、ベストプラクティスを、企業の壁を越えて蓄積できるようになる。＝蓄積した改善手法やベス
トプラクティスは、一企業のナレッジではなく、業界全体のナレッジとなる。
• Webコンサルティング業界全体の人材の育成に寄与する。
• 複数社のWebコンサルティング企業が直面する類似の問題について、効率よく対応できるようになる。
• 現在のWebコンサルティング業界に見られる、以下の課題を解決する。
(1) 属人的なスキル
属人的なスキルに依存した運営体制のため、退職や休暇取得によるパフォーマンスへのリスクが高まる。
(2) コンサルティング手法のばらつき
問題解決の手法や考え方、コンサルティング・ノウハウがコンサルタントによって異なり、コンサルタント毎
のばらつきが大きく、コンサルティング企業としてのパフォーマンスが安定しない。
(3) コンサルティング手法標準化の阻害
Webコンサルティング企業として組織で構築したマネジメント・フレームワークが、それを構築した企業以
外の業界内の他の企業で活用されることはない。そのため、コンサルティング手法の標準化が実現でき
ない。
5

サイト改善の手順
6

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

サイト改善の手順全体像
• サイト改善は、以下の手順に従って行うことで、効率的に進めることができる。
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サイトから改善のインパクトが大きくな
りそうな場所を、改善する場所の候補としてピックアップし、その場所が現在どのような状態化を把握する。
サイト全体から、ユーザー心理が大きく動く場所を、改善する場所の候補として選んでいく。代表的な場所
は次の3つ。
1. トップページやランディングページなどサイトの入口ページ
2. 購入や会員登録などコンバージョンに至るプロセスのページ
3. 「サイト内検索」「ランキング」「レコメンド」など、ユーザーの動きを変え、コンバージョンに向ける重
要なポイントとなるページ・機能
10

手順1：入口回数上位50位までのURLをCSVダウンロードする
• 入口回数が少ないページを改善しても、改善インパクトは小さい。まず、入口回数が多い上位50URLの
CSVファイルをダウンロードする。なお、次のように「直帰率が高くて当然」というページはダウンロードしたリ
ストから削除する。「Access Mapのページ」「営業所一覧など電話番号等を確認するのが目的のページ」
「計測対象外の他のサイトに遷移させるのが目的のページ」「コンバージョンを伴わない、1ページ完結の
ページ（例：事前申し込み不要のイベント告知ページ）」など。
• このデータは、PCとSmart Phoneに分けて使用するので、デバイス：PC、デバイス：Smart Phoneのセグメン
トを掛けた上で、それぞれのCSVファイルをダウンロードする。（Google Analyticsの場合、「セカンダリディメ
ンション」で「ページタイトル」を表示させてからダウンロードする。）
11入口回数が多い入口ページ一覧
ユーザーが利用
した端末、PCと
Smart Phoneそれ
ぞれについて、入
口ページの一覧
をダウンロード。
ユーザーの
利用端末で
フィルターを
掛ける。

手順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 （平均滞在時間長、直帰率低）は、更に入口回数を増やしたり、同じパターンで成
功できるコンテンツを作ったりすることで、サイト全体のパフォーマンス向上に寄与する。

手順3：象限B（平均滞在時間長、直帰率高）に集中して分析する①
• 前ページで見た4象限の中で、改善インパクトが最も大きい「象限B（平均滞在時間長、直帰率高）」に集中して分析
する。「象限B」に入ったWebページに下記の合計10種類のセグメント（注）でフィルターを掛けて、「直帰率が高い」
Webページワースト5を確認する。このワースト5がP32以降で改善する対象のWebページとなる。
• （注）セグメントとは、似た属性を持つ集団のこと。たとえば、ユーザーのCookie情報を見て、サイトを初めて
訪れたユーザーか、2回以上訪れたユーザーかを分けることで、「新規」「再訪問」という2つのセグメントに分
け、サイトを訪問した目的や商品の認知度が違う2つの集団として見ることができる。
• 「検索」と「キャンペーン」に関しては、更なる深堀りが必要。（次ページ参照）
13
and

手順3：象限B（平均滞在時間長、直帰率高）に集中して分析する②
• 「検索」に関しては、特にどのキーワードに関して「平均滞在時間長、直帰率高」だったのかを確認する必要
がある。同様に、「キャンペーン」に関しても、特にどのキャンペーン（＝広告）が「平均滞在時間長、直帰率
高」だったのかを見ておく必要がある。
14
キャンペーンの確認検索キーワードの確認
【参考】キーワードには「ブランドキーワー
ド」と呼ばれるものがある。「ブランドキー
ワード」は会社や商品の検索に使用する
キーワード（商標用語を含む）のことで、「ブ
ランドキーワード」で流入してきたユーザー
の直帰率は、低くなるのが一般的。

手順4：サイト改善策の選択
• 「象限B」のWebページを平均滞在時間長、直帰率高にさせていた主なセグメントがどれかによって、当該ページの
改善策も違ってくる。改善対象ページが、どのセグメント（下記の表の左側の列）に対して改善が必要かが分かった
ら、表の1から11の改善策の中で「●」印が付いている改善を行う。各改善策の具体的な内容は、第3章で解説。
15
1. ページ
レイアウ
トの改善
2. CTAの
改善
3. 「読ま
されるス
トレス」の
軽減
4. 見たい
ものを見
せる
5. サクセ
スを感じ
させる
6. Don’t
worry.
7. ユー
ザーを助
ける情報
を提供す
る
8. 関連情
報を提供
する
9. ユー
ザー・レ
ビュー等
を提供す
る
10. シン
パシー
11. Web
ページの
ロード時
間を短く
新規訪問ノーリファ
ラー
● ● ●
検索 ● ● ● ● ● ● ●
ソーシャル ● ● ● ● ●
参照サイト ● ● ● ●
キャンペー
ン
● ● ● ● ● ● ● ● ● ●
再訪問ノーリファ
ラー
● ●
検索 ● ● ● ●
ソーシャル ● ●
参照サイト ●
キャンペー
ン
● ● ● ● ● ● ●
指標の数値が
悪かったセグメント
Webサイト
改善策

手順5：象限B（平均滞在時間長、直帰率高）改善の効果測定方法
• 象限B（平均滞在時間長、直帰率高）の効果測定は、下記の「遷移率」をKPIとして行う。
16
ボタン or テ
キストリンク
入口ページ
入口ページの
次に見て
ほしいページ遷移
(a)入口回数
(b)このページを入口として入って来た
ユーザーがこの「ボタン or リンク」を
クリックした回数
※計測方法については次ページを参照。
遷移率（％）＝(b)/(a)

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

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

「ヒートマップ読み解きCheck List」について
• ヒートマップは、ただ眺めているだけも、様々な気づきが得られる可能性がある。しかし、業務の効率化とい
う観点から考えると、次ページ以降で紹介する「ヒートマップ読み解きCheck List 」を脇に置いてヒートマッ
プを見て行くことで、ヒートマップをより効率的に活用することができる。
19
ただ眺めているだけ
＝非効率
たまたま気が付く
「ヒートマップ読み解きCheck List」
を使う＝効率的

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

ヒートマップ読み解きCheck List 1：
重要でない現象はスルーする①
• 以下の現象は、多くのWebページで見られる日常的な現象。これらについては、ユーザーの自然な動きな
ので、原則として、改善策を考える必要は無い。
21
ファーストビューを過ぎると、一気にアテンションが少なくなる
＝多くのサイトで見られる現象。問題は無い。
ページの一番下のスクロール到達率が、10％未満
＝ 5～10％がよく見られる値。問題は無い。
トップページなのにサイトロゴ（＝トップページに戻るリンクが張られている）が
よくクリックされる
＝多くのサイトで見られる現象。問題は無い。
サイトロゴ

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

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

ファーストビューはしっかり見られているか②
• クイズの答え。CVRが高いと考えられるのは、A，B，C、D。LPはディスプレイ広告やリスティング広告等で、予めそのLPの
ターゲットになりそうな人を集客しているので、もし、アテンションヒートマップで赤色の箇所が1箇所も無ければ失敗。そういう
意味では、E、F、G、Hも集客が完全に失敗しているわけではない。
• しかし、無視できないのがファーストビューの色。Webページが上から順番に見られるものである以上、どんなページでも最も
多くのユーザーが見るのはファーストビュー。LPのファーストビューは、最もユーザーに訴求したい大事な情報が掲載されて
いるはずのエリアで、正しいターゲティングに基づく集客ができていれば、ファーストビューが赤色になる可能性は高い。そし
て、逆の言い方をすれば、ファーストビューがユーザーに注視されないのなら、そこから下のエリアでユーザーの心をつかむ
ことはむずかしく、また、ファーストビューから遠くなればなるほど程、スクロール到達率が下がる、すなわち、閲覧するユー
ザーの数自体も減少していくので、ファーストビューでの失敗を、ページの下の方で挽回するというのは極めて困難。
24
A B C D E F G H

ファーストビューはしっかり見られているか③
• Aは、ファーストビュー以外は、注視されている箇所が少ないので、CVRが低くなりそうだと思われるかもしれない。
しかし、ユーザーにとって、信頼できる企業、ブランドが運営しているサイトであれば、ファーストビューの情報だけで
納得出来れば、即座にコンバージョン、たとえば、すぐに資料請求という行動に移る可能性がある。したがって、Aは
必ずしも悪い型ではない。Cも、ファーストビュー以外は、あまりじっくりとは見られてないが、Aと同じ理由で、必ずし
も悪い型ではない。知名度の高い企業、ブランド等が運営しているLPの場合、A、CでCVRが高いという例はある。
• 一方、B、Dは、ファーストビュー以外もよく見られている。これは、サービスの内容、たとえば購入後のサービスなど
もよく読んでから購入したいと考えるようなユーザーが多い場合に見られる型。Dは上から下までじっくり見られてい
る型。途中に分かりにくい説明、むずかしい説明があると、赤色は途切れてしまうので、最初から最後まで、ユーザ
－にとって分かりやすい説明が掲載されている、優れたLPである可能性が高い。
25
A B C D

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

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

ユーザーのニーズを読み取る
• 複数のFAQが1ページにまとめられているような場合、アテンションヒートマップを使えば、ユーザーはどの
Q&Aをよく読んでいるかを知ることができる。ここから、ユーザーがどんな情報を必要としているのか分かる。
28
 サポート系ページを分析すると、ユーザーが何に困って
いるかを知ることができる。
Check
【事例】
Web分析ツールの
FAQページ
各Q&Aの「Q]

LP（ランディングページ）の余計な出口をふさぐ
• 一般的なLPのフッター付近のクリックヒートマップを見ると、右の
図のように、「会社案内」や「プライバシーポリシー」が比較的多く
クリックされているLPが多く見られる。これは、登録などをする前
に、念のため、どのような会社か確認しておこうと考える慎重派の
ユーザーがある程度いるため。しかしここで、コーポレートサイト
の会社案内にリンクを張ってしまったのでは、ユーザーがもうLP
に帰って来なくなる可能性がある。
29
コンバージョ
ン
ページ
コンバージョ
ン
ページ
コンバージョ
ン
ページ
ランディング
ページ
（LP）
CTA
CTA
CTA
LP専用
会社案内
LP専用
プライバシー
ポリシー
• その対策としては、右の図のように、1ページのLP
毎に専用の「会社案内」ページ等を作って、ユー
ザーが会社案内を確認し終わったら、必ずLPに
戻って来てくれるようにする。このLP専用の「会社
案内」等には、LPに戻る以外は一切リンクを設置し
ない。（SEO対策としては、同じ内容のページを
2URL以上持つのはよくないので、検索エンジンに
インデックスされないようにするか、canonical属性
を使って、本来インデックスしてほしいページを示
す。）
CTA=Call to Actionの略。
コンバージョンにつながるボタン、
リンクなどのことを指す。

「ヒートマップ読み解きCheck List 5：
もっとユーザーに詳しく伝えるべき情報はないか①
• ユーザーのニーズがあるのに、詳しく伝えることができていない情報を探す。クリッカブルではないのに、よ
くクリックされている箇所があったら、そこからユーザーのニーズが推測できる可能性がある。
30
 クリッカブルではないのに、よくクリックさ
れている箇所はないか？
 ユーザーが検索に使用したキーワード
に関するコンテンツは、スクロール到達
率が高い位置にあるか？
Check
クリックできないのにクリックされている箇所

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

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

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

コンテンツの評価の基本は、平均滞在時間とスクロール到達率
• 右の図のアテンションヒートマップを見ると、
「導入事例2」（真ん中のコンテンツ）につい
て次の3点が分かる。
1. 3点の中で最も短い記事であることを勘
案しても、他の2つの記事より、明らかに
平均滞在時間が短い。
2. 最後まで読んだユーザーの割合が、他
の2つの記事よりも明らかに低い。
3. 他の2つの記事よりも図が多めの記事で
あることを勘案しても、じっくり見られて
いる箇所が少ない。
• 以上のことから、「導入事例2」は、コンテン
ツとしては、あまりじっくりと読まれていな
い可能性が高いことが分かる。
34
 コンテンツを評価する際には、平均滞在時間とスクロー
ル到達率を見る。
Check

情報を見せる順番を検討する①
• 「ファーストビュー」と「フッター」除いた部分は、ユーザーに見てほしい箇所がアテンションを集めている
か？見てほしい箇所が見られていない場合は、まずは順番を変えてみることを検討すべき。
35
A
B
C
D
 見せたい要素は上に設置
 ユーザーが関心を持っている要素は上
に設置（理由：ユーザーに探させない）
 順番を変える場合は、A/Bテスト（後述）
により、ユーザーの反応を見てから、最
終決定をする。
Check

情報を見せる順番を検討する②
• 「重要なコンテンツは上」ルールは破ってもよい。スクロール到達率を見て、ページの下の方までユーザーを十分にひきつけ
ていれば、あえてレイアウトを変更する必要は無い。下記の例は、キッチン用品ECサイトの商品詳細ページの例。キッチン用
品を実際にキッチンに置いた様子はページのかなり下にあるが、約7割のユーザーが到達している。「商品画像」「特長の製
品」よりもユーザーが注視しているが、これだけのユーザーが到達していれば、改善は必要ない。
36
商品画像
特長の
説明
ギャラリー
（キッチンに
置いた様子）
スクロー
ル
到達率
67％
 順番を変えるべきかどうかの判断基準
はスクロール到達率。
Check

スクロール到達率の大きな段差は、レイアウト失敗の可能性あり
• 通常、ページの上から下に行くにしたがって、スクロール到達率は下がっていく。しかし、目立って急激に下
がっている箇所（目安は－30％）があったら、その箇所は、レイアウトが失敗している可能性がある。
37
 スクロール到達率が30％以上一気に下
がっている個所は要注意。
 途中で「終わった感」があるレイアウトは、
ユーザーを離脱させ、機会損失を発生
させる。
Check
－34％

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

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

改善策1：ページレイアウトの改善①
• ユーザーにとって有用なコンテンツ・機能をファーストビューに近い位置に持って来る。
【ケーススタディ①】
• 《問題点》 ❶のエリアは❷のエリアに比べてクリックされていないのに、広いスペースを取っている。❶のエリアが広すぎることで、❶のエリア
内で、スクロール到達率が下がってしまっている。
• 《改善策》 ❷と❶のエリアを入れ替えることで、トップページの直帰率が下がる可能性が高い。また、❸のボタンは、あまりクリックされておら
ずニーズが少ないので、ボタンの一番最後に移動させた方がよい。
40
❶
❷
❸ 左：クリックヒートマップ
右：アテンションヒートマップ

改善策1：ページレイアウトの改善②
• ユーザーにとって有用なコンテンツ・機能をファーストビューに近い位置に持って来る。
【ケーススタディ②】
• 《問題点》 ❶のクリックできないバナー、❷のほとんどクリックされない動画の下に、本来クリックしてほしい❸があるため、機会損失が発生し
ている。
• 《改善策》最上部に❸を置き、❶の情報は❸と合成する。次に❷を置く。
41
❶
❷
❸
クリックヒートマップ

改善策1：ページレイアウトの改善③
• 「終わった感」があるレイアウトを改善する。
【ケーススタディ】
• 《問題点》ページ上部にスクロール到達率が100％から67％に一気に下がっている箇所がある。「終わった感」を感じさせるレイアウトになっ
ていることが問題。
• 《改善策》ユーザーに「終わった感」を感じさせる主な原因は、「レイアウトが急に違うパターンに変わる」「必要以上に上下に余白が取られて
いる」。この2点を改善することで、スクロール到達率が急に下がるのを防ぐことができる。
42
スクロール到達率 100%
左：クリックヒートマップ
右：アテンションヒートマップ
スクロール到達率 67%

改善策2： CTAの改善①
• テキストを変える、設置する位置を変える、大きくする。
「CTA」とは「Call To Action」の略で、Webサイトの訪問者に、サイト運営側がしてもらいたい行動をしてもらうことを指す。具体的には、ボタンやリン
クを設置して、それをクリックしてもらうことによって実現する。
■ CTAの改善1：テキストを変える
下記のように、2つ以上のバリエーションを制作し、A/Bテストでコンバージョン率が高いテキストを見つける。
43
問合せ相談する
バリエーション1 バリエーション2
■ CTAの改善2：設置する位置を変える
CTAの位置の変更を検討する場合は、下記の事例のように、「どこに置くか」というより「どう見せるか」を検討すべき。
左の2つの事例では、記事を
スクロールしても、CTAが同じ
位置に固定表示されている。
【事例】
Kissmetrics Blog
https://blog.kissmetrics.com/
■ CTAの改善3：大きくする
CTAが設置してあるページでは、CTAよりも目立つ要素が無いのが理想的だが、CTA以外の目立つ要素も設置しなくてはならない場合は、CTAを
大きくして、ページ内で一番目立つ要素にする。
【事例】
The Daily Egg
http://blog.crazyegg.com/

改善策2： CTAの改善②
• 「ユーザーに次にしてほしいアクション」が1つでない時は、1箇所にまとめる。
特にBtoBサイトの場合、Webページを見て製品・サービスに関心を持ったユーザーが次の取る可能性があるアクションは1つではない。下記の事
例のように、可能性のあるアクションへの導線が1箇所にまとまっていれば、ユーザーにとっては探す必要が無いので時間の節約となり、同時に
ユーザーの直帰、離脱を防ぐことができる。
44
【事例】
LAN スイッチ - スイッチ - Cisco Systems
http://www.cisco.com/web/JP/product
/hs/switches/lan_switches.html

改善策2： CTAの改善③
• 「ボタンを押さないなら、直帰（離脱）するしかない」という状況を作らない
人間は、選択肢を2つ与えられると、どちらかを選ばなくてはと考える習性がある。この習性を利用して下記の事例では、「資料ダウンロード or お
客様事例を見る」という2つの選択肢を与えることで、直帰（離脱）の可能性を低くしている。
45
【事例】
サービス概要 - Treasure Data
http://www.treasuredata.com/jp/product

改善策3：「読まされるストレス」の軽減①
• 長文のテキストだけのページはユーザーを離脱させる。
長文のテキストだけのページはユーザーを直帰させる原因になる。チャート、図、グラフ、イラストを多用するようにする。
複数の項目についてユーザーにアピールしたい場合は、下記の事例のように、短時間で全体の項目を一覧できるようにした上で、詳しく知りたい
項目を読むことができるようにする。
46
【事例】
Dropbox トップページ
https://www.dropbox.com/
全項目をはじめから詳しく説明すると、文章の多い
長いページとなり、ユーザーが途中で直帰または離
脱してしまう可能性が高くなる。そうなると、全項目
を見てもらうことができない。まずはユーザーに全体
を知ってもらうことを優先する。
「詳しくはこちら」をクリックすると、
詳しい説明のページが開く。
イラストを使って、親しみやすい雰囲気を
演出する。

改善策4：「読まされるストレス」の軽減②
• 途中で長文のテキストが現れると、そのエリア以降が読まれなくなってしまう可能性がある
多くのユーザーは、長文のテキストを時間を掛けて読むことが好きではない。下記の事例のECサイトのSmart Phone向け商品詳細ページでも、長
文のテキストが表示されたところで、ユーザーの集中力が途切れてしまっていることが推測される。Smart Phone向けサイトにおいては、1画面の
ほとんどを長文テキストが占めるようなページは避けるべき。
47
【事例】
アパレルEC Smart
Phone向けサイト
商品詳細ページ

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

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

改善策5：見たいものを見せる③
• 流入元で訴求しているキーワードが、ランディングページで目に飛び込んでくるようにする。
リスティング広告などから集客する場合、広告の訴求ポイントがランディングページで、すぐにユーザーの目に飛び込んで来るようにする。
50
広告
訴求
ポイント
訴求ポイント
集客
訴求ポイントが
ユーザーの目に
飛び込んで来る
ようにする
流入元のWebページランディングページ
〇〇〇〇〇
〇〇〇〇〇〇〇〇〇
〇〇〇
〇〇〇
■訴求ポイントの説明
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇〇〇
〇〇〇〇〇〇〇〇〇〇

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

改善策6：サクセスを感じさせる①
• 商品の仕様、スペックが主役ではなく、その商品を使うことで、ユーザーがどのようにHappyになるかを示すことが重要。①
ユーザーは自分が抱えている問題を解決するために、解決策を探している。収納の悩みを抱えた人は、収納用品によって、物を片付けることが
ゴール。商品単体の写真ももちろん必要だが、下記の事例のように、「その商品を購入したら、自分が抱えている問題をどのように解決できるの
か」を見せることが重要。「解決策」を見せることで直帰率は下がり、コンバージョン・レートは上がる。
52
【事例】
日用品サイトのECサイト
収納用品
商品詳細ページ
収納用品を実際に部屋に置いて、
物を入れた写真がよくクリックされている

改善策6：サクセスを感じさせる②
• 商品の仕様、スペックが主役ではなく、その商品を使うことで、ユーザーがどのようにHappyになるかを示すことが重要。②
ユーザーが、どのような問題を、どのように解決できるのかを示す。下記の事例では、Square社のクレジットカードリーダーが、ICカードと磁気スト
ライプの両方に対応していることが一目で分かるように、写真を効果的に使用している。
53
【事例】
SQUAREリーダー｜スマホ決済ならSquare
https://squareup.com/jp/reader
ICカード、磁気ストライプの両方に対応し
ていることが一目で分かる。

改善策7： Don’t worry.
• ユーザーが不安に感じている点を解消する。
「丁寧にサポートします」と書いても、ユーザに対する説得力はあまり無い。下記の事例のようにユーザーを安心させる具体的な情報を掲載すべ
き。
54
【事例】
Unbounce TOPページ
http://unbounce.com/

改善策8：ユーザーを助ける情報を提供する①
• 「ビジネスのどのような課題をどのように解決できるか」を示さなくてはならない。まずは「どのような課題を」を示してクリックを誘う。
複数の「課題」とそれに対する「解決方法」を同時に見せると、説明の多い、ユーザーにとって読むのが大変なページになる。下記の事例のように、
まずユーザーの課題を整理して見せ、ユーザーの課題を理解していることを示した上で、「解決法を見る」で入口ページからサイト内へと
誘導するのは、直帰率を下げるための効果の高い構成の方法。
55
【事例】
クラウド型顧客管理(CRM) - 課題解決
http://www.salesforce.com/jp/smallbusinesscenter/solutions.jsp

改善策8：ユーザーを助ける情報を提供する②
• すべてのユーザーは業務の効率化を行いたいと考えているので、業務の効率化に関わるフレーズが目を引けば、ユーザーを直帰させずに済む。
ユーザーを助けるとは、「ユーザーが今までやりたかったができなかったこと」を「できるようにしてあげる」こと。下記のように、「何ができるようなる
のか」という切り口で文章を書くと、ユーザーを引き留めることができる可能性が高まる。
56
【事例】
Features | Domo
https://www.domo.com/jp/product

改善策9：関連情報を提供する
• 何かを調べるためにサイトを訪問したユーザーを直帰させないために、関連する情報のリンクを見せる。
真剣に情報を探しているユーザー程、入口ページに掲載されている情報にある程度満足したら、関連性の高い記事へのリンクが視界に入れば、
クリックする。ユーザーが関連情報のページに遷移してくれれば、直帰率は下がる。
57
事例
After-School Snacks: KidsHealth
http://kidshealth.org/parent/nutrition_center/healthy_eating/afterschool_snacks.html
この記事のテーマは”After-School Snacks”。
“MORE ON THIS TOPICS”の欄には、このテーマに
関連性が高い記事のタイトルが並んでいる。
関連性が高い記事

改善策10：ユーザー・レビュー等を提供する①
• 「これがあれば売上が上がる」というように、直感的に刺さるレビューを掲載する。①
下記の事例のタワーレコードは、アーティストのライブ会場に出向いて行ってCDの販売を行う。支払いが現金でしかできない場合と、クレジット
カード決済もできる場合とでは、売上が大きく変わってくることが容易に想像できる。ユーザーレビューは、見込み客に成功を予感させるものを掲
載することが重要。
58
【事例】
Square - iPhone、Android、iPadでクレジットカード決済。
http://square-prom.jp/lp/

改善策10：ユーザー・レビュー等を提供する②
• 「これがあれば売上が上がる」というように、直感的に刺さるレビューを掲載する。②
導入事例はたくさんあった方が良いが、入口ページにおいてユーザーは、たくさんの事例を読む時間は無い。したがって、印象に残る、刺さる
ユーザーレビューを1点掲載し、そこから、導入事例集のコンテンツに誘導するのがよい。
59
【事例】
Unbounce TOPページ
http://unbounce.com/

改善策10：サイト改善の手法(9) ユーザー・レビュー等を提供する③
• 注目度が高いユーザーレビューは、コンバージョンのきっかけになる。
下記の事例（＝ホテルのキャンペーン用ランディングページ）のユーザーレビューは、長いページの後半の中で唯一アテンションを集めている。こ
こでは、家族旅行でこのホテルを利用したユーザーが、ホテルが子供たちに好評だったというレビューが、アテンションを集めている。こうした場合、
「子供たちに好評だった」というレビューが予約増のきっかけになる可能性があるので、同様のレビューをもっと掲載すべき。
60
アテンションが集まっている箇所には、以下の文
章がある。
「多分、次回の家族旅行も子供達のリクエストで
●●さんにお邪魔すると思います。ありがとう
ございました」
【事例】
ホテルのキャンペーン用ラ
ンディングページ。Smart
Phone用サイトのため、縦に
長く、右の2列で1ページ分
のアテンションヒートマップ。

改善策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

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

第5章 A/Bテスト
63

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

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

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

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
❶ ❷

第2節 Optimizely + Ptengine でA/Bテスト
74
※Optimizelyとヒートマップの連携ができるのは、Ptengine有料版の
BUSINESS、FIRST、PREMIUMのプランです。

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

2. Ptengineの設定
• プロファイル設定で、「ヒートマップ」→「実験」でOptmizelyのスイッチをONにする。
• PtengineでOptmizelyの実験結果のヒートマップが見られるようになるのは、実験日の翌日から。たとえば
今日が8月20日であれば、レポートの日付指定を8月19日以前に設定する必要がある。
87

3. Ptengineのヒートマップで、Optmizelyの実験結果を比較する。
• 日付を前日以前（注）に指定して（図の❶）、Optimizelyのアイコンが表示されていることを確認（図の❷）。
「比較対象の追加」（図の❸）をクリック。
（注）PtengineでOptmizelyの実験結果のヒートマップが見られるようになるのは、実験日の翌日から。たとえば今日が8月20日であ
れば、レポートの日付指定を8月19日以前に設定する必要がある。
88
❶ ❸
❷

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

第6章広告の選択
90

広告の選択
• 「コンバージョン・レート」を上げ、「直帰率」を下げる広告に予算を集中させることは、Webサイトを効率的に
運営し、ビジネスを成功させるために重要である。直帰率を下げる広告については、第2章の「手順5：サイト
改善の手法(4) 欲しいものを見せる」でも述べたが、メディアに広告を出稿する場合は、出稿先のメディア
に貴社のターゲットとなる見込み客があまり訪れていないのなら、そのメディアへの広告出稿をとりやめる
べき。
• 広告流入元別にコンバージョン・レートを見て、広告予算の配分を決めるのは当然だが、必ずしもサイト上
でユーザー行動が完結しない場合は、以下の3つの基準を考慮して広告を選ぶ必要がある。
1. 下までスクロールするユーザーを連れてくる広告
2. クリックしてほしいところをクリックしてくれるユーザーを連れてくる広告
3. 読んでほしい箇所をじっくり読んでくれるユーザーを連れてくる広告
91

サイト改善に貢献する広告の選択1. 下までスクロールするユーザーを連れてくる広告
• ヒートマップツールの「スクロール到達率」で、到達率50%のラインを比較。50％のラインがWebページの下
にある程、その広告で集客したユーザーの興味関心と貴社が提供できる製品・サービスがマッチしていると
言うことができる。
92
リスティング広告の場合は、1
ワードずつ比較すると分析の工
数が膨大になるので、ターゲット
別にグループを分けて、比較を
行う。
（例）
グループ１：経営層向け
グループ2：情報部門の管理職
グループ3: 「グループ2の」ために
情報収集する人
広告1 広告2 広告3
流入流入流入
50%
50%
50%
50%のユーザーが
離脱した位置を
比較

サイト改善に貢献する広告の選択2. クリックしてほしいところをクリックしてくれるユーザーを連れてくる広告
• ヒートマップツールの「クリックヒートマップ」で、流入元広告毎にクリックの状況を比較。「クリックヒートマッ
プ」は、パッと見て、よくクリックされているかどうかを直感的に把握することができる。
93
流入流入流入
ファーストビュー付近
だけでなく、ページ途中の
クリックの状況にも
注目する。

サイト改善に貢献する広告の選択3. 読んでほしい箇所をじっくり読んでくれるユーザーを連れてくる広告
• たとえば、貴社の製品の強みについての解説など、「ユーザーにここはぜひ読んでほしい」という部分が
ヒートマップツールの「アテンションヒートマップ」で確認して、アテンションを集めている広告の場合、ホット
なリード（見込み客）を連れてきてくれている可能性が高いと言える。
94
流入流入流入
広告3で集客した
ユーザーは、ページ全体を
比較的よく見てくれている。

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

EFO（エントリーフォーム最適化）とは
• エントリーフォームは通常、下記の図のようなフローで構成されている。 EFO（エントリーフォーム最適化）は、
入力を開始したセッション数（入力開始ページの訪問数）を100％とした場合、入力完了画面（＝サンクス
ページ）に至るまで離脱のパーセンテージをできる限り小さく抑えるための最適化の手法。
96
入力開始画面
支払方法選択、ギフト指定等
オプショナルな
入力画面
入力内容
確認画面
入力完了
画面
途中離脱はほとんどの
場合、入力画面で起こる
通常、確認画面まで
到達すれば、ほとんどの
ユーザーは離脱しない

EFOの手法1: 入力項目は必要最小限に①
• Web分析ツールで各入力項目のフォームにマウスカーソルがインしたことをイベントとして計測することがで
きる。下記の図のようにマウスカーソルが入った数を上から順番に計測していくと、ユーザーが入力をやめ
た項目を推測することができる。
97
項目1
項目2
項目3
項目4
マウスカーソルが1回入る＝
1回のイベントとして計測
イベント回数が急に
減った1つ前の項目が
離脱の原因になって
いる可能性がある。
＝イベント1回

EFOの手法1: 入力項目は必要最小限に② ユーザーがどこで入力をやめているかを推測する
98
設定画面の「イベント」の項目で「カスタム」をクリックす
ると、カスタムイベントの設定をすることができる。カス
タムイベントとは、Web上でユーザーが行う計測可能な
アクションの全てを指す。「Add」をクリックすると、設定
を追加することができる。
たとえば、下記の入力フォームで、「お名前」の入力を、
イベント名「eventNAME」と命名して
計測する場合を例に説明する。
入力フォームのURLを入力し、「取得」ボタンを
クリック。
（次ページに続く）
例： Ptengine「カスタムイベント」機能を使って、ユーザーがどこで入力をやめているかを推測する

EFOの手法1: 入力項目は必要最小限に③ ユーザーがどこで入力をやめているかを推測する
99
赤色の枠線で囲まれているところが、全て、カスタムイ
ベント計測可能な部分。Ptengineの場合、どの部分を
計測する場合でも、WebページのHTMLソースを変更す
る必要がない。
「お名前」のフォームにカーソルを入れると、ポップアッ
プWindowが表示されるので、「確定」をクリック。
「カテゴリ」「アクション」「ラベル」「バリュー」を記入して
「保存」をクリックすれば設定完了。
項目必須内容
カテゴリ必須計測したい対象のグループ
アクション必須計測したい対象でのユーザーのアクション
ラベルオプショ
ン
追加の任意の項目
バリューオプショ
ン
イベントに付与させたい数値（整数）。レポー
トで集計される。

EFOの手法1: 入力項目は必要最小限に④ ユーザーがどこで入力をやめているかを推測する
100
カスタムイベント機能を使って、入力フォーム最適化を
することが可能。右の図のように、フォーム入力欄の上
から順番にイベントを設定し、それぞれのフォームにマ
ウスカーソルが何回入ったかを調べる。マウスカーソ
ルが入る回数が目に見えて減った箇所があったら、そ
の直前のフォームが、ユーザーにとって、何らかの理
由で、入力が面倒な箇所である可能性がある。
①フォームのURLを入力する
②管理画面に
フォームが表示され、
ユーザーが何らかの
アクションができる
ところが赤枠で選択
可能になる。
124
110
103
100
98
76
54
③各フォームにマウ
スカーソルが入った
回数を調べることで、
ユーザーがどこで入
力をやめているかが
推測できる。

EFOの手法2: 受け付けない理由をリアルタイムで示す
• 入力した内容の「何が受け付けられないのか」「なぜ受け付けられないのか」は、確認画面に進んでからで
はなく、入力中にリアルタイムで示す方が、ユーザーのストレスを軽減することができる。
101
入力したパスワードが、
なぜ受け付けられない
のかを、その場で示す。
入力した内容の何が
受け付けられないの
か、その場で示す。
【事例】
ebay
http://www.ebay.com/

EFOの手法3: 入力ステップの現在位置を示す
• 「入力ステップは幾つあるか」「自分は今どこまで進んだのか」を、ユーザーに分かりやすく示す。
102
航空券の予約が5つのステップで完了することが示されており、
現在2ステップ目まで進んでいることが示されている。
【事例】
Southwest Airlines
https://www.southwest.com/

EFOの手法4: 気が散る要素は削除
• 入力のプロセスにおいて、不要な導線は全て削除することで、ユーザーが入力プロセスから離脱することを
防ぐ。
103
【事例】
ebay
http://www.ebay.com/
• 左のユーザーアカウント新規登録画面の
事例では、ヘッダー部のグローバルナビ
ゲーション・バーは削除されている。（＝
サイト内のほぼ全てのページに設置され
る共通のナビゲーション・バー）
グローバルナビゲーション・
バー
ユーザーアカウント新規登録画面

EFOの手法5: 「必須」「任意」のラベルを分かりやすく付ける
• 「必須」「任意」の表示は入力フォームの前に分かりやすく示す。また、先に必須項目だけまとめて、その後
に任意の項目を並べる。
104
【事例】
Ptengine
http://www.ptengine.jp/contact/

EFOの手法6: プルダウン、チェックボックス、ラジオボタンを適切に使う
• 選択肢が多くある場合はプルダウン、少ない場合は、チェックボックスかラジオボタンを使う。
105
【事例】
British Airways
http://www.britishairways.com/travel/register-now/public/en_gb

EFOの手法7: リセットボタンは不要
• リセットボタンを設置すべきではない。全ての項目をも
う一度入力し直す状況は、まずない。また、ユーザー
は間違ってリセットボタンをクリック（タップ）した場合、
最初から入力しなおす気力を失ってしまう可能性が高
い。
106
【事例】
MOZ
https://moz.com/checkout/freetrial
リセットボタンが設置してある
フォームはほとんどない。

EFOの手法8: submitは「名詞」ではなく「〇〇する」
• ボタンは「〇〇する」という文言にするべき。
107
【事例】
Yahoo! Mail
https://www.yahoo.com/
【事例】
Salesforce
https://www.salesforce.com/

EFOの手法9: Smart Phoneユーザーが入力しやすいインターフェイス
• Smart Phoneユーザーが入力しやすいよう、１つ１つの入力フォームが十分な大きさになるようにする。また、
入力項目が多い時は、右下の事例のように、ページを分割する。
108
【事例】
Walmart スマートフォンサイト
https://www.walmart.com/
【事例】
HubSpot スマートフォンサイト
https://www.walmart.com/

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

EFOの手法11: placeholder 属性
• input要素のplaceholder属性を指定することで。指定の文字列が入力欄内に薄いグレー色で入力例として
表示される。（ HTML5から追加された。）
【HTMLソースの記述例】
• お名前【必須】： <input type="text" placeholder="例）山田太郎">
【表示例】
110

EFOの手法12: 住所は郵便番号から自動検索
• 郵便番号から住所を取得できるようにする。ユーザーの手間を省くことで、最後まで入力してくれるユー
ザーの割合を高くすることができる。
111
【事例】
日本郵便
https://www.post.japanpost.jp/question/contact_us/inquiry.html

EFOの手法13: 半角・全角を指定しない
• 電話番号、郵便番号、住所等の入力欄は、半角・全角の指定をすると、使い勝手が悪くなる。入力欄は半
角・全角のどちらも入力可能なようにしておく。半角・全角の入力ミスは意外と多く、これだけで入力を完了
させるユーザーの割合が変わる可能性がある。
112
【事例】
日本郵便
https://www.post.japanpost.jp/question/contact_us/inquiry.html この例のように、半角・
全角をしていると、ユー
ザーが入力を完了して
くれる割合が下がる可
能性がある。

EFOの手法14: 1年以内の日付指定はカレンダー入力
• 生年月日の場合は、「年」「月」「日」をプルダウンメニューにすることが一般的だが、予約日などの1年以内
の日付指定は、カレンダー入力を使うとユーザーの作業負荷が少なくなる。
113
【事例】
Southwest Airlines
https://www.southwest.com/

参考資料１：用語の説明
114

用語の説明①
115
用語同義語定義
ページビュー数 PV数、閲覧数、閲覧回数 Webページが閲覧された回数。
訪問回数訪問数、セッション数訪問者がサイトに入ってきてから離脱するまでの一連の行動を
1回の訪問とみなす。サイト内で30分以上、新たな行動が起き
なかった場合は（例：離席した場合など）、訪問は終了したとみ
なす。30分はGoogle Analyticsをはじめとする幾つかのツール
のデフォルト設定。この値はカスタマイズできるツールが多い。
Ptengineでは、スマートフォンの場合、セッションが切れる時間
を5分に設定してある。
訪問者数ユニークユーザー数、UU
数、ユニークブラウザ数、
UB数
集計期間中、何人のユーザーがアクセスしてきたのかを、ブラ
ウザのCookieに基づいて集計した値。
1人のユーザーが複数のブラウザ（デバイス）を使用した場合
は、重複カウントとなるが、CookieとユーザーIDと連携させるこ
とで、これを防ぐことができる。

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

用語の説明③
117
直帰率 ■ サイト全体に関して見る場合：全訪問回数のうち、入口と
なった1ページだけを見てサイトを離脱した訪問の割合。
■ 特定の1ページに関して見る場合：当該ページを入口として
サイトに入って来た訪問のうち、サイト内の他のどのページにも
遷移せずに離脱した訪問の割合。
離脱率当該ページを訪問した訪問のうち、当該ページを最後にサイト
を離脱した訪問の割合。
100％－離脱率＝遷移率
新規率新規訪問の割合全訪問回数のうち、新規訪問の割合。Google Analyticsは、過
去2年間、1度もサイトを訪問していないブラウザが訪問した際
に、新規の訪問とみなす。（ブラウザのCookieで判別しているた
め、過去に何度も訪れている人ユーザーが新しいブラウザで
訪れた場合も、新規の訪問とみなす。）Ptengineの場合は、計
測開始後2年以上経過した再訪問も再訪問とみなす。
（対義語：再訪問率、再訪問の割合、リピート率、リピート訪問
の割合）
平均滞在時間 1訪問あたりの滞在時間 1回の訪問の際に、サイト内で過ごした時間の平均値。
平均閲覧数平均閲覧ページ数、平均
PV数、1訪問あたりのPV
数
1回の訪問の際に閲覧したページビュー数の平均値。

用語の説明④
118
完読率 RTR（read through
rate）
記事を読み終えた読者の割合

Web分析ツールによる計測値の違いについて
• 異なるWeb分析ツールを併用すると、計測値に違いが生じることがある。たとえば、Google Analyticsと
Ptengineとでは、滞在時間の計測方法や1訪問あたりの有効セッション時間等、計測上の仕様が異なるた
め、同じ計測箇所でも計測値に差異が生じる。
【誤差が生じやすい項目の一例】
• 訪問数（Ptengineではスマートフォンのセッションを5分と定めている。 ※GAはPC、スマートフォンと
も30分）
• 平均閲覧時間
• 訪問者数（UU数）
119

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

ヒートマップツールとは①
• ヒートマップツールとは、ユーザーが「どこをクリックしたのか」「どこを見たのか」などをサーモグラフィーを
通してビジュアライズすることができるツール。本ドキュメントでは、Ptengineを例に説明する。
• Ptengineには、Webページ上でどこがクリック（タップ）されたのかを集計した「クリック」と、サイト上でどこが
注視されたかを集計した「アテンション」の2種類のヒートマップがある。また両方のヒートマップには「スク
ロール到達率」を示す罫線が表示される。
121よくクリックされる箇所よく閲覧される箇所

ヒートマップツールとは② ヒートマップの操作方法
122
1 23
4
1
ユーザーがＷｅｂページのどこに注目しているか、どのコンテンツを目指しているかをマウスのクリック（PC）やタップ（スマートフォン）を元にヒート
マップで表したものが「クリックヒートマップ」。
2 ページのどこが注視されたかを、各エリアの滞在時間から判断してヒートマップで表したものが「アテンションヒートマップ」。
3
「PAGE SCENE」はサイトのWebページの画面が縮小されるが、「ウェブビュー機能」を利用することで、実寸の大きさでヒートマップを確認すること
ができる。
4 「デバイス・センター」と呼ばれるこの箇所で、ユーザーが閲覧に使用したデバイスを絞り込むことができる。例えば、タブレットやスマートフォンか
らのPCサイト閲覧者を除外し、PCからの閲覧者のみのデータを抽出することができる。

ヒートマップツールとは③ クリックヒートマップ
• 「クリックヒートマップ」では、サイトがどのように利用されているかを確認する。クリックヒートマップ上にマウ
スカーソルを合わせると、以下のような表示になる。
123
1
1
3
4
2
5
＜クリックヒートマップの見方＞
クリックヒートマップはユーザーがサイトをクリック（タップ）した場所がヒートマ
ップで表され、クリック（タップ）回数が多かった場所はより赤くなり、少なかっ
た場所はより青くなる。
スマートフォンの場合、スクロールやフリック等、タップ以外での画面タッチは
除外されて表示される。
スクロール到達率は、ユーザーがサイトを閲覧した際に、どこまでスクロール
したのかをユーザーの割合で示しており、どの部分まで見たのかが分かるよ
うになる。
スクロール到達率100％＝ファーストビューとなり、ページ下部になればなる
程、数値は下がる。50％のラインが表示された場合、訪問者の2人に1人はそ
の箇所までスクロールし閲覧したことになる。
【色の目安】 ※下記の数値は相対的なものです。
赤→一番クリック数が多いエリア
橙→赤の80％程度
黄→赤の60～70％程度
緑→赤の50％程度
青→赤の20％～40％程度
1
スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、
一目で広い範囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→P13参照）。
2 スクロール到達率を表す数字、およびライン。
3 スクロール到達率のオン/オフを切り替えるボタン。（画面上ではオン）
4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし、再読み込みを行う。
5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常はPtengine側で自動調整される。

ヒートマップツールとは④ アテンションヒートマップ
• 「アテンションヒートマップ」では、サイト内の該当箇所の滞在時間から、Webページがじっくり見られている
かを確認する。クリックマップ上にマウスカーソルを合わせると、以下のような表示になる。
124
＜アテンションヒートマップの見方＞
アテンションヒートマップはユーザーがサイトで見ていたエリアをその場所での
滞在時間から総和し、ヒートマップの濃淡で表す。よく見られている場所ほど
赤くなる。
スクロール到達率は、クリックヒートマップ同様、ユーザーがサイトを閲覧した
際に、どこまでスクロールしたのかの到達率を表している。
【色の目安】 ※下記の数値は相対的なものです。
赤→一番閲覧されたエリア
橙→赤の80％程度
黄→赤の60～70％程度
緑→赤の50％程度
青→赤の20％～40％程度
1
1
3
4
2
5
1
スクロールバーでサイト下部を確認することができるが、左上の→をクリックすると、別ウィンドウでヒートマップが表示されるため、一目で広い範
囲を確認したり、レポートとして出力することができる。「ウェブビュー機能」も利用可能（→P13参照）。
2 スクロール到達率を表す数字、およびライン。
3 スクロール到達率のオン/オフを切り替えるボタン。（画面上ではオン）
4 ヒートマップが正しく表示されない場合、こちらの更新ボタンをクリックし再読み込みを行う。
5 「赤く表示されるエリア」のしきい値を変更する機能だが、通常はPtengine側で自動調整される。

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

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

• ページ上部にあるフィルターアイコンをクリックする。
ヒートマップにフィルターを掛ける
• 127
特定のユーザの動向だけを知りたい場合、フィルター機能を利用してセグメントを掛ける。
フィルターアイコン
予めセグメント条件として保存してある（後述）フィル
ターの条件を設定する。ラジオボタンをクリックし、「
実行」ボタンをクリックする。

Webサイト改善の手順

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à Webサイト改善の手順

Similaire à Webサイト改善の手順 (20)

Plus de Ptmind_jp

Plus de Ptmind_jp (20)

Webサイト改善の手順