モバイルユーザビリティとは?エラーが発生した際の修正方法についても紹介
この記事では、モバイルユーザビリティの重要性や確認方法、修正方法などについて解説します。ぜひ参考にしてください。
- SEOに悩むサイト担当者必見!世界最高水準のテクニカルSEOツール「Lumar」
-
URLを入れるだけでサイト内部の問題を一括検出。
Googleと同じ視点でサイトクロール、
大規模サイトでも手軽に高度なSEO分析ができます!まずは無料デモクロールを試して、あなたのサイトの問題点を一括検出!
モバイルユーザビリティとは?
モバイルユーザビリティとは、モバイルデバイス(スマートフォンやタブレットなど)でサイト閲覧をする場合の「利用しやすさ」「分かりやすさ」のことです。そもそもユーザビリティは、英語の「use」と「ability」が組み合わさった造語であり、「使いやすさ」を意味します。
Googleでは、モバイルユーザビリティについて以下の指標を設けています。
【モバイルユーザビリティに関するGoogleの指標】
- 視認性:フォントやページ自体のサイズがモバイルデバイスに合っていて見やすいか
- 操作性:指でタップすることを前提として使いやすいボタンやリンクなどの設置になっているか
- 互換性:そもそもモバイルデバイスでコンテンツが利用できるか
サーチコンソールでモバイルユーザビリティを確認する方法
Googleが提供しているツールである「Google Search Console」では、モバイルユーザビリティを以下の方法で確認できます。
【Google Search Consoleでモバイルユーザビリティを確認する方法】
- 画面左上で対象のプロパティを選択する
- 画面左のメニューから「モバイルユーザビリティ」を選択する
- モバイルユーザビリティに関するエラーの有無や件数を確認する
- 状況に応じて画面下の「詳細」にてエラーの詳細を確認する
モバイルユーザビリティの画面を開くまで行えば、あとは感覚的に操作できるでしょう。
モバイルユーザビリティのエラー例と修正方法
モバイルユーザビリティに関してよくあるエラー例は、以下のとおりです。
【よくあるエラー例】
- 互換性のないプラグインの使用
- ビューボードの未設定
- ビューボード設定の変更
- 視認性に関するもの
- 操作性にかんするもの
ここでは、それぞれのエラー例の概要と基本的な修正方法について解説します。
エラー例1:互換性のないプラグインを使用しています
モバイルブラウザにおいてサポートされていないプラグインを使用する場合に、このエラーが発生する可能性があります。中でも、最もエラーが発生しやすいのが「Flash(フラッシュ)」というプラグインが使用されているケースです。
前提としてFlashは、モバイルブラウザでの使用をサポートされていないことが多いです。そのため、静止画像に置き換えたり、動的処理をJavaScriptに置き換えたりすることで解消します。また、動画をHTML/CSS3で埋め込むことでも、解消可能です。
エラー例2:ビューポートが設定されていません
headタグ内に、「meta viewport」タグが設置されていない場合のエラーです。viewportとはWebページの表示領域を示す言葉のことであり、指定しないと画面サイズに合わせたレイアウトが最適化できません。
解消するためには、「meta viewport」タグを適切に記述する必要があります。
エラー例3:ビューポートが「端末の幅」に収まるよう設定されていません
meta viewportタグを使用する際、特定の端末に合わせた固定幅で設定している場合にこのエラーが表示されます。基準となるモバイルブラウザでの表示幅を超えたと判断されると、モバイルユーザビリティの診断上ではエラーと計測されるためです。
レスポンシブデザイン(使用するブラウザに合わせて自動変更されるデザイン)として最適なviewportを使用することで、解消可能です。
エラー例4:コンテンツの幅が画面の幅を超えています
このエラーは、ページ上に表示されているコンテンツ(文字や画像など)が、モバイルデバイスの画面幅を超えるサイズで表示されている場合に発生します。例えば、画像の幅を具体的な数値で固定している場合に発生しやすいです。
修正するためには、CSSにてコンテンツを適切なページ幅に修正する必要があります。なお、幅や位置を設定する際には、絶対値でなく相対値を使用すると解消されることが多いでしょう。
エラー例5:テキストが小さすぎて読めません
モバイルデバイスで表示されるテキストが小さすぎると判断された際に発生するエラーです。ユーザーは読む度にピンチ操作でページサイズを変更しなくてはならないため、ユーザビリティが低いと判断されます。
明確な基準は公表されていませんが、主に10px以下に指定するとエラー表示されることが多いとされているため、まずはフォントサイズの見直しを行ってみましょう。
エラー例6:クリックできる要素同士が近すぎます
ボタンリンクやバナーなど、タップできる要素が近接しすぎている際に表示されるエラーです。タップできる要素が近くに複数あると、意図せずタップしてしまったり、誤った方をタップしてしまったりするため、ユーザビリティが低いと判断されます。
クリックできる要素同士の間隔を適切に空けることで解消できないかを試してみてください。
モバイルユーザビリティはなぜ改善する必要があるのか
PCを中心に利用する方の中には、モバイルユーザビリティを改善する必要性があまり感じられないと考える方もいるのでないでしょうか。しかし、昨今では以下の理由により、モバイルユーザビリティは重要な指標の1つとされているため、改善が必要です。
【モバイルユーザビリティ改善の必要性】
- 近年ではパソコンよりもモバイルデバイスを用いてWebサイト閲覧をするユーザーが多い
- Googleがモバイルユーザビリティを重要視する発表をしている
まず大切なポイントが、近年ではパソコンよりもスマホをはじめとするモバイルデバイスでWebサービスを利用する方が増えていることです。モバイルデバイスで見た方が「見づらい・利用しづらい」と感じれば、サイトの離脱につながり、CVが低下する恐れがあります。
また、「BtoBの場合はパソコン利用が前提では?」と思えるかもしれません。しかし、ビジネスにおいてもモバイルデバイスの利用が増えていることから、最適化は必須です。
2つ目に挙げられるのが、Googleからの評価です。Googleは2018年3月から「モバイルファーストインデックス」への移行を発表しています。これはモバイル版に適したサイトを評価し、検索順位を決定するクロールの際に有利にするとした内容です。
このようなことから、モバイルユーザビリティを改善せず放置しているサイトは「ユーザーファーストではない」と判断される可能性があるため、改善する必要があるのです。
モバイルユーザビリティ修正後の検証方法
モバイルユーザビリティを修正したら検証を行い、効果が反映されているかを確認することが重要です。まず目視でページを確認し、「Google Search Console」のエラー詳細画面にある「修正を検証」ボタンを押して、改めて検証を依頼しましょう。
初期検証においてエラーが発見されなければ、改めて検証が行われます。しかし、初期検証においてエラーが発見されれば「検証プロセスを続行できません」とのエラーが出るため、改めて原因の確認と修正を行うことが必要です。自サイトの確認を実施し、エラーの表示が0になれば、モバイルフレンドリーなサイトになったと考えられます。
まとめ
モバイルユーザビリティとは、モバイルデバイスにおける視認性や操作性の高さを示す言葉のことであり、近年では検索エンジン上で重要視されている指標です。
ユーザビリティが解消されないままだとユーザーの離脱リスクが高まり、Googleからの評価も下がってしまいます。そのため、この記事を参考に「Google Search Console」を活用して修正を行い、モバイルフレンドリーなサイトを目指してみてはいかがでしょうか。
- SEO対策でビジネスを加速させる「SEO Dash! byGMO」
-
SEO対策でこんな思い込みしていませんか?
- 大きいキーワードボリュームが取れないと売上が上がらない・・
- コンサルに頼んでもなかなか改善しない
- SEOはコンテンツさえ良ければ上がる
大事なのは自社にあったビジネス設計です。
御社の課題解決に直結するSEO施策をご提案します