モバイルフレンドリーチェックでボタン間隔が狭すぎる場合の確認方法

スマートフォンで「問い合わせを送信」をタップしようとして隣の WhatsApp アイコンに触れてしまう、メニューを開くと隣の項目を誤ってタップしてしまうといった問題は、実際にクリックできる範囲、隣接する領域との距離、ページレイアウトの3つの観点から調査します。ボタンに隙間があるように見えても、タッチ領域が密集していないとは限りません。アイコンが小さく見えても、十分なクリック範囲が設定されている場合があります。

check for mobile friendly の検出方法を探す際は、ツールの合格・エラー結果だけで判断しないでください。まず、どのページの、どの画面幅で、どの操作状態のときに誤操作が起きやすいかを特定し、ブラウザーで要素のサイズを確認してから、実機で検証します。こうすることで、内側の余白を増やすべきか、間隔を広げるべきか、ボタン群全体の配置を調整すべきかを判断できます。

誤操作が発生する場所と状態を特定する

外贸サイトやマーケティング用ランディングページを調査する場合は、問い合わせや購入に直接影響する操作から確認します。トップナビゲーション、商品フィルター、フォーム送信、カートの数量調整、画面下部に固定された電話・チャット・問い合わせの各導線などです。特に、フローティングのカスタマーサポート、Cookie通知、画面下部の操作バーが同時に表示される状況に注意してください。通常なら問題なくクリックできるボタンが隠れてしまうことがあります。

ホームページの初期表示だけを確認するのではなく、商品詳細ページに移動し、メニューを開き、フィルターパネルを表示して、フォームに入力エラーのメッセージが表示される状態も確認します。初期状態では十分な間隔があるボタン群でも、展開後に追加されたコンテンツに押され、互いに密集する場合があります。多言語サイトでは、テキストが長い言語版も確認し、翻訳後にボタンの文字が折り返されたり、隣のリンクと近づきすぎたりしないようにします。

問題を記録する際は、少なくともページのURL、画面幅、操作手順、誤ってタップした対象を記載します。たとえば、「商品詳細ページで画面下部の問い合わせバーを開いた後、閉じるボタンをタップするとチャットの導線が反応しやすい」と記録すれば、「モバイルでボタンが密集している」よりも開発者が再現しやすくなります。

クリック範囲を確認してから、サイズが適切かを判断する

ブラウザーの開発者ツールでモバイル端末のシミュレーション表示に切り替え、要素選択ツールでボタンを選択して、ボックスモデル、幅と高さ、周囲の要素を確認します。測定対象は実際にクリックを受け付けるリンクやボタンです。内部のアイコンやテキストだけを見たり、外側の装飾コンテナのサイズをクリック範囲と見なしたりしないでください。

たとえば、大きな色付き領域の中央にアイコンがあっても、アイコン自体しかクリックできない場合、その色付き領域によってタッチ範囲が広がるわけではありません。反対に、内側の余白を増やしてボタンを大きくすれば、アイコンのサイズを変えなくてもタップしやすくなります。また、絶対配置された要素や透明なオーバーレイも確認し、見た目上の空白部分がほかのコントロールに占有されていないか確かめます。

サイズの判断には、WCAG 2.2 の「ターゲットのサイズ（最小）」要件を参考にできます。ポインター入力のターゲットは原則として少なくとも 24×24 CSS ピクセルとし、間隔やインラインリンクなどには例外があります。小さいターゲットが間隔の例外に該当するかどうかは、規格で定められた円形領域に基づいて判断する必要があります。「ボタン間に一定のピクセル数の隙間を設ければ基準を満たす」と単純に解釈してはいけません。

問い合わせの送信やカートへの追加など、頻繁に使われる操作では、指でタップしやすい余裕を確保するため、44×44 CSS ピクセルに近づける、またはそのサイズを目標にすることができます。サイズ要件を満たしても、操作の検証に代わるものではありません。隣り合うボタンの操作内容が混同されやすいほど、明確な間隔と視覚的な区別が必要です。

原因に応じて修正し、拡大による過密化を避ける

ボタン間隔が狭いからといって、必ずしも外側の余白を増やせばよいとは限りません。まず、タッチ領域が小さいのか、コンテナのスペースが不足しているのか、フローティング要素が重なっているのかを判断してから、修正方法を選びます。

• アイコンやテキストのごく一部しかクリックできない場合：リンクやボタンの内側の余白を増やし、適切な最小幅・高さを設定します。アイコン周辺の余白も同じクリック対象に含めます。
• 横一列のボタンが画面いっぱいに詰まっている場合：折り返しや縦並びに変更するか、同じ画面に表示する優先度の低い導線を減らします。ボタンをさらに大きくすると、横方向にはみ出す可能性があります。
• 隣接するターゲットを誤ってタップしやすい場合：レイアウトの間隔や外側の余白を調整して距離を広げ、拡張後のクリック範囲が重なっていないかも確認します。テキスト同士の間隔を広げるだけでは、クリック範囲の改善につながらないことがあります。
• フローティングの導線がページ上の操作を妨げている場合：位置や確保するスペース、表示条件を調整し、サポート導線や画面下部のバーとシステムのセーフエリアとの関係を適切に保ちます。

ナビゲーションメニュー、ページ番号、フォーム付近の小さなリンクは、見落としやすいため注意が必要です。本文中のインラインリンクには別の判定条件があるため、すべてを大きなボタンに変更する必要はありません。ただし、「戻る」「送信」「クリア」のように横並びで配置された個別の操作は、それぞれのクリック範囲を確認します。

修正時には、操作の優先順位を明確に保つ必要もあります。問い合わせフォームの送信ボタンとリセットボタンが隣接していると、どちらも大きくしただけでは誤操作が増える可能性があります。まず、優先度の低い操作を残す必要があるかを判断し、そのうえでレイアウトを調整します。検査結果を通すためだけにすべてのボタンを一律に拡大して終わらせないでください。

スクリーンショットだけで判断せず、実際の操作を含めて再テストする

ブラウザーのシミュレーションはレイアウトの問題を特定するのに適していますが、マウスのクリック精度は指の操作とは異なります。修正後は、実機で主要な操作を一通り行います。ナビゲーションを開く、商品を切り替える、フォームに入力する、ポップアップを閉じて送信する、といった操作です。スクロール後の固定バーの位置や、ソフトウェアキーボードが表示されたときに送信ボタンが隠れないかも確認します。

再テストには、幅の狭い画面、比較的幅の広いスマートフォン画面、テキストが長い言語版を含めます。横スクロール、ボタンのテキストの折り返し、ページの拡大縮小、画面の縦横切り替え後のレイアウトを確認します。ページに viewport が正しく設定されていない場合や、より多くのコンテンツを詰め込むために全体の表示を縮小している場合も、まずこうした基本的な問題を解決する必要があります。そうしなければ、部分的に間隔を広げても使いやすさは改善しにくくなります。

自動検査レポートは、一部のサイズやレイアウトの問題を見つけるのに役立ちますが、指で操作したときの感覚を十分に判断することはできず、操作後に初めて表示されるコントロールを見落とす場合もあります。以前のチュートリアルで紹介されていた Google モバイルフレンドリーテストツールは、すでに提供を終了しています。調査には、ブラウザーの開発者ツール、アクセシビリティ検査ツール、実機での操作を組み合わせてください。

納品時の確認では、「ボタン間隔を調整済み」という記載を、再現可能な検査結果に置き換えます。どのページで、どの画面幅と言語のときに、どの操作を行い、以前の誤操作が解消されたかを記録します。広告流入や問い合わせのコンバージョンを担うページでは、まず送信、連絡、購入の導線上にある障害を修正し、その後に優先度の低い導線に対応すると、事業への影響に沿った順序で修正できます。