Tip:
Highlight text to annotate it
X
こんにちは マイリー・オイェです
こんにちは マイリー・オイェです
Googleウェブマスターサポートチームの デベロッパープログラムテックリードです
Googleウェブマスターサポートチームの デベロッパープログラムテックリードです
ウェブマスターYouTubeチャンネルでの これまでの動画では
ウェブサイトの改善について詳しく 説明してきましたが
基本的にはPC向け ウェブサイトを対象にしていました
この動画では、モバイルウェブのみに 焦点を合わせ
トラフィック量が多く利便性が低い モバイルページを改善する方法を紹介します
トラフィック量が多く利便性が低い モバイルページを改善する方法を紹介します
現在ユーザーがモバイルサイトに 期待していることは?
現在ユーザーがモバイルサイトに 期待していることは?
Googleモバイル広告のブログによると 「企業を気に入っていても
サイトがモバイル対応でなければ 見ない」とユーザーの50%が答えています
サイトがモバイル対応でなければ 見ない」とユーザーの50%が答えています
サイトがモバイル対応でなければ 見ない」とユーザーの50%が答えています
ウェブマスター向け公式ブログの 投稿では
スマートフォンの検索結果における ランキングの変動について
私の同僚であるピエール・ファーと ヨシキヨ・カトウは
利便性が低いウェブページでのスマートフォンの ランキング低下について述べています
利便性が低いウェブページでのスマートフォンの ランキング低下について述べています
通常、こうした利便性の低さの 原因は
404ページにリダイレクトされたり、 モバイルページではなく
ホームページが表示されたり 無限ループに入ったりすることにあります
ホームページが表示されたり 無限ループに入ったりすることにあります
今日の話は、スマートフォンサイトの 作成ではありません
そこはもう済んでいますので
ユーザーの利便性をさらに向上させる ことについてお話しします
サイトを改善するにあたり 役立つ前提条件があります
ウェブサイトのアクセス解析を インストールしておくこと
ここではGoogleアナリティクス を使います。さらに、
PC/モバイルサイトの所有権が ウェブマスターツールで確認済みであること
PC/モバイルサイトの所有権が ウェブマスターツールで確認済みであること
レスポンシブウェブデザインを 使用している場合は
一方のサイトの所有権だけを 確認してください
PCページとモバイルページの URLが
wwwとmというように異なる場合は 2つのサイトを確認する必要があります
では、問題を特定する ことから始めましょう
まず、モバイルサイトの 基本的な問題を確認します
次に、トラフィック量が多く ユーザーの利便性が低いページを
探してフラグを付けます
動画の後半では、これらの問題がある ページを改善する方法を中心に説明します
動画の後半では、これらの問題がある ページを改善する方法を中心に説明します
この動画では、私がGoogleストア、
つまり、YouTubeのTシャツやドロイド君の フィギュアなどのGoogle商品を販売する
つまり、YouTubeのTシャツやドロイド君の フィギュアなどのGoogle商品を販売する
eコマースサイト www.googlestore.com の 管理者を担当するとします
eコマースサイト www.googlestore.com の 管理者を担当するとします
このサイトを使って、問題を特定する ことから始めます
では、PCとモバイルの各トラフィックの アナリティクスデータをセグメント化しましょう
では、PCとモバイルの各トラフィックの アナリティクスデータをセグメント化しましょう
必要ならタブレットも セグメント化できます
Googleアナリティクスで [新しいセグメントを作成]を選択します
PCトラフィックのセグメントを 作成するには、[テクノロジー]を選択し
デバイスカテゴリにPCを含める 条件(desktop)を設定します
モバイルトラフィックセグメントの作成では プリセット値を使用します
モバイルトラフィックセグメントの作成では プリセット値を使用します
アナリティクスのデータを見ると
モバイルユーザーとPCユーザーとで 動作が異なることがわかります
モバイルユーザーとPCユーザーとで 動作が異なることがわかります
ページ単位の問題を探す前に
モバイルトラフィック全体に影響する可能性 がある基本的な問題を調べてみましょう
モバイルトラフィック全体に影響する可能性 がある基本的な問題を調べてみましょう
[ユーザーサマリー]で PCとモバイルの各トラフィック
セグメントを数か月という日付範囲 に設定し
異常な状態を探します
端末別にユーザー各国の平均の 分析結果を比較すると
PCよりモバイルのトラフィックが 著しく低くなっています
PCよりモバイルのトラフィックが 著しく低くなっています
ユーザー数が155,000人の モバイルトラフィックは
サイト全体のトラフィックの約22%です
22%に達しているので これは、このモバイルサイトで
重大な問題は発生していないという 1つの良い兆候です
重大な問題は発生していないという 1つの良い兆候です
ユーザー各国のモバイルトラフィックは
PCトラフィックの約1/5から 1/3に相当します
ですから、22%は妥当です
再び[ユーザーサマリー]で
サイトでモバイルのリピーター数が PCより著しく少ないかどうかを
サイトでモバイルのリピーター数が PCより著しく少ないかどうかを
確認します これも基本的な問題の兆候です
新規ユーザー数とリピーター数が モバイルとPCの円グラフに表示されます
新規ユーザー数とリピーター数が モバイルとPCの円グラフに表示されます
新規ユーザー数とリピーター数が モバイルとPCの円グラフに表示されます
サイトに問題はないようです モバイルの新規ユーザー数と
リピーター数の分布は PCとほぼ同じです
リピーター数の分布は PCとほぼ同じです
もし、モバイルの リピーター数が5%のみで
PCのリピーター数が この比率の倍だったら
問題の兆候だったかも しれません
モバイルサイトの基本的な問題を 確認する方法がもう1つあります
PCとモバイルの 各ユーザーフローを比較することです
PCとモバイルの 各ユーザーフローを比較することです
PCでは、最初のランディングページは ほとんどがホームページです
PCでは、最初のランディングページは ほとんどがホームページです
そして、20%がメインのショッピングページ /shop.axd/home にアクセスし53%が離脱します
そして、20%がメインのショッピングページ /shop.axd/home にアクセスし53%が離脱します
モバイルのユーザーフローは 比率的には似ていますが
統計的には若干下がっています
モバイルユーザーの12%が メインのショッピングページに進みますが
PCでは20%です
また、モバイルユーザーの59%が
完全に離脱しますが PCでは53%です
ホームページの離脱統計は
エンゲージメントの点から見ると それほど健全ではありません
この点については、別の動画で詳しく 説明しますが
これも、モバイルサイト固有の重大な 問題の兆候ではありません
これも、モバイルサイト固有の重大な 問題の兆候ではありません
ここまでは、モバイルサイトの 基本的な調査を行いました
ここまでは、モバイルサイトの 基本的な調査を行いました
次はページ単位です
トラフィック量が多く 利便性が低いページにフラグを付けます
そのためには、Googleアナリティクスの [ランディングページ]セクションに移動します
そのためには、Googleアナリティクスの [ランディングページ]セクションに移動します
ランディングページとは、ユーザーがサイトに 最初に入ったときに表示されるページです
ウェブでリンクを検索したのか
ブラウザにアドレスを入力したのか といった手段は問いません
ランディングページはページビューで 並べ替えられるので
トラフィック量が多い問題の検出に 役立ちます
まず、モバイルの平均直帰率を見つけて
PCとモバイルの直帰率の 平均差分を求めます
この場合は約7%です
フラグを付けるのは、 トラフィック量が多く
直帰率がモバイルの平均直帰率 よりも著しく高い、つまり
モバイルとPCとの直帰率 の差分が平均差分より高いページです
モバイルとPCとの直帰率 の差分が平均差分より高いページです
モバイルユーザーに2番目に人気の ランディングページは
YouTubeカテゴリのページ /You+Tubeです
YouTubeカテゴリのページ /You+Tubeです
このページのユーザー数は 過去数か月間で9,000人を超えますが
残念なことに モバイルの平均直帰率も2倍です
残念なことに モバイルの平均直帰率も2倍です
後半の改善対象としてこのページに フラグを付けましょう
ランディングページの数行下に /Accessories/Google+Watch+Set.axd があります
ランディングページの数行下に /Accessories/Google+Watch+Set.axd があります
モバイルの平均直帰率は87%で4倍です
このページにも後半の改善対象として フラグを付けましょう
さらに悪いことに、数行下の
/Google+Redesign/Wearables/Men+s+T+Shirts/page では、モバイルの直帰率が
PCの3倍です
モバイルの平均直帰率は PCより約8%高いですが
モバイルの平均直帰率は PCより約8%高いですが
このメンズのTシャツカテゴリページでは その3倍です
このメンズのTシャツカテゴリページでは その3倍です
このページにもフラグを付けましょう
Googleアナリティクスの [ランディングページ]のほかに
[イベント]でも、モバイルユーザーの 行動を追跡できます
たとえば、ここで使用したコードでは
モバイルページでフルサイトリンクが クリックされたかどうかをテストしました
モバイルページでフルサイトリンクが クリックされたかどうかをテストしました
フルサイトに行くリンクを追跡したところ このページは
モバイルユーザーの希望する操作性や機能性より 劣っている可能性が高いことがわかりました
モバイルユーザーの希望する操作性や機能性より 劣っている可能性が高いことがわかりました
[イベント]では、所定のページのイベント 発生頻度の集計ビューを表示できます
[イベント]では、所定のページのイベント 発生頻度の集計ビューを表示できます
上級者になれば、お問い合わせ、電話、 メールアドレスのクリックのような
マイクロコンバージョンイベントの追跡機能も 役に立ちます
マイクロコンバージョンイベントの追跡機能も 役に立ちます
これまでに、トラフィック量が多く ユーザーの利便性が低いページを
いくつか特定しました
この動画の後半では
改善を加えるさまざまな手法を 中心に説明します
改善を加えるさまざまな手法を 中心に説明します
先ほどフラグを付けた3つのページ を改善してみましょう
YouTubeカテゴリページ、 Google+Redesign Wearablesの
メンズTシャツカテゴリページ、 そしてAccessories Google
Watch Setの個別商品ページです
特にモバイルで 改善対象としておすすめするのが
特にモバイルで 改善対象としておすすめするのが
[行動]内の[サイトの速度]です
この[サイトの速度とページ 読み込み速度]セクションでは
ページ読み込み速度がサイトの平均より 遅いか速いかがわかります
ページ読み込み速度がサイトの平均より 遅いか速いかがわかります
ページビューでの並べ替えが デフォルトで用意されているので
トラフィック量が多く、ユーザーの利便性が 低いページがすぐわかります
トラフィック量が多く、ユーザーの利便性が 低いページがすぐわかります
このセクションをGoogleアナリティクスの担当の ニック・ミハイロフスキーと一緒に確認しました
このセクションをGoogleアナリティクスの担当の ニック・ミハイロフスキーと一緒に確認しました
そこで、私たちが かなり驚いたのは
ページビュー全体で3番目に人気が高い YouTubeカテゴリページの
ページビュー全体で3番目に人気が高い YouTubeカテゴリページの
読み込みに20秒近く かかっていることです
サイトのモバイル平均より 350%も遅いのです
このページの直帰率が平均より高いことは パフォーマンスの低さに原因があるようです
このページの直帰率が平均より高いことは パフォーマンスの低さに原因があるようです
モバイルユーザーが辛抱強く20秒も 待つとは思えません
モバイルユーザーが辛抱強く20秒も 待つとは思えません
改善するには 速度を上げる必要があります
改善するには 速度を上げる必要があります
[サイトの速度についての提案]に
YouTubeカテゴリページ向けの 提案が9つあります
通常、ページ速度はモバイルユーザーの 利便性を低下させます
もう1つの原因は操作性の悪さです
モバイルページの操作性の問題を しっかりと把握するため
モバイルページの操作性の問題を しっかりと把握するため
できる限り、ユーザーと同じ端末を使って サイトを表示、操作してみてください
できる限り、ユーザーと同じ端末を使って サイトを表示、操作してみてください
ただし、ユーザーの端末を 入手できない場合は
モバイルユーザーへの表示概要を把握できる Chromeデベロッパーツールが便利です
モバイルユーザーへの表示概要を把握できる Chromeデベロッパーツールが便利です
[設定]の[上書き]で
ページを表示するさまざまなモバイル ユーザーエージェントを選択できます
ここでは調査する2つ目のページの URLを入れました
ここでは調査する2つ目のページの URLを入れました
このカテゴリページのPCとモバイル の直帰率の平均差分は3倍です
このカテゴリページのPCとモバイル の直帰率の平均差分は3倍です
操作性の問題を見つけるため
不要なリダイレクト、無駄なポップアップ 小さすぎるフォントやボタンといった
不要なリダイレクト、邪魔なポップアップ 小さすぎるフォントやボタンといった
利便性の問題にかかわる さまざまな点を確認します
利便性の問題にかかわる さまざまな点を確認します
個々の商品をクリックすると 横長で見づらく閉じにくいポップアップが
個々の商品をクリックすると 横長で見づらく閉じにくいポップアップが
ページ上に表示されることに すぐ気づくでしょう
ページ上に表示されることに すぐ気づくでしょう
フォントやボタンも モバイル端末には小さすぎます
フォントやボタンも モバイル端末には小さすぎます
大きくて見づらくて閉じにくい ポップアップを
カテゴリページ上の 商品ごとに作成したことが
直帰率を高めた重大な要因と 見なすことができます
直帰率を高めた重大な要因と 見なすことができます
そして、この操作性の悪さは
カテゴリページ全体に共通しているので サイト全体の改善が必要です
カテゴリページ全体に共通しているので サイト全体の改善が必要です
ここまでで、速度と操作性の調査を 行いました
では、コンテンツの改善について 説明しましょう
トラフィック量が多く利便性が低い最後のページは /Accessories/Google+Watch+Set.axd です
トラフィック量が多く利便性が低い最後のページは /Accessories/Google+Watch+Set.axd です
この商品ページでは、Googleロゴ付きの シンプルな防水腕時計を販売しています
この商品ページでは、Googleロゴ付きの シンプルな防水リストウォッチを販売しています
このページにフラグを付けたのは モバイルの平均直帰率が4倍だったためです
このページにフラグを付けたのは モバイルの平均直帰率が4倍だったためです
モバイルユーザーエージェントから このページを表示すると
高い直帰率の理由となる異常な状態は 何もないことがわかります
たとえば、ページではサイトの他のページと 同様に小さいフォントやボタンを使っています
たとえば、ページではサイトの他のページと 同様に小さいフォントやボタンを使っています
改善する必要はありますが、他のページにも数多くあるので このページの原因と考えることはできません
改善する必要はありますが、他のページにも数多くあるので このページの原因と考えることはできません
また邪魔なポップアップもないので ポップアップも原因ではありません
また邪魔なポップアップもないので ポップアップも原因ではありません
モバイルの直帰率が高い理由を もっとよく理解するため、ユーザーが
/Accessories/Google+Watch+Set ページに アクセスする目的を
/Accessories/Google+Watch+Set ページに アクセスする目的を
分析してみましょう
[トラフィックソース]の [モバイル]でセグメント化すれば
セカンダリディメンションのソースを 追加できます
次に、円グラフのビューを クリックすると
このページのユーザーの82%が携帯端末で 検索結果からアクセスしているようです
このページのユーザーの82%が携帯端末で 検索結果からアクセスしているようです
検索クエリは目的主導なので
このモバイルサイトのウェブマスター ツールアカウントに移動しましょう
このモバイルサイトのウェブマスター ツールアカウントに移動しましょう
[上位のページ]を選択し モバイル検索で絞り込みます
/Accessories/Google+Watch+Set ページが
[上位のページ]に表示され その主なクエリは「Google Watch」です
[上位のページ]に表示され その主なクエリは「Google Watch」です
このクエリをスマートフォンで実行すると 上位の検索結果が
このクエリをスマートフォンで実行すると 上位の検索結果が
話題のGoogleスマートウォッチ関係 であることがわかります
話題のGoogleスマートウォッチ関係 であることがわかります
そのため、クリックして商品ページに アクセスしたときの平均検索者の期待度で
ミスマッチが発生しているようです
ほとんどのユーザーが見たいのは Googleウォッチスマート端末であって
Googleロゴ付きの防水腕時計ではないのです
モバイルでは、不満がある検索ユーザーは すぐにサイトを離脱してしまいます
モバイルでは、不満がある検索ユーザーは すぐにサイトを離脱してしまいます
これに対しPCでは、別のページで スマート端末を見つけようとします
これに対しPCでは、別のページで スマート端末を見つけようとします
モバイルのページの利便性を 改善するために
トラフィックをもっと 絞り込むことができます
いくつかのオプションで、タイトルやメタ記述を 調整できるので
検索結果に該当の商品が表示される 確率を高められます
検索結果に該当の商品が表示される 確率を高められます
また、商品の名前を 「Google Logo Wristwatch」などに変更して
また、商品の名前を 「Google Logo Wristwatch」などに変更して
違いを明確化する 方法もあります
これで、フラグを付けたすべてのページへの 対応が完了しました
これで、フラグを付けたすべてのページへの 対応が完了しました
最後に、ユーザーのストレスを軽減し 満足度を高めるモバイルウェブサイトを
作成、改善するためのリソースを ご紹介します
ありがとうございました