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

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

デザインがモバイル デバイスに表示されたときに、ボタンやリンクのようなインタラクティブな要素のサイズを大きくして周囲にもスペースを確保し、意図しない他の要素との重なりを回避し、簡単に押せるようにする必要があります。こうすれば多くのユーザー、特に運動障害のあるユーザーにとってメリットがあります。

推奨される最小のタッチ ターゲット サイズは、適切にモバイル ビューポートが設定されたサイトで 48dip（デバイス非依存ピクセル）です。たとえば、アイコン自体のサイズが 24×24 ピクセルしかない場合も、パディングに余裕を持たせれば 48×48 ピクセルのタップ ターゲット領域を確保できます。48x48 ピクセル領域は約 9mm に相当します。これは、指の腹部分と同じくらいのサイズです。

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

タップ ターゲットは、あるタップ ターゲットを押したユーザーの指が、意図せず別のタップ ターゲットをタップしないように、水平方向と垂直方向に約 8 ピクセルの間隔を空ける必要があります。

タップ ターゲットのテスト

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

リンクの a を調べ、Chrome DevTools で [計算されたペイン] に切り替えます。ここで、ボックスのさまざまな部分を調べて、解像度がどのピクセルサイズになるかを確認できます。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;
  }
}

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