「クリック可能な要素同士が近すぎます」エラーの原因と対処法

「クリック可能な要素同士が近すぎます」

これはGoogleサーチコンソールがエラーを検知した際やモバイルフレンドリーテストで表示されるメッセージの一つです。このエラーが出た場合、UXを損ねるWebサイトを放置することでSEO評価が下がる可能性があるため、早めに対処したいところ。

本記事では「クリック可能な要素同士が近すぎます」エラーの原因と対処法を解説します。

＞＞Web担当者のための「Google Search Console入門書」をダウンロードする

「クリック可能な要素同士が近すぎます」エラーとは

「クリック可能な要素同士が近すぎます」エラーは、Googleサーチコンソールのモバイルユーザビリティレポートやモバイルフレンドリーテストで表示されます。

このエラーは、モバイル端末でWebページを閲覧する際に、ボタンやバナーなどのクリックできる要素が小さくてタップしにくい、または他の要素との間隔が狭くて誤タップしやすい問題が起きているということ。

このエラーが発生すると、ユーザーの利便性が低下し、離脱やコンバージョンに悪影響が出る可能性があります。

Googleサーチコンソールのモバイルユーザビリティレポート

Googleサーチコンソールは自社で管理するWebサイトの検索パフォーマンスやインデックス状況などを確認できるツールです。

その中にあるモバイルユーザビリティレポートでは、Webサイトがモバイル端末でどのように表示されるか、ユーザーにとって使いやすいかどうかをチェックできます。

このレポートで「クリック可能な要素同士が近すぎます」というエラーが出た場合は、Googleからモバイルフレンドリーではないと判断される可能性が高くなります。

 

※Googleサーチコンソールのアップデートにより、現在は「モバイルユーザビリティレポート」機能が廃止となりました。今後は後述する「Lighthouse」を代用することで引き続き調査ができます。

モバイルフレンドリーテスト

モバイルフレンドリーテストはGoogleが提供するWebページのモバイルフレンドリー度を測定するツールです。

このツールでは、任意のURLを入力すると、そのページがモバイル端末でどのように表示されるかを確認できます。また、モバイルフレンドリーかどうかの判定結果や、改善すべき点も提示されます。

このツールで「クリック可能な要素同士が近すぎます」というエラーが出た場合は、そのページにあるクリック可能な要素がモバイル端末で見たときにタップしにくいということを意味しています。

 

※モバイルフレンドリーテストは提供終了となりました。

ページテストに使える「Lighthouse」

「Lighthouse」はWebページのパフォーマンスを調査し、改善が必要な箇所を特定できるオープンソースのツールです。Chrome拡張機能をインストールするだけで手軽に対象ページのテストが可能。

Webページのパフォーマンスを測定し、ページ読み込み時間やインタラクティブ性などの指標をスコア化します。

 

「クリック可能な要素同士が近すぎます」に関する項目では、以下の２つが参考になります。

• Tap targets are not sized appropriately（サイズが適切ではない）
• Tap targets are not spaced appropriately（間隔が適切ではない）

その他、アクセシビリティ評価やページの品質向上のためのヒントも得られるため、ぜひ活用してみてくださいね。

「クリック可能な要素同士が近すぎます」の原因

「クリック可能な要素同士が近すぎます」エラーの原因は、主に以下の３つに分けられます。

• クリック可能な要素のサイズが小さすぎる
• クリック可能な要素の間隔が狭すぎる
• クリック可能な要素の配置が不適切である

クリック可能な要素とは、リンクテキストやバナーなどが該当します。

クリック可能な要素のサイズが小さすぎる

クリック可能な要素のサイズが小さすぎると、モバイル端末でタップし辛くなります。特に、指のサイズに比べて要素のサイズが小さい場合は誤タップのリスクが高まる要素。

 

Googleのweb.devでは推奨値をクリック可能な要素のサイズを少なくとも48ピクセル×48ピクセル以上としています（参考：タップ ターゲットのユーザー補助機能）。

また、要素のサイズをCSSで指定する場合は、ピクセルではなくemやremなどの相対単位を使うことで、画面サイズや解像度に応じて自動的に調整されるように設定するとユーザーに優しいWebページに改善できます。

クリック可能な要素の間隔が狭すぎる

クリック可能な要素の間隔が狭すぎると、モバイル端末で正確にタップするのが難しくなります。特に、複数の要素が密集している場合は意図しない要素をタップしてしまう要因に。

Googleはクリック可能な要素の間隔を少なくとも8ピクセル以上にすることを推奨しています。

また、要素の間隔をCSSで指定する場合は、ピクセルではなくemやremなどの相対単位を使うことで、画面サイズや解像度に応じて自動的に調整されるよう設定しましょう。

クリック可能な要素の配置が不適切である

クリック可能な要素の配置が不適切、例えば画面の端や角に要素が配置されている場合は、タップしにくくになります。

また、要素が重なっていたり、隠れていたりする場合も、タップしにくくなります。

Googleは、クリック可能な要素を画面の中央や上部に配置することや、要素が重ならないようにすることを推奨しています。

また、要素の配置をCSSで指定する場合は、レスポンシブデザインの技術を使うことで、画面サイズや解像度に応じて自動的に調整されるようにしましょう。

「クリック可能な要素同士が近すぎます」の対処法

「クリック可能な要素同士が近すぎます」の原因がサイズ・間隔・配置にあるため、それぞれを適切に調整することでこのエラーは解消できます。ここからは対処法を見ていきましょう。

ボタンやバナーのサイズを大きくする

クリック可能な要素のサイズが小さすぎる場合は、単純にボタンやバナーのサイズを大きくすることでエラーを解消できる可能性が高いでしょう。

ボタンやバナーのサイズを大きくする方法は、CSSでwidthやheightなどのプロパティを使った調整がおすすめです。

フォントサイズや行間を調整する

フォントサイズや行間を調整し、適度な行間を保つこともエラーを解消する方法の一つです。

フォントサイズや行間の調整も、CSSでfont-sizeやline-heightなどのプロパティを使っておこないましょう。また、テキストリンクのカラーや下線なども適切に設定することで、タップのしやすさを向上させられます。

ボタンやバナーの間隔を空けて配置する

クリック可能な要素の間隔が狭すぎると、モバイル端末で意図しない要素をタップしてしまう、いわゆる誤タップを誘引する可能性があります。これはユーザーにとってストレスになりますよね。

このような場合は、ボタンやバナーの間隔を空けて配置してエラーを解消できます。

 

これらの簡単な調整だけでもUX改善になり、ユーザーにとってメリットがあるだけでなくSEO対策の観点でも有効です。「クリック可能な要素同士が近すぎます」のエラー解消だけに限らず、UXを向上させる工夫は積極的に取り入れていきたいですね。

「クリック可能な要素同士が近すぎます」のまとめ

本記事では「クリック可能な要素同士が近すぎます」エラーの原因や対処法をご紹介しました。

Google Search Consoleのエラーに対処するなどの内部SEO対策は、集客の土台となるWebサイトの効果的なSEO強化施策です。エラーの解消はSEO対策の中でも特に優先的に取り組みましょう。

「Google Search Console入門書」では、はじめてGoogle Search Consoleを使う方向けの解説に無料で公開しています。ぜひ資料を参考にサイト強化を図りましょう。