モバイルフレンドリーテストでエラーが出たらどうすればいい?

ブログスマホ対応2

もし、「モバイルフレンドリーテスト」でエラーが出たらどうすればいいか?

エラーの原因と、その解決策(2つ)についてまとめました。



モバイルフレンドリーテスト 6つのエラー内容

 Google公式の無料ツール「モバイルフレンドリーテスト」 の結果として、下図のように「このページはモバイルフレンドリーです」と表示されれば大丈夫です。合格です!

ブログスマホ対応4

しかし、もし、あなたのサイトがスマホ対応できていない場合は、モバイル フレンドリー テストツールで、次のようなユーザビリティ エラーが検出されることがあります。

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

それでは、1つずつ詳しく解説します。

■1、Flash が使用されています

ほとんどのモバイル用ブラウザでは Flash コンテンツが表示されませんので、 Flashの使用をやめましょう。

■2、ビューポートが設定されていません

Googleで検索するユーザーの端末は、PCの場合もモバイルの場合もあり、画面のサイズは様々です。例えば、大きなデスクトップ モニターだったり、タブレットや小型のスマートフォンなど、画面サイズの異なる端末を使用しています。

そのため、異なる端末のサイズに合わせてページのサイズを調整する指示を出す meta viewport タグを使用して「レスポンシブ ウェブデザイン」に対応する必要があります。

解決策としては、WordPress(ワードプレス)の「レスポンシブウェブデザイン」のテンプレートを利用することをおすすめします。

■3、固定幅のビューポート

ビューポートが固定幅に設定されていると、モバイル(スマホ、タブレット、ガラケー)表示されるときに、一般的な携帯端末の画面サイズに合わせて表示されてしまうため、画面が見づらくなってしまいます。

解決策としては、WordPress(ワードプレス)の「レスポンシブウェブデザイン」のテンプレートを利用することをおすすめします。

■4、コンテンツのサイズがビューポートに対応していません

画面が比較的小さいサイズのモバイル(スマホ、タブレット、ガラケー)端末において、ページの画像の一部分しか表示されない状態になる場合があります。

このエラーは、ページの画像が特定のブラウザ幅(980px など)で最適に表示されるように設計されている場合に発生します。このエラーを修正するには、ページの CSS 要素に対して相対的な幅と位置の値を使用し、画像も同様にスケーリングできるようにします。

■5、フォントサイズが小です

モバイル(スマホ、タブレット、ガラケー)端末において、フォントサイズが小さすぎて読みにくい場合に出るエラーです。

■6、タップ要素同士が近すぎます

ボタンやナビゲーション リンクなどのタップ要素同士が近すぎるために、モバイル ユーザーがリンクを上手くタップできない場合に出るエラーです。

このエラーを修正するには、ボタンやナビゲーション リンクのサイズやスペースをモバイル(スマホ、タブレット、ガラケー)端末においても適切に表示されるように正しく設定する必要があります。

エラーが出た場合の解決策は?

このモバイルフレンドリーテストツールはGoogleの公式テストツールです。ですので、上記のエラー内容を修正れば「スマホ対応」に合格できます

上記の各種エラーを解決する方法としてGoogleが最も推奨しているのが「レスポンシブウェブデザイン」です。

「レスポンシブウェブデザイン」とは、Googleで検索するユーザーの端末(PC・スマホ・タブレット、ガラケー等)の画面幅に対応できるように表示画面が自動で切り替わるウェブデザインのことです。

もし、あなたが運営しているのがブログである場合、すぐできる解決策は2つあります

  1. レスポンシブウェブデザイン対応のテンプレートを使う
  2. WPtouchを使う

どちらも簡単に対応できますのでおすすめの方法です。

【1】レスポンシブウェブデザイン対応のテンプレートを使う

まず1つ目ですが、WordPress(ワードプレス)の「レスポンシブウェブデザイン」のテンプレートを利用することをおすすめします。検索すれば、無料で優れたものがいくつも見つかりますので、気に入ったものをダウンロードし設定してみて下さい。

 ※「レスポンシブウェブデザイン」というのは、PC(パソコン)で作成したブログが、自動的にモバイル(携帯電話、スマートフォンなど)でも見やすいようにレイアウト変更してくれる機能です。ですので、わざわざ「モバイル」用にブログを作成する必要がありません。

【2】WPtouchを使う

そして解決策の2つ目。

WordPressでは、上記のような「レスポンシブウェブデザイン」対応のテンプレートでも、スマホで閲覧した時に「見やすいレイアウトじゃない!」って感じることがあります。

私が以前使っていたテンプレートは、「レスポンシブウェブデザイン」に対応していたんですが、私個人的にはスマホで見ると「見やすい、使いやすいレイアウト」ではなかったのです。

そこで「WPtouch」という自動で「モバイル(スマホ、タブレット、ガラケー)対応サイト」を生成してくれるプラグインを利用しました。

この「WPtouch」は簡単に設定できるプラグインなので、とてもおすすめです。

【まとめ】モバイルフレンドリーテストでエラーが出たらどうすればいい?

モバイルフレンドリーテストでエラーが出るという事は、あなたのブログがモバイルフレンドリーではない=モバイル(スマホ、タブレット、ガラケー)で見ると見づらいブログという事です。

具体的には、

  1. フォントサイズが小さくてスマホだと文字が読めない
  2. 画像などが横幅からはみ出して見づらい
  3. リンクボタンが指で押しづらい

というような事で、共通しているのは、どれもユーザーにとって不便なサイトであるという事です。

ですから、今後もあなたのブログがユーザーにとって不便なサイトであり続けるならGoogleでの検索順位が下がりますよ。という事なのです。

でも慌てる必要はありません。

解決策として、下記の2つのどちらかを行えば、モバイルフレンドリーテストには合格します。

  1. レスポンシブウェブデザイン対応のテンプレートを使う
  2. WPtouchを使う

どちらも簡単に対応できますので是非お試しください。

ブログ スマホ対応(アクセスアップ)関連記事

 → 今後、スマホ未対応のブログは検索順位が下がるって噂は本当?

 → ブログのアクセス数が、スマホ対PCで「3対1」って知ってた?

 → あなたのブログは大丈夫?スマホ対応しないと検索順位は下落する?

 

スポンサーリンク

SNSでもご購読できます。

コメントを残す

*