クリック領域・到達しやすさ (Fitts's Law / Touch Targets)

スマートフォンで小さなボタンを押そうとして、隣のボタンを誤タップした経験はありませんか？PCでリストの各行に並んだ小さなアイコンボタンを、精密にクリックしなければならない場面は？——これらはすべて、クリック領域・到達しやすさの設計が崩れた結果です。

よくある失敗は「デザイン上のサイズ＝タップ領域」という思い込みです。アイコンが16pxでも、タップ領域が16pxのまま実装されると、指の腹（約10mm）で正確に押すことは困難です。特に歩きながら・片手で・急いでいる状態では、ミスタップ率が急上昇します。

また「削除ボタンを押しにくくしたい」という意図で小さくすることもありますが、それは誤操作防止ではなく操作性の低下です。削除には確認ダイアログを使い、ボタン自体は押しやすく保つべきです。

1. 原則の定義

クリック領域・到達しやすさとは、フィッツの法則（Fitts's Law）に基づき、ユーザーが目的のUI要素に素早く・正確に・ストレスなく到達できるよう、ターゲットのサイズ・位置・間隔を設計する原則。

本質は「操作の物理的コストを下げること」です。フィッツの法則は「ターゲットへの到達時間は、距離が近いほど・サイズが大きいほど短くなる」という法則です。UIにおいては「よく使うボタンは大きく・近く」「使わせたくない操作は遠く・小さく」という設計判断の根拠になります。

2. いつ使うか（適用場面）

特に重要になるケース

• モバイル・タッチUI: 指での操作はマウスより精度が低い。最低44×44pt（Apple）/ 48×48dp（Google）のタッチターゲットが必要。
• 高頻度操作のボタン: 送信・保存・次へなど、ユーザーが繰り返し押すボタンは大きく・押しやすい位置に配置する。主要導線のCTAほど、距離とサイズの影響を強く受ける。
• 破壊的操作の隣接: 「保存」と「削除」が隣り合っている場合、間隔が狭いと誤操作が起きる。十分なマージンを確保する。
• 高齢者・アクセシビリティ対応: 運動機能の制約があるユーザーには、標準より大きなターゲットが必要。

トレードオフが起きる場面

• 情報密度との兼ね合い: ボタンを大きくするほど、画面に表示できる情報量が減る。特にデータテーブルの行アクションでは、サイズと密度のバランスが必要。
• 意図的な摩擦: 「本当に削除しますか？」という確認が必要な操作は、あえて押しにくくすることで誤操作を防ぐ設計もある。ただしこれはボタンサイズではなくエラー予防として確認ダイアログで実現すべき。

3. なぜ重要か（設計判断の核）

クリック領域の設計は「見た目のサイズ」ではなく、「操作の物理的コスト」の設計である。

設計判断の基準

• 「このボタンを、急いでいる状態・片手操作・歩きながらでも正確に押せるか？」→ 押せなければタッチターゲットを拡大する。
• 「最も頻繁に使う操作は、最も押しやすい位置にあるか？」→ そうでなければ配置を見直す。

優先順位の考え方

• 1. 最小サイズの確保（最優先）: 44×44pt以上のタッチターゲットを全インタラクティブ要素に確保する。見た目のサイズが小さくても、透明な余白で当たり判定を拡大できる。
• 2. 間隔の確保: 隣接するボタン間に最低8px以上のマージンを設ける。
• 3. 高頻度操作の最適配置: よく使うボタンは親指が届きやすい画面下部・中央に配置する（サムゾーン設計）。

例外条件

• デスクトップPCのマウス操作では、1px精度のカーソルが使えるため、モバイルほど厳密なサイズ確保は不要。ただし小さすぎるターゲットは依然として操作コストを上げる。

4. 具体の設計ルール（チェックリスト）

最低ライン（Must - これ守らないと危険）

これがないと、ユーザーは正確な操作ができません。

タッチターゲットが最小サイズを満たしているか: すべてのタップ可能な要素が44×44pt（iOS）/ 48×48dp（Android）以上のタッチ領域を持っているか？アイコンが小さくても、透明なパディングで当たり判定を拡大しているか？
隣接するボタン間に十分な間隔があるか: 隣り合うトグル・スイッチ・チェックボックス・リンク・タップ要素の間に最低8px以上のマージンがあるか？密集して誤タップが起きやすい配置になっていないか？
破壊的操作と主要操作が隣接していないか: 「削除」「キャンセル」などの破壊的操作が、「保存」「送信」などの主要操作と隣り合っていないか？誤操作時のダメージが大きい操作は物理的に離す。

理想ライン（Better - できると強い/プロの品質）

「押しやすい」「届きやすい」「間違えない」状態です。

高頻度操作がサムゾーンにあるか: モバイルで最もよく使うボタンが、片手操作で親指が届きやすい画面下部・中央エリア（サムゾーン）に配置されているか？
見た目サイズと当たり判定が適切に分離されているか: アイコンボタンなど視覚的に小さい要素でも、透明なパディングで当たり判定を拡大しているか？（例：16pxアイコン＋16pxパディング＝48px当たり判定）
エッジ・コーナーを活用しているか: 画面端・コーナーはフィッツの法則上「無限に大きいターゲット」として機能する。メインCTAや頻繁に使うナビゲーションを画面端に配置しているか？

5. UI例

同じボタンでも、タッチターゲットの設計で操作のしやすさが大きく変わります。

改善プロセス

1. タッチターゲット監査: 開発者ツールや専用ツールで全インタラクティブ要素のタップ領域を計測し、44px未満のものをリストアップする。
2. 透明パディングで拡大: アイコンボタンなど視覚的に小さい要素は、paddingを追加して当たり判定を拡大する。見た目は変えずに操作性を改善できる。
3. 破壊的操作の分離: 「削除」「キャンセル」は主要CTAから物理的に離し、スタイルも差別化する（アウトラインボタン・テキストリンクなど）。

6. 関連リンク

• 関連リファレンス（理論）: フィッツの法則
• 用語集（定義）: タッチターゲット
• 関連するUI原則（横）: アフォーダンス (Affordance), 誤操作を防ぐ (Error Prevention), アクセシビリティ・コントラスト
• 関連するUIコンポーネント: Button（ボタン）, Slider（スライダー）, App rail（アプリレール）, Select（セレクト / プルダウンメニュー）, Checkbox（チェックボックス）, Pagination（ページネーション）

7. まとめ

今日から直せる一手 担当しているモバイルUIのボタンを1つ選んで、実際に指で押してみてください。「少し押しにくい」と感じたら、パディングを増やして当たり判定を44px以上に拡大してください。見た目を変えずに操作性を改善できます。

チームに共有するなら一言 「ボタンのサイズは、デザイナーの指ではなく、ユーザーの指で決める。」