スマートフォンなどのモバイル端末でWEBサイト表示に問題がないかをチェックできるツールがGoogleサーチコンソールの「モバイル ユーザビリティ」という機能です。

モバイルユーザーにとってWEBサイトの使い勝手を良くすることはもちろん、Googleの検索ランキングに影響を及ぼす重要な要素とされているモバイルユーザビリティの問題を解決するためにも、この機能によるチェック方法や使い方などをしっかり理解しておくことが大切です。

それでは早速、Googleサーチコンソールの「モバイル ユーザビリティ」について解説します。

PCサイトとモバイルサイトのSEOは、基本的に考え方は同じです。しかしながら、モバイルサイトに関するGoogleの評価基準には、PCサイトの評価基準にはない「モバイル ユーザビリティ」という要素があります。

モバイル ユーザビリティとは、モバイルサイトに訪れたモバイルユーザーにとって使い勝手の良いもの（モバイル フレンドリー）にすることを指します。

Googleでは、

スマートフォンなどのモバイル端末でWEBサイトを閲覧したときに、モバイルユーザーが快適に閲覧できるようにフォントサイズやボタン同士の間隔などがきちんと設定されているか、確認できるレポートがあります。
それが、Googleサーチコンソールの「モバイル ユーザビリティ」という機能です。
この機能を使うと、自社サイトのモバイル ユーザビリティに問題のあるページや、問題点などを具体的に指摘してくれます。

ここでは、Googleサーチコンソールの「モバイル ユーザビリティ」の基本的な見方や表示されるエラーの種類についてまとめます。

以下は、モバイル ユーザビリティ機能で検出されるエラーの種類です。

リンクやページボタン同士が近すぎるときに表示されるエラーです。タップ要素同士が近すぎると、ユーザーが指を使ってもタップしにくいためです。リンクのサイズやボタン同士の間隔をモバイルユーザーが使いやすいように正しく設定します。

フォントサイズが小さすぎて、ユーザーが画面を拡大しなければ読みにくいページが検出された場合に表示されるエラーです。ビューポートで表示領域を適切に指定したあとに読みやすいフォントサイズを設定して適切に表示されるようにします。

特定のデバイスに合わせて固定の横幅が指定されていたり、異なる画面サイズに合わせて調整されていたりするときに表示されるエラーです。モバイルサイトのデザインにレスポンシブWEBデザインを導入して、デバイスの幅を合わせて設定する必要があります。

HTMLのheadタグ内でviewportプロパティが設定されていないと、このようなエラーが表示されます。PCサイトとモバイルサイトなど、デバイスによって幅が異なります。そのため、デバイスの幅に応じてheadタグ内にビューポートを設定します。

コンテンツを閲覧するときにユーザーが上下にスクロールするのではなく、左右へスクロールをしなければならないコンテンツがある場合やページの画像が特定のブラウザの幅で最適に表示されるようにされている場合に表示されるエラーです。CSSでページの画像やコンテンツに対して絶対値を使用している場合に表示されるため、相対的な値を設定して画像サイズに応じて適切に表示できるようになります。

Flashなど、モバイルブラウザでほとんどサポートされていないプラグインがページに含まれていると表示されるエラーです。HTML5などの最新の言語を使用してページを再構築します。

Googleサーチコンソールのモバイル ユーザビリティを使ってエラーが検出された時は、Googleが提供している「モバイル フレンドリー テスト」というツールを使ってエラー内容をさらに詳しく確認して対応します。

モバイル フレンドリー テスト画面で特に注目したい項目が、画面右側に表示される「このページをモバイル フレンドリーにしましょう」という部分です。

「CMSを使用した」「第三者に作成してもらった」「自分で作成した」という3つの制作方法から、最も適したものを選択して「次へ」をクリックすると、実際にエラーが生じている問題点を建設的に解決するためのアドバイスが受けられるページに移動できます。

次のページで書かれているアドバイスを参考に、問題のある部分を修正します。