Googleからモバイル ユーザビリティで問題を解決!

Googleから『Googleからモバイル ユーザビリティで問題が検出されました』このような通知がメールで届き、毎回!!!となり『また何か問題が・・・』、と変な汗をかきながらググったり、他の方の記事を探したりするのですが、中々見つからず悪戦苦闘して、日々悶々と過ごす日々でした。
毎回びっしょりになりながら、一難去ってまた一難と言った感じで色々なイベントが起きています。ブログ運営をされている方ならば少なからず何かしらの通知を受け取った経験があるかと思います。
ブログ運営は想像していたよりも、様々なイベント数々仕込まれていて、日進月歩のような感じで取り組まなければ、スキルや知識も陳腐化しそうな気がしてなりません、しかしメンタルが追いつかなくなる時もあり、放置したりテコ入れしたりの繰り返し、まるで赤ちゃんが少しずつ経験して大人になっていく感じでしょうか・・・
今回のエラーは、意外と簡単に解決できましたので、簡単ではありますが、手順を画像と文字で説明させていただきますので、参考になれば幸いです。
モバイルユーザビリティを解決する
Googleからエラー通知メール下部にあるリンクを(下の図のバナーみたなもの)踏むと課題のあるページに飛びますので、先ずはエラーの部分をチェックしていきましょう。
また、これを解決していないとPVに影響があると言われていますので、面倒でも時間をかけてでも良いので必ず解決しておきましょう!


課題のあるページを確認
Googleから来ているメールのモバイルユーザビリティを解決するクリックをするとさらに、エラー項目が下の図のように出ますので、エラーの部分と内容を確認をしましょう。
対象をクリックすると以下(写真)のような情報が出ています、テキストが小さすぎる?含めて3つエラーが出ていますね。

1)エラー テキストサイズが小さすぎて読めない
2)クリック可能な要素同士が近すぎます
3)コンテンツの幅が画面の幅を超えています
また下の図の、テキストが小さすぎて読めませんの右下にある修正を検証ボタンを押すと、そのページの再検証しますが、まずは該当ページを別のタブでアドレスをコピーして開き、ページを確認しましょう。


ここで面倒なのが、どの部分がエラーなのかを、目視で確認していかなければならないのが手間になりますので文章を一からなめるように確認する必要があります、ここがダメだよと教えてくれたら楽なんですが、そこまでの機能は現在実装されてはいません。
では、先ず何の作業をするかといえば、私の場合は『テキストが小さすぎて読めません』のエラーですから、Googleの推奨するフォントサイズの16pxに最低のフォントサイズを合わせる事になりますので、該当ページの文章でそれを探していきます。
今回はこのような写真の下に補足を入れている箇所が12pxでしたので、Google推奨サイズの16pxに変更し、先ほどの『修正を検証する』ボタンを押し解決しているかを再チェックして、エラーが消えたのを確認しました。

あと、他のエラーで出ていました、コンテンツの幅が画面を越えているとの事でしたので、写真サイズを修正して再度サイトチェックをかけるとフレンドリーな状態に改善されました。
このエラーは修正しておくと、PVにも影響がありますので、改善してよい記事にしていきましょう

まとめ
落ち着いて確認すると、『あーなるほど!』と言う感じに解決していきましたが、私みたいにビギナーだと文章の規則やルールを知らずに記事にする事で、詳しい方からするとなんで、この単純エラーに気づかないんだ?と思われがちでしょうが、私のようなビギナーには大変難しく感じる部分でもあります。
また、解決方法を知らないうちは何をどのように処理をしてよいかわからず、あたふたしがちで不明な箇所をググっても、中々真相に辿り着けない事も多いかと思いますが、少しずつ慣れて行くと思いますので、諦めずコツコツ習得していきましょう。
また、複雑な課題もブログを運営する一つの楽しみ方だと思いながら、コツコツ記事を作っては、エラーを修正すると言った感じで、ブログを育てて行くと楽しみながら、スキルが身について行くのではないでしょうか?
今回も最後まで拝見いただきまして、ありがとうございます。
少しでも、今回の記事が皆さんの役に立てれば嬉しいです。
