本文へスキップ

フィッツの法則

標的に到達するまでの時間は、標的までの距離が長いほど、標的が小さいほど長くなる。近くて大きい標的ほど速く正確に押せる。

Fitts's Law

なぜ効くか

1954 年に Paul Fitts が、棒で 2 枚の金属板を交互に叩く実験から導いた運動の法則で、到達時間が距離と幅の比の対数に比例することを示した。マウスやタッチにもそのまま当てはまり、画面上では「どこに・どの大きさで置くか」の問題になる。Web UI では、画面の端や角はポインタが止まるので実質的に無限の幅を持つ標的になる（スマホの下端タブバー、PC の画面端メニュー）。逆に、小さなアイコンや行間の細い罫線は、見た目より当てにくい。タッチでは指の接触面が大きいため、見た目の大きさと当たり判定を分けて考える必要があり、WCAG 2.2 は標的の最小寸法を 24×24 CSS px と定めている。

UIでの当て方

  1. 01タップ標的は見た目より当たり判定を大きくする。行全体をボタンにし、アイコンの周囲に透明な余白（padding）を足す。
  2. 02よく使う操作は画面の端や角、親指が届く下側に置く。スマホの主ナビは下端の帯にし、各項目は横幅いっぱいに広げる。
  3. 03連続して押す操作（数量の＋−、前後移動）は隣り合わせに置き、往復の距離を短くする。
  4. 04ポインタが標的へ向かっているとき、周囲の余白でも反応させる（吸い付き・傾き）。標的を「近づける」のと同じ効果がある。

誤用・反例

  • 見た目だけ大きくして当たり判定は小さいまま（アイコンの 16px だけが押せる）。
  • 画面の角に「削除」など取り返しのつかない操作を置く。押しやすさは危険な操作には逆効果になる。

この原則を体現するパーツ

  • ホバー

    マグネティックボタン

    Magnetic Button

    カーソルに吸い付くように動くボタン。近づくとぬるっと反応して、つい動かしたくなる。

    • JS
    コードを見る →
  • ホバー

    3Dチルトカード

    3D Tilt Card

    カーソルの位置に合わせてカードが立体的に傾く。カード周辺の広い範囲で反応するので、離れた場所からでも動く。

    • JS
    コードを見る →
  • クリック

    タブバー解説あり

    Tab Bar

    画面下部に固定するモバイル定番のタブバー。アイコン＋ラベルの項目をタップすると選択が切り替わり、現在地が藍色で示される。

    • JS
    コードを見る →
  • クリック

    浮いた主アクションのボトムナビ実例あり

    Bottom Navigation with Raised Action

    5枠のボトムナビ。中央に浮いた「投稿」ボタンを置き、選んだタブの下でインジケータが滑る。通知タブには未読バッジ。タップで画面のタイトルが変わる。

    • JS
    コードを見る →
  • クリック

    タッチリップル付きリスト実例あり

    Touch Ripple List

    Android 型のリスト。押した位置から波紋が広がって「どこを押したか」を返す。スクロール中は指が動いた量で判定してリップルを出さず、タップだけに反応する。

    • JS
    コードを見る →
  • スクロール

    スクロールで現れる固定CTA実例あり

    Scroll-Revealed Sticky CTA

    商品ページを読み進めて価格が画面外に消えたところで、下から価格＋「カートに入れる」の帯が現れる。上へ戻って価格が見えると帯は引っ込む。

    • JS
    コードを見る →
  • クリック

    フローティングメニュー(FAB)

    FAB Speed Dial

    右下の+ボタンをタップすると複数アクションが縦に展開するスピードダイアル。

    • JS
    コードを見る →

関わるカテゴリ

出典