モバイルフレンドリーのエラーを確認する方法

モバイルフレンドリー(スマホ最適化)は、一度対応して終わりではありません。コンテンツを追加・更新するたびに、スマホでの使い勝手が維持されているかを確認する必要があります。

本記事では、自社サイトがモバイルフレンドリーであるかを確認する方法と、よくあるエラーを解説します。

目次

3つのモバイルフレンドリー確認方法

以前Googleが提供していた「モバイルフレンドリーテスト」ツールは2023年12月に終了しました。現在は、以下の3つのツールを使用して診断します。

1. PageSpeed Insights(ページスピードインサイト)

最も手軽な確認方法です。URLを入力するだけで、ページの表示速度だけでなく、SEOやユーザビリティの問題点も診断できます。

  1. PageSpeed Insightsにログインする。
  2. 分析したいURLを入力し、「分析」ボタンを選択する。
  1. 「パフォーマンスの問題を診断する」レポート内の「SEO」の項目を選択する。
  1. エラー内容や合格した内容を確認する

PageSpeed Insightsについては以下の記事で確認できます。

2. Google Chrome「Lighthouse(ライトハウス)」

ブラウザ上で即座にチェックできる開発者向けツールです。公開前のテスト環境のページも診断可能です。

  1. Google Chromeで診断したいページを開きます。
  2. ページ上の何もないところで右クリックし、メニューから「検証」を選択する(またはF12キー)。
  1. 画面端にパネルが開くので、上部タブから「Lighthouse」を選択する。
    ※隠れている場合は「>>」マークの中にあります。
  2. デバイスを「モバイル」に、モードを「ナビゲーション(デフォルト)」にして、「ページ読み込みを分析」ボタンを選択する。

PageSpeed Insightsと同様に、SEOの監査項目内で「タップターゲット」や「フォントサイズ」の合否が判定されます。

3. Googleサーチコンソール「URL検査」

ここでは、エラー内容ではなく、すでに公開済みのページが、Googleがそのページを正しくスマホ用として認識できているかを確認します。

  1. サーチコンソール上部の検索窓にURLを入力して検査する。
  2. 結果画面の右上の「公開URLをテスト」を選択する。
  1. テスト完了後、「テスト済みのページを表示」をクリックし、「スクリーンショット」タブを開く。

ここに表示された画面が、実際のスマホ表示とズレていないか確認してください。 もし表示が崩れていたり、真っ白だったりする場合は、GoogleがCSSやJavaScriptを読み込めていない(ブロックされている)可能性があります。

よくある2つのエラー

診断ツールやサーチコンソールでエラーが表示された場合の、原因と修正方法を解説します。制作担当者への修正指示にも活用してください。

エラー1:タップ ターゲットのサイズが適切ではありません

ボタンやリンクの間隔についての監査項目です。

タップのターゲットのサイズが適切でないページ、タップ ターゲットが他のタップ ターゲットと近すぎるページにフラグが付けられます。

エラー2:ドキュメントで読みやすいフォント サイズが使用されていません

文字の大きさについての監査項目です。
モバイル デバイスで読みやすいフォント サイズを使用していないページにフラグが付けられます。

その他のエラー項目については、以下の公式ヘルプよりご確認ください。

モバイルフレンドリーなサイトを構築・維持するポイント

エラー修正だけでなく、日々の運用でモバイルフレンドリーを維持するためのポイントです。

レスポンシブウェブデザインを採用する

Googleは、PCとスマホで同じHTMLを配信し、CSS(見た目)だけを切り替える「レスポンシブウェブデザイン」を推奨しています。

デバイスごとに別々のURLを作ると、管理が複雑になりエラーの原因になりやすいため、可能な限りレスポンシブ化を進めましょう。

実機での確認を習慣化する

ツール上のスコアが良くても、実際の操作感が悪い場合があります。

新しいページを公開する際は、必ずご自身のスマートフォン実機でアクセスし、「文字の読みやすさ」「ボタンの押しやすさ」「ポップアップが邪魔になっていないか」を目視で確認してください。

まとめ

モバイルフレンドリーのエラーは、ユーザーの離脱を招き、SEO評価を下げる直接的な原因となります。

  • 診断:PageSpeed InsightsやLighthouseで定期的にチェックする。
  • 修正:文字サイズ(16px以上)、画像幅(画面内)、タップ間隔(余白確保)を調整する。
  • 基盤:正しいビューポート設定とレスポンシブデザインを導入する。

まずはGoogleサーチコンソールを確認し、エラーが出ているページがないかチェックすることから始めましょう。エラーゼロの状態を維持することが、スマホ時代のSEO対策の基本です。

よかったらシェアしてね!
  • URLをコピーしました!
目次