[対象: 初〜中級]

この記事では、モバイル向けサイトのユーザビリティやユーザーエクスペリエンスの向上に役立つ、Googleが提供する公式ツールを5つ紹介します。

  • Chrome
  • PageSpeed Insights
  • Mobile-Friendly Test
  • Fetch as Google
  • モバイルユーザビリティ レポート

順に説明します。

Chrome

Google Chromeの「デベロッパー ツール」では、スマートフォン端末で見たときのそのページの表示をエミュレーションできます。

「デベロッパー ツール」は次の手順で起動します。

  • [Google Chromeの設定](右上の3本バー) − [その他のツール] − [デベロッパー ツール]
  • Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac)

スマホを表すアイコンをクリックするとスマホでの表示モードに変わります。
「Device」からさまざまモバイル端末を選択できます。

Google Chromeの「デベロッパー ツール」

そのページの構成によっては正常にエミュレートできないこともあるため、最終的には、本物のスマートフォン端末で表示や動作を検証する必要がありますが、モバイル向けページを手軽にチェックできるツールです。

PageSpeed Insights

PageSpeed Insights(ページスピード インサイツ)では、そのページのモバイルでの表示速度とユーザーエクスペリエンス(操作性)を検証できます。

PageSpeed Insightsのモバイル

速度に関しては次の項目ができているかどうかをチェックします。

  • リンク先ページでリダイレクトを使用しない
  • 圧縮を有効にする
  • サーバーの応答時間を改善する
  • ブラウザのキャッシュを活用する
  • リソースを圧縮する
  • 画像を最適化する
  • CSS の配信を最適化する
  • 見える範囲のコンテンツを優先する
  • レンダリングを妨げる JavaScript を削除する
  • 非同期スクリプトを使用する

ユーザーエクスペリエンスに関しては次の項目ができているかどうかをチェックします。

  • プラグインを使用しない
  • ビューポートを設定する
  • コンテンツのサイズをビューポートに合わせる
  • タップ ターゲットのサイズを適切に調整する
  • 読みやすいフォント サイズを使用する

PageSpeed Insights のそれぞのルールの詳細はヘルプを参照してください。

Mobile-Friendly Test

Mobile-Friendly Test(モバイル フレンドリー テスト)」 ツールでは、そのページがモバイル端末から使いやすいかどうか、言い換えるとユーザーフレンドリーであるかどうかを検証できます。
「スマホ対応」のラベル導入と同時に公開されたツールです。

Awesome! This page is mobile-friendly.で合格

ユーザーフレンドリーではないときは次のような警告が出ることがあります。

  • Text too small to read
  • Content wider than screen
  • Mobile viewport not set
  • Links too close together

日本語の意味はそれぞれ次のようになります。

  • ズームしなくても判読できるテキストを使用していること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面のサイズと一致していること
  • 携帯端末では一般的でないソフトウェア(Flash など)を使用していないこと
  • 目的のリンクを簡単にタップできるよう、それぞれのリンクが十分に離れた状態で配置されていること

これらの4つの項目を満たすと、“Awesome! This page is mobile-friendly.” とメッセージが出ます。
「スマホ対応」のラベルが付く資格をそのページが得ている証拠です。

PageSpeed InsightsとMobile-Friendly Testは似たようなツールです。
しかし動作する仕組みに差異があります。
片方では「問題なし」でももう片方では「問題あり」と指摘されることがあります。

両者の違いはこちらの記事を参照してください。

Fetch as Google

ウェブマスターツールのFetch as Googleでは、スマートフォンからの表示をGooglebotがどのように見ているかをシミュレーションできます。
「モバイル: スマートフォン」を選択し、「取得してレンダリング」を実行します。

「モバイル: スマートフォン」を選択

JavaScriptやCSS、画像などのリソースをGooglebot実行・取得した状態でレンダリングします。

「モバイル: スマートフォン」でのFetch as Googleレンダリングの実行結果

Googlebotが実行・取得できないリソースがあると正常にレンダリングできません。

またrobots.txtでクロールを拒否されているリソースがあれば指摘します。

モバイル向けページであるかPC向けページであるかどうかにかかわらず、ページのレンダリングに必要なリソースは原則的にブロックしてはいけません。

モバイルユーザビリティ レポート

ウェブマスターツールの「モバイルユーザビリティ」レポートでは、その名のとおりモバイルユーザビリティの問題を確認できます。

「検索トラフィック」セクションから「モバイル ユーザビリティ」にアクセスできます。

モバイル ユーザビリティ レポート

レポートに出てる可能性があるユーザビリティに関するエラーは、PageSpeed Insightsのユーザーエクスペリエンスと同じ項目です(同じデータを使用している)。

  • タップ要素同士が近すぎます
  • フォントサイズが小です
  • ビューポートが設定されていません
  • コンテンツのサイズがビューポートに対応していません
  • 固定幅のビューポート
  • Flash が使用されています

モバイル ユーザビリティの問題修正についての詳細はヘルプを参照してください。

「モバイルユーザビリティ」レポートの利点は、サイト全体の状況を把握できることです。

ここまで紹介したツールはすべてページ単位でした。
特定のページを自分で指定して検証する必要があります。
一方「モバイルユーザビリティ」レポートは、サイトのどのページにどんなユーザービリティの問題があるのかを自動で取得してくれます。

以上、5つのGoogle純正のモバイルSEOに役立つツールを紹介しました。
それぞれのツールの特徴を理解して活用しましょう。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Contrents]

海外SEO情報ブログTOPモバイルSEO › モバイルSEOに役立つGoogle純正ツール×5

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る