モバイルユーザビリティとは？指標、エラー例とその修正方法も紹介

「モバイルユーザビリティ」という言葉をご存知ですか？スマートフォンやタブレットが普及している現在では、Webサイトを運営する際に知っておかなければならない重要な要素です。

今回は、モバイルユーザビリティの概要や指標、エラー例とその修正方法を紹介します。

モバイルユーザビリティとは、スマートフォンやタブレットでのサイトの分かりやすさや使いやすさのこと

モバイルユーザビリティとは、ユーザーがスマートフォンやタブレットなどでWebサイトを閲覧する際のサイトの分かりやすさや使いやすさ、操作性のよさのことです。

スマートフォンやタブレットなどが普及した現在、Google検索エンジンにおけるスマートフォンからの検索数がパソコンを上回りました。また、Googleはスマートフォン用サイトを重点的に評価し、検索順位を決定する「モバイルファーストインデックス」という方針を打ち出しました。こうした背景から、企業はモバイルユーザビリティの向上に取り組まなければなりません。

Googleが定めるモバイルユーザビリティの指標

Googleはモバイルユーザビリティの指標として、以下のものを定めました。

• 視認性：スマートフォンの画面に合わせて、適切なフォントサイズが実現されている。
• 操作性：ボタンやリンクなどタップする要素が適切な距離を取って配置されている。
• 互換性：スマートフォンやタブレットなどでコンテンツが表示できる。

モバイルユーザビリティのエラー例とその修正方法

「Google Search Console」に登録しておくと、Webサイトのモバイルユーザビリティにエラーがないかを確認できます。登録されたWebサイトに問題があるとGoogleが評価した場合、エラーが表示されます。

また、Webサイトがスマートフォンやタブレットに対応しているのかを確認する際には、Googleの「モバイルフレンドリーテスト」というツールを使うと確認できます。モバイルフレンドリーテストは、Google Search Consoleの登録がなくても使用できます。

（Google Search Console公式サイト：https://search.google.com/search-console/welcome）
（モバイルフレンドリーテスト公式サイト：https://search.google.com/test/mobile-friendly?hl=ja）

モバイルユーザビリティのエラー例とその修正方法を紹介します。

エラー例1：互換性のないプラグインを使用しています

「互換性のないプラグインを使用しています」は、モバイルブラウザでサポートされていないプラグインがページに含まれている場合に表示されるエラーです。

HTML5/CSS3で動画を埋め込んだり、javascriptで動的処理を書き換えたりしてページを再設計することで、スマートフォンなどのモバイル表示にも対応できます。

エラー例2：ビューポートが設定されていません

「ビューポートが設定されていません」は、画面のサイズに合わせてページサイズとスケーリングを調整する方法をブラウザに指示するviewportプロパティが定義されていない場合に表示されるエラーです。

meta viewportタグを使用してビューポートを指定することで表示が改善できます。

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

「ビューポートが『端末の幅』に収まるよう設定されていません」は、meta viewportタグを使用する際、特定の端末に合わせた固定幅を設定していると表示されるエラーです。

このエラーは、閲覧しているユーザーの画面サイズに合わせてページレイアウトを最適化するレスポンシブデザインをWebサイトに導入し、デバイスの幅とスケーリングに合わせてビューポートを設定することで改善できます。

エラー例4：コンテンツの幅が画面の幅を超えています

「コンテンツの幅が画面の幅を超えています」は、コンテンツの要素や画像がモバイル画面のサイズを超えている場合に表示されるエラーです。コンテンツを全て閲覧するために、横方向にスクロールが必要な場合にも表示されます。

Webサイトの文字の色や大きさ、背景、配置といった見た目を設定するスタイルシート言語であるCSSの設定に、相対的な幅と位置の値を使用することで改善できます。

エラー例5：テキストが小さすぎて読めません

「テキストが小さすぎて読めません」は、文字のフォントサイズが小さすぎて、画面をピンチ操作しなければ読めない場合に表示されるエラーです。フォントサイズを10px以下に設定している場合に多く発生します。フォントサイズの見直しを行うことで改善できます。

エラー例6：クリックできる要素同士が近すぎます

「クリックできる要素同士が近すぎます」は、Webサイト内のボタンやリンク、バナーなどタップできる要素同士が近すぎる場合に表示されるエラーです。

意図せず違う要素をタップしてしまわないように、モバイル端末に適したスペースを設定することで改善できます。

エラーの修正後は確認・検証を行う

ページの修正直後はレイアウトが大きく崩れてしまう場合があるため、実際に修正したページを開いて目視で修正した箇所を確認しましょう。

目視でページを確認したら、次はモバイルフレンドリーテストなどを使いページに問題がないかチェックを行います。このチェックでも問題ないことが確認できれば、Google Search Consoleの「修正を検証」というボタンをクリックし、ページの検証を依頼しましょう。

このとき問題が見つかると「検証プロセスを続行できません」とエラーが表示されるので、再度エラーの確認・修正を行いましょう。検証は数日で完了する場合が多く、検証に合格するとメールで通知され、モバイルユーザビリティレポートの確認欄に「合格」と表示されるようになります。