モバイルユーザビリティエラーの解決法を解説!

スマホのモバイルフレンドリー表示

さて、ブログ、どうなってるかな?

いつものチェックのために、サーチコンソールを開くと・・

 

サーチコンソールのエラー

 

サーチコンソールのエラー

 

( ゚д゚) ・・・

(つд⊂)ゴシゴシ

(;゚д゚) ・・・!

 

な、なんか・・エラー出てる!!

 

と、ある日突然、モバイルユーザビリティのエラーに気づく!

というのは、よく経験されることのようです。

私自身、つい最近起きてしまいました。。

 

たとえば「テキストが小さすぎて読めません」とか・・

「クリック可能な要素同士が近すぎます」とかいったエラーが、よく出る定番のものです。

私自身はこのふたつが、セットで出現しました。。

 

そしてこれらのエラーは、SEOに悪影響を与え・・

PVや収益を落とす可能性があります。

 

なので、どう直せばいいの?となりがちなエラーではありますが・・

何とかして早めに、直したほうがいいのです。

 

この記事では、モバイルユーザビリティのエラーが出現したら、どう対応する?

ここを解決法をちゃんと含めて、解説していきます。

エラーは、ここから確認する

モバイルユーザビリティのエラーは、グーグルサーチコンソールから確認します。

 

サーチコンソールを開いたら・・

サーチコンソールの画面

「エクスペリエンス」「モバイルユーザビリティ」のところをクリックします。

 

すると、

サーチコンソールのエラー

サーチコンソールのエラー

もしエラーがある場合は冒頭でも紹介した、こんな感じのエラー画面が出るはずです。

 

サーチコンソールの画面

その画面の下のほうから、エラーの詳細が確認でき・・

クリックすると、それぞれのエラーを起こしているURLが確認できます。

 

エラーが無い場合は・・

サーチコンソールの画面

こんな感じで、エラーは「0」になっているはずです。

 

 

それ以外にも、

サーチコンソールの画面

「エクスペリエンス」「ページエクスペリエンス」からも、エラーを判断できます。

 

サーチコンソールの画面

サーチコンソールの画面

エラーが有ると、こんな感じで「良好URL」の数が100%未満になっているはずです。

エラーは本物?「ライブテスト」でチェック!

モバイルユーザビリティのエラーが、出てしまったとして・・

このエラーは誤検出の場合が、けっこうあります。

 

そして100%ではないですが、誤検出かどうか?を見分ける方法があります。

なのでまずは、以下の手順をやってみるのがおすすめです。

 

まず、

サーチコンソールの画面

この「エラーの詳細」のところをクリックし、エラーを起こしているURLを確認します。

 

サーチコンソールの画面

こんなふうにエラーの数だけ、URLが出てくるはずです。

 

出てきたURLのうち、ひとつをクリックすると・・

サーチコンソールの画面

「ライブページをテスト」と出てきますので、ここをクリックします。

 

すると、

サーチコンソールの画面

グーグルの「モバイルフレンドリーテスト」が立ち上がり、自動でそのURLのテストが始まるはずです。

モバイルフレンドリーテストに直接飛ぶためのURLも、貼っておきます

 

テストの結果、モバイルフレンドリー的に問題なければ・・

サーチコンソールの画面

「このページはモバイルフレンドリーです」と出ます。

 

エラーがあるなら、

サーチコンソールの画面

「このページはモバイルフレンドリーではありません」と出るはずです。

 

ここで、ひとつの疑問が出るかもしれません。

エラーになっていたURLをテストしたのに、「モバイルフレンドリーです」と出るってどういう状況?

このパターンになることはけっこう、多いです・・

 

私自身、どういうことだ?と考えたのですが・・

ページに問題は無い状態だけど、それがサーチコンソールに反映されていない

エラーをチェックした時点で、そういう状態にあるのかなと思いました。

 

これはサーチコンソールを長く使っている方だと、実感されているかもしれませんが・・

サーチコンソールは、データの反映がかなり遅いツールです。

 

たとえば「被リンク」なんかも、貼られてから相当な時間がたってから、サーチコンソールに表示されますし・・

「カバレッジ」から見られるエラーなんかも、反映が遅かったりします。

 

そして「モバイルフレンドリーテスト」なら、リアルタイムの情報が見られるはずです。

なのでエラー自体は、すでに解決しているんだけど・・

サーチコンソール側にはまだ反映されていないので、「エラー」となっている!

そういう状況の場合は、上のパターンになります。

 

この場合はサーチコンソールに出ているエラーは、「誤検出」ということになりますね。

なのでこの場合は、まずはしばらく放置がとるべき対応になると思います。

 

もし、本当にサイトにエラーが無いのなら・・

時間がたつにつれてサーチコンソールに反映され、エラーは消えていくはずです。

 

実際に私自身、放置によりエラーが消えたことがありました。

その時は・・

サーチコンソールの画面

こんな感じで9日間の放置の末に、エラーはゼロになりました。
(赤いグラフ1本が1日ぶんです)

もちろん、もっと短い時間で消えたり、もっと長く掛かったりする場合があると思います。

 

いちおう書いておくと、こういうパターンの場合でも「必ず」誤検出、とまでは言い切れないです。

なので、しばらく放置したけど、エラーがぜんぜん減らない。。

そんな場合は原因を考えて、ちゃんと対処するほうがいい、となってきます。

 

 

と、モバイルフレンドリーテストで「合格」した場合のことをお話ししてみましたが・・

モバイルフレンドリーテストで、このように「不合格」が出た場合は、どうすればいいのでしょうか?

以下、解説してみます。

エラーが「本物」だと思われた場合

サーチコンソールでエラーが出て、モバイルフレンドリーテストでも「不合格」だった場合は・・

現在、実際にモバイルユーザビリティに問題がある

この可能性が高いと思われます。

 

この場合はいくら放置しても、おそらく解決はしませんので・・

ちゃんとした対処が必要!ということですね。

 

そして対処をした後、忘れずに・・

サーチコンソールの表示

サーチコンソールから「新しい検証を開始」を行い、修正を依頼します。
(エラーの詳細のところをクリックしていくと、このボタンが出てくるはずです)

 

エラーにはさまざまな種類がありますので、ここですべてを紹介はしませんが・・

①:テキストが小さすぎて読めません

②:クリックできる要素同士が近すぎます

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

あたりは、エラーとして定番ですね。

以下、それぞれについて解説してみます。

①:テキストが小さすぎて読めません

これは文字通り、表示するテキストがあまりに小さすぎて・・

小さなスマホの画面で、うまく読めない!となっているとき出るエラーです。

 

文字が小さめに設定されていても、パソコンでは、まあ読めることが多いのですが・・

スマホだと米粒以下みたいなサイズになることもあり、そうなるともちろん読みにくいですよね。

なので文字を小さすぎに設定しないことが重要になるのです。

 

ここは、絶対的な基準は無いのですが・・

いろいろ見ていくと文字が「12px」未満だと、このエラーが出ることが多いようですね。

しかしパンくずリストとか、フッター内などの「小さいのが普通」の文字は、その限りでは無いようです。

 

参考までに私自身は、本文中の文字サイズは16pxに・・

サイドバーの文字サイズは、14pxに設定しています。

 

文字サイズは、使っているブログテンプレートによっては、ワードプレス内の設定画面から変えられるかもしれませんし・・

それが難しいなら「style.css」「smart.css」といった、スタイルシートから変えることができます。

②:クリックできる要素同士が近すぎます

このエラーはふたつ以上の「クリックできるリンク」が近すぎる場合に起きます。

 

ちょっと、極端な例ですが・・

密集したリンクの例

「①」から「⑥」が、それぞれリンクだとして・・

こんな感じでクリックできるリンクを密集させると、おそらくこのエラーが出るでしょう。

 

このくらい密集させても、パソコンでは特に問題ないです。

マウスは小さなエリアでも、精密にクリックできますので・・

狭いエリアにたくさんのリンクがあっても、特に問題ないわけです。

 

しかしスマホは「指」でタップするものです。

そして指先は、けっこう太いです。

なので、リンクをあまりに密集させると「押し間違い」のリスクが上がっていくわけですね。

 

という事情があるので、モバイルユーザビリティを考えるなら、リンク同士はあまり密集させずに・・

お互いを、ある程度離すべきなのです。

 

どのくらい離せばいいのか?に、絶対的な基準は無いようです。

しかし「指の太さ」で押し間違えそうになるようなら、近すぎと言えるでしょう。

 

ちなみに、すべてのリンクがこのエラーの対象になるわけではなく・・

中には、近すぎても問題ない場合もあるようですね。

なので、なかなか難しいところなのですが・・

 

このエラーが出たページで、明らかに近すぎるリンクがあるなら・・

記事を書き直すなり、スタイルシートを編集するなりして、間隔を空けてみましょう。

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

記事が、スマホの幅をはみ出ているような場合に、このエラーが出ます。

 

はみ出ているサイト

例えばサイトを開いたときに、サイトの幅がうまく調整されなくて・・

サイトの右半分が、スマホの画面外に漏れている!みたいなケースですね。

 

スマホでは通常、サイトはスマホの幅ぴったりになっていることが求められます。

それが上下スクロールのみで、一番スムーズに読める形だからですね。

なのでそれが出来ていない、幅がはみ出している状態はエラーになってしまいます。

 

どうすれば、はみ出さないデザインにできるのか?は、ちょっと一概には説明しにくいですが・・

通常は「header.php」というスタイルシートに、

<meta name="viewport" content="width=device-width,initial-scale=1.0">

こんな感じのコードがあって、これがはみ出さないデザインを司っているはずです。

なので何らかの原因でこのあたりが崩れているときに、このエラーが出やすいですね。

「合格」なのに、問題があるケースもある

と、モバイルフレンドリーテストで「不合格」だった場合、問題があるわけですが・・

モバイルフレンドリーテストが「合格」なのに、実際には問題があるケースもあります。

最近、私自身、これを経験しました。

 

具体的には、

パンくずリスト

これはテスト用記事で、文章は適当なのですが・・

 

記事のいちばん上のほうに配置していた、

パンくずリスト

上のような「パンくずリスト」が原因でした。

 

私自身が、ちょっと古いブログテンプレートを改造しながら使っていることもあって・・

このパンくずリストの文字サイズが「10px」と、かなり小さくなっていました。

パソコンだけ時代なら問題ないのですが、スマホ前提だと小さすぎたわけですね。

 

さらにこのパンくずリストは、

パンくずリスト

上のような感じでクリックできるものです。

 

これらのことがあいまって、「テキストが小さすぎて読めません」「クリックできる要素同士が近すぎます」の2エラーを出してしまっていました。

 

このときは、モバイルフレンドリーテストは「合格」だったのですが・・

エラーがなかなか減らないので、なにか原因があるのか?といろいろ試行錯誤した結果、この問題に行き着いた、という感じです。

 

具体的には、パンくずリストの文字サイズを「12px」にまで拡大し・・

文字同士が近くなりすぎないよう、記事の右端で「折り返さない」ように設定し直しました。

この修正をしたところ、モバイルユーザビリティエラーの数は徐々に減り始めました。

 

結果的には、

サーチコンソールのエラー画面

サーチコンソールのエラー画面

こんな感じで55日間エラーが続き、その後エラーがゼロになる、という運びとなりました。

 

と、こういうケースもあるので・・

モバイルユーザビリティテストで「合格」だけど、実際には問題があり、修正することでエラーが減る

そういう場合もあり得るんだ・・ということも、知っておいていいと思います。

「スタイルシートをいじった」なら、それが原因かも

どんな場合に、モバイルユーザビリティのエラーが出るのか?

 

もし、あなたが定番のブログテンプレートを使っている場合・・

「初期状態」でエラーが出るような状態になっていることは、あまり考えにくいです。

 

なのでエラーが出るのは、サイトになんらかの「悪い編集」をしてしまったから。。

となるのが自然だと思います。

 

特にスタイルシートの編集は、エラーの原因になりやすいです。

スタイルシートは、文字サイズとか表示幅とかの「サイトのデザイン」をカスタマイズするとき、編集すると思いますが・・

これの「編集ミス」が、モバイルユーザビリティエラーを引き起こしやすいのです。

 

たとえば、サイトの文字サイズまわりを編集していて・・

何かのミスで、文字を極端に小さくしてしまった!

その場合は「テキストが小さすぎて読めません」のエラーが、すぐに出現するはずです。

 

 

スタイルシート以外だと・・

ワードプレスで「レスポンシブデザインの設定」をオフにしてしまった!

というのも、エラーが出る原因になりやすいです。

 

ブログテンプレートにもよりますが・・

レスポンシブデザインの切り替えボタン

こんな感じの切り替え設定が用意されている場合があります。

 

これがオンになっていれば、スマホではスマホ用の表示がされますが・・

間違ってオフにしてしまった場合は、スマホでもパソコン用の表示になってしまいます。

そうなるともちろん、モバイルフレンドリーテストは不合格になりますよね。

 

 

と、こんな感じの「サイトのデザイン編集ミス」をしてしまった場合に・・

エラーが出てしまうことは多いので、注意!です。

 

 

今回はモバイルユーザビリティエラーが出る原因や、その解決法をお話ししてみました。

運営者:りふりーびと

 

プロフィール画像

 
仕事、人間関係、お金、健康・・あらゆる面での「理不尽フリー」を追求する人です。

ブログ運営・投資・独立などにより、すでにある程度は達成済み。

【年齢・性別】30歳台後半、男性

【本業】
◇現在:企業の産業医など
◇元:総合病院の内科医・研究員
◇医局から独立し3年目

【副業】
◇ブロガー
(13万PV/月のブログを運営)
◇インデックス投資(歴7年)

【その他の特徴】
◇姿勢改善で頭痛が治った経験あり
◇趣味は自転車
 
TwitterPinterest
 

カテゴリー
サイト内検索
特殊ページ
最近の投稿
最終更新日ごと

ページの先頭へ