「クリック可能な要素同士が近すぎます」原因と対処法【Snow Monkey Blocks】

こんにちは、WebデザイナーのKazumiです。

今回の記事では、Googleサーチコンソールのモバイルユーザビリティエラーの一つである、「クリック可能な要素同士が近すぎます」の原因と対処法について解説します。

私の場合WordPressのSnow Monkeyテーマを使用しています。サーチコンソールにサイトマップを送信後すぐにエラーが出てしまい、通告メールが届きました。

▲サーチコンソールのモバイルユーザビリティエラー

モバイルフレンドリー(スマホ表示最適化)であることは、SEO対策においても重要視されています。

エラーを放置していると検索エンジンに「モバイルフレンドリーではないサイト」と判断され、検索結果に影響が出ることもあるようです。

このエラーってそもそも何が原因なの?どうやって解消すればいいの?

私が実際に行った対策をご紹介します。

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

「クリック可能な要素同士が近すぎます」はそもそもどういったときに発生するエラーなのでしょうか?

調べてみたところ、サーチコンソールヘルプに下記の内容が掲載されていました。

テキストリンクなどタップできる要素が近すぎると発生するエラーです。

大人の指の腹のサイズが10mmとされているので、リンク同士の間隔は7mm以上空けることが望ましいとされています。

但し重要ではないリンクは7mm以下でも良いみたいです

まずはスマホ画面でリンク間隔が狭すぎて、ユーザビリティを損ねてないかを確認し、使いづらいようであれば間隔を調整してみてはいかがでしょうか?

モバイル ユーザビリティの問題「クリック可能な要素同士が近すぎます」の原因が特定できません

まとめるとこのようになりますね。

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

・スマホ画面で見たときに、リンクとリンクの間隔が狭すぎることが原因

・リンクの間隔は7mm以上開けることが望ましい

・重要でないリンクは7mm以下でも良い

問題のページを確認し、原因を特定する

まずは問題となっているページを確認して、原因を特定しましょう。

サーチコンソールのモバイルユーザビリティエラー箇所をクリックすると、エラーの詳細ページが開きます。

スクロールすると、「例」としてエラーが起こっているページのURLが表示されています。

▲該当のURLを確認

私の場合ポートフォリオを掲載しているページに問題があったようです。
対象のページをスマホで確認し、エラーの原因となっている箇所を特定させます。

他のページは問題なさそうなので、ヘッダーやフッターを除く、メインコンテンツの部分にエラーが出ていると仮定します。

リンクを設定している箇所を確認した結果、Snow Monkey Blocksで設置しているパネルリンクが該当しました。

▲Snow Monkey Blocksのパネルリンク

パネル全体をリンクとして設定しているのですが、スマホ表示だと確かにパネル同士の間隔が狭いですね。

▲パネルリンクの間隔。7mmの間隔はなさそうに見える

パネルの中にテキストリンクやボタンを設置しているのなら問題はなかったと思いますが、今回はパネル自体をリンクとして設定していたために起こったエラーのようです。

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

原因がわかったので、次は該当箇所に対策を施します。

対応策としては、リンク同士の間隔を広くすることになります。

CSSで対策する場合、「padding」「margin」を調整すると良さそうです。

私の場合はSnow Monkey Blocksのパネルブロックを使用しているので、該当のページに下記のCSSを適用させました。

/* パネル余白調整 */
.smb-panels__item {
  margin-bottom: 20px;
}

パネルの下に20pxの余白を持たせる、というCSSです。

通常はサイト内のパネルブロックすべてに適用されますが、今回はエラーが出ているページだけに適用させたかったので、専用のプラグインを使用しました。

WordPressで特定のページだけにCSSを適用させたい場合は、「Simple CSS」というプラグインがおすすめです。

このプラグインを有効化させると、固定ページや投稿ページの下部に「Simple CSS」の入力欄が追加されるので、ここに先ほどのCSSを追加しました。

CSS適用前と比べると、パネルとパネルの間に適度な余白ができました!

▲余白の調整前と調整後の比較

修正後、Googleにチェックを依頼する

エラー箇所の修正が済んだら、エラー詳細ページの「修正を検証」ボタンを押します。

すると「検証:開始 開始日」という表記に変わります。

▲「修正を検証」をクリックすると検証が開始される

さらに「詳細を表示」のボタンを押すと、検証結果が表示されます。

▲検証中のときは「保留」とされる

Googleの再検証が完了されると、「合格」「失敗しました」「その他」のいずれかの結果が表示されます。

検証が開始されたら、結果が出るまで待ちましょう。

エラーの検証結果は数日後にメールで通知される

私の場合1ページのみだったためか、検証が開始された翌日にメールが届きました。

結果は、無事合格
修正したリンクの間隔で問題ないと判断されたようです。

▲検証開始の翌日に合格

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

サーチコンソールのモバイルユーザビリティで「クリック可能な要素同士が近すぎます」というエラーが発生したら、

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

1. エラー箇所を確認する

2. リンクとリンクの間隔を広くする

3. 再度検証してもらう

上記の手順で解決していきましょう。

もし再検証の時点で合格できなかった場合は、下記のことを試してみてください。

もしエラーの再検証で不合格になったら?

・もう少しリンクの間隔を広げてみる

・リンクやボタンのサイズを大きくしてみる

・別の箇所が原因でエラーが発生している可能性を考えてみる

モバイルユーザビリティのエラーは定期的に確認し、モバイルフレンドリーなサイト作りを目指しましょう!

最後までご覧いただきありがとうございました。

この記事を書いた人

Kazumi

フリーランスWebデザイナーです。画像加工や動画編集、アニメ制作もしています。時間と場所に縛られない自由な生活を手に入れるためにスキルを磨いています!ブログでは学んだことのアウトプットをメインに役立つ知識を発信しています。