Google Search Consoleのモバイルユーザービリティのエラーには手順があります。
ひとつのエラーを直すと一気にエラーが消えることがあるので、それを狙って修正したほうが作業効率がいい。
作業自体はかんたんです。数が多いとめんどうですが。
Google Search Consoleは、スマホやタブレットでのサイト表示の見やすさを検査してくれます。
そこでこんなエラーや警告を見たことがあるでしょう。
ビューポートが設定されていません。
テキストが小さすぎて読めません。
クリック可能な要素同士が近すぎます。
コンテンツの幅が画面の幅を超えています。
この中で、まず最初に修正すべきは、これ。
『ビューポートが設定されていません。』
ビューポートはページをモバイルでどう見せるか？ をHTMLで指定するもの。これが設定されていないと他のエラーもいっしょに出ます。
どう見せるかをGoogleさんに教えてないので、いろんなエラーが出るのは当たり前っちゃ、当たり前。
逆に言うと、これ以外のエラーはビューポートの設定で一気に直る可能性があります。
ビューポートの設定はこちらをどうぞ。
一通り、検証が終わってもまだエラーや警告が出てるときは、個別に修正します。
個別の修正はかんたんです。すべてCSSを修正します。
| テキストが小さい | font-sizeの変更。 |
| 要素同士が近い | padding, marginの変更。 |
| コンテンツがはみ出る | width, heightの変更。 |
最後の3つは、コンテンツの内容によっても変わるので、比較的エラーページ数は少ないでしょう。
ヘッダー・フッターなど共通部分だったらほぼすべてのページでエラーになりますが。
修正箇所がたくさんあると面倒ですが、慣れるとCSSを作成してるときに意識してできるようになります。
（こうしたら、あれが出るな～。これが出るな～。というのが分かる。）
