#174
UI設計パターン
#174たっちたーげっと
タッチターゲット
別名・表記:Touch TargetClick TargetHit Areaタップ領域
UIXHERO Definition
「指で押しやすいボタンの大きさ・間隔」。小さすぎるとイライラするし、誤爆する。
概要
マウスカーソル（1ピクセル単位の精度）とは異なり、指での操作は「接地面」が大きく、精度が低い。 そのため、UI要素（ボタンやリンク）は、指の腹で隠れてしまわない程度の十分なサイズと、隣接する要素との間隔（マージン）が必要になる。
UXでの活用
- 最小サイズ: 一般的な成人の指の腹のサイズ（約10mm）を考慮し、44〜48ピクセル四方以上のサイズを確保する。
- マージン: ボタン同士が近すぎると、意図しない方を誤って押してしまう（Fat Finger Problem）。最低でも8ピクセル以上の間隔を空けることが推奨される。
💡 使いどころ
モバイルアプリやタッチパネル端末のUI設計時。特に、歩きながら操作する可能性がある場合や、高齢者向けのサービスでは重要度が増す。
⚠️ 注意点・誤用
見た目のサイズと、実際の反応領域（当たり判定）は一致している必要はない。アイコン自体は小さくても、透明な余白を含めて大きく反応するように実装するのが定石。
具体例
- Apple Human Interface Guidelines: 44x44pt 以上を推奨
- Material Design: 48x48dp 以上を推奨
出典・参考文献:
- Apple Human Interface Guidelines – Touch Targets
- Google Material Design – Touch Targets