SWELLブログでモバイルユーザビリティエラーが出た場合の対処法!

SWELLブログでモバイルユーザビリティエラーが出た場合の対処法!

ブログを運営するにあたって、多くの人々に利用されている解析ツールが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つのモバイルユーザビリティエラーメッセージが急に通知されるようになったら、以下の手順を試してみてください。

  1. 記事スライダーを削除する
  2. Googleにサイト状態の検証を依頼する

実際に当ブログで問題となったのも、この記事スライダーでした。SWELLユーザーでモバイルユーザビリティエラーの問題点に心当たりがない場合は、まずこの方法を試してみることをおすすめします。

記事スライダーの設定方法と、Googleへの検証リクエストを済ませるまでの流れをご紹介します。

1.記事スライダーを削除する

記事スライダーとは、スライド式でコンテンツのアイキャッチ画像を表示させられるエリアです。SWELLの管理ページから、簡単にメインページに設定できます。

記事スライダー表示イメージ

画像引用:SWELLー記事スライダーの設定方法

記事スライダーはメインビジュアルの下に表示され、メディアで提供しているコンテンツをユーザーにアピールできるのがメリットです。しかし、今回のようにモバイルユーザビリティエラーに該当してしまう場合は、記事スライダーの非表示を設定しましょう

記事スライダーの設定は管理メニューから「トップページ」を選択し「記事スライダー」の項目に進みます。

記事スライダーの設定方法

画像引用:SWELLー記事スライダーの設定方法

記事スライダーを選択すると、「記事スライダーを表示するかどうか 」の設定が可能です。ここで「表示しない」を選択すれば、ブログで記事スライダーを非表示にできます。

2.Googleにサイト状態の検証を依頼する

無事に記事スライダーの非表示を設定できたら、修正した状態をGoogleに確認してもらう段階です。検証のリクエストは、Googleサーチコンソールから行います

管理メニューの「エクスペリエンス」から「モバイルユーザビリティ」の項目をクリックします。該当する項目のエラーを選択すると、さらにエラー内容に関する詳細ページが開くため「修正を検証」をクリックしてリクエストは完了です。

修正内容が認められエラーが解消できたと判断されれば、数日のうちにGoogleから登録のメールアドレスに通知が届くでしょう。Googleサーチコンソールからも、ステータスが「合格」になっているのを確認できるはずです。

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

SWELLブログでのユーザビリティエラーは早急に対応しよう!

デザインや使いやすさを重視するのも大事ですが、モバイルユーザビリティエラーを放置することにはリスクがあります。エラー通知を受け取ったら、内容を確認しすぐに対処するようにしましょう。

SWELLは、在宅でブログを運営したいと考えている方におすすめのワードプレステーマです。使い勝手がよく洗練されたシンプルなデザインが好みな方は、ぜひ利用を検討してみましょう。

マーケティング娘では、マーケターやWebライター志望の方、在宅ワークを希望している方に有益な情報を提供しています。自分に合った在宅ワークを探したい方におすすめの記事も参考にしてみてください。

あわせて読みたい
主婦が資格なしで挑戦できる在宅ワーク16選!仕事の探し方や注意点 資格なしでもできる在宅ワークは、主婦として家事や育児を行いながら、自宅でのスキマ時間を有効に使えるのが大きなメリットです。資格なしからでもスキルアップが図れるオススメの仕事5つをご紹介します。初めての在宅ワークを後押しする情報が満載です。
あわせて読みたい
副業ライターに未経験からデビューする方法!仕事内容やメリット解説 場所や時間を選ばずに活躍できるWebライターは、魅力のある仕事です。未経験から副業ライターに挑戦しようと考えている方のために、仕事内容やメリット、案件の始め方などを分かりやすく解説します。副業には自分に合った働き方を選ぶのがおすすめです。
SWELLブログでモバイルユーザビリティエラーが出た場合の対処法!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!

この記事を書いた人

マーケティングに携わるアラサーWebライター。
当サイトでは自分らしい働き方に関する情報を発信します。

【得意ジャンル】
Webマーケティング/Web集客/IT/ビジネス全般/ライフスタイル

記事作成依頼はお問い合わせから。

目次
閉じる