ブログを運営するにあたって、多くの人々に利用されている解析ツールがGoogleサーチコンソールです。サイトの検索トラフィックや検索ワードの分析ができるほか、サイト上の問題点を通知してくれます。
問題なくブログを運営しているなかで、突然モバイルユーザビリティエラーが通知されて驚いた方もいらっしゃるでしょう。モバイルユーザビリティエラーを放置してしまうと、ブログの評価が落ちて検索順位に影響が出てしまう可能性があります。
今回は当ブログでも採用しているワードプレステーマ「SWELL」ユーザーのための、モバイルユーザビリティエラー対処法をご紹介します。
そもそもモバイルユーザビリティエラーとは？
モバイルユーザビリティが確保されていないとGoogleに判断された場合に通知されるのが、モバイルユーザビリティエラーです。モバイルユーザビリティとは、画面の小さいスマホからWebサイトを閲覧した場合の見やすさや使用しやすさが確保されているかの指標です。
パソコンよりも狭い画面にWebサイトのデザインを崩すことなく、見やすく表示させる必要があります。SWELLを含めた多くのワードプレステーマでは、モバイルユーザビリティを考えたサイト設計がされているため、特に個人で特別な設定をする必要はないでしょう。
しかし、サイト立ち上げの際にはエラーが出ていなかったのに、数か月後にいきなりモバイルユーザビリティエラーが発生するケースがあります。
モバイルユーザビリティエラー3つの項目
モバイルユーザビリティエラーで主にチェックされるのは、次の3つのエラー項目です。
- テキストが小さすぎて読めません
- クリック可能な要素同士が近すぎます
- コンテンツの幅が画面の幅を超えています
各エラーがどのような点で問題となっているのか、詳しく解説します。
テキストが小さすぎて読めません
スマホやタブレットからWebサイトを確認した際に、文字が小さく可読性が落ちると判断された場合に通知されるエラーです。モバイルデバイスからでも問題なく読める大きさのフォントサイズは、16ポイント程度とされています。
一般的なワードプレステーマでは16ポイントを採用している場合が多いため、特別にフォントサイズを小さく設定しているケースを除いて記事の可読性は問題ないでしょう。
つまり、モバイルユーザビリティエラーの対象は、記事以外の部分である可能性が高いことになります。例えばトップページなど、さまざまな要素が混在しているページなどです。
クリック可能な要素同士が近すぎます
リンクが設定されている画像やテキスト、広告などの各要素同士の配置が近く、ユーザーが誤ってクリックをしてしまう状況が予想される場合のエラーです。
実際にブログに設置しているボタンの大きさや余白に問題があると感じる場合は、「YellowPencil Visual Customizer」のプラグインを導入してみましょう。プログラミングコードの記述をすることなく、各要素の大きさや余白を調整できる便利なプラグインです。
コンテンツの幅が画面の幅を超えています
Webサイト上に、横幅が画面に収まりきらないコンテンツが確認される場合に表示されるエラーです。サイト上でユーザーが水平にスライドをしてコンテンツを確認するデザインは、実際には多くのWebサイトに採用されています。
しかし、Googleでは一目でユーザーがコンテンツの全体像を把握できないという点から、モバイルユーザビリティエラーの項目として挙げられています。ユーザーを優先したデザインを検討する必要があるでしょう。
モバイルユーザビリティエラーの問題点
モバイルユーザビリティエラーの通知を受けると、どのページに問題があるかを知ることができますが、具体的にどの部分を修正すべきなのかまではわかりません。エラーメッセージを元に、疑わしい部分を1つずつ修正していくしかないのです。
Webページの修正をしてから、修正内容を伝えGoogleが再検証を済ませて無事にエラーが解消するまで、数日かかります。問題点の目星が付いていないと、エラー解消に時間がかかってしまうでしょう。
参照：Googleサーチコンソールヘルプーモバイル ユーザビリティ レポート
SWELLで3つのモバイルユーザビリティエラーを解消する方法！
SWELLブログを運営していて、ご紹介した3つのモバイルユーザビリティエラーメッセージが急に通知されるようになったら、以下の手順を試してみてください。
- 記事スライダーを削除する
- Googleにサイト状態の検証を依頼する
実際に当ブログで問題となったのも、この記事スライダーでした。SWELLユーザーでモバイルユーザビリティエラーの問題点に心当たりがない場合は、まずこの方法を試してみることをおすすめします。
記事スライダーの設定方法と、Googleへの検証リクエストを済ませるまでの流れをご紹介します。
1.記事スライダーを削除する
記事スライダーとは、スライド式でコンテンツのアイキャッチ画像を表示させられるエリアです。SWELLの管理ページから、簡単にメインページに設定できます。
画像引用：SWELLー記事スライダーの設定方法
記事スライダーはメインビジュアルの下に表示され、メディアで提供しているコンテンツをユーザーにアピールできるのがメリットです。しかし、今回のようにモバイルユーザビリティエラーに該当してしまう場合は、記事スライダーの非表示を設定しましょう。
記事スライダーの設定は管理メニューから「トップページ」を選択し「記事スライダー」の項目に進みます。
画像引用：SWELLー記事スライダーの設定方法
記事スライダーを選択すると、「記事スライダーを表示するかどうか 」の設定が可能です。ここで「表示しない」を選択すれば、ブログで記事スライダーを非表示にできます。
2.Googleにサイト状態の検証を依頼する
無事に記事スライダーの非表示を設定できたら、修正した状態をGoogleに確認してもらう段階です。検証のリクエストは、Googleサーチコンソールから行います。
管理メニューの「エクスペリエンス」から「モバイルユーザビリティ」の項目をクリックします。該当する項目のエラーを選択すると、さらにエラー内容に関する詳細ページが開くため「修正を検証」をクリックしてリクエストは完了です。
修正内容が認められエラーが解消できたと判断されれば、数日のうちにGoogleから登録のメールアドレスに通知が届くでしょう。Googleサーチコンソールからも、ステータスが「合格」になっているのを確認できるはずです。
SWELLブログでのユーザビリティエラーは早急に対応しよう！
デザインや使いやすさを重視するのも大事ですが、モバイルユーザビリティエラーを放置することにはリスクがあります。エラー通知を受け取ったら、内容を確認しすぐに対処するようにしましょう。
SWELLは、在宅でブログを運営したいと考えている方におすすめのワードプレステーマです。使い勝手がよく洗練されたシンプルなデザインが好みな方は、ぜひ利用を検討してみましょう。
マーケティング娘では、マーケターやWebライター志望の方、在宅ワークを希望している方に有益な情報を提供しています。自分に合った在宅ワークを探したい方におすすめの記事も参考にしてみてください。
