一時期、当サイトにSearch Consoleからモバイルユーザビリティエラーの通知がちょくちょく来ていました。しばらく放っておいたのですが、本当に何度も通知が来るので気持ち悪くなり、重い腰を上げて手探りですが対処してみました。おかげで現在、対処をして3ヵ月以上経過しているのですが、今のところモバイルユーザビリティエラーの通知は来なくなり、快適に過ごせています。
モバイルユーザビリティエラーの種類
当サイトに届いていたモバイルユーザビリティエラーは以下の3つです。
- 「テキストが小さすぎて読めません」
- 「クリック可能な要素が近すぎます」
- 「コンテンツの幅が画面の幅を超えています」
ほかにも「ビューポートが設定されていません」といったメッセージもあるようですが、当サイトではビューポートは問題なく設定されているのでこのエラーは見たことありません。
「テキストが小さすぎて読めません」について
これは、文字通りモバイルで表示した時に文字が小さく、ユーザーがコンテンツを読む時にピンチアウトが必要ですよという通知です。以前の当サイトは16pxより小さいサイズを指定していました。Googleが提唱する文字のサイズは16px以上を推奨ということなので、ビビリの自分はメインコンテンツの文字サイズを18pxに設定しました。文字サイズは全てを16px以上にしないといけないというわけではありません。重要でないコンテンツの一部くらいなら16px以下のサイズにしていても問題ないようです。
「クリック可能な要素が近すぎます」について
これはモバイルサイトの時に、ユーザーは指でサイトを操作するのですが、タップする時にボタンとボタンの間が近すぎると、ボタンがとてもタップしにくくなります。
大人の指の腹のサイズは10mmとされているのでリンクボタンの間は7mm以上空けることが望ましいようです。自分がサイトを操作してみて、タップしにくいなと思うところを改善していけば良いかと思います。
当サイトでは、SNSボタンが小さくタップしにくかったので、下のキャプチャ画面のようにボタンを大きくし、間隔を広げれるところは広げてみました。
「コンテンツの幅が画面の幅を超えています」について
今回自分がなかなか原因をつかめなかったエラーがこの「コンテンツの幅が画面の幅を超えています」です。普通にモバイルで表示しても、横スクロールが出るわけでもなく、問題なく縦スクロールのみで表示できていて、画面幅を超えている箇所はないのにとちょっと途方にくれていました。
そんな時、何気なくブラウザの横幅をマウスで変えてたりしていたら、なんと一瞬ですが横スクロールが発生してしまう瞬間があったのです。自分の場合はブレイクポイントの前後辺りの横幅サイズになった時でした。cssでmin-widthの指定があったのですが、これが少し画面幅を超えた設定になっているせいで一瞬横スクロール（下キャプチャ画像参照）が発生していました。
Search Consoleこんなところも見ているのか！と半信半疑ながらもcssを修正し、このエラーを解消してみました。
すると…
自分の環境では、3ヵ月間モバイルユーザビリティエラーの通知はきていません（2020年12月現在）さらに、当サイトPCからのアクセスが圧倒的に多いサイトでしたが、この対応をした後ぐらいから徐々にモバイルでのアクセスが増えてきています。
モバイルユーザビリティエラーについてまとめ
こんなことなら早くモバイルユーザビリティエラーを解消すればよかったと思う所存です。エラーを解消したら、Search Consoleで「修正を検証」してみてください。問題なければモバイルユーザビリティエラーが解消されましたと通知が届くはずです。
少しでも「モバイルユーザビリティエラー」の解消に苦戦している方にこの記事が役に立てれば幸いです。