スマートフォンの普及により、一昔前までの中心だったパソコンよりも、スマートフォンをはじめとしたモバイル端末を使用するユーザーのほうが多くなっています。
Googleが2015年4月に行ったモバイルフレンドリーアップデート以降、スマートフォンに対応したモバイルフレンドリーなサイトは、モバイル検索において順位が引き上げられるようになりました。
すでに多くのサイトがモバイル対応していますので、対応できていないサイトは実質的に順位を落とすことにつながります。
運営しているサイトがきちんとモバイル対応しているかどうか、チェック・改善する方法をご紹介します。
モバイルユーザビリティとは
モバイルユーザビリティは、スマートフォンやタブレットなど、小さい画面でもWebサイトが利用・閲覧できるかどうかを指します。
サイトのモバイルユーザビリティが問題ないかどうかは、サーチコンソールのメニュー「拡張」＞「モバイルユーザビリティ」でレポートを確認することができます。
Googleは、
・視認性（画面サイズに合わせて、ページサイズやフォントサイズが調整されているか）
・操作性（指でタップされることを前提に、ボタンやリンクなどが配置されているか）
・互換性（スマートフォンなどのデバイスでコンテンツが利用できるか）
に関するモバイルユーザビリティの指標を設けています。
なお、モバイルユーザビリティレポートを使用するためにはサーチコンソールに登録されていることが必要です。
サーチコンソールに登録されていないのであればあらかじめ登録しておきましょう。
エラーが出た際にはメールやツール内で通知されるようになります。
初心者でも簡単！サーチコンソールの登録・設定方法と使い方を徹底解説
ページがモバイル対応できているかどうかはGoogleのモバイルフレンドリーテストツールでも確認可能です。
モバイルフレンドリーテスト
こちらはサーチコンソール登録の必要なく簡易診断が可能です。
以下はサーチコンソールのモバイルユーザビリティについて解説します。
モバイルユーザビリティ上でのエラー項目
モバイルユーザビリティの指標でGoogleがしきい値を超えたと判断したページは、「エラー」として検出されます。
サーチコンソール上で各エラー項目をクリックすると、該当するページのURLを一覧表示することができます。
主なエラー項目について、原因と対処法を解説します。
互換性のないプラグインを使用しています
多くのモバイルブラウザでサポートされていないプラグインを使用しているページが該当するエラーです。例えば、Flashコンテンツはブラウザやデバイスによってはサポート外もしくは無効化されており、閲覧できません。静止画像やJavaScriptなどでの代替を検討しましょう。
ビューポートが設定されていません
ビューポート（デバイスの画面サイズに合わせてページの表示領域を調整するプロパティ）が定義されていないページが該当するエラーです。viewportタグを指定しましょう。
ビューポートが「端末の幅」に収まるよう設定されていません
横幅がピクセル指定で固定されているページが該当するエラーです。デバイスの幅に合わせてスケーリングできるよう、とスケーリングに合わせてビューポートを設定しましょう。
コンテンツの幅が画面の幅を超えています
画像や表などのコンテンツの閲覧に左右のスクロールを要するページが該当するエラーです。例えば、コンテンツの横幅をcssで絶対値で指定しているコンテンツは、相対値でサイズ指定しましょう。
詳細は以下の記事をご覧ください。
「コンテンツの幅が画面の幅を超えています」エラーの原因と対処法
https://www.sakurasaku-marketing.co.jp/labo/blogs/content-wider-than-screen
テキストが小さすぎて読めません
ユーザーが画面を拡大しないと読みにくいようなフォントサイズが小さいページがあることを知らせるエラーです。
12px以下だとエラーが出るようなので、推奨値の16pxを目安に設定しましょう。
クリックできる要素同士が近すぎます
ボタンやテキストリンク、フォームのフィールドなど、タップできる要素間が狭すぎるページが該当するエラーです。タップターゲットは上下左右で8px以上開けることが推奨されています。
その他：何らかの原因でクローラーがページを読み込めなかった場合
上記のエラーはcssがブロックされていたり読み込みでタイムタウトを起こすなど、何らかの要因でページを正しく読み込まれなかった場合にも出ることがあります。
後述するURL検査ツールやモバイルフレンドリーテストでエラーが再検出されなければ、サーチコンソールから「修正を検証」をリクエストしましょう。
モバイルユーザビリティエラーの修正
モバイルユーザビリティエラーを確認したら、原因項目を調査し、修正を行います。
まずは調査を行って検出しているエラーを確かめてみましょう。
ページがモバイルフレンドリーかどうかは以下の２通りで確認できます。
・URL検査ツール
・モバイルフレンドリーテスト
スクリーンショットなども参照してGoogleがページを適切にレンダリングできているかどうかを確認しましょう。
ただし、これらのツールでは、cssのタイムアウトが短いなどにより、レンダリング・レイアウトがうまくできない場合があるようです。
この場合は、ツールを使った適切なチェックができませんので目視チェックを優先するとよいでしょう。
ただし、ブロックされたリソースに、レイアウトに必要なcssが含まれていないかどうかは確認しておいてください。
（URL検査ツールで、 クロール済みのページを表示 → その他の情報 → ページのリソース で確認）
エラー原因を特定できて、修正を行ったら再度これらのツールにかけてチェックを行います。
問題ないようであれば、Googleに修正の検証を依頼しましょう。モバイルユーザビリティのエラー詳細ページで「修正と検証」をクリックします。
クリックすると初期検証が開始されます。
初期検証に通った後に正式に検証依頼が完了します。
ステータスが「検証開始」となります。
ただし、該当するエラー内容の対象URLを全て修正しないと、初期検証ではじかれてしまったり、通ったとしても検証に不合格となってしまうので注意が必要です。
検証は数日で完了することがほとんどです。
検証に合格すると、メールなどで通知されるほか、モバイルユーザビリティレポートの確認欄に「合格」と表示されます。
初期検証ではじかれてしまったり、検証に不合格となってしまった場合には再度エラーページを確認するようにしましょう。
まとめ
Webサイトがモバイルフレンドリーであることは、Googleのランキング要因ですが、ランキング効果としては微々たるものです。
しかし、ほとんどのWebサイトが対応済みであることを考えると、対応していることは当たり前という状況になっています。
特に、モバイルユーザビリティの悪いサイトはユーザーの離脱を招き、目的とするコンバージョンを失うことになりかねません。
Googleに評価されるため改善というよりは、ユーザーに快適に使ってもらう目的で対応していくことをおすすめします。
