「クリック可能な要素同士が近すぎます」とは？原因・対処法・予防策を紹介

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

「クリック可能な要素同士が近すぎます」とは、クリックできる箇所が近すぎる、バナーが小さすぎるといった理由で、スマートフォンから閲覧した際に誤タップが発生しやすい状況になっていることを意味するエラーメッセージです。
エラーメールに記載される以外にも、2023年に廃止されましたが、Google Search Consoleのモバイル ユーザビリティレポートやモバイルフレンドリーテストなどを行った際にも表示されていました。

現在はLighthouseでも確認できる

先述のとおり、Google Search Console内のモバイルユーザビリティレポートやモバイルフレンドリーテストは2023年12月で廃止されており、現在ではGoogle Chromeの拡張機能である「Lighthouse」の使用が促されています。

Lighthouseとは、Webサイトの品質をチェックできるツールで、「クリック可能な要素同士が近すぎます」と同義であるメッセージも表示されることから、Webサイト内のユーザビリティについても確認できる便利なツールです。

Lighthouseで表示される「クリック可能な要素同士が近すぎます」と同義であるメッセージには、以下のようなものがあります。

• Tap targets are not spaced appropriately（タップできる対象の間隔が不適切）
• Tap targets are not sized appropriately（タップできる対象のサイズが不適切）

Lighthouseでは、Webサイトのユーザビリティをチェックすることも可能なので、対処後の検証ツールとしても利用できます。
Lighthouseのインストールはこちらからできます。

「クリック可能な要素同士が近すぎます」を早期解決すべき理由

「クリック可能な要素同士が近すぎます」を解消しなければ、ユーザビリティの低下を招き、SEOにも影響が出る可能性があります。

このエラーメッセージが出ているケースでは、Googleが「コンテンツのページ エクスペリエンスを自己評価する」にて述べている以下の点が満たせていない可能性があるからです。

コンテンツは、モバイル デバイスでも適切に表示されますか。
コンテンツに、主要なコンテンツを妨害する、またはコンテンツから注意をそらすほどの大量の広告が掲載されていませんか。
サイト訪問者がページのメイン コンテンツを容易に見つけて移動できるようになっていますか。
サイト訪問者が、ページのメイン コンテンツとその他のコンテンツを簡単に区別できるようにページが設計されていますか。
引用：ページ エクスペリエンスの Google 検索結果への影響について｜Google 検索セントラル

Googleも以下のように述べていることから、このエラーメッセージが表示された場合、すぐに対処すべきといえるでしょう。

Google のコア ランキング システムは、優れたページ エクスペリエンスを提供するコンテンツを高く評価するように設計されています。
（中略）
多くの要素について検討し、全般的に優れたページ エクスペリエンスを提供できているかどうかを確認してください。
引用：ページ エクスペリエンスの Google 検索結果への影響について｜Google 検索セントラル

「クリック可能な要素同士が近すぎます」が表示される原因

「クリック可能な要素同士が近すぎます」というエラーメッセージが表示される原因は、タップする対象同士が近すぎて誤タップが発生しやすくなっていることです。
ここでは、タップ対象が近いとは具体的にどれほどの距離や大きさを指すのか、原因をより詳しく解説します。

間隔が狭い

文字同士の間隔が狭いことが原因で、エラーメッセージが表示されている可能性があります。

Search Console ヘルプへの投稿によると、クリックやタップできる要素同士は7mm以上の間隔を空けることが好ましいとされています。

大人の指の腹のサイズが10mmとされているので、リンク同士の間隔は7mm以上空けることが望ましいとされています。
但し重要ではないリンクは7mm以下でも良いみたいです
引用：モバイル ユーザビリティの問題「クリック可能な要素同士が近すぎます」の原因が特定できません– Search Console Community

「クリック可能な要素同士が近すぎます」が表示された場合は、リンク同士の間隔が7mm以下である可能性があるといえるでしょう。

サイズが小さい

バナーやボタンなどのサイズが小さすぎると、タップしたくともタップできなかったり、クリックできなかったりします。
このことが原因となり、エラーメッセージが表示されている可能性も考えられます。

Googleが開発しているWebサイトのパフォーマンスを分析できるアプリ、「web.dev」では、サイズについて以下のように言及されています。

推奨されるタップ ターゲットの最小サイズは、デバイス非依存ピクセルで約 48 です モバイルのビューポートを正しく設定した サイトに表示されます たとえば、アイコンの幅と高さが 24 ピクセルしかなく、 パディングを追加して、タップ ターゲットのサイズを最大 48 ピクセルにすることができます。48x48 ピクセル領域は約 9 mm に相当します。人の指の腹ほどの大きさです
引用：タップ ターゲットのユーザー補助機能｜web.dev

このことから、同じエラーが表示されたケースでは、バナーやボタンのサイズが48×48ピクセル以下となっている可能性があるといえます。

配置場所が不適切

バナーやボタンが重なっていたり、隠れてしまっていたりすることも、「クリック可能な要素同士が近すぎます」というエラーが表示される原因になります。
実際にWebページを閲覧し、ボタンの重なりや、隠れてしまっている箇所など、表示に問題がないか確認しましょう。

「クリック可能な要素同士が近すぎます」が表示されたときの対処法

「間隔が狭い」「サイズが小さい」「配置場所が不適切」といった原因がわかったら、それぞれ適切に対処しましょう。
Androidのユーザー補助機能 ヘルプにて、Googleは適切なボタンサイズについて以下のように述べています。

タップ ターゲットは 48 x 48 dp 以上とし、8 dp 以上の余白を設けて、情報の密度と使いやすさのバランスを取ることをおすすめします。48 x 48 dp のタップ ターゲットの物理的なサイズは、画面のサイズにかかわらず約 9 mm です。タッチスクリーン オブジェクトのターゲット サイズは 7～10 mm 程度にすることをおすすめします。
引用：タップ ターゲットのサイズ｜Android のユーザー補助機能 ヘルプ

「クリック可能な要素同士が近すぎます」と表示されたら、上記を基準として対処しましょう。
具体的には、以下のような方法で対処できます。

• バナーやボタンのサイズを48×48ピクセルに変更する
• バナーやボタンのサイズを7～10mm程度になるよう調整する
• ボタンやバナーの間隔を7mm以上空ける
• テキストリンクを文字色変更や下線を用いて装飾する

「クリック可能な要素同士が近すぎます」エラーを予防する方法

最後に、「クリック可能な要素同士が近すぎます」というエラーメッセージを予防する方法をご紹介します。
もっとも有効な手段としては、先述のとおりボタンサイズや間隔などをGoogleが好ましいとしているものに合わせることですが、このほかにも、以下のようなリンクやボタンの設置を避けることでも有効とされています。

ブログカードとバナー広告が近すぎる

ブログカードとは、下記の画像のようにブログのタイトルやメインビジュアル、記事の一部などをまとめて表示するものです。

ブログカードとバナー広告が近すぎる場合、「クリック可能な要素同士が近すぎます」というエラーが発生する可能性が高くなります。
適切な配置になるよう、間隔を7mm以上空けましょう。

テキストリンク同士が近い

テキストリンクとは、文中に設置するリンクのことです。
以下のようにテキストリンク同士が近い場合も、エラー発生の原因になる可能性があるため、注意が必要です。

【例】
スーツとネクタイはこちらからお選びいただけます。

このほかにも、文字の大きさが小さすぎる場合もエラーとなる可能性があります。
あわせて注意しましょう。

【例】
スーツとネクタイはこちらからお選びいただけます。

テーブル内にリンクを設置する

テーブル内にテキストリンクを設置した場合、近すぎてエラーが発生することもあります。
わかりやすくまとめる際にテーブルを使用する機会は多くありますが、リンクを設置するときには注意が必要です。

【例】

まとめ

この記事では、「クリック可能な要素同士が近すぎます」というGoogle Search Consoleで表示されるエラーメッセージについて詳しくお伝えしました。
このメッセージは、ボタンやテキストリンクといったユーザーがタップできる要素同士が近すぎたり、重なっていたり、隠れていたりすることで、誤タップが発生する可能性が高いときに表示されるエラーです。
エラーを放置してしまうと、ユーザビリティが低下し、それに伴いGoogleが重視しているユーザーエクスペリエンスも質の悪いものになってしまう可能性があります。
SEO評価を落とさず、ユーザーにとっても見やすいWebサイト作りをするためにも、早期に解消する必要があるといえるでしょう。

Googleは、クリック可能な要素のサイズや間隔について理想とするサイズを定めています。
エラーが表示されたら、まずはこのサイズからかけ離れていないかを確認し、適切に対処することが大切です。
対処法を試したら、エラーが解消されたかをチェックしましょう。
確認ツールとしては、Googleが使用を促しているLighthouseがおすすめです。
「クリック可能な要素同士が近すぎます」というエラーを解消し、ユーザビリティの向上に努めましょう。