ウェブサイトをモバイル フレンドリーにすることは、オンラインでの存在感を高めるうえで欠かせません。現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っているからです。お持ちのウェブサイトがまだモバイル フレンドリーでなければ、ぜひモバイル フレンドリー サイトにしましょう。Search Console のモバイル フレンドリー テストでは、サイト上のページがモバイル フレンドリーかどうかをすぐにテストできます。
概要
モバイル フレンドリー テストの使い方は簡単で、テストするウェブページの完全な URL を入力するだけです。テストは通常 1 分以内で完了します。
テスト結果には、モバイル デバイス上のページとして Google でどのように認識されるかを示したスクリーンショットと、検出されたモバイル ユーザビリティの問題の一覧が表示されます。モバイル ユーザビリティの問題とは、モバイル デバイスでアクセスした際にページに影響を与える問題です。小さなフォントサイズ（小さな画面では読みにくい）や Flash（ほとんどのモバイル デバイスでサポートされていない）の使用などが含まれています。
このツールの使用に Search Console アカウントは不要です。お持ちの場合でもログインする必要はありません。
テストを実施する
テストを実行するには:
- Google 検索が指すページ（インデックス登録されたページ）のモバイル ユーザビリティの問題を修正しようとしている場合は、テスト対象が正規 URL であることを確認してください。正規以外の URL を修正しても、直接リンクを使ってページにアクセスするユーザーの役には立ちますが、Google が指すページは修正されません。
- テキスト ボックスにテストする URL を入力し、[URL をテスト] をクリックします。
- リクエストされた URL をモバイル デバイスと同じやり方で Google が取得します。このツールは、入力された URL を変更せずに、ページに実装されたリダイレクトに従います。ウェブサイトがモバイル デバイスを別の URL に転送している場合、またはそのページがリンクされている AMP ページである場合、テストではリクエストされた URL ではなく、その URL が取得されます。しかし、別の URL をテスト中であることも、取得してテストする実際の URL も表示されません。
- テスト結果には、ページのモバイル フレンドリー ステータスが表示されます。ステータスの意味を把握しておいてください。ステータスの説明は下記のとおりです。
- 可用性の問題がある場合（つまり、Google がその URL を見つけられないか、その URL にアクセスできない場合、またはその URL が Google に対してブロックされている場合）、まずその問題を修正します。
- ページに読み込めないリソース（画像やスタイルシートなど）がある場合は、警告が表示されます。それらを修正してから再度テストします。ページ内の他の問題の原因となっている可能性があるためです。
- ページがモバイル フレンドリーでないと報告された場合は、まず「テキストが小さすぎて読めません」以外の問題をすべて修正してから、テストを再度実行します。
- 他の問題がすべて解決したら、「テキストが小さすぎて読めません」を修正し（存在する場合）、テストを再度実行して確認します。下記の発生する可能性のある問題の一覧をご覧ください。
- 問題を修正する際には、Google に見えているページのスクリーンショットがあると便利です。スクリーンショットを表示するには、[テスト済みのページを表示] をクリックします。スクリーンショットは、Google がモバイル ユーザビリティをテストする際に使用したサイズと解像度を示しています。複数の画面を確認する必要がある場合は、Chrome を使用するとモバイルテスト環境をシミュレートできます。あるいは、スクリーンショットに近いサイズのモバイル デバイスでページを開くという方法もあります。
このテストは、必ずしも Google インデックスでのモバイル フレンドリー ステータスを表示するわけではありません
モバイル フレンドリー テストツールがテストするのは、指定された URL のバージョンのみです。
モバイル フレンドリー テストツールを使用して非正規ページをテストしても、Google インデックスのページのモバイル フレンドリー ステータスには反映されません。インデックス登録の際、Google は重複する複数のページから正規 URL のモバイル対応度のみをテストします。正規バージョンにモバイル対応の問題がある場合、重複するバージョンに問題があるかどうかにかかわらず、Google はページにモバイル フレンドリーの問題があると認識します。
URL がすでにインデックスに登録されている場合は、URL 検査ツールを使用して正規 URL を確認できます（[ページの可用性] > [Google が選択した正規 URL]）。
テストしているのが正規 URL かどうかを判別する手順は次のとおりです。
- URL に URL 検査ツールを使用して（ライブテストではなく）インデックス登録済みバージョンの検査を行います。[カバレッジ] > [インデックス作成] > [Google が選択した正規 URL] に表示されている値を確認します。[検査対象の URL] の値は、テスト対象の URL が正規 URL であることを示します。別の URL が表示された場合、表示される URL は検索結果に表示される URL です。
- サイト全体のモバイル対応度のデータを確認するには、モバイル ユーザビリティ レポートを使用します。
テスト結果
なんらかの理由によりツールがページにアクセスできない場合は、次のいずれかのエラーが表示されます。
- DNS サーバーが応答しません: これは多くの場合、数分以内に自動的に解決される一時的な問題です。
- DNS エラー: 不明なホストです: DNS サーバーで URL が解決されませんでした。これは、数分以内に自動的に解決される一時的な問題であると思われます。
- DNS エラー: プライベート IP が指定されました: DNS から、RFC 1918 プライベート IP（例: 10.0.0.1）など、特殊なまたはプライベートな除外範囲内の IP が返されました。
- サーバー接続エラー: サーバーにアクセスできなかったか、接続が拒否されたか、接続に失敗しました。詳細
- サーバーが無効な応答を返しました: リクエストされたプロトコルをサーバーがサポートしていないか、応答またはヘッダーが切り詰められているか、応答を解析できませんでした（たとえば応答データが正しく圧縮されなかったため）。詳細
- サーバーの SSL 証明書が無効です: サイトの SSL 証明書が無効です。証明書が有効でない限り、Google はサイトで HTTPS URL をテストしません。
- robots.txt にアクセスできません: robots.txt ファイルが存在してもアクセスできない場合、Google はウェブサイトをクロールしません。robots.txt がアクセス可能かどうかは、クロールの統計情報レポートで確認できます。
- ホスト負荷が制限を超えています: Google のクロールまたは検査リクエストに対して、サイトが最大容量に達しているようです。テストは、トラフィックの負荷（Google が推定）が低下するまで実行できません。
ページで使用されているリソースのすべてをテストツールが読み込めない場合、警告が表示されます。リソースとは、ページに追加される画像、CSS、スクリプト ファイルなどの外部要素のことです。このテストツールは、特定のタイプのリソースのみを読み込もうとします。テストに影響しないその他の要素は無視されます。
読み込みに関する問題は、次のような原因で発生することがあります。
- 妥当な時間内にリソースを読み込めなかったため。この場合は、再度テストしてみます。それでも問題が解決しない場合は、リソースを他の場所でホストするか、ホストからの応答がないか遅い原因を見つけて解決します。
- 指定された場所にリソースが存在しないため（404 エラー）。ページにあるリソースの URL を確認して修正します。
- ログインしていないとアクセスできないリソースであるため。テストツールは、匿名ユーザーとしてページにアクセスします。すべてのリソースを匿名ユーザーがアクセスできるようにします。
- robots.txt ファイルにより、そのリソースで Googlebot をブロックしているため。リソースが重要であり（下記を参照）、自分のサイト上にある場合、Googlebot のブロックをそのリソースで解除することをおすすめします。リソースが別のサイトにある場合、そのサイトのウェブマスターに連絡して、ブロックの解除を依頼することをおすすめします。
重要なリソースのブロックを解除する
ブロックされたリソースが重要な場合、Google がそのページを理解するのに大きな影響を与える可能性があります。たとえば、大きな画像がブロックされると、モバイル向けではないページがモバイル向けページとみなされることがあります。また、CSS ファイルがブロックされると、不適切なフォント スタイル（小さすぎてデバイスで読めないフォントなど）が適用されることがあります。これは Google によるページのクロールを阻害し、Google での検索結果に影響する可能性があります。重要なリソースで robots.txt による Googlebot のブロックを解除し、通常はアクセスできるようにしてください。
一貫性のないテスト結果や、ページの読み込みに関する問題
読み込めないリソースや、ページの読み込みに関する他の問題がある場合は、テストを実行するたびに若干異なる結果が表示されることがあります。これは、各テストの実行時に読み込まれるリソースが、異なる場合があるためです。何も変更していないにもかかわらず、テストを実行するたびにページの表示が異なる場合は、「ページの読み込みに関する問題」の警告を確認してください。警告が表示されている場合は、クリックして詳細情報を表示し、ページが一貫して正しく表示されない原因として何が考えられるかを確認してください。
モバイル フレンドリー ステータス
テスト結果には次のものがあります。
ページはモバイルで利用できません: 品質基準に満たない問題が 1 つ以上あるため、モバイル デバイスでページが正しく表示されません。Google は、ページに影響する問題の数と、それらの相対的な重大度に応じて、モバイル フレンドリーか、モバイル フレンドリーでないかを判定します。1 ページに 1～2 件の（未報告の）軽微な問題があっても、モバイル フレンドリーとみなされます。 考えられるエラーの説明をご覧ください。
ページはモバイルで利用できます: ページはモバイル デバイスで正しく動作すると考えられます。なお、モバイル フレンドリーと判定されたページには軽微な問題が存在する場合があります（レポートには表示されません）。詳細
データなし: なんらかの理由により、ページのデータを取得できず、モバイル対応をテストできませんでした。しばらくしてから、もう一度お試しください。
ページはモバイルで利用できます: ページはモバイル デバイスで正しく動作すると考えられます。なお、モバイル フレンドリーと判定されたページには軽微な問題が存在する場合があります（レポートには表示されません）。URL にしきい値を超えるエラーがある場合は、ステータスが [ページはモバイルで利用できません] となり、すべてのエラーが表示されます。URL にしきい値未満のエラーがある場合は、ステータスが [ページはモバイルで利用できます] となり、エラーは表示されません。
エラーの種類ごとの重みと重大度は、明示的には定義されていません。そのため、モバイル フレンドリーと判定されたページには、実際には少数の報告されていないエラーがあり、エラーが 1 つ増えるとモバイル フレンドリーではないと判定される可能性があります。ページ上の未報告のモバイル ユーザビリティ エラーは気にしないでください。
モバイル フレンドリー エラー
モバイル フレンドリー テストツールで報告されるユーザビリティ エラーには、次のものがあります。
互換性のないプラグインを使用しています
ほとんどのモバイル ブラウザでサポートされていないプラグイン（Flash など）がページに含まれています。
解決策: HTML5 など、広くサポートされている最新のウェブ テクノロジーを使用してページを再設計することをおすすめします。詳しくは、ウェブ アニメーションのガイドラインをご覧ください。
ビューポートが設定されていません
ページに viewport プロパティが定義されていません。このプロパティは、画面サイズに合わせてページのサイズと拡大縮小を調整する方法をブラウザに指示します。
解決策: サイトにアクセスするユーザーは、大きなデスクトップ モニター、またはタブレットや小型のスマートフォンなど、画面サイズの異なるさまざまなデバイスを使用しています。そのため、ページでは meta viewport タグを使用してビューポートを指定してください。詳しくは、レスポンシブ ウェブデザインの基礎をご覧ください。
ビューポートが「デバイスの幅」に収まるよう設定されていません
ページに固定幅の viewport プロパティが定義されているため、異なる画面サイズに合わせて調整できません。
解決策: サイトのページにレスポンシブ デザインを導入し、デバイスの幅と拡大縮小に合わせてビューポートを設定します。詳しくは、ビューポートを正しく設定する方法をご確認ください。
コンテンツの幅が画面の幅を超えています
ページ上の語句や画像を表示するために水平スクロールが必要です。この問題は、ページの CSS 宣言で絶対値を使用している場合や、ページの画像がブラウザの特定の幅（980 ピクセルなど）で最適に表示されるように設計されている場合に発生します。
解決策: ページの CSS 要素の幅と位置に相対値を使用し、画像も同様に拡大縮小できるようにします。詳しくは、コンテンツのサイズをビューポートに合わせる方法についての記事をご覧ください。
テキストが小さすぎて読めません
ページ上のテキストの大部分が、ページの幅と比べて小さすぎます。これにより、テキストがモバイル デバイスで読みにくくなります。デバイスのテスト スクリーンショットを確認して、問題のあるテキストを特定します。
解決策: ウェブページのビューポートを指定し、ビューポート内ですべてのフォントサイズが適切に拡大縮小されるように設定して、デバイスの画面にテキストが表示されるようにします。詳しくは、フォントサイズに関するおすすめの方法をご覧ください。
クリックできる要素同士が近すぎます
ボタンやナビゲーション リンクなどのタップ要素が互いに近すぎて、モバイル ユーザーが目的の要素をタップしようとすると隣の要素に指が触れてしまいます。
解決策: テスト スクリーンショットを確認して、すべてのボタン、リンク、その他のタップ ターゲットを特定します。複数のタップ ターゲットの位置が平均的な指先の幅よりも近づきすぎないように、または複数のリンク ターゲットに指先がまたがらないようにしてください。詳しくは、Accessible Tap Targets をご覧ください。
詳細情報
テストを実行した後で [テスト済みのページを表示] をクリックすると、レンダリングされたページ、テストページのレンダリングされた HTML、発生した JavaScript エラーなどのスクリーンショットを表示できます。ただし、ページを取得できる必要があります。
次のステップ
- モバイル ユーザビリティ レポートを使用して、サイト全体でどのようなモバイル ユーザビリティの問題が検出されたかを確認します（Search Console でサイトの所有権を確認する必要があります）。
- URL 検査ツールを使用して、個々のページのインデックス登録されたバージョンをテストします。
- CMS ウェブサイトをモバイル フレンドリーにする方法をご覧ください（WordPress、Joomla! などの CMS サービスにホストされているページの場合）。
- モバイル フレンドリーなページの設計方法をご覧ください。
