touch-target-design

タッチターゲットの設計

障害、年齢、環境、デバイスなどの理由で精密な操作が難しい人でも使えるよう、インタラクティブ要素は十分な大きさと間隔を確保し、誤操作に寛容な設計にします。

最小サイズ

タッチ（モバイル、タブレット）

• 最小：44×44 CSS ピクセル（WCAG 2.2 レベル AA）
• 推奨：48×48 CSS ピクセル（Google Material のガイドライン）
• 重要度の高い操作や頻繁に使うターゲット：56×56 以上

ポインター（デスクトップ）

• 最小：24×24 CSS ピクセル（WCAG 2.2 レベル AA）
• 推奨：よく使う操作では32×32
• 破壊的な操作や取り消せない操作では、ターゲットを大きくするとミスを減らせます

ターゲット間の間隔

• 最小：隣接するインタラクティブ要素の間に8pxの余白を設けます
• 推奨：頻繁に使う要素を横並びにする場合は12〜16px
• 破壊的な操作（削除）は、間隔や視覚的な区切りを設けずに、よく使う操作（保存）の隣に配置してはいけません

デザインパターン

広めのヒットエリア

• タップ可能な領域は、表示されている要素より大きくできます
• アイコンやテキストの見た目のサイズだけに頼らず、パディングを使います
• リスト項目ではテキストだけでなく、行全体をタップ可能にします
• リンクテキストは、適切なタップターゲットになるよう十分に具体的にします（「こちら」ではなく「レポート全文を読む」）

誤操作に寛容な操作

• タッチした瞬間に操作を実行せず、指を離したときに実行します（指をスライドさせてキャンセルできるようにします）
• 破壊的な操作には、1回のタップだけでなく、意図的な2回目のタップまたは確認を求めます
• 震えのあるユーザーにとって信頼性が低いため、ダブルタップを要件にしないでください
• 長押しだけを機能にアクセスする唯一の方法にしないでください

安全性を考慮した間隔

• 「確定」と「キャンセル」の操作は、距離または視覚的な強弱によって分けます
• 破壊的な操作は、よく使う操作から離して配置します
• 関連する操作はまとめ、関連しない操作は分けます
• モバイルでは、主要な操作を親指が届く範囲（画面の下半分）に配置します

精密な操作に代わる方法

• 複雑なインターフェイスには、拡大機能を提供します
• モバイルでピンチズームを許可します（決して無効にしないでください）
• 精密な操作（カラーピッカー、スライダー）には、テキスト入力による代替手段を用意します
• 項目数の多いドロップダウンメニューには、検索／フィルターを追加します

評価項目

1. タッチデバイスのすべてのインタラクティブ要素が、少なくとも44×44pxありますか？
2. 隣接するターゲット間に十分な間隔がありますか？
3. 破壊的な操作は、よく使う操作から分けられていますか？
4. 精密なタイミングや正確なポインター操作なしで、すべての操作を完了できますか？
5. スライダーやドラッグ＆ドロップなど、精密さに依存する操作には、常に代替手段がありますか？