モバイル フレンドリーなウェブサイトは、オンラインでの存在感を高めるうえで欠かせないものです。現在では、多くの国でスマートフォンのトラフィックがパソコンのトラフィックを上回っています。お持ちのウェブサイトがまだモバイル フレンドリーでなければ、ぜひモバイル フレンドリー サイトにしましょう。Search Console のモバイル フレンドリー テストツールでは、サイト上のページがモバイル フレンドリーかどうかをすぐにテストできます。
ツールの使用
モバイル フレンドリー テストツールの使い方は簡単で、テストするウェブページの URL 全体を入力するだけです。ページで実装されたすべてのリダイレクトについて、リダイレクト先へのアクセスがテストされます。通常、テストは 1 分もかからずに実施できます。
テスト結果には、ページがモバイル端末でどのように表示されるかを確認できるスクリーンショットが含まれます。また、モバイル ユーザビリティの問題が検出された場合には、そうした問題の一覧も示されます。モバイル ユーザビリティの問題とは、モバイル端末の小さな画面でページにアクセスしたユーザーに影響を与える問題です。小さなフォントサイズ（小さな画面では読みにくい）や Flash（ほとんどのモバイル端末でサポートされていない）の使用などが含まれています。
なんらかの理由によりツールがページにアクセスできない場合は、その問題を説明するエラーが表示されます。アクセスの問題には、たとえば、ネットワーク接続に問題がある場合や、サイトがダウンしている場合などがあります。
ページで使用されているリソースの一部をテストツールが読み込めない場合、警告が表示されます。リソースとは、ページに追加される画像、CSS、スクリプト ファイルなどの外部要素のことです。こうした状況は、次のような理由で発生します。
- 妥当な時間内にリソースを読み込めなかったため。この場合は、再度テストしてみます。それでも問題が解決しない場合は、リソースを他の場所でホストするか、ホストからの応答がない原因を見つけて解決します。
- 指定された場所にリソースが存在しないため（404 エラー）。リソースの URL を修正します。
- ログインしていないとアクセスできないリソースであるため。テストツールは、匿名ユーザーとしてページにアクセスします。すべてのリソースを匿名ユーザーがアクセスできるようにします。
- robots.txt ファイルにより、そのリソースで Googlebot をブロックしているため。リソースが重要であり（下記を参照）、自分のサイト上にある場合、Googlebot のブロックをそのリソースで解除することをおすすめします。リソースが別のサイトにある場合、そのサイトのウェブマスターに連絡して、ブロックの解除を依頼することをおすすめします。
重要なリソースのブロックを解除する
ブロックされたリソースが重要な場合、Google がそのページを理解するのに大きな影響を与える可能性があります。たとえば、大きな画像がブロックされると、モバイル フレンドリーではないページがモバイル フレンドリー ページとみなされることがあります。また、CSS ファイルがブロックされると、不適切なフォント スタイル（小さすぎて端末で読めないフォントなど）が適用されることがあります。これは、モバイル ユーザビリティのスコアだけでなく、Google がページをクロールできるかどうかにも影響を及ぼします。重要なリソースで robots.txt による Googlebot のブロックを解除し、通常はアクセスできるようにしてください。
一貫性のないテスト結果や、ページの読み込みに関する問題
読み込めないリソースや、ページの読み込みに関する他の問題がある場合は、テストを実行するたびに若干異なる結果が表示されることがあります。これは、各テストの実行時に読み込まれるリソースが、異なる場合があるためです。何も変更していないにもかかわらず、テストを実行するたびにページの表示が異なる場合は、「ページの読み込みに関する問題」の警告を確認してください。警告が表示されている場合は、クリックして詳細情報を表示し、ページが一貫して正しく表示されない原因として何が考えられるかを確認してください。
モバイル ユーザビリティに関するエラー
モバイル フレンドリー テストツールでは、次のようなユーザビリティ エラーが検出されることがあります。
互換性のないプラグインを使用しています
ほとんどのモバイル ブラウザでサポートされていないプラグイン（Flash など）がページに含まれています。HTML5 など、広くサポートされている最新のウェブ テクノロジーを使用してページを再設計することをおすすめします。ウェブ アニメーションのガイドラインについて詳細をご確認ください。
ビューポートが設定されていません
ページに viewport プロパティが定義されていません。このプロパティは、画面サイズに合わせてページのサイズとスケーリングを調整する方法をブラウザに指示します。サイトにアクセスするユーザーは、大きなデスクトップ モニター、またはタブレットや小型のスマートフォンなど、画面サイズの異なるさまざまな端末を使用しています。そのため、ページでは meta viewport タグを使用してビューポートを指定してください。詳しくは、レスポンシブ ウェブデザインの基礎をご覧ください。
ビューポートが「端末の幅」に収まるよう設定されていません
ページに固定幅の viewport プロパティが定義されているため、異なる画面サイズに合わせて調整することができません。このエラーを修正するには、サイトのページにレスポンシブ デザインを導入し、デバイスの幅とスケーリングに合わせてビューポートを設定します。詳しくは、ビューポートを正しく設定する方法をご確認ください。
コンテンツの幅が画面の幅を超えています
このレポートには、ページ上の語句や画像を表示するために水平スクロールを必要とするページが示されます。このエラーは、ページの CSS 宣言で絶対値を使用している場合や、ページの画像が特定のブラウザ幅（980px など）で最適に表示されるように設計されている場合に発生します。このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。詳しくは、コンテンツのサイズをビューポートに合わせる方法についての記事をご覧ください。
テキストが小さすぎて読めません
このレポートには、フォントサイズが小さすぎて文字が読めず、モバイル ユーザーがピンチ操作をして拡大しなければならないページが示されます。ウェブページのビューポートを指定した後にフォントサイズを設定して、ビューポート内で適切にスケーリングします。フォントサイズに関するベストプラクティスについて詳しくは、読みやすいフォントサイズを使用する方法についての記事をご覧ください。
クリックできる要素同士が近すぎます
このレポートには、ボタンやナビゲーション リンクなどのタップ要素同士が近すぎるために、モバイル ユーザーが隣接する要素をタップせずに指を使って目的の要素をタップすることが容易にできないサイトの URL が示されます。これらのエラーを修正するには、ボタンやナビゲーション リンクのサイズやスペースをモバイル ユーザーに適するように正しく設定します。詳しくは、タップ ターゲットのサイズを適切に調整するをご覧ください。
次のステップ
- モバイル ユーザビリティ レポートを使用して、サイト全体でどのようなモバイル ユーザビリティの問題が検出されたかを確認します（Search Console でサイトの所有権を確認する必要があります）。
- CMS ウェブサイトをモバイル フレンドリーにする方法をご覧ください（WordPress、Joomla! などの CMS サービスにホストされているページの場合）。
- デベロッパーと協力してサイトを修正する方法をご覧ください。
- モバイル フレンドリーなページの設計方法をご覧ください。
