ボタンは大きく近くに置くべき理由を数式で知る【フィッツの法則】

スマホで小さな『×』ボタンを押そうとして、何度も外してイラッとしたことはないでしょうか。逆に、画面のすぐ近くにある大きなボタンは、考えなくてもサッと押せます。MacのDockでカーソルを近づけるとアイコンが大きく見えるのも、同じ『狙いやすさ』を考えるヒントになります。実は、ボタンまでの距離と大きさが操作時間にどう影響するかは、心理学・HCIの「フィッツの法則」で数式として説明できます。

目次非表示

フィッツの法則: 「ターゲットまでの時間」は計算できる
Webサイトへの応用1: よく使うボタンは大きく、近くに
小さなアイコンには見た目以上のクリック領域を持たせる
Webサイトへの応用2: 画面の端は「無限の大きさ」として使える
まとめ

目次へ

フィッツの法則: 「ターゲットまでの時間」は計算できる

操作対象までの距離が遠いほど、また対象が小さいほど、そこへ正確にポインターや指を移動するのに時間がかかるという関係を「フィッツの法則」といいます。

💡 身近な5つの例

スマホの小さい「×」ボタンが押しづらくてイラッとする
よく使うボタンが画面の近くにあると操作が速い
ゲームで頻繁に使う操作ほど、大きく押しやすい位置にあると楽
遠くの小さなアイコンより、近くの大きなボタンの方が素早く押せる
スマホ下部のナビゲーションは、親指から近く比較的大きいため触りやすい

1954年、オハイオ大学の心理学者ポール・フィッツが提唱した「フィッツの法則」というモデルがあります。マウスなどのポインタを使って画面上のボタン(ターゲット)を操作する際、目的の場所にたどり着くまでの時間を、次の式で表せるというものです(HCI分野で広く使われるShannon formulationという表現です)。

T = a + b・log2(1 + D/W)

T: ターゲットまでの到達時間
D: ポインタの開始位置からターゲットの中心までの距離
W: ターゲットの大きさ
a・b: ポインタの移動開始・停止にかかる時間や速度に関する定数

数式のlogの部分は見慣れない人もいるかもしれませんが、注目してほしいのはDとWの関係です。この式が示しているのは、シンプルに言うと「ユーザーにポインタを合わせてもらいたいものは、現在のポイント位置より近くて、大きいほど時間が短くなる」ということ。「近くて大きいものほど押しやすい」という、感覚的にも納得しやすい話が、実は70年前に数式として証明されていたわけです。

Webサイトへの応用1: よく使うボタンは大きく、近くに

ブラウザの主要な操作ボタンや検索ボックスが画面上部にまとまっているのも、多くのWebサイトのメインナビゲーションがヘッダーにあるのも、フィッツの法則で説明がつきます。すべての要素を大きく近くに置くわけにはいかないので、想定するユーザーの行動や情報の優先度を考慮して、大きさ・配置の優先順位を決めることが、実務でのポイントです。

小さなアイコンには見た目以上のクリック領域を持たせる

UIではアイコン自体を巨大化しなくても、paddingでクリック・タップ領域を広げられます。

.icon-button {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
}

見た目は24pxのアイコンでも、操作領域はそれより広くできます。重要なのは見た目のサイズとヒットエリアを分けて考えることです。

💡 WCAG 2.2では24×24 CSS pxがAA基準

WCAG 2.2のSuccess Criterion 2.5.8 Target Size (Minimum)では、ポインター入力のターゲットについて、原則として24×24 CSSピクセル以上、または十分な間隔を確保することをAA基準としています。例外条件もあるため「すべてのボタンを24pxにすれば合格」と単純化はできません。また、これは”最適な押しやすさ”ではなくアクセシビリティ上の最低基準であり、製品やプラットフォームによってはより大きなターゲットを推奨します。

Webサイトへの応用2: 画面の端は「無限の大きさ」として使える

Mac OSのDockが画面の端に配置されているのには理由があります。ポインタは画面の端でそれ以上動けずに止まるため、ディスプレイの縁そのものをターゲットの一部として使え、実質的に「無限の大きさ」の的として機能するためです。Webデザインでも、ページ最下部などに固定配置する「ページトップに戻る」ボタンは、画面右下などに置いて常に一定の距離感を保たせつつ、閲覧を阻害しない範囲でボタン自体は大きめにする、という配慮が効果的です。ただし、Webブラウザ内の要素ではOS画面端まで本当にターゲットが連続していないことも多いため、何でも「無限大」と考えないようにします。

⚠️ タッチデバイスには「距離が計算できない操作」もある

フィッツの法則は元々、マウス操作を想定したモデルですが、指でのタップ操作にもおおむね応用できます。ただし、iOSのフリック・スワイプのような「移動する時間や押す強さ」を意識した操作、あるいは画面を押し込むだけで完結する3Dタッチのような「距離の概念がほぼゼロ」の操作は、フィッツの法則の計算にそのまま当てはまりません。こうした新しいジェスチャー操作は、それ単体で誰にとっても分かりやすいとは限らないため、実機での検証(そのジェスチャーの存在自体をユーザーが把握できるか)がより重要になります。