3行でわかるフィッツの法則
- フィッツの法則：ターゲットは「近いほど・大きいほど」押しやすい
- UIでの活用：ボタンサイズ、配置、タッチターゲットの最適化に使える
- 設計の要点：重要な操作は大きく、近く、押しやすい位置に置く
フィッツの法則とは
フィッツの法則（Fitts's Law）とは、1954年に心理学者ポール・フィッツが提唱した人間工学のモデルで、「ターゲットを指し示す・クリックするのにかかる時間は、ターゲットまでの距離が遠いほど長く、ターゲットの大きさが小さいほど長くなる」という法則です。
| 項目 | 内容 |
|---|---|
| 英語名 | Fitts's Law |
| 提唱者 | Paul Fitts（1954年） |
| 分野 | 人間工学・HCI（ヒューマン・コンピュータ・インタラクション） |
| 一言で | 重要なボタンは大きく・近くに置け——それがUI設計の物理的根拠 |
要するに：押しやすいUIとは、近くて大きいターゲットを設計したUIである。
数式は T = a + b × log₂(2D/W) で表されます（T：到達時間、D：距離、W：ターゲットの幅）。対数関数であるため、ターゲットを大きくする効果は「小→中」で最も大きく、「大→極大」では効果が頭打ちになります。UIデザインにおける含意はシンプルです——押しやすいボタンとは、近くて大きいボタンです。
タップして拡大表示クリックして拡大表示
この記事でわかること
- フィッツの法則の意味と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デザインに活かす方法
フィッツの法則を理解したうえで、設計に接続するための実践的なポイントを整理します。
UX心理（Why） → フィッツの法則：到達時間は距離と大きさに依存する UI原則（What） → クリック領域・到達しやすさ：ターゲットサイズ・位置・間隔を最適化する UIコンポーネント（How） → Button / Slider / App Rail
設計チェックリスト
- すべてのインタラクティブ要素が44×44pt（iOS）/ 48×48dp（Android）以上のタッチターゲットを持っているか
- 頻繁に使う操作が、ユーザーの手（親指）が届きやすい位置に配置されているか
- 破壊的なアクション（削除など）と通常操作の間に十分な間隔があるか
- テキストリンクにもパディングを持たせて、クリック領域を拡大しているか
- PCでは画面端やコーナーのメリット（無限のターゲットサイズ）を活用しているか
よくある質問
ボタンは大きければ大きいほど良いですか？
ある程度までは正しいですが、限界があります。フィッツの法則は対数関数的なので、小さすぎるボタンを標準サイズにする効果は絶大ですが、すでに十分大きいボタンをさらに大きくしても到達時間の短縮効果は頭打ちになります。逆に大きすぎるボタンは他の情報のスペースを圧迫し、情報密度が下がります。
ハンバーガーメニューが左上にあるのは問題ですか？
右利きのユーザーがスマホを片手持ちする場合、左上は「最も遠い場所」です。ただし、メニューは使用頻度が低い操作であるため、あえて邪魔にならない遠い場所に配置するのは合理的な判断です。フィッツの法則は「すべてを近くに」ではなく「重要なものを近くに、重要でないものを遠くに」という優先順位の設計です。
スワイプ操作はフィッツの法則に関係しますか？
関係します。スワイプは方向さえ合っていればよいため、ターゲットのサイズが実質的に画面全体になります。フィッツの法則的には「非常に押しやすいボタン」と同義です。Tinderのインターフェースが成功したのは、小さなボタンをタップさせる代わりに、画面全体を使ったスワイプを採用したためです。
タッチパネルとマウス操作で設計は変わりますか？
変わります。マウスは「画面の端（無限のサイズ）」を活用できますが、タッチパネルではケースに指が当たるため端の恩恵が少なくなります。また、指はマウスカーソルより太いため、タッチ操作ではより大きなターゲットサイズと十分な間隔が必要です。
まとめ
- フィッツの法則: ターゲットへの到達時間は距離と大きさに依存する——UIの「押しやすさ」を定量的に設計するための物理的根拠。
- タッチターゲット: Apple 44pt / Google 48dp / WCAG 24px を基準に、十分なタップ領域を確保する。
- 配置の原則: 重要な操作は大きく・近く（親指ゾーン内）、破壊的操作は間隔を空けて誤操作を防ぐ。
- ヒックの法則との使い分け: フィッツは身体の操作効率、ヒックは脳の判断効率。UIでは両方を同時に最適化する。
次に読む
- ヒックの法則とは？ — 選択肢が増えるほど意思決定に時間がかかる認知法則
- クリック領域・到達しやすさ — フィッツの法則をUI設計ルールとして具体化した原則
- 親指ゾーン（Thumb Zone） — スマホ片手操作の到達範囲を設計に活かす
- Button（ボタン） — フィッツの法則が最も直接的に適用されるコンポーネント
