SEO研究所サクラサクラボ

SEO・コンテンツマーケティングを成功に導くパートナー

モバイルユーザビリティとは?テストの実施方法とエラーの改善方法を解説

スマートフォンの普及により、一昔前までの中心だったパソコンよりも、スマートフォンをはじめとしたモバイル端末を使用するユーザーのほうが多くなっています。

Googleが2015年4月に行ったモバイルフレンドリーアップデート以降、スマートフォンに対応したモバイルフレンドリーなサイトは、モバイル検索において順位が引き上げられるようになりました。

すでに多くのサイトがモバイル対応していますので、対応できていないサイトは実質的に順位を落とすことにつながります。
運営しているサイトがきちんとモバイル対応しているかどうか、チェック・改善する方法をご紹介します。

モバイルユーザビリティとは

モバイルユーザビリティは、スマートフォンやタブレットなど、小さい画面でもWebサイトが利用・閲覧できるかどうかを指します。

サイトのモバイルユーザビリティが問題ないかどうかは、サーチコンソールのメニュー「拡張」>「モバイルユーザビリティ」でレポートを確認することができます。

モバイルユーザビリティレポート

Googleは、
・視認性(画面サイズに合わせて、ページサイズやフォントサイズが調整されているか)
・操作性(指でタップされることを前提に、ボタンやリンクなどが配置されているか)
・互換性(スマートフォンなどのデバイスでコンテンツが利用できるか)
に関するモバイルユーザビリティの指標を設けています。

モバイルユーザビリティ上でのエラー項目

モバイルユーザビリティの指標でGoogleがしきい値を超えたと判断したページは、「エラー」として検出されます。
サーチコンソール上で各エラー項目をクリックすると、該当するページのURLを一覧表示することができます。
主なエラー項目について、原因と対処法を解説します。

互換性のないプラグインを使用しています

多くのモバイルブラウザでサポートされていないプラグインを使用しているページが該当するエラーです。例えば、Flashコンテンツはブラウザやデバイスによってはサポート外もしくは無効化されており、閲覧できません。静止画像やJavaScriptなどでの代替を検討しましょう。

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

ビューポート(デバイスの画面サイズに合わせてページの表示領域を調整するプロパティ)が定義されていないページが該当するエラーです。viewportタグを指定しましょう。

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

横幅がピクセル指定で固定されているページが該当するエラーです。デバイスの幅に合わせてスケーリングできるよう、とスケーリングに合わせてビューポートを設定しましょう。

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

画像や表などのコンテンツの閲覧に左右のスクロールを要するページが該当するエラーです。例えば、コンテンツの横幅をcssで絶対値で指定しているコンテンツは、相対値でサイズ指定しましょう。

詳細は以下の記事をご覧ください。

「コンテンツの幅が画面の幅を超えています」エラーの原因と対処法
https://www.sakurasaku-labo.jp/blogs/content-wider-than-screen

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

ユーザーが画面を拡大しないと読みにくいようなフォントサイズが小さいページがあることを知らせるエラーです。
12px以下だとエラーが出るようなので、推奨値の16pxを目安に設定しましょう。

クリックできる要素同士が近すぎます

ボタンやテキストリンク、フォームのフィールドなど、タップできる要素間が狭すぎるページが該当するエラーです。タップターゲットは上下左右で8px以上開けることが推奨されています

その他:何らかの原因でクローラーがページを読み込めなかった場合

上記のエラーはcssがブロックされていたり読み込みでタイムタウトを起こすなど、何らかの要因でページを正しく読み込まれなかった場合にも出ることがあります。
後述するURL検査ツールやモバイルフレンドリーテストでエラーが再検出されなければ、サーチコンソールから「修正を検証」をリクエストしましょう。

モバイルユーザビリティエラーの修正

モバイルユーザビリティエラーを確認したら、原因項目を調査し、修正を行います。

まずは調査を行って検出しているエラーを確かめてみましょう。
ページがモバイルフレンドリーかどうかは以下の2通りで確認できます。
・URL検査ツール
・モバイルフレンドリーテスト

スクリーンショットなども参照してGoogleがページを適切にレンダリングできているかどうかを確認しましょう。

ただし、これらのツールでは、cssのタイムアウトが短いなどにより、レンダリング・レイアウトがうまくできない場合があるようです。
この場合は、ツールを使った適切なチェックができませんので目視チェックを優先するとよいでしょう。
ただし、ブロックされたリソースに、レイアウトに必要なcssが含まれていないかどうかは確認しておいてください。
(URL検査ツールで、 クロール済みのページを表示 → その他の情報 → ページのリソース で確認)

クロール済みのページを表示

エラー原因を特定できて、修正を行ったら再度これらのツールにかけてチェックを行います。
問題ないようであれば、Googleに修正の検証を依頼しましょう。モバイルユーザビリティのエラー詳細ページで「修正と検証」をクリックします。

修正を検証

クリックすると初期検証が開始されます。

初期検証中

初期検証に通った後に正式に検証依頼が完了します。
ステータスが「検証開始」となります。

検証開始

ただし、該当するエラー内容の対象URLを全て修正しないと、初期検証ではじかれてしまったり、通ったとしても検証に不合格となってしまうので注意が必要です。

検証は数日で完了することがほとんどです。
検証に合格すると、メールなどで通知されるほか、モバイルユーザビリティレポートの確認欄に「合格」と表示されます。

初期検証ではじかれてしまったり、検証に不合格となってしまった場合には再度エラーページを確認するようにしましょう。

まとめ

Webサイトがモバイルフレンドリーであることは、Googleのランキング要因ですが、ランキング効果としては微々たるものです。
しかし、ほとんどのWebサイトが対応済みであることを考えると、対応していることは当たり前という状況になっています。
特に、モバイルユーザビリティの悪いサイトはユーザーの離脱を招き、目的とするコンバージョンを失うことになりかねません。

Googleに評価されるため改善というよりは、ユーザーに快適に使ってもらう目的で対応していくことをおすすめします。

執筆者 / 監修者

監修者:根岸 雅之
監修者:根岸 雅之
サクラサクマーケティング株式会社 取締役社長 COO

1980年生まれ 東京都稲城市出身、都立三鷹高等学校、専修大学文学人文科学を卒業後、2003年に学校関連の広告・出版を扱う株式会社JS コーポレーションに入社。
3年勤務した後に、学生時代より、ベンチャー企業への興味関心が高かったこと、より企業の課題解決に向き合っていきたいという想いから、WEB マーケティング業界へ転身。
2006年にSEM コンサルタントとして、インターネット総合代理店、株式会社オプトに入社。リスティング、ディスプレイ広告の運用から、SEOの施策提案など主にキーワードマーケティング領域に特化した業務に従事。

同年10月に、当時4名のベンチャー企業であった当社の役員と共鳴し、転職。入社後は、営業をはじめ、SEOコンサルティング、新規事業開発、自社マーケ、人事、財務と幅広い領域を経験し、営業部長、執行役員、取締役と経て、2015 年に社名変更とともに取締役社長に就任。

SEOコンサルタントとして大規模サイトから新規サイトまで、売上向上に繋がるコンサルティングを武器に200サイト以上の実績。9年連続でラスベガスで開催されるPUBCONに参加するなど海外の最新のSEO情報の収集にも尽力。
現在は、サクラサクラボの編集長、サクラサクラボチャンネルでの情報発信などの自社マーケティングを通じてBtoBマーケティングにも精通し、ここで培ったノウハウをもとにコンサルティングを展開。

3歳から現在に至るまで、サッカーを続けており、組織マネジメントにおいて、この経験値を大いに活用している。

その他のブログ記事

Return Top