モバイルユーザビリティでよく出る問題（テキストの大きさなど）

ウェブ屋コラム

グーグルサーチコンソールでのアラートや、モバイルユーザビリティの問題についての事がメールに届いた場合の対処法をまとめました。

まずは、ツールに任せ、モバイルフレンドリーテストを行ってみます。もし、問題が大きいのであれば、グーグルサーチコンソールよりも具体的な内容を教えてくれます。今回は問題が大きくなかったために、具体的な修正内容はありませんでした。

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

Googleの提唱するフォントサイズは16px、行間は1.2emです

一定の横幅以下でアクセスされたときに、上記の設定で表示させるように「メディアクエリー」を利用します。また、他の設定が指定されていた場合にも、優先して指定できるように、「!important;」を利用します。（今回は、全ての要素に指定するように「＊」を使いましたが、部分的に設定する場合は、「＊」の部分を対応するクラス名に変更してください。）

CSS
/*1023px以下*/
@media screen and (max-width: 1023px){
  *{
    font-size: 16px !important;
    line-height:1.2em !important;
  }
}

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

スマホで使用する画像の横幅サイズは、1080pxです。

1080px以上の画像が使用されている場合は、その画像サイズを1080pxまで下げてみましょう。

クリック可能な要素同士が近すぎます

クリック出来る領域同士の間隔を7ｍｍ以上離しましょう。

親指１本が１０ｍｍと言われますので、それを目安にスマホでチェックしましょう。

最後に検証を押して、グーグルの確認を待ちます。