デザインをモバイル デバイスに表示する場合は、 ボタンやリンクなどのインタラクティブな要素は十分な大きさで、 周囲に十分なスペースを確保して 他の要素と誤って重なり合うことなく、簡単に押すことができます。 これはすべてのユーザーにメリットをもたらします。 特に運動機能障がいのある方にも役立ちます
推奨されるタップ ターゲットの最小サイズは、デバイス非依存ピクセルで約 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;
}
}
ポインタなどのインタラクション メディア機能の詳細 レスポンシブ ウェブ デザインの基本をご覧ください。