Google Search Consoleのモバイルユーザビリティエラーの対処法

access_time

Google Search Consoleのモバイルユーザビリティエラーの対処法

ホームページを立ち上げるととりあえずお世話になるのがGoogleのアナリティクスとサーチコンソールだと思います。サーチコンソールでよく頭を悩ませてくれるのがモバイルユーザビリティの問題です。

自分で制作したサイトであればある程度把握できるのですが他人が制作したサイトだと結構単純なミスに気がつくのに時間がかかったりします。

今回はエラーの対処法をメモしておきます。

よくあるモバイルユーザビリティエラー

  • ビューポートが設定されていません
  • ビューポートが「端末の幅」に収まるよう設定されていません
  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています

多く見られるのはこの辺です。
それぞれ解決策のような見直すポイントを掲載。

ビューポートが設定されていません

単純にHTMLに viewport が設定されていないだけ。
viewport の設定についての詳細は過去記事を参照してください。
一応書き方だけ掲載しておきます。<head>と</head>の適当な場所に下記を記載します。

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

注意点はちゃんとレスポンシブに作っていないとスマホで見たときに表示がズレたりするので修正する際はレスポンシブ対応になっているかを確認しましょう。

ビューポートが「端末の幅」に収まるよう設定されていません

こちらも viewport 関連のエラーです。
viewport がこんな感じで固定値になっている可能性があります。

<!--エラーが起こるパターン-->
<meta name="viewport" content="width=1000">

レスポンシブデザインで上記のようになっているとせっかくのレスポンシブデザインがうまく機能しません。
この書き方で問題ないのは、スマホサイトとパソコンサイトを別々に製作していてJS等で切り替えるパターンのホームページです。最近の主流はレスポンシブデザインがなのでエラーを無くそうとすると根本からの見直しが必要になるパターンです。気にしないという手もありますが…

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

viewportのエラーが出ていない場合でこのエラーが出ている場合は、単純にCSSで設定している font-size が小さいようです。このブログでも font-size :80%; にしていたところが引っかかったらしくエラーが出てしまったため修正しました。

デフォルトのフォントサイズが16pxとして80％のサイズは12.8px…
うーん小さい気がする。エラーが出たらとりあえず font-size を見直しましょう。

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

これはページ全体に出なければ特に問題ないです。
テキストの中に入れ込んだリンクが改行等のポイントで上下に並んでしまった場合に起こるようです。この場合は放置しておくか適度に改行をいれたり文章の構成を変えるなどして対応すれば良いと思います。

ページ全体に出てしまった場合はメニュー等のリンクメニューがピッタリくっついている場合があります。メニューはおそらく<ul><li>タグで作られている場合が多いと思いますので<li>タグのmarginを見直しましょう。

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

コンテンツが画面からははみ出しているパターンなので、スマホで見たときやPCブラウザを小さくして見たときに横スクロールバーが出る場合などです。
素直に横スクロールバーが出た場合はブラウザのデベロッパーツールを起動して原因を探すと良いと思います。

はみ出すパターンのCSSサンプル

はみ出すパターンのサンプルCSSをいくつか書いておきます。

.hamidashi{
	width: 100%;
	margin: 0 10px;
}
/*marginが飛びてでいるパターン
幅を100%に設定しているのに両端にmarginを10px設定しているのが原因
両端に10pxづつはみ出す*/

.hamidashi2{
	width: 100%;
	padding: 0 10px;
}
/*paddingが飛びてでいるパターン
幅を100%に設定しているのに両端にpaddingを10px設定しているのが原因
両端に10pxづつはみ出す。同じようなパターンでborder分はみ出すパターンもある*/

はみ出すパターンのCSSの対策

.hamidashi{
	width: calc( 100% - 20px );
	margin: 0 10px;
}
/*marginが飛びてでいるパターンなので
widthをはみ出る分小さくなるよう計算してあげれば良い
margin-left:10px + margin-right:10px =20px 
なので、100％から20pxマイナスした数値をwidthに設定している*/

.hamidashi2{
	width: 100%;
	padding: 0 10px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
/*paddingが飛びてでいるパターンなので
box-sizing: border-box;を加えてwidth:100%にpaddingとborderを含めるように設定しています。
念の為ベンダープレイフィックスも書いておくと古い端末等で効かないという状況を回避できます*/

画像がはみ出てしまうパターン

よくあるパターンですが、ホームページ上に掲載している画像がはみ出しているパターンです。widthを固定値（500pxとか）で設定しているとはみ出します。

そんな場合はその width の値を100％等画面比率で変化するように設定します。固定値で設定していないのにはみ出てしまい場合はimgのCSSに下記を設定します。

img{
	max-width: 100%;
	height: auto;
}

これで最大幅を100％に設定できるのではみ出す（サイズが100％以上になる）事はなくなるはずです。

なんの解決にもならない最終手段

どーしてもエラーが取れなくて兎に角エラーだけ取りたい場合は<body>タグの開始直後と終了直前までを<div>タグで括ってoverflow: hidden;を設定します。

<body>
<div class="hamidashi">

<!--コンテンツ省略-->

</div>
</body>
.hamidashi{
	overflow: hidden;
	width: 100%;
}

とりあえずコレで<body>ではみ出さない限り、はみ出しはなくなります。
overflow: hidden;ではみ出している部分を非表示にしているだけですが…

ちなみにoverflow: hidden;を<body>に設定するとスクロールできなくなったりします。
あくまで最終手段としてのメモでした。

最終的にはモバイルフレンドリーテストツールで確認しましょう。

CSS HTML ツール