モバイルユーザビリティに新たな問題？…突然のメールにも慌てない為に ― コラムーベイクロスマーケティング株式会社

Google Search Console からメールが来ました。
内容は『「モバイルユーザビリティ」の問題が新たに検出されました』という内容でした。

検出内容は: ・クリック可能な要素同士が近すぎます; ・コンテンツの幅が
　画面の幅を超えています; ・テキストが小さすぎて読めません

とありました。

しっかりモバイル対応をした上で納品し、かれこれ２年ほど経ったサイトの方に来たメールでした。
これはどうした事か？と対応をした話を今回は共有いたします。

モバイルユーザビリティって何？

モバイル機器（スマートフォンやタブレット）が普及したことを受けて、Googleが2015年に発表したモバイル環境の評価判定基準です。
そして、パソコン環境だけでなくモバイル利用者にとっても、使いやすくて見やすいサイトの方が、
価値があるサイトだと判断し、優先的に検索結果に表示していきます！という方針が、【モバイルフレンドリー】です。

Googleは検索エンジンです。
利用者が検索したものに対して、最適なものを表示できていることがGoogleの価値になります。
検索結果に出てきたサイトが、利用者にとって役不足であると、自然とGoogleの価値が下がるので、Googleでは役不足サイトの表示優先度が低くなります。

サイト所有者にとってみたら、多くの人にサイトを見て欲しい！と思いますが、サイト環境が整っていないと検索結果の順位が下がり、利用者の目に留まる機会が減ってしまいます。

だからこそ「Googleの推奨するサイト環境作り」はとても大切な事です。
このGoogleが推奨するサイト環境基準が、モバイルユーザビリティになります。

つまり今回届いたメールは、「Google推奨サイトの基準に達していない個所がありますよ」という
通知になります。

モバイルでの推奨環境とは？

・読みやすい文字サイズであること

　文字が小さいと読みづらいので、読みやすいサイズに調整しましょう。

・モバイル端末用のビューポートを設置すること

　モバイル端末用のビューポート記述がないと、スマートフォンからアクセスした際に、PCと同じ表示が画面に合わせて縮小サイズで表示されます。読みやすい文字サイズを気を付ける以前に、モバイルサイト表示が出ない設定になっています。モバイルで表示をするためにビューポートを設置し、モバイルデザインが出るようにしましょう。

・タップ箇所は、タップしやすいように配置調整すること

　タップ画像が小さいと上手く押せない、触れないことがあります。また、タップ可能画像が複数設置されている時、画像同士が近いと誤タップをしてしまいます。タップ箇所が複数ある場合は、押しやすいよう画像同士を少し離して設置しましょう。

・モバイル環境（見ている環境/デバイスに関わらず）表示できる表現を使うこと

　flashはスマートフォンでは再生できず、エラー表示になります。またPCでhoverを使っている場合、スマートフォンでは表示できません。つまり、モバイルでは表示されない余分なCSSが書かれている状態です。全員が等しく見れないものを掲載しているサイトは、Googleからの評価が下がります。モバイルで表示できる形式を選択しましょう。

・画像やページの作りが、モバイルサイズになっていること

　スマートフォンのサイトは画面サイズに合わせて、PCサイトよりも狭い造りになります。縦長サイトになり、縦スクロールをすることでサイトを読み進めていきます。しかし、コンテンツの幅が大きく、横スクロールしないとページを確認できない場合、利用者は縦に横にと画面移動する手間がかかり、見づらいサイトになってしまいます。横スクロールやピンチをしなくても、全体表示されるように調整しましょう。

・インターステイシャル広告は使用しないこと

　アクセスした際に画面全体、またはコンテンツの上に広く大きく重なるように表示されるポップアップ広告がインターステイシャル広告です。元々のページが広告で隠れている、強制的に広告が見せられるようなサイトは、利用者にとって迷惑なので外しましょう。

・ページの表示スピードを意識しましょう

　以前のコラム（過去のコラムはこちら）でも書きましたが、表示が遅いとイライラしてしまい、諦めて別サイトへ移動した経験がある人も多いと思います。重い画像や、読み込みに時間がかかるような記述を避け、表示スピードも意識してページを作りをしましょう。

何が問題で、推奨環境から外れてしまったのか？

クライアント様で更新されているブログの中で、画像の投稿がありました。
この画像の横幅が、スマートフォンでは大きすぎて、横スクロールが必要になっていました。
また、この画像にリンクが貼られていましたが、リンク画像同志が近いこともあり、こちらもエラーの原因となっていました。
テキストサイズは特に問題がないはずですので、
まずはこのブログ内の画像に対して横幅指定記述と、画像同志のマージンなどを調整してみました。

調整したところ、こちらの対応だけで無事エラーが解除されました。

クライアント様へは、画像サイズが大きすぎるとスマートフォンでは見づらい事を共有し、修正を実施。今後投稿の際の調整法などをお話しました。

大切なのは、モバイルフレンドリーサイトであること

実は、モバイルユーザビリティの判定には「時差」があります。【過去のサイト環境】で判定をし、エラー通知を送っているのです。判定メールが届く前に修正対応をしていると…エラーの通知後、何の対応もしていないのに修正完了の連絡がきたりします。
エラー修正の確認にも【同じく時差】があるのです。モバイルユーザビリティ判定は、タイムラグがある事を覚えておきましょう。モバイルユーザビリティは、モバイルフレンドリーであるための基準になりますので、モバイルフレンドリーか否かのテストをして、問題無くモバイルフレンドリーになっていれば、判定の時差やエラーが出ていても、問題はありません。

エラーが現在進行であることを確認した場合、修正をした後の審査にもタイムラグが発生します。きちんと治せていたのか？モバイルユーザビリティの画面からは、確認ができない状態です。
この場合は、リアルタイムで審査をしてくれるモバイルフレンドリーテストをしてみましょう。

「モバイルフレンドリーサイト」と判定されたら、きちんと修正ができています。

まとめ

モバイルユーザーの多くが、ガラパゴスケータイからスマートフォンへいこう移行し、PCよりもスマートフォンで日常的にインターネットを見る時代です。サイト作りは、常に「モバイルファースト」とし、スマートフォン表示を意識してサイトを作っていくことが大切です。

急なモバイルユーザビリティのエラーメールに驚いてしまうかもしれませんが、落ち着いてまずはエラーを出しているURLを確認しましょう。エラー内容と、実際の表示で差異があれば「すでにエラーが解消している（過去に修正済み）」場合もありますので、先に１度モバイルフレンドリーテストを行ってみるのも良いでしょう。
なぜなら、モバイルユーザビリティのエラー通知にはタイムラグがあるからです。
モバイルユーザビリティというのは、モバイルフレンドリーサイトであるための基準ともいえるので、モバイルフレンドリー対応サイトであれば、問題ありません！

対応後の確認についても「ラグ」が発生します。
これはとても不便ですね！そんな時は、慌てずモバイルフレンドリーかどうかのテストを行ってみてください。

モバイルフレンドリーサイトでないと、Googleでの検索結果表示が明確に下がると発表されていますので、モバイルフレンドリーサイト化は必須事項です。
モバイル対応が進んでいない方や、レスポンシブサイトへのサイトリニューアルにご興味がありましたら、是非ご相談ください。
新規Webサイト制作・リニューアルのサービス内容はこちらから

Written by Hirano