タップ ターゲットのサイズを適切に調整する

このルールは、特定のタップ ターゲット(ボタン、リンク、フォームのフィールドなど)が小さすぎたり、互いに近すぎたりするために、タッチスクリーンがタップしにくいことを PageSpeed Insights が検出した場合にトリガーされます。

概要

タッチスクリーンでは、リンクやボタンが小さかったり、近すぎたりすると、従来のマウス カーソルよりも正確にタップするのが難しくなります。ユーザーが間違えて誤ったターゲットをタップして困惑しないように、タップ ターゲットは十分に大きくし、他のタップ ターゲットに指を重ねずに押せるよう十分に離す必要があります。平均的な大人の指の腹のサイズは幅約 10 ミリで、Android UI のガイドラインで推奨されるタップ ターゲットの最小サイズは約 7 ミリ(モバイル ビューポートを適切に設定済みのサイトでは 48 CSS ピクセル)です。

推奨される解決方法

サイト上で最も重要なタップ ターゲット(ユーザーが最も頻繁に使用するもの)は押しやすいように十分大きくし、高さと幅を 48 CSS ピクセル以上にしてください(ビューポートを正しく設定済みと仮定した場合)。使用頻度の低いリンクはそれより小さくてもかまいませんが、リンク同士や他のリンク群との間にスペースを確保し、10 ミリの指の腹で誤って両方のリンクを一度に押してしまうことのないようにしてください。目的のボタンやリンクを簡単に安心して押すために、ユーザーがズームする(または、Chrome のポップアップ拡大鏡など、指によるタップの曖昧さをなくすための、ブラウザの機能に頼る)必要のないようにします。

重要なタップ ターゲットは押しやすいように十分大きくする

この推奨事項はユーザーの使用頻度が高いタップ ターゲットに適用します。たとえば、よく使用される操作のボタン、検索バーやその他の重要なフォーム フィールド、主要なナビゲーション リンクなどです。これらのタップ ターゲットは 7 ミリ以上(ビューポートを適切に設定済みの場合は 48 CSS ピクセル以上)にし、7 ミリ未満の場合は周囲に十分なスペースを確保してください。

小さいタップ ターゲットの間に十分なスペースを確保する

使用頻度の低いリンクやボタンは推奨サイズの 7 ミリより小さくしてもかまいません。ただし、ユーザーが指でタップ ターゲットを押したときに誤って別のタップ ターゲットをタップしないように、水平方向と垂直方向で 5 ミリ(32 CSS ピクセル)以内に他のタップ ターゲットを配置しないでください。