フィッツの法則（Fitts’s Law）とは、ターゲットへの到達時間がターゲットまでの距離とターゲットの大きさに依存するという人間工学の法則です。
要するに「近くて大きいボタンは押しやすく、遠くて小さいボタンは押しにくい」という物理的根拠です。
スマートフォンで小さなボタンを押そうとして、隣のボタンを誤タップした経験はありませんか。その原因は、1954年に発見されたこの法則で説明できます。この記事では、フィッツの法則の定義・UXにおける重要性・UIデザインへの具体的な活かし方を、UIXHEROの3レイヤー構造に沿って解説します。
この記事でわかること
- フィッツの法則の定義と数式の意味
- UXデザインにおけるフィッツの法則の重要性
- ボタンサイズ・配置・タッチターゲットの具体的な設計基準
- ヒックの法則との違いと使い分け
- UIデザインへの具体的な活かし方（UI原則・UIコンポーネントとの接続）
UIXHEROではUI設計を UX心理（Why） → UI原則（What） → UIコンポーネント（How） の3レイヤーで体系化しています。
- 心理学を理解する → UX心理119法則
- 設計原則を学ぶ → UIデザイン原則65
- 実装パターンを知る → UIコンポーネント完全ガイド
→ サイト全体の入口は UIデザイン完全ガイド から
フィッツの法則とは
フィッツの法則（Fitts's Law）とは、1954年に心理学者ポール・フィッツが提唱した人間工学のモデルで、「ターゲットを指し示す・クリックするのにかかる時間は、ターゲットまでの距離が遠いほど長く、ターゲットの大きさが小さいほど長くなる」という法則です。
| 項目 | 内容 |
|---|---|
| 英語名 | Fitts's Law |
| 提唱者 | Paul Fitts（1954年） |
| 分野 | 人間工学・HCI（ヒューマン・コンピュータ・インタラクション） |
| 一言で | 近くて大きいボタンは押しやすく、遠くて小さいボタンは押しにくい |
要するに：フィッツの法則 = 「重要なボタンは大きく・近くに置け」という物理的根拠
数式は T = a + b × log₂(2D/W) で表されます（T：到達時間、D：距離、W：ターゲットの幅）。対数関数であるため、ターゲットを大きくする効果は「小→中」で最も大きく、「大→極大」では効果が頭打ちになります。UIデザインにおける含意はシンプルです—— 押しやすいボタンとは、近くて大きいボタン です。
なぜUXデザインで重要なのか
フィッツの法則がUXデザインで重要な理由は3つあります。
1. 操作の物理的コストを最小化できる
ユーザーがUIを操作するたびに「距離を移動し、ターゲットに到達する」という物理的コストが発生します。このコストが高いと、操作速度が落ち、ミスが増え、疲労が蓄積します。フィッツの法則は、ボタンのサイズと配置を最適化することで、この物理的コストを定量的に改善するための根拠を与えます。
2. 誤操作（ミスタップ）を減らせる
小さなターゲットは到達時間が長いだけでなく、誤操作の確率も高くなります。特にモバイルデバイスでは、指の腹（約10mm）でタップするため、ターゲットが密集しているとミスタップが頻発します。Apple（44×44pt）やGoogle（48×48dp）のガイドラインは、フィッツの法則に基づいた最小タッチターゲットの基準です。
3. アクセシビリティの基盤になる
手の震えがあるユーザーや高齢者にとって、小さなボタンは「操作に時間がかかる」ではなく「操作不可能」な障壁になります。フィッツの法則に基づいたターゲットサイズの確保は、アクセシビリティの必須要件です。
UIデザインにおけるフィッツの法則の具体例
フィッツの法則はあらゆるUIの操作設計に適用されます。
ケース1：タッチターゲットのサイズ設計
モバイルUIにおいて、タップ可能な最小エリアはプラットフォームごとにガイドラインが定められています。これより小さいと操作時間が増え、ミスタップが急増します。
| プラットフォーム | 最小タッチターゲット | 推奨間隔 |
|---|---|---|
| Apple（iOS） | 44×44pt | 8pt以上 |
| Google（Android） | 48×48dp | 8dp以上 |
| WCAG 2.2 | 24×24px（最低基準） | — |
重要なのは「見た目のサイズ」ではなく「タップ判定の領域」です。アイコンが24pxでも、透明なパディングでタップ領域を44pt以上に拡大できます。
ケース2：画面端の「無限のターゲットサイズ」
PCのマウス操作では、画面の四隅や端はカーソルが物理的に突き抜けないため、実質的にサイズが無限大になります。これがWindowsのスタートボタン（左下隅）やMacのメニューバー（上端）が画面端に配置されている理由です。
| 配置 | フィッツの法則的な評価 | 例 |
|---|---|---|
| 画面の四隅 | 最も押しやすい（無限×無限） | Windowsのスタートボタン |
| 画面の端 | 非常に押しやすい（無限×有限） | Macのメニューバー |
| 画面中央付近 | 距離・サイズに依存 | ダイアログのボタン |
ケース3：スマホの親指ゾーン（Thumb Zone）
スマートフォンを片手で持つとき、親指が自然に届く範囲は画面下部に集中します。重要なアクションボタン（投稿・送信・購入など）を画面下部に配置し、使用頻度の低い操作（設定・メニューなど）を画面上部に配置する設計は、フィッツの法則の直接的な応用です。
ケース4：SaaSのモーダルボタン配置
SaaSツールの削除確認モーダルでは、「Cancel」と「Delete」の2つのボタンが並びます。フィッツの法則の観点では、破壊的アクション（Delete）と安全なアクション（Cancel）の間に十分な間隔を確保し、誤クリックを防ぐ必要があります。
| ボタン配置 | フィッツの法則的な評価 | 設計ポイント |
|---|---|---|
| CancelとDeleteが隣接（間隔0） | 誤操作リスクが高い | 最低8px以上の間隔を確保 |
| Deleteが小さく・色が淡い | 「押しにくさ」で誤操作を抑制 | サイズではなく確認ダイアログで守る |
| FAB（Floating Action Button） | 画面下部に固定＝親指ゾーン内 | 最も頻繁な操作に限定する |
また、Floating Action Button（FAB）は画面右下に固定配置される大きなボタンで、親指ゾーン内かつ十分なサイズを持つため、フィッツの法則的に最も押しやすいUIパターンの一つです。
フィッツの法則とヒックの法則の違い
フィッツの法則はヒックの法則と混同されやすい概念です。両者はUIデザインにおける「操作コスト」の異なる側面を扱います。
| 項目 | フィッツの法則 | ヒックの法則 |
|---|---|---|
| 定義 | ターゲットへの到達時間は距離と大きさに依存する | 選択肢が増えるほど意思決定時間は対数的に増加する |
| 扱うコスト | 物理的コスト（運動） | 認知的コスト（判断） |
| 最適化の方向 | ボタンを大きく・近くする | 選択肢を減らす・段階的に見せる |
| UI例 | タッチターゲットのサイズ確保 | ナビゲーションメニューの項目数を絞る |
フィッツの法則は「身体の操作効率」、ヒックの法則は「脳の判断効率」を最適化します。UIデザインでは両方を同時に考慮する必要があります。たとえば、ボタンが大きくても選択肢が多すぎれば（ヒックの法則違反）、ユーザーは迷います。逆に選択肢が絞られていても、ボタンが小さすぎれば（フィッツの法則違反）、ユーザーは押し間違えます。
フィッツの法則をUIデザインに活かす方法
フィッツの法則を理解したうえで、UIXHEROの3レイヤー構造に沿って設計へ接続します。
UX心理（Why） フィッツの法則：ターゲットへの到達時間は距離と大きさに依存する
↓
UI原則（What） クリック領域・到達しやすさ：ターゲットサイズ・位置・間隔を最適化する
↓
UIコンポーネント（How） Button（ボタン） / Slider（スライダー） / App Rail（アプリレール）
設計チェックリスト
- すべてのインタラクティブ要素が44×44pt（iOS）/ 48×48dp（Android）以上のタッチターゲットを持っているか
- 頻繁に使う操作が、ユーザーの手（親指）が届きやすい位置に配置されているか
- 破壊的なアクション（削除など）と通常操作の間に十分な間隔があるか
- テキストリンクにもパディングを持たせて、クリック領域を拡大しているか
- PCでは画面端やコーナーのメリット（無限のターゲットサイズ）を活用しているか
関連するUI原則
- クリック領域・到達しやすさ (Fitts's Law / Touch Targets) — フィッツの法則をUI設計ルールとして具体化した原則
- アフォーダンス (Affordance) — 「押せそう」に見える設計がフィッツの法則の効果を最大化する
- 誤操作を防ぐ (Error Prevention) — 適切なターゲットサイズと間隔がミスタップを防ぐ
関連するUIコンポーネント
- Button（ボタン） — フィッツの法則が最も直接的に適用されるコンポーネント
- Slider（スライダー） — つまみのサイズと操作精度がフィッツの法則に直結する
- App Rail（アプリレール） — 画面端に配置されるナビ。無限のターゲットサイズの恩恵を受ける
- Text Input（テキスト入力） — フォーカス領域の大きさが入力開始の速度に影響する
よくある質問
ボタンは大きければ大きいほど良いですか？
ある程度までは正しいですが、限界があります。フィッツの法則は対数関数的なので、小さすぎるボタンを標準サイズにする効果は絶大ですが、すでに十分大きいボタンをさらに大きくしても到達時間の短縮効果は頭打ちになります。逆に大きすぎるボタンは他の情報のスペースを圧迫し、情報密度が下がります。
ハンバーガーメニューが左上にあるのは問題ですか？
右利きのユーザーがスマホを片手持ちする場合、左上は「最も遠い場所」です。ただし、メニューは使用頻度が低い操作であるため、あえて邪魔にならない遠い場所に配置するのは合理的な判断です。フィッツの法則は「すべてを近くに」ではなく「重要なものを近くに、重要でないものを遠くに」という優先順位の設計です。
スワイプ操作はフィッツの法則に関係しますか？
関係します。スワイプは方向さえ合っていればよいため、ターゲットのサイズが実質的に画面全体になります。フィッツの法則的には「非常に押しやすいボタン」と同義です。Tinderのインターフェースが成功したのは、小さなボタンをタップさせる代わりに、画面全体を使ったスワイプを採用したためです。
タッチパネルとマウス操作で設計は変わりますか？
変わります。マウスは「画面の端（無限のサイズ）」を活用できますが、タッチパネルではケースに指が当たるため端の恩恵が少なくなります。また、指はマウスカーソルより太いため、タッチ操作ではより大きなターゲットサイズと十分な間隔が必要です。
まとめ｜フィッツの法則は「押しやすいUI」の物理的根拠
フィッツの法則は、ボタンのサイズと配置を「なんとなく」ではなく「定量的根拠」に基づいて設計するための人間工学の法則です。
本記事では、フィッツの法則の定義・UXにおける重要性・UIデザインへの活かし方を解説しました。
- フィッツの法則とは、ターゲットへの到達時間が距離と大きさに依存する法則
- UXデザインでは、タッチターゲットのサイズ確保・配置の最適化・誤操作防止に活用する
- UIでは、Button・Slider・App Railなどのコンポーネント設計に直接適用できる
さらに体系的に学びたい方は、以下のハブ記事から各レイヤーを深掘りできます。
- UX心理119法則 — UIデザインの「なぜ」を理解する
- UIデザイン原則まとめ — 心理法則をUI設計ルールに翻訳する
- UIコンポーネント完全ガイド — 原則を実装可能なUIパターンにする
フィッツの法則とは、ターゲットへの到達時間がターゲットまでの距離と大きさに依存するという人間工学の法則であり、「押しやすいUI」の設計根拠です。
UXデザインを体系的に学ぶ
UX心理の「Why」を理解したら、次は「What（UI原則）」と「How（UIコンポーネント）」も学ぼう。
- UIデザイン完全ガイド — UX心理・UI原則・UIコンポーネントの3レイヤーを一本化
- UIデザイン原則まとめ — 心理法則をUI設計のルールへ翻訳する65原則
- UIコンポーネント完全ガイド — 原則を「実装可能な部品」として形にする60コンポーネント
- UX心理学まとめ — UIデザインの「なぜ」を説明する119法則