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

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

エラーの原因と、その解決策（２つ）についてまとめました。

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

Google公式の無料ツール「モバイルフレンドリーテスト」　の結果として、

下図のように「このページはモバイルフレンドリーです」と表示されれば大丈夫。合格です！

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

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

■【エラー１】Flash が使用されています

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

■【エラー２】ビューポートが設定されていません

Googleで検索するユーザーは、PCからの場合もスマホからの場合もあり画面のサイズは様々です。

例えば、大きなデスクトップ モニターだったり、タブレットや小型のスマートフォンなど、画面サイズの異なる端末を使用しています。

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

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

■【エラー３】固定幅のビューポート

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

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

■【エラー４】コンテンツのサイズがビューポートに対応していません

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

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

■【エラー５】フォントサイズが小です

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

■【エラー６】タップ要素同士が近すぎます

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

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

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

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

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

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

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

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

簡単に対応できますのでおすすめの方法です。

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

WordPress（ワードプレス）の「レスポンシブウェブデザイン」のテンプレートを利用しましょう。これだけで問題解決します！

最近では、「無料テーマ」でも「レスポンシブウェブデザイン」対応のテンプレートもあるようですが、もし「ブログで収入を得たい！」なら「無料テーマ」でなく「有料テーマ」を使いましょう！

→　おすすめ「有料テーマ」比較結果はこちら！

ブログ初心者におすすめ「WordPress有料テーマ」比較結果

おすすめの「WordPressブログ」有料テーマってどれ？「ブログ初心者」におすすめは？いろいろあるけど…何がどう違うの…？という悩みを解決できるように、おすすめの「WordPress有料テーマ」を比較しました。

ネット起業.jp

2024.08.27

【まとめ】

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

具体的には、

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

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

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

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

• レスポンシブウェブデザイン対応のテンプレート

を使えば問題解決しますよ！

【私の本が出版されました！】

世の中に、ブログに関する書籍はたくさんあります。しかし、その中には、著者が『過去にブログで稼いだ方法』についてまとめたものも多く、出版時点ですでに古い情報になっていて現在では通用しないものがあります。

それでは意味が無いので、今回書籍を出版するにあたり、私がこだわったのは『今も私が実践してブログで稼いでいる方法』を書籍化することでした。

■「今、私が稼いでいる方法」を紹介します

自分がもし今からブログをゼロから始めるなら、どうやってブログを育てて「月収100万円」を実現するのか…？その手順を具体的に解説したのがこちらの書籍です。