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

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

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

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

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

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

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

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

要素のサイズを示す Firefox DevTools の [Layout] パネル

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

単にビューポートの寸法をテストして、 その小さなディメンションはスマートフォンやタブレットである 可能性が高いため より堅牢にテストできるため、 実際のデバイスの機能に基づいて設計します。

メディアクエリでテストできるメディア機能の 1 つ ユーザーのメイン入力がタッチスクリーン(pointer)であるかどうか 現在検出された入力のいずれかがタッチスクリーン(any-pointer)であるかどうか。 pointer 特徴と any-pointer 特徴は fine または coarse を返します。 ファインポインタとは、マウスやトラックパッドを使っている人のことです。 マウスが Bluetooth でスマートフォンと 接続されていても変わりません coarse ポインタはタッチスクリーンを示します。 モバイル デバイスのほか、ノートパソコンや大型タブレットなどがあります。

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

.container a {
  padding: .2em;
}

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

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