フレームワーク活用ガイドひとことで言うと#
ターゲット（ボタンなど）に到達する時間は、ターゲットまでの距離が遠いほど長く、ターゲットのサイズが小さいほど長くなるという法則。UIデザインでは「重要な要素は大きく、近くに置く」という原則の根拠になっている。
押さえておきたい用語#
- タップターゲット
- モバイルで指がタッチできる有効領域。Apple推奨は最小44x44pt、Google推奨は最小48x48dp。
- ヒットエリア
- 視覚的なボタンサイズとは別に設定できる操作可能な範囲。見た目が小さくてもヒットエリアを広げれば操作性は向上する。
- エッジターゲット
- 画面の端や角に配置された要素。カーソルが物理的に止まるため、実質的にサイズ無限大となり操作が速い。
- 破壊的アクション
- 削除・解約など取り消しが難しい操作。あえてフィッツの法則の逆（小さく・遠く）を適用して誤操作を防ぐ。
フィッツの法則の全体像#
こんな悩みに効く#
- ユーザーがボタンを押し間違える・タップミスが多い
- よく使う機能なのに、操作に時間がかかっている
- モバイルで「小さすぎて押せない」というフィードバックが来る
基本の使い方#
フィッツの法則は数式で表されるが、デザイナーが覚えるべきポイントは2つだけ。
- 距離が近いほど、操作が速い：関連する操作は近くにまとめる
- サイズが大きいほど、操作が速い：重要なボタンは大きくする
数式: T = a + b × log₂(D/W + 1)（T=時間、D=距離、W=ターゲット幅）
直感的には「的が大きくて近ければ当てやすい」というシンプルな話。
頻繁に使う操作・重要な操作の配置をフィッツの法則に基づいて見直す。
- 主要CTAボタンは画面の目立つ位置に十分なサイズで配置する
- 連続して操作する要素（フォーム入力→送信ボタン）は近くにまとめる
- デスクトップでは画面端・角を活用する（端はカーソルが止まるため実質的にサイズ無限大）
Macのメニューバーが画面最上部に固定されているのは、フィッツの法則を応用した設計の好例。
特にモバイルでは、指で正確にタップできるサイズを確保する。
- Apple推奨: 最小44×44pt
- Google Material Design推奨: 最小48×48dp
- タップ領域同士の間隔も8dp以上あけて、誤タップを防ぐ
視覚的なボタンサイズが小さくても、タップ領域（ヒットエリア）を広く取ることで操作性を改善できる。
取り消しが難しい危険な操作には、あえてフィッツの法則の逆を使う。
- 「削除」ボタンは小さく、主要アクションから離して配置
- 確認ダイアログの「削除する」ボタンを「キャンセル」より目立たなくする
- 誤操作を防ぐため、意図的に操作を難しくする
すべてを押しやすくするのではなく、「押しやすくすべきもの」と「押しにくくすべきもの」を区別する。
具体例#
改善前:
- 「送信」ボタンが画面右上の小さなアイコン（24×24px）で、本文入力欄から遠い
- 「下書き保存」と「送信」が隣接し、同じサイズで配置されている
改善後:
- 「送信」ボタンをキーボードの直上に配置（入力→送信の距離を最小化）
- 「送信」ボタンをブランドカラーの大きなボタンに変更（48×48dp以上）
- 「下書き保存」は控えめなテキストリンクにし、「送信」と視覚的に差別化
「送信」の操作時間が平均0.8秒短縮。「下書きを誤って送信した」クレームがゼロになった。
課題: 商品詳細ページの「カートに入れる」ボタン（36×36px）と「お気に入り」ボタン（32×32px）が8px間隔で隣接。誤タップ率が12%。
改善:
- 「カートに入れる」を画面幅100%のフローティングバーに変更（高さ56px）
- 「お気に入り」アイコンを商品画像の右上に移動（距離を確保）
- タップ領域を視覚サイズより16px広く設定
誤タップ率が12%から1.3%に減少。カート追加率は18%から27%に向上した。
課題: 管理画面の「全データ削除」ボタンが「保存」ボタンの隣にあり、月に2〜3件の誤操作が発生。データ復旧に毎回4時間かかる。
改善（フィッツの法則の逆適用）:
- 「全データ削除」を設定画面の最下部に移動（メイン操作エリアから物理的に離す）
- ボタンサイズを小さく、色をグレーに変更（目立たなくする）
- クリック後に「削除」とタイプさせる確認ステップを追加（意図的に操作を難しくする）
誤操作が月2〜3件からゼロに。年間のデータ復旧コスト（約96時間分の人件費）が完全に解消された。
やりがちな失敗パターン#
- すべてのボタンを大きくしてしまう — 全部が大きいと優先順位がわからなくなる。フィッツの法則は「重要なものほど大きく近く」であり、すべてを等しく大きくする法則ではない
- デスクトップ基準でモバイルを設計する — マウスポインタの精度と指の精度はまったく異なる。モバイルでは最低44ptのタップ領域を守ること
- 距離だけを考えてサイズを無視する — ボタンを近くに配置しても、サイズが小さければ操作は難しい。距離とサイズの両方を最適化する
- 親指の届く範囲を考慮しない — モバイルの片手操作では親指が届く範囲が限られる。重要なCTAは画面下部の「親指ゾーン」に配置する
まとめ#
フィッツの法則は「大きくて近いターゲットは操作しやすい」という、人間の運動特性に基づいたシンプルかつ強力な法則。UIデザインの配置やサイズに迷ったとき、この法則に立ち返ることで合理的な判断ができる。まずは自分のプロダクトの主要CTAの位置とサイズを見直すことから始めよう。