モバイルユーザビリティとは? – 定義とSearch Consoleでの設定方法について

Blog運営

様々な大きな、種類のスマートフォンの普及から、ブログも「どんなサイズのデバイスでも閲覧しやすいようにすること」が求められてきています。
そこで本記事では、モバイルユーザビリティについてと、Google Search Consoleでのエラー修正の方法について解説します。

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

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

スマートフォンからのサイトの利用しやすさ

…を意味します。

このスマートフォンとは決してiPhoneに限らずAndroidスマホだったり様々と言えます。

モバイルユーザビリティによる影響について

では、自分のブログのモバイルユーザビリティに問題があると、どのような状態になるのでしょうか?
主なデメリットに…

  • Googleからの評価が下がる
  • アクセスユーザーの離脱率があがる

…があげられます。
以下にそれぞれ詳しく解説します。

Googleからの評価が下がる

ここ数年、スマートフォンの普及もありGoogleもモバイルからの閲覧しやすさを重要視してきています。
つまり、モバイルで閲覧しにくいブログはGoogleからのペナルティの対象という解釈ができます。

エラーを修正し、その報告をしなければ検索上位表示されているページも順位が落ちてしまいます。

アクセスユーザーの離脱率があがる

モバイルで閲覧しにくいブログは、Googleはもちろん、閲覧しようとしているユーザーからの評価もよくありません。
少しでも見えにくいブログはすぐ閲覧されてもすぐに閉じられ、離脱されてしまいます。
ユーザーの離脱率を少しでも低く維持するためにも、モバイルユーザビリティの改善は必須ということです。

Googleが重要視するモバイルユーザビリティの条件

Googleが提唱するモバイルユーザビリティを高めるための条件としては次の項目があげられます。

  • ユーザーがスクロールしたり画面をピンチすることなくページ全体を閲覧することができる
  • ボタンなどの要素同士が十分離れていてタップしやすい状態
  • 画面サイズに合わせてフォントのサイズが調整される
  • 画面サイズに合わせてページサイズが調整される

基本的にはこのような条件をみたしていれば、モバイルユーザビリティが高いブログとして認識されます。

Google Search Consoleでのモバイルユーザビリティについて

Google Search Consoleのモバイルユーザビリティ画面では次のような表示になります。

エラー

エラーのページのクエスチョンマークにマウスカーソルを合わせると以下のようなメッセージが表示されます。

このページには、モバイルのユーザビリティに関する重大な問題があります。

つまり、ブログ内でボバイルユーザビリティに問題があるページがどこか?がわかります。

有効


有効のページのクエスチョンマークにマウスカーソルを合わせると以下のようなメッセージが表示されます。

このページでは、モバイルのユーザビリティに関する問題はほとんどまたはまったくありません。

つまり、モバイルで閲覧しても問題がないページがどこかわかるということになります。

Google Search Consoleでのモバイルユーザビリティのエラーの種類

では、Google Search Consoleにおいて、モバイルユーザビリティのエラーはどのような種類があるのでしょうか?
主に…

  • テキストが小さすぎて読めません
  • クリック可能な要素同士が近すぎます
  • コンテンツの幅が画面の幅を超えています
  • ビューポートが設定されていません
  • ビューポートが端末の幅に収まるよう設定されていません
  • 互換性のないプラグインを使用しています

…などのエラーがあげられます。
以下に詳しく解説します。

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

そのページのフォントサイズが小さすぎるため、ユーザーがスマートフォンでは読みにくい可能性があります。
10px以下のテキストがあるページでエラーがでやすい…という意見もあるようです。

クリック可能な要素同士が近すぎます

ページ内のリンクややボタン同市が近すぎると表示されるエラーになります。
その結果、モバイルで閲覧しているユーザーが誤操作しやすくなる可能性が高いことになります。
リンク同士の間隔は7mm以上空けることが推奨されています(大人の指の腹のサイズが平均10mmという理由から)。

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

ページ内の画像や表の幅がモバイルサイズを超えている場合に表示されるエラーになります。
CSSで絶対値を使用している場合に表示されることがほとんどのようです。

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

HTMLのタグ内に“viewportプロパティ”が設定されていない、もしくは正確でない場合に表示されるエラーです。
パソコンやモバイルなどのデバイスによってその幅はことなります。
デバイスの幅に応じたタグ内のビューポート設定が必要になります。

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

特定のデバイスに合わせて、ページの横幅が固定されている、異なる画面のサイズに合わせて調整されていたりするときに表示されるエラーです。
そもそもそのブログがレスポンシブ゙デザインでない場合に多いエラーのようです。

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

今はもう少なくなりましたが、Flashといったモバイルブラウザではサポートされることが少ないプラグインがページに含まれていると表示されるエラーです。
HTML5といった最新の言語を使用してブログを作り直す必要があります。

モバイルユーザビリティのエラー解決方法

上記のようなモバイルユーザビリティのエラーが表示された場合、解決方法としては…

  • それぞれのエラーに対して修正をする
  • Googleインデックスを再送信する

…の手順が必要です。

まとめ

ほとんどのブログやサイトはパソコンだけでなくスマートフォンといったモバイルからも閲覧されるようになりました。
ユーザーがどんなデバイスを使用しても柔軟に対応できるブログの作り方が求められていると言えます。

パソコンは一家に一台でしょうけど、
スマートフォンは一人一台ですから、必然的にスマートフォンの方が母数は多いでしょうからね。
いかにユーザーがどのデバイスでも使いやすいブログにするか?という視点は重要だろうね!
モバイル・ユーザビリティ 使いやすいUIデザインの秘訣

モバイル・ユーザビリティ 使いやすいUIデザインの秘訣

Jakob Nielsen, Raluca Budiu, ヤコブ・ニールセン, ラルーカ・ブディウ
3,080円(10/01 14:58時点)
発売日: 2013/08/27
Amazonの情報を掲載しています
タイトルとURLをコピーしました