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

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

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

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

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

また、タップ ターゲットの間隔は 8 ピクセルほどにします。 水平方向と垂直方向の 両方に配置して ユーザーが 1 つのタップ ターゲットを指で押したときに、意図せず別のタップ ターゲットに接触することがないようにする必要があります。

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

ターゲットがテキストで、テキストとパディングのサイズの設定に 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;
  }
}

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