タップ ターゲットのユーザー補助機能

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

デザインをモバイル デバイスに表示する場合は、ボタンやリンクなどのインタラクティブ要素を十分に大きくし、周囲に十分なスペースを確保して、誤って他の要素と重ならないように押しやすくする必要があります。これはすべてのユーザーにメリットをもたらしますが、特に運動障がいのあるユーザーにとっては有用です。

推奨されるタップ ターゲットの最小サイズは、モバイル ビューポートを適切に設定したサイトで、約 48（デバイス非依存ピクセル）です。たとえば、アイコンの幅と高さが 24 ピクセルしかない場合、パディングを追加してタップ ターゲットのサイズを最大 48 ピクセルにできます。48 x 48 ピクセルの領域は約 9 mm に相当します。これは、指の腹の領域と同じくらいです。

このデモでは、すべてのリンクにパディングを追加して、最小サイズを満たすようにしました。

また、タップ ターゲットは、ユーザーがタップ ターゲットを押したときに誤って別のタップ ターゲットに触れることがないように、水平方向と垂直方向の両方で約 8 ピクセルの間隔を空ける必要があります。

タップ ターゲットをテストする

ターゲットがテキストで、em や rem などの相対値を使用してテキストとパディングのサイズを調整した場合は、DevTools を使用して、その領域の計算値が十分な大きさかどうかを確認できます。以下の例では、テキストとパディングに em を使用しています。

リンクの a を調べ、Chrome DevTools で [Computed] ペインに切り替えて、ボックスのさまざまな部分を調べて、解決されるピクセルサイズを確認します。Firefox の DevTools に [レイアウト] パネルがあります。このパネルには、検査された要素の実際のサイズが表示されます。

メディアクエリを使用してタッチスクリーンの使用を検出する

単純にビューポートの寸法をテストしてから、小さい寸法がスマートフォンやタブレットになる可能性が高いと推測してタッチスクリーンを使用するのではなく、実際のデバイスの機能に基づいてデザインを調整する、より確実な方法を利用できるようになりました。

メディアクエリでテストできるようになったメディア機能の 1 つは、ユーザーの主入力がタッチスクリーン（pointer）かどうか、および現在検出された入力のいずれかがタッチスクリーン（any-pointer）かどうかです。pointer 機能と any-pointer 機能は、fine または coarse を返します。細かいポインタは、マウスまたはトラックパッドを使用する人です。マウスが Bluetooth でスマートフォンに接続されていても、coarse ポインタはタッチスクリーンを示します。タッチスクリーンはモバイル デバイスですが、ノートパソコンや大型タブレットの場合もあります。

メディアクエリ内の CSS を調整してタップ ターゲットを増やす場合は、きめが粗いポインタをテストすることで、すべてのタッチスクリーン ユーザーのタップ ターゲットを増やすことができます。これにより、スマートフォンがスマートフォンでも大型デバイスでも、タップ領域をより広くすることができます。

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

ポインタなどのインタラクション メディア機能について詳しくは、レスポンシブ ウェブ デザインの基本をご覧ください。