モバイルユーザビリティの問題は、ウェブサイトのトラフィックに大きな影響を与える恐れがあります。Google Search Consoleで警告される一般的なエラーとして、「クリック可能な要素同士が近すぎます（Clickable elements too close together）」エラーが挙げられます。これは、モバイルユーザーにとって、サイトの操作が複雑であることを意味しています。
モバイルユーザビリティの問題は、ウェブサイトのトラフィックに大きな影響を与える恐れがあります。Google Search Consoleで警告される一般的なエラーとして、「クリック可能な要素同士が近すぎます（Clickable elements too close together）」エラーが挙げられます。これは、モバイルユーザーにとって、サイトの操作が複雑であることを意味しています。
この記事では、「クリック可能な要素同士が近すぎます」エラーとは何か、そしてその原因についてをご説明した後、3つの解決方法をご紹介します。併せて、「コンテンツの幅が画面の幅を超えています（Content wide than screen）」エラーの内容とその解決方法についても触れていきます。
早速みていきましょう！
動画での解説をご覧になりたい方はこちら
「クリック可能な要素同士が近すぎます」エラーとは
一言で言うと、モバイルユーザビリティのエラーは、WordPressサイトへのアクセスを妨げ、ユーザーの操作の難易度を上げることにつながります。これについては、Google Search Consoleのモバイルユーザビリティレポートを使用して、自分のサイトを検証することが可能です。
モバイルユーザビリティの問題には、大きく分類して6種類あります。
- 互換性のないプラグインの使用
- ビューポートが設定されていない
- ビューポートが「device-width」に設定されていない
- 文字が小さくて読めない
- コンテンツが画面幅より広い
- クリック可能な要素が近すぎる
このレポートの一部として、Google Search Consoleは、ボタンやリンクなどのサイトでクリック可能な要素をすべてチェックします。これは、ユーザーが、キーボードやマウスではなく、タッチ操作だけでウェブサイトを快適に操作できるかどうかを検証するのが目的です。
Google Search Consoleによって、タップ可能な要素がユーザーの負担になると判断された場合は、サマリーレポートに「クリック可能な要素同士が近すぎます」エラーが表示されます。
エラーをクリックすると、詳細とステータスのページが表示され、このエラーによって影響を受けるページなど、問題の詳細を確認することができます。Google Search Consoleの「クリック可能な要素同士が近すぎます」エラー
通常、このエラーは、WordPressサイト上のタップ可能な要素が小さすぎて、ユーザーが快適に操作できないことを示しています。
もしくは、サイズが十分であっても、隣接する要素に近寄り過ぎている可能性が考えられます。ボタンやリンクなどのクリック可能な要素が近すぎると、間違ったものをタップしてしまう可能性が高くなり、ユーザーエクスペリエンス（UX）が損なわれる恐れがあります。
クリック可能な要素が近すぎることは、モバイルユーザビリティエラーに分類されますが、この問題を解決することで、サイトのアクセシビリティを改善することもできます。例えば、指先が不自由なユーザーのためには、インタラクティブな要素の間に十分なスペースを設けると良いでしょう。一方で、視覚障害のあるユーザーは、大きくはっきりと表示されたボタンやリンクの方が操作しやすいと感じるはずです。
「クリック可能な要素同士が近すぎます」エラーの原因
「クリック可能な要素同士が近すぎます」エラーには、さまざまな原因があり、レンダリング時にGoogleが必要なリソースを要求できなかっただけの可能性もあります。その場合は、モバイルフレンドリーテストを使用して、テストに合格するかを確認してみてください。合格した場合は、このエラーは無視して大丈夫でしょう。
サイトのデザインに起因する場合もあり、例えば1つのページに多くのインタラクティブな要素を詰め込もうとすると、このエラーが発生することがあります。
もう一つの原因は、デザインのモバイル対応に問題がある場合です。最適なUXを提供するため、ウェブサイトには、ユーザーのデバイスに適応する柔軟性が求められます。レスポンシブ対応でなければ、ユーザビリティに問題が生じる可能性があります。
具体的には、レスポンシブ対応のサイトでない場合、特定の画面上でサイトの一部が伸縮したり、歪んで表示されてしまうことがあります。また、画面の小さな端末では、タップできる要素が縮小したり、変形して見えることもあります。
このエラーの一般的な原因、そして潜在的な原因を特定することで、モバイルユーザビリティの問題が発生する理由をより深く理解することができます。また、解決方法を見極めるのにも役立ちます。
「クリック可能な要素同士が近すぎます」エラーの解決方法（3つの方法）
ユーザーがサイトで操作のしづらさを感じている場合、何がその原因になっているのでしょうか。モバイルユーザビリティのエラーを素早く解決するためには、それを防ぐことが不可欠です。「クリック可能な要素同士が近すぎます」エラーを解決する3つの方法を実践して、ユーザーにより良いUXの提供を目指しましょう。
1. WordPressプラグイン「YellowPencil Visual Customizer」を使用する
YellowPencil Visual Customizerは、コードの記述なしでサイトのCSSやテーマファイルを編集できる、フロントエンドのWordPressプラグインです。
このプラグインは、ボタンを大きくするなど、タップ可能な要素のサイズを変更するのに便利です。また、クリック可能な要素間の余白や間隔を変更することで、よりスペースを作ることができます。
このプラグインのインストールは無料で、通常ライセンスまたは拡張ライセンスを購入して使用します。プラグインを使うには、まずWordPressにインストールし、有効化します。「プラグイン」＞「新規追加」からプラグインを検索し、「今すぐインストール」＞「有効化」をクリックします。
次に、「YellowPencil」＞「Customizations（カスタマイズ）」に移動します。「Customizations（カスタマイズ）」タブの下にある「Let’s start!（開始する）」をクリックしましょう。
ビジュアルカスタマイザーのインターフェースの読み込みが開始され、次の画面で、モバイルユーザビリティのエラーを引き起こしているページを選択します。
変更する内容は、指定した特定のページに適用することも、ウェブサイト全体に適用することも可能です。エラーが複数のページで発生している場合には、「Global（グローバル）」を選択して、全体に適用するのがおすすめです。
選択後、「Continue（続ける）」をクリックします。これで、ウェブページ上でタップ可能な要素を選択できるようになりました。要素を選択すると、編集オプションのパネルが表示されます。
例えば、以下のスクリーンショットでは、タップ可能な要素間のスペースを広げるため、「Padding（パディング）」を選択し、すべての側面に10ピクセル追加しています。
「Size（サイズ）」と「Position（位置）」の設定もエラーの解決に役立ちます。必須ではありませんが、CSSコードを直接編集したい場合は、左のパネルから編集が可能です。
それから、モバイルユーザビリティのエラーを引き起こしている次の要素に移動して、この作業を繰り返します。変更が完了したら、緑色の「Save（保存）」ボタンをクリックします。
2. タップ可能な要素がすべて48px以上であることを確認する
すべてのデバイスで見栄えが良く、正しく機能する、単一の静的なデザインを作成することは不可能です。それよりも、デバイスに依存しないピクセル（dpi）を使って、タップ可能な要素をすべて定義し、柔軟なレイアウトを目指しましょう。dpiで定義された要素は、デバイスの画面サイズに応じて自動で拡大縮小されます。
モバイル端末では、タッチ要素の推奨最小値は48×48ピクセルです。これは約9mmに相当し、一般的なユーザーの指の腹に十分収まるサイズになっています。
そのため、どの要素がエラーの原因であるかを正確に把握できない場合には、各要素のdpiを調べてみるのが得策です。要素が推奨サイズ（例：24px）を下回っている場合は、パディングを増やして48pxに変更しましょう。
タップ可能な領域の計算値は、Chrome DevTools、またはFirefox DevToolsのどちらか好きな方のブラウザを使って確認してみてください。今回はChromeを使用してご説明します。
WordPressサイトのクリック可能な要素のdpi値を確認するには、Chromeブラウザのタブでサイトを開き、「クリック可能な要素同士が近すぎます」エラーが表示されているページに移動します。ページ上で右クリックし、「検証」を選択します。
「検証」をクリックすると、Chrome DevToolsが表示されます。上部にあるモバイル端末のアイコンをクリックすると、「デバイスのツールバーを切り替え」画面が表示されます。
左側のプレビューパネルに、モバイル端末で表示されるサイトのエミュレーションが表示され、タップ可能な要素にカーソルを合わせてクリックすると、右側に計算値が表示されます。
必要に応じて、CSSやサイトファイルを直接編集するか、YellowPencilなどのプラグインを使用して、要素のサイズを調整しましょう。
3. 入力方法を確認する
このエラーの解決に、入力方法の確認が役立つ場合もあります。これは、ユーザーがサイトを閲覧・操作するのに使用している方法、またはデバイスのことで、つまり、スマートフォンやタブレットなど、使用している端末の種類を確認するということです。
例えば、タッチは不正確な入力方法と言われています。先ほど説明した通り、CSS を使用してタッチ要素のサイズを大きくしたり、パディングを追加したりすると、タッチデバイスでサイトを操作するユーザーにとっては、より操作しやすくなります。
ただし、ユーザーのデバイスを正確に特定するのは容易ではありません。ポインターと呼ばれるものを使用して、ユーザーの主な入力方法を調べることができます。ポインターの値は以下の2種類です。
- Coarse（粗い）：主にタッチ入力方式
- Fine（細かい）：マウス、トラックパッド入力方式
例えば、主な入力方法がタッチである場合は、そのユーザーはスマートフォンやタブレットでサイトを閲覧していることを示唆しています。
ですが、入力方式からユーザーがタッチスクリーンを使用しているとわかっても、モバイル端末を使用しているとは限りません。タッチスクリーン対応の大型ノートパソコン、あるいはBluetoothデバイスをスマートフォンに接続してアクセスしている可能性もあります。
ポインターが粗い値を表示した場合、CSSを使ってタップ可能な要素のサイズを調整することができます。WordPressのテーマのCSSファイルに以下を記述します（またはYellowPencilなどのプラグインを使用してください）。
.container a {
padding: .2em;
}
@media (pointer: coarse) {
.container a {
padding: .8em;
}
}
CSSの調整後、Googleにウェブサイトの再クロールをリクエストして、エラーが解決されたかどうかを検証しましょう。
もしくは、URL検査ツールを使用して、個々のURLの再クロールをGoogleにリクエストすることもできます。このツールでURLを送信した後、「インデックス登録をリクエスト」をクリックします。すると、URL検査ツールがそのURLに明白なインデックスの問題がないかどうかを検査します。
Googleが特に問題はないと判断すると、そのページはインデックスの対象として登録されます。
URLの数が多い場合は、サイトマップを送信することも可能です。再インデックス化が必要な各ページ用に<lastmod>タグの最終更新日を調整してください。その後、Googleのサイトマップレポート機能を使用して、このサイトマップを送信します。
大抵の場合、サイトマップはすぐに表示されますが、サイトの規模、トラフィック、アクティビティなどによっては、サイトマップ内のすべての URLをGoogleがクロールするのに時間がかかる場合があります。なお、サイトマップに含まれるすべてのURLをGoogleがクロールする保証はありません。
「コンテンツの幅が画面の幅を超えています」エラーとは
Google Search Consoleは、さまざまなモバイルユーザビリティのエラーを警告します。「クリック可能な要素同士が近すぎます」だけでなく、「コンテンツの幅が画面の幅を超えています」というエラーもサマリーレポートに表示される場合があります。
このエラーは、Google Search Consoleでクリック可能な要素のエラーと同じ場所に表示され、同様にさまざまな原因が考えられます。
「コンテンツの幅が画面の幅を超えています」エラーの解決方法
「コンテンツの幅が画面の幅を超えています」エラーが発生する原因
このエラーは、サイトのデザインが水平に拡大され、ユーザーが画面に収まりきらなかったコンテンツを表示するために、横にスワイプすることを余儀なくされた場合に発生します。優れたUXを提供するためには、ユーザーが横スクロールする事態はできる限り避けるべきです。
CSSの宣言に絶対値を使用している場合は、このエラーが発生する可能性が高くなります。柔軟性のないレイアウトは、クリック可能な要素のエラーにつながるため、同じモバイルユーザビリティレポートでこの2つのエラーが同時に報告されることは珍しくありません。
「コンテンツの幅が画面の幅を超えています」エラーの解決方法（5つの方法）
レポートにこのエラーが表示されていたら、手軽ないくつかの方法で解決してしまいましょう。今回は、最も一般的な5つの方法をご紹介します。
1. CSSの宣言に絶対値を使用しない
このエラーを解決する最適な方法の一つは、CSSの宣言で絶対値を使わないことです。コンテンツが正しく表示され、機能するために、特定のビューポートを必要としないようにする必要があります。
そのため、CSSの要素には絶対値ではなく、相対値で幅と位置を指定してください。できる限り相対値を使用することで、さまざまな画面サイズに対応する柔軟なレイアウトを実現できます。
2. 画像の最大幅を設定する
固定寸法の画像は、ビューポートより大きく表示される場合があり、エラーの原因となることがあります。画面の大きさに合わせて画像を拡大縮小するために、すべての画像の最大幅を100%に設定しましょう。
この設定によって、利用可能なスペースに合わせて画像を縮小することを強制することができます。max-widthを使う場合でも、<image>タグのwidthとheightの属性を使用するのが賢明でしょう。<image>タグを使うことで、画像が画面に表示されたときにレイアウトが崩れるのを防ぐことができます。
3. メタビューポートタグを使用する
モバイル端末は、デフォルトでデスクトップ画面の幅（通常約980px）でページをレンダリングします。この時、ブラウザは画面サイズに合わせてフォントサイズを大きくしたり、コンテンツを拡大縮小したりすることで、ページの最適化を図ろうとします。
このデフォルトの挙動が矛盾を引き起こす場合もあります。時には、ユーザーがコンテンツの閲覧、操作するために画面を拡大しなくてはいけないことがあり、これがエラーの原因となります。
これを避けるため、このデフォルトの動作に従わず、ブラウザにページの寸法や縮尺の設定方法を指定しましょう。これを行うには、ドキュメントの最初にメタビューポートタグを挿入します。
4.最新のCSSレイアウト機能を使用する
別の方法として、サイトのレイアウトを変更すると解決することもあります。より柔軟なレイアウトを実現するために、Flexbox、CSS Grid Layout、Multicolのようなマルチカラムレイアウトなどの実装を検討してみるのもいいでしょう。
5. CSSメディアクエリを適切に使用する
メディアクエリを使用すると、タッチスクリーンを含むユーザーデバイスに応じたスタイルの変更を簡単に行うことができます。そのため、先にご紹介した方法でもエラーが解決しない場合は、必要に応じてCSSメディアクエリを使用することをおすすめします。
この変更を行った後、「コンテンツの幅が画面の幅を超えています」エラーが解決したかどうか、モバイルユーザビリティレポートを再実行し、次の章でご説明する手順を使って修正内容を検証しましょう。
エラー解決の検証と確認方法
ご紹介した2つのエラーのどちらに対処しているか、そしてどの対処方法を実践するかにかかわらず、対処後にエラーが本当に解決されたかどうかを確かめることは不可欠です。Googleのモバイルユーザビリティテストを再実行して検証しましょう。
これを行うには、モバイルユーザビリティレポートに戻り、「クリック可能な要素同士が近すぎます」エラーを見つけてください。次に「修正を検証」をクリックします。
なお、「コンテンツの幅が画面の幅を超えています」エラーに対しても、同様の作業を行ってください。その後、Googleがウェブサイトのクロールを開始し、修正内容の検証中であることを伝えるメッセージが表示されます。
エラーを解決した場合は、Google Search Consoleに「合格」のメッセージと緑のチェックマークが表示されます。不合格だった場合には、エラーを再度確認して、別の解決策を実行しましょう。
まとめ
モバイルユーザビリティに問題があると、UXが低下し、サイトのトラフィックが著しく減少してしまう恐れがあります。ユーザビリティエラーを解決する対策を講じることで、サイトをモバイルフレンドリーにし、より多くの人がアクセスできるように改善することができます。
今回の記事では、「クリック可能な要素同士が近すぎます」エラーを解決する3つの方法をご紹介しました。
- フロントエンドのCSSスタイルエディタプラグイン（YellowPencilなど）を使用して、サイトを修正する
- Chrome DevToolsを使用して、タップ可能なすべての要素が48dpi以上であることを確認する
- 入力方法を確認し、それに応じてCSSを調整する
「クリック可能な要素同士が近すぎます」エラーの解決方法について、何かご不明点はございますか？以下のコメント欄でぜひお聞かせください！
コメントを残す