モバイルユーザビリティとは？エラーの原因と対処法

総務省によると、2019年におけるインターネット利用率の8割以上は、スマホ（スマートフォン）・タブレット端末です。
そのため、モバイル検索に適した設計のサイトを構築することは、インターネット経由の集客を図る上で欠かせない重要な施策に該当します。

出典：総務省「情報通信白書令和2年版」

当記事では、自社サイトのモバイルユーザー対応を検討する担当者に向けて、モバイルユーザビリティの基礎知識を解説します。WEB担当初心者にもわかりやすい言葉で説明するため、Google Search Consoleでモバイルユーザビリティにエラーが表示されて困っている人は参考にしてください。

モバイルユーザビリティとは、モバイル端末からの閲覧しやすさの検証を目的に、Google Search Consoleで提供されているサービスです。Google Search Consoleの左側のタブで「モバイルユーザビリティ」を選択すると、問題点を調査できます。

Googleは、2015年4月にモバイル版の検索結果で、モバイル端末からの閲覧に向かないサイトの評価を引き下げる変更を行いました。モバイル検索の顕著な増加に対応し、ユーザーの利便性の向上を図るためです。

また、2020年3月にはGoogle公式ブログにて「すべてのWEBサイトにモバイルファーストインデックス（ページランクの評価などにモバイル版コンテンツを優先利用する方式）を適用する」という発表も出しました。
モバイルフレンドリーサイトの構築は、Googleの検索結果で上位表示を狙うすべての人にとって重要な課題です。

自社サイトのモバイル対応状況を検証したいときは、モバイルフレンドリーテストツールを活用する方法もあります。モバイルフレンドリーテストツールとは、Googleが無料で提供するモバイル対応状況のチェックツールのことです。

モバイルフレンドリーテストツールを活用することで、クローリング対象に含まれていないページもチェックすることが可能です。
モバイルフレンドリーテストツールにURLを入力するだけでモバイル対応状況をチェックできるため、ぜひ使ってみましょう。

Google Search Consoleのモバイルユーザビリティレポートのエラーメッセージは、Googleの評価基準に沿って「モバイルサイトとして不合格」という判断に至った際に表示されます。
エラー内容を放置し、モバイルファーストの対策を怠ることは、検索順位の低下を招く原因です。

以下では、エラーメッセージの内容と対処法について、わかりやすく解説します。

Flashコンテンツなど、多くのモバイル端末のブラウザで表示できない内容が含まれることを示すメッセージです。エラーメッセージの解消を図るためには、Flash以外の技術を使用し、サイトのリニューアルを図る方法が検討されます。

Flashコンテンツの代替としては、HTML5・JavaScriptなどを採用することが一般的です。WEB制作担当部署と相談し、リニューアル方法を検討してください。

ビューポートの設定を行っていないサイトに表示されるメッセージです。
ビューポートとは、モバイル端末の画面サイズに応じたサイトの表示方法を指定するプロパティに該当します。一般的には、htmlファイルのhead部分に以下のように記述し、サイトの表示方法を指定します。

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

上記の記述は、「画面の幅いっぱいにサイトの表示を行ってください」という意味を示します。パソコンやスマホ、タブレットなど、さまざまな端末の画面幅いっぱいにサイトを表示することで、不自由さを感じさせずに情報提供することが可能です。

320pxや640pxといった固定数字でビューポートを設定しているサイトに表示されるメッセージです。
モバイル端末ごとに画面の幅は異なるため、「width=device-width」と可変での設定が推奨されています。

WEB制作担当部署に相談する際は、「レスポンシブデザインによるリニューアルを検討中」といった伝え方もおすすめです。レスポンシブデザインとは、デバイスの種類に依存することなく、モバイル端末・PCの両方に対応可能であるサイトデザインを意味します。

レスポンシブデザインは、モバイルユーザビリティを高めるためにGoogleが推奨しているデザインです。モバイルユーザビリティのエラーメッセージの多くは、レスポンシブデザインにリニューアルすることで解消が見込まれます。

商品画像や動画などが、モバイル端末の画面幅を超えている場合に表示されるメッセージです。
基本的にPCサイトでは、画像サイズの固定幅を指定します。たとえば、CSSに「width:960px」と表示することが固定幅指定です。

このエラー状況を改善するためには、「width:100％」というように相対的な値の指定に変更する方法が効果的です。もしくは、「画面の幅が640px以下の場合に適用するCSS」「640pxを超える場合に適用するCSS」と複数のCSSを用意し、振り分ける手法も検討されます。

テキストのフォントサイズが小さく、可読性の低いサイトに表示されるメッセージです。
一般的には、12px以下のテキストサイズに対して表示されるケースが多いとされます。

モバイル端末で閲覧する際に画面の拡大を要するサイトは、ユーザビリティが高いとはいえません。画面を拡大する必要がない程度まで、テキストサイズを調整することをおすすめします。

テキストサイズの目安は16px以上です。画面幅が最も小さいモバイル端末を基準に据えて、可読性を高めるための対策を検討しましょう。

モバイル端末では、ボタンやナビゲーションをタップして、リンク先へ遷移します。
ボタンやナビゲーション同士の距離が近いと誤操作するリスクが高まることから、エラーメッセージが表示されています。

一般的にボタンやナビゲーションは、上下左右に8mmの空白を作ることが推奨されています。ボタンやナビゲーション自体の大きさは9mm相当が望ましいため、指の腹と同じくらいの大きさを確保しましょう。

レスポンシブ対応の概要と重要性｜実装方法もSTEP別に解説！

この記事では、レスポンシブ対応の概要と重要性について解説します。スマホが普及している現在、レスポンシブ対応は欠かせない工程です。実装方法も紹介するため、Webサイトの管理や運用を担当している人は参考にしてください。

エラーメッセージの修正後はGoogleに再クロールを依頼し、確認を受けなくてはなりません。クロールとは、検索エンジンの情報収集ロボット「クローラー」の巡回を意味します。検索エンジンは情報収集した結果をもとにサイトの評価するため、該当ページの修正ステータスをいち早く伝えることが、エラーの早期解消を図るポイントです。

再クロールの依頼方法は、修正対象ページの量によって異なります。

再クロールの依頼から実際にクロールを受けるまでには、数日から数週間を要するケースもあります。一定期間を置いてから、Google Search Consoleに「修正の確認を行った」というメッセージ通知が届いているか確認しましょう。

今後、モバイル端末に適したWEBサイトを構築することは、検索エンジン経由の集客を図るための重要施策に該当します。Google Search Consoleやモバイルフレンドリーテストツールを使い、モバイルユーザビリティの対応状況を一度確認しておきましょう。

モバイルユーザビリティに関してエラーが表示された場合は、適切な方法で対処する必要があります。エラーメッセージの解決法には技術的な要素を多く含むため、WEB制作担当部署の協力が不可欠です。関連部署と十分に話し合い、適切なSEO対策を進めましょう。

モバイルSEOとは｜最適化するためのポイント8つ

モバイルSEOとは、スマートフォンによる検索結果を最適化する施策です。Googleのモバイルファーストインデックスにより、モバイルSEOの必要性は高まっています。モバイルサイトを運営している場合は、モバイルSEOのポイントを押さえましょう。