サーチコンソールのモバイルユーザビリティエラーの原因とは？対策と解決方法なども解説

サーチコンソールに登録しているWebサイトに対し、突如として「モバイルユーザビリティの問題が新たに検出されました」というメッセージが送られてきた経験はありませんか？
この警告は、Webサイトのモバイルユーザビリティに問題が生じていることを示すもので、SEOに影響を及ぼす可能性があるため、可能な限り早く対処することをお勧めします。

この記事では、モバイルユーザビリティエラーの原因と効果的な対策方法、検証方法について詳しく解説します。
また、企業でSEOを担当されている方向けに、当社独自のSEOチェック項目から、基本的なものを抜粋した「SEOチェックシート＆マニュアル」を作成しました。ぜひ、自分で実践される際にご活用ください。
▼SEOチェックシート＆マニュアル簡易版はこちら

ダウンロード自分で実践出来る、SEOチェックシート＆マニュアル簡易版

モバイルユーザビリティエラーとは

モバイルユーザビリティエラーとは、Googleサーチコンソールに登録しているWebサイトにおいて、モバイルデバイスでの閲覧や操作が困難な状態を指します。

これにはさまざまな種類のエラーが存在します。

例えば、互換性のないプラグインの使用、ビューポートが設定されていない、コンテンツの幅が画面の幅を超える、テキストが小さすぎる、クリックできる要素同士が近すぎるなどが挙げられます。

エラーの原因と対策法

モバイルユーザビリティエラーはさまざまな要因によって引き起こされるため、それぞれの原因と対応策を把握することが重要です。ここでは、エラーの原因を5つに分けて対策法を解説します。

1.互換性のないプラグインの使用

互換性のないプラグインの使用が、モバイルユーザビリティエラーの原因となることがあります。特に、FlashやJavaアプレットなど、モバイルデバイスでサポートされていないプラグインを使用している場合、ページが正常に表示されず、ユーザーの体験が損なわれることがあります。その結果、検索エンジンによる評価が低下し、検索順位に悪影響を与え兼ねません。

この問題を解決するためには、まず使用しているプラグインを見直しましょう。モバイルデバイスでサポートされていないプラグインであれば、代替手段を検討してみてください。

例えばFlashコンテンツをHTML5やJavaScriptに置き換えることで、モバイルデバイスでもコンテンツが正常に表示されるようになります。

2.ビューポートが設定されていない

ビューポートとは、Webページの表示領域のサイズをコントロールするために使用されるメタタグのことです。ビューポートが適切に設定されていない場合、ユーザーがスマートフォンやタブレットでWebページを閲覧する際にページが正常に表示されず、ズームやスクロールが必要になることがあります。

この問題は、以下の手順で対策できます。

1. .まず、適切なビューポートの設定を行います。HTMLファイルのセクションに、以下のメタタグを追加し、ビューポートを設定します。
2. 次に、Webページ内のコンテンツがビューポートに収まるように、CSSを用いてスタイルを調整します。レスポンシブデザインを採用することで、さまざまなデバイスでの表示に対応が可能です。
3. 最後に、修正後のページをモバイルフレンドリーテストツールやサーチコンソールで検証し、エラーが解消されたことを確認します。

適切なビューポートの設定を行うことで、モバイルデバイスでのWebページの表示が改善され、ユーザーの離脱率が低下し、検索エンジンの評価も向上するでしょう。

3.コンテンツの幅が画面の幅を超えています

コンテンツの幅が画面の幅を超えている場合、ユーザーがWebページを閲覧する際に不便さを感じる原因となります。この問題は、コンテンツが画面外にはみ出す、ユーザーがズームやスクロールしなければ情報を確認できないといった状況を生み出します。

この問題は、以下の手順で対策できます。

1. はじめに、ビューポート設定が適切に行われていることを確認します。
2. 次に、CSSを用いてスタイルを調整します。
3. 画像や動画などの埋め込みコンテンツが端末の幅にリサイズされるように、CSSでmax-widthやwidthプロパティを設定します。
4. Webページのフォントサイズや行間、コントラストなどもデバイスごとに最適化することで、可読性を上げられます。ユーザーがストレスなくテキストを読むことができるように、サイズやスタイルを選択しましょう。
5. Webページ内のナビゲーションやリンクなどのインタラクティブ要素も、モバイルデバイスでの使用を考慮して調整します。クリックやタップが簡単に行えるように、要素間の余白やサイズを設定しましょう。

4.テキストが小さすぎて読めません

テキストが小さすぎると、モバイルデバイスでの閲覧時に読みづらくなります。また、ユーザーエクスペリエンスが損なわれ、モバイルユーザビリティエラーが発生する原因にもつながります。特に高齢者や視力に問題を抱えるユーザーにとっては不便でしょう。モバイルに適切なテキストサイズを設定し、Webサイトの利便性を高めましょう。

テキストが小さすぎる問題の解決方法は、以下の4つです。

1. 基本フォントサイズの調整
   Googleが提供しているLighthouseの監査では、テキストの40%以上のフォントサイズが12pxより小さいページに対してフラグを立てます。そのため、フォントサイズについては12px以上にすることを推奨します。
   ただし、デバイスやブラウザ、フォントの種類によっても見た目が異なるため、実際にテストして最適なサイズを見つけましょう。ちなみに、主要ニュースサイトのフォントサイズは16pxが多く使われていることから、本文テキストの場合は、16pxにすることをおすすめします。
   ※参照：Document doesn’t use legible font sizes – Chrome Developers
2. レスポンシブデザインの適用
   デバイスごとに最適なフォントサイズを設定するために、メディアクエリを使用してレスポンシブデザインを実装します。画面サイズに応じてテキストサイズが自動的に調整され、ユーザーに適切な表示が提供されます。
3. コントラストの向上
   テキストの見やすさは、フォントサイズだけでなく、背景とのコントラストにも影響されます。高いコントラストを維持することで、小さなテキストでも読みやすくなります。適切な色の組み合わせを選び、十分なコントラストを確保しましょう。
4. 行間・字間の調整
   行間や字間を見やすく調整することで、テキストの可読性が向上します。例えば、行間を1.2emなど、適度な間隔を設定することで、小さなテキストでも読みやすくなります。

5.クリック可能な要素同士が近すぎます

クリックできる要素同士が近すぎると、ユーザーが意図しないリンクやボタンをタップしてしまう問題を引き起こします。
対策方法は、クリック可能な各要素間の距離を広げ、タップの誤操作を減らすようにしましょう。具体的には、CSSを使用して各要素のマージンやパディングを調整し、十分なタップ領域を確保します。
また、レスポンシブデザインの採用や、JavaScriptの利用により、ユーザーが要素にホバーやフォーカスしたときに要素の大きさや色が変わるようなインタラクションを追加することも有効な手段です。
ただし、要素の間隔を広げる際には、ページのデザインやユーザビリティを損なわないように注意が必要です。余白が過剰になりすぎると、逆に情報が散在してしまい、ユーザーエクスペリエンスを悪化させる可能性があります。

修正後の検証方法

エラーを修正した後に行うべき検証方法は、大きく4つあります。

サーチコンソールでのエラー確認

まず、Googleサーチコンソールにログインし、対象のWebサイトを選択します。左側のメニューから「モバイルユーザビリティ」をクリックして、エラーの一覧が表示される画面にアクセスします。この画面で、修正が完了したページのエラーが解消されているかを確認できます。

修正が完了したページのエラーが解消されている場合は、エラーの数が減少していることが確認できるはずです。反対にページのエラーが解消されていない場合は、エラーの詳細を確認して再度修正を行いましょう。エラーの詳細は、エラーリストから該当のエラーをクリックすると、エラーが発生しているページや原因を確認できます。

ただし、Googleがページを再クロールし、エラーが解消されていることを検出するまでには時間がかかることがあるので注意しましょう。

その場合「修正を検証」ボタンからGoogleへ手動で検証をリクエストすることも可能です。検証が完了次第、エラー解消を確認することができます。

モバイルフレンドリーテストの実施

モバイルフレンドリーテストは、Webサイトがモバイルデバイスに適応して表示されるかを調べるための便利なツールです。

まず、Googleの「モバイルフレンドリーテスト」ツールを開き、検証したいWebページのURLを入力します。その後、「URLをテスト」ボタンをクリックすると、ツールがWebページのモバイルフレンドリーを評価してくれます。

分析が終わると、結果画面にはWebページがモバイルフレンドリーであるかどうかが表示されます。具体的な問題点や改善策も併せて表示されるため、修正が必要な箇所を把握しやすくなります。問題が見つかった場合は、指摘されたポイントを修正したうえで再度テストを実施しましょう。

モバイルフレンドリーテストツールの活用は、モバイルユーザーにとって使いやすいWebサイトを提供するうえで重要です。このツールを定期的に使うことで、Webサイトのモバイル対応状況を継続的にチェックし、問題が発生した際に素早く対応することができます。

モバイルユーザビリティとSEOの関連性

モバイルユーザビリティとSEO（検索エンジン最適化）は密接に関係しています。

モバイル端末からのアクセスが増加している現代において、モバイルユーザビリティが高いことは、SEO対策として重要です。

また、モバイルフレンドリーなWebサイトは、スマートフォンやタブレットなどのモバイル端末での表示や操作が容易であり、ユーザーにとって快適な閲覧体験を提供してくれます。

良好なUXは、検索エンジンにとっても評価の対象となり、検索順位にプラスの影響を与えます。ユーザーがWebサイトでの滞在時間を延ばし、結果としてコンバージョン率向上につながりやすくなるでしょう。

モバイルユーザビリティとSEOの関連性を理解し、SEOに効果的なモバイル対策を実践し、検索順位を上げていきましょう。ここでは、モバイルユーザビリティの改善がSEOの評価を高める施策についていくつか紹介します。

Webページの表示速度改善

Webページの表示速度は、モバイルユーザビリティの向上に欠かせない要素の一つです。ページの読み込み速度が遅い場合、ユーザーは待ち時間にストレスを感じ、サイトを離れてしまうかもしれません。そのため、Webページの表示速度を測定し、改善することは非常に重要なポイントです。

Webページの表示速度を検証するツールには、Googleが提供する「PageSpeed Insights」や、「GTmetrix」、「WebPagetest」などがあります。これらのツールで、ページの読み込み速度や、改善が必要な箇所を把握することが可能です。

Webページの表示速度を改善するには、画像の最適化や不要なコードの削除、キャッシュの有効化などが挙げられます。また、サーバーのレスポンス時間を短くするために、CDN（コンテンツデリバリーネットワーク）の導入も有効です。

ユーザーエクスペリエンスの評価

ユーザーエクスペリエンス（UX）の評価は、Webサイトのモバイルユーザビリティ向上において重要な役割を果たします。ユーザー視点でWebサイトを評価し、修正後のユーザビリティが向上しているか確認をしましょう。

ユーザー視点でUXを確認する方法には以下のような例が挙げられます。

1. Webサイトを実際にさまざまなデバイスで閲覧しましょう。操作や見た目を確認してみると、デバイス間での差異や不具合を発見できます。
2. ユーザーの行動を分析するために、アクセス解析ツール（例：Google Analytics）を活用しましょう。ページ滞在時間や直帰率などのデータからユーザビリティの問題を特定できます。
3. ユーザーから直接フィードバックをもらいましょう。例えば、オンラインアンケートやインタビュー、ユーザーテストを実施すれば、Webサイトの問題点や改善のヒントを集めることができます。

ユーザー体験を考慮したコンテンツ作成

ユーザーがストレスなく情報を得られるようなコンテンツは、訪問者の満足度を高め、検索エンジンによる評価も向上させます。

ユーザー体験を考慮したコンテンツ作成のポイントは以下の4点です。

1. 分かりやすい構成
   コンテンツは見出しや段落を分けて構成しましょう。ユーザーが必要な情報を素早く見つけやすくなります。
2. 適切なテキストサイズ
   スマートフォンなどのモバイルデバイスで読みやすいテキストのサイズを選びましょう。小さすぎる文字は読みづらく、ユーザビリティを低下させます。
3. シンプルなデザイン
   モバイルデバイスでは画面サイズが限られているため、シンプルで分かりやすいデザインが求められます。無駄な装飾や情報を省き、ユーザーにとって重要な情報に焦点を当てたコンテンツを作りましょう。
4. クリックできる要素の最適化
   モバイルデバイスは、指で操作することが一般的です。クリックできる要素が十分な間隔を持ち、誤操作を防ぐことが大切です。

このほかにも、画像や動画のサイズやフォーマットをモバイルサイズに合わせ設定することが大切です。適切なサイズの画像や動画を使用することで、読み込み速度を向上させ、ユーザビリティを高められるでしょう。
▼関連記事
スマホサイトの使いやすさをGoogleが評価！モバイルフレンドリーに対応しよう

順位向上のためのモバイル対策を実践しよう

Webサイトの検索順位を向上させるためには、これまでに紹介したモバイルユーザビリティエラーの対策方法や検証手順を実践することが重要です。

以下に、効果的なモバイル対策の要点をまとめます。

• レスポンシブデザインの導入で、様々なデバイスに対応
• モバイルユーザビリティエラーの原因を特定し、適切な対策を実施
• モバイルフレンドリーテストツールを活用してウェブページのモバイル適合性を評価
• 表示速度の改善に取り組み、ユーザビリティを向上させる
• ユーザー体験を重視したコンテンツ作成を行い、訪問者の満足度を高める

モバイルフレンドリーなWebサイトを作成することで、訪問者の滞在時間やリピート訪問率の向上、検索エンジンからの評価も上がりやすくなります。検索順位が上昇することでWebサイトの成果にも繋がることでしょう。

ジオコードは19年以上、SEOサービスを提供し続けている老舗Webマーケティング会社です。これまでSEO施策を行なってきたWebサイトは4,625以上、数々のアルゴリズムアップデートを乗り越えてきた、確かな技術と実績があります。
SEO対策でお困りの方は、そのお悩み、ぜひ一度ジオコードへご相談ください！