1 / 32

トラフィック量が多く利便性が低い

モバイルページの改善

Maile Ohye

@maileohye

Google

2013 年 11 月 26 日

2 / 32

「ユーザーの 50％が、『その企業を気に入っていても、ウェブサイトがモバイルに対応していなければ利用しなくなる』と回答」

http://googlemobileads.blogspot.com/2012/09/mobile-friendly-sites-turn-visitors.html

「現在ユーザーがモバイルサイトに最も期待していること」

（Google 調べ）

3 / 32

利便性が低いスマートフォン向けページのランキングの変更

スマートフォンユーザーに対して、次のような間違ったリダイレクトが生じないようにする

404 ページへの�リダイレクト
該当するモバイルページではなくホームページを表示
無限ループ

スマートフォンのクロールエラー（間違ったリダイレクトなど）用の機能をウェブマスターツールに新たに導入

4 / 32

あらかじめ行っておきたい下準備

ウェブサイトのアクセス解析を導入しておくこと�（Google アナリティクスなど）
デスクトップ / モバイルサイトの所有権がウェブマスターツールで確認済みであること

5 / 32

解説する内容

パート 1. 問題の特定

モバイルサイト全体にかかわる基本的な問題がないかを確認
ユーザーの利便性が低い個々のページをピックアップ

パート 2. 改善の実施

6 / 32

解説する内容

パート 1. 問題の特定

パート 2. 改善の実施

7 / 32

デスクトップとモバイルのデータをセグメント化�（必要に応じてタブレットもセグメント化）

8 / 32

デスクトップからのトラフィックのセグメント

9 / 32

モバイルからのトラフィックのセグメント

10 / 32

モバイルおよびデスクトップトラフィックの

セグメント

11 / 32

モバイルトラフィック全体にかかわる問題

確認事項:

デスクトップのトラフィックに比べ、モバイルの�トラフィックが著しく低くなっていないか？�（ユーザー各国の平均的なモバイルトラフィックと比較）

ユーザー各国の �デスクトップトラフィックとの�比率で見ると、モバイル

トラフィックは妥当と�考えられる

12 / 32

モバイルトラフィック全体にかかわる問題

確認事項:

デスクトップに比べ、モバイルからのリピーター数が著しく少なくなっていないか

デスクトップとの比率で見ると、モバイルからの�リピート数は妥当

13 / 32

デスクトップのユーザーフローとの比較

20% が�ショッピングの�メインページに�アクセス、�53% が離脱

14 / 32

モバイルユーザーフロー

12% が�ショッピングの�メインページに�アクセス、�59% が離脱

15 / 32

ランディングページの問題

モバイルの平均直帰率に注目する
デスクトップとモバイルの直帰率の平均差分に注目する

16 / 32

/You+Tube/ページ

/You+Tube/ プロダクトページはモバイルの�平均直帰率の 2 倍

17 / 32

/Accessories/

Google+Watch+Set.axd ページ

/Accessories/Google+Watch+Set.axd は平均直帰率の 4 倍！

18 / 32

/Google+Redesign/Wearables/Men+s+T+Shirts/

ページ

/Google+Redesign/Wearables/Men+s+T-Shirts/ は�モバイルの直帰率が

デスクトップの 3 倍！

19 / 32

[イベント]でモバイルユーザーの行動を追跡

<a href="http://www.example.com/page.html"

id="full-site-link">Full site</a>

...

var fullSite =

document.getElementById('full-site-link');

addListener(fullSite, 'click', function() {

ga('send', 'event', 'Mobile site functionality',

'click', 'Full site');

});

...

イベントを追加して「フルサイト」リンクのクリックを追跡

20 / 32

Googleアナリティクスの�[イベント]

フルサイト（デスクトップサイト）へのクリックを追跡

21 / 32

解説する内容

パート 1. 問題の特定

パート 2. 改善の実施

22 / 32

解説する内容

パート 1. 問題の特定

パート 2. 改善の実施

/You+Tube/ のカテゴリページ
/Google+Redesign/Wearables/Men+s+T-Shirts/ のカテゴリページ
/Accessories/Google+Watch+Set.axd の個々の商品ページ

23 / 32

ページビューで並べ替え

読み込み時間の平均

[サイトの速度とページの読み込み速度]

相対的なページ読み込み時間を表示

24 / 32

/You+Tube/ ページは、平均読み込み時間の350%！

[サイトの速度とページの読み込み速度]

25 / 32

[サイトの速度についての提案]

26 / 32

テスト端末を使用、�なければ Chrome�デベロッパーツールを

利用

モバイル�ユーザー�エージェント

�モバイル端末に見られる問題の再現を試みる

不要なリダイレクト
邪魔なポップアップウィンドウ
小さすぎるフォント/ボタン

27 / 32

操作性の改善

小さすぎる�フォントやボタン

閉じにくい

ポップアップウィンドウ

28 / 32

コンテンツの改善

カテゴリページのような�邪魔なポップアップ�ウィンドウはない

サイトの他のページと

同様の小さいフォント

とボタン

29 / 32

トラフィックソースでユーザーをさらに�セグメント化

ランディングページ >

モバイルトラフィック >�セカンダリ�ディメンション:

ソース >

円グラフビュー

ユーザーの82% が検索からアクセス

30 / 32

ウェブマスターツール > 上位のページ

上位のページへの�アクセスの元となった

検索クエリを表示

モバイルで絞り込み

モバイル�サイトを�選択

このページへの検索トラフィックのほとんどが [google watch] という�クエリによるもの

31 / 32

期待と検索結果のミスマッチ

[google watch] �で検索した�ユーザーは�スマート端末を�期待

トラフィックの絞り込みを改善する方法:

タイトルや�meta descriptionを調整
商品名を変更

32 / 32

モバイル開発のベストプラクティスを参考にする

HTML5 Rocks

html5rocks.com/mobile

携帯端末に最適化されたウェブサイトの構築方法:

developers.google.com/webmasters/

smartphone-sites/

Think Insights:

google.com/think/mobile

PageSpeed: developers.google.com/speed