セブンデザイン 成果を追求した大阪のホームページ制作会社

  • 2023.10.03

モバイルユーザビリティとは?スマートフォンに対応したホームページへ

昨今のホームページでは、パソコンだけではなくスマートフォンを利用してアクセスするユーザーが増えています。

そのため、スマートフォンユーザーの扱いやすさを意識したホームページを制作することが重要になり、スマートフォンユーザーの扱いやすさのことをモバイルユーザビリティと言います。

当ページでは、モバイルユーザビリティとは何かや、確認法について紹介します。

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

モバイルユーザビリティとは、スマートフォンを使ってホームページにアクセスした人の扱いやすさのことを言います。

例えば、パソコンからのアクセスしか考えていないホームページをスマートフォンで閲覧すると、スマートフォンよりパソコンのほうが横幅が広くなるので、横幅をベースに縮小表示されます。

縮小されたホームページでは、極端に文字が小さくなってしまったり、リンクがクリックしづらいなど、多くの問題を抱えており、ユーザーにとって便利なホームページとは言うことができません。

そこでモバイルユーザビリティの考え方が必要になります。

モバイルユーザビリティでは、Googleが、可視性や操作性、互換性の3つの観点から、スマートフォンユーザーがホームページを利用しやすいかを評価して、パソコンだけではなくスマートフォンユーザーにも扱いやすいホームページを目指します。

成果が出るホームページが目指すべきは、誰でも扱いやすいホームページにすることになるので、モバイルユーザビリティへの最適化は、成果が出るホームページには必須と言えます。

では次に、モバイルユーザビリティの確認法を紹介します。

モバイルユーザビリティの確認法

モバイルユーザビリティは、Googleサーチコンソールの左ナビゲーションにあるモバイルユーザビリティをクリックすることで確認できます。

以下は、Googleサーチコンソールに表示されるエラーの項目です。

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

ホームページに互換性がないプラグインを利用しているページがリストアップされます。

よくある事例として、スマートフォンではフラッシュに対応されていないので、フラッシュを利用しているページのURLが表示されます。

万が一、ホームページにフラッシュを利用している場合は、静止画像に差し替えましょう。

また、どうしても動作が必要な場合は、HTML5やCSS3、JavaScriptに置き換えることで、改善することが可能です。

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

ホームページのソースコードにビューポートタグがないページが表示されます。

ビューポートとは、ページの表示領域を指す言葉になり、ビューポートがないと、ユーザーの画面サイズに合わせたレイアウトのページを表示させることができません。

ビューポートの設定は比較的簡単で、ソースコードのヘッドタグ内にmeta viewportタグを追加することで、改善することが可能です。

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

meta viewportタグに固定幅を記述してる場合に、実際に訪問者が利用しているスマートフォンの横幅よりも広い場合にエラーとして表示されます。

エラーの解消法は、レスポンシブWebデザイン作成を行い、適切なビューポートを設定することになり、Web制作会社に依頼をしていれば、発生しないエラーになります。

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

スマートフォンの横幅を超えるサイズで、コンテンツを作成している場合に表示されるエラーです。

例えば、画像をアップロードする際に、横幅のサイズ指定を、ユーザーのスマートフォン幅よりも広く設定してしまうと表示されます。

エラーの解消法は、CSSを使ってコンテンツ幅を適切な数値にするだけです。

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

スマートフォンでホームページを見たときに、テキストサイズが小さすぎると表示されるエラーです。

スマートフォンユーザーが、ピンチアウトしなければ、文章を読むことができないくらい小さいと、ユーザビリティが低いホームページと判断されてエラーになってしまいます。

スマートフォンでの文字サイズは、正確な基準は公表されていませんが、10px以下だとエラーとして表示されることが多く、16pxが一般的に利用される文字サイズになります。

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

バナーやテキストリンクの位置が近すぎる場合に表示されるエラーです。

スマートフォンで閲覧したときに、リンク同士が近すぎるとユーザーがタップミスによって、訪問したはずのページ以外にアクセスしてしまい、混乱してしまう可能性があり、ユーザビリティが低いと判断されてしまいます。

そのため、エラーとして表示されていない場合であっても、ユーザビリティの向上のためには、自社のホームページをスマートフォンで確認をして、リンクが近い場合は離すようにしなくてはなりません。

まとめ

昨今のホームページでは、どのような業種であったとしても、パソコンだけではなく、スマートフォンからのアクセスも増えているので、モバイルユーザビリティへの最適化は必須と言えます。

一般的にWeb制作会社であれば、モバイルユーザビリティへの最適化は当たり前のように行ってくれるので、お客さま自身でホームページを制作した場合に意識するようにしましょう。

モバイルユーザビリティの最適化に不安がある方の参考になれば幸いです。