タップ領域
スマホでボタン・リンクをタップする際の有効範囲。視覚的な大きさより少し広めに取るのが推奨。iOS のヒューマンインターフェイスガイドラインで 44×44pt、Android のマテリアルデザインで 48×48dp、WCAG 2.5.5(AAA)で 44×44 CSS px、WCAG 2.2 で「ターゲットサイズ最小 24×24 CSS px(AA)」が基準として示されている。
本書のスタンス(Lesson 4-4)は「ボタンを大きくしすぎても誤タップの罠がある」。利用シーンを想定した最適サイズ設計が必要。CV ボタンなど主要動線は確実に押せる 48px 以上、補助的なリンクは 32〜40px、隣接要素との間隔(タップ間距離)8〜16pxを確保する。「大きく目立つ + ぎっしり詰める」の両立は無理。
設計の論点:視覚的サイズと有効範囲の差(視覚 32px のボタンでも CSS の padding で有効範囲を 44px に拡大できる)、隣接要素との間隔(誤タップ防止)、SP では片手操作で親指が届く範囲(画面下半分中央)を優先、テキストリンク内のリンクは前後の余白も含めてタップ範囲を確保。Lighthouse のアクセシビリティ監査でも自動チェックされる項目。
落とし穴は、視覚サイズ 24px のボタンを実装時にそのまま使ってタップしにくい、隣接した「削除」「キャンセル」ボタンの誤タップが多発、本文中のリンクが小さくて行間も詰まっていて押しにくい、SP のフッターメニューが画面下端のホームバー領域と重なって誤操作、テキストリンクが文字色だけで判別不可で押す気が起きない、フォームの送信ボタンが画面外にあって複数回タップで連打。
言葉をよく利用する人
- デザイナー
- コーダー / フロントエンドエンジニア
- Web 担当者(発注側)
- ディレクター
会話上での使用例
モバイル UI チェックでボタンが小さいと指摘した場面
-
Web 担当者
実機で見ると、CV ボタンが押しにくいです。タップ領域を確認できますか
-
コーダー
視覚サイズ 32px でした。padding を上下 8px ずつ追加して有効範囲を 48px に拡大、横も同様に。Lighthouse の「タップターゲットサイズ」スコアも改善見込みです
隣接ボタンの誤タップ問題
-
カスタマーサポート
「キャンセル」と「削除」を間違えたという問い合わせが続いてます
-
Web 担当者
ボタン間のタップ領域距離が 4px しか空いていません。16px 以上に空けて、デザイン的にも「キャンセル」を控えめに、「削除」を警告色で明確に区別する設計に変更します