フィッツの法則とUIの関係のメモ
ユーザー がボタンをクリックする、メニュー項目を選択する、フォームの入力欄に移動する。UIを操作するということは、画面上のある地点からある地点へと「移動して到達する」行為の連続です。この「移動して到達する」という、一見すると当たり前の動作には、1954年に心理学者ポール・フィッツが発見した明確な法則性があります。
今回は、フィッツの法則について、その理論的背景からUIデザインへの具体的な応用までを整理してみます。以前の記事でゲシュタルト原則やアフォーダンス、メンタルモデルといった認知科学的な概念を紹介してきましたが、フィッツの法則はそれらとはやや性格が異なり、人間の運動に関する法則です。認知や知覚ではなく、身体がどう動くかという運動制御の側面から、UIの使いやすさを考えるための知識として位置づけられます。
この記事のターゲット
UIデザインの判断に認知科学的な根拠を持ちたい方
ボタンやナビゲーションのサイズ・配置に迷うことがある方
フィッツの法則の名前は知っているが、具体的な内容を整理したい方
フィッツの法則とは何か
フィッツの法則は、ポール・フィッツが1954年に発表した、人間の運動制御に関する予測モデルです。フィッツは元々、第二次世界大戦中にアメリカ陸軍航空軍でパイロットの訓練や人間のパフォーマンスに関する研究を行っていた心理学者で、「人間と機械の関係」を研究対象としていました。
フィッツの法則を端的に言えば、「ターゲットに到達するまでの時間は、ターゲットまでの距離が大きいほど長くなり、ターゲットのサイズが大きいほど短 くなる」という法則です。
これは数式で表すと以下のようになります。
MT = a + b × log₂(D / W + 1)
各変数の意味は以下の通りです。
MT（Movement Time）：ターゲットに到達するまでの移動時間
D（Distance）：現在の位置からターゲットまでの距離
W（Width）：ターゲットの幅（サイズ）
a, b：実験的に決定される定数（デバイスや条件により異なる）
上記の数式は、学術的にはフィッツが最初に提案した式をマッケンジーが改良したものとされており、現在のHCI（Human-Computer Interaction）研究で広く使われているようです。元の式との違いは log₂ の中の「+1」の有無のようですが、この改良により、操作の難しさを表す指標が常に0以上になり、実測データとの相関も高くなっています。
ここで重要なのは、移動時間が距離とサイズの「比率」で決まるという点です。つまり、距離が2倍になっても、ターゲットのサイズも2倍になれば、移動時間はほとんど変わりません。逆に、ターゲットが小さくて遠い場合には、移動時間が大幅に増加します。また、対数関数であるため、距離を半分にしたときの効果よりも、ターゲットのサイズを2倍にしたときの効果のほうが体感的に大きく影響します。
UIデザインへの応用
フィッツの法則を実務で特に関連の深い応用例をいくつか調べてみました。
ボタンやタップターゲットのサイズ
フィッツの法則から直接導かれる最も基本的な示唆は、「ユーザーが操作する対象は、十分な大きさを持たせるべき」ということです。
ターゲットのサイズ（W）が大きいほど、到達に必要な時間は短くなり、エラー率も下がります。これはデスクトップのマウス操作でもモバイルのタッチ操作でも同様ですが、特にタッチデバイスでは指先の精度がマウスポインタに比べて低いため、より大きなターゲットが求められます。
各プラットフォームのガイドラインでは、タッチターゲットの最小サイズとして以下が推奨されています。
Apple（iOS）：44pt × 44pt
Google（Android）：48dp × 48dp（物理サイズで約9mm四方）
これらの数値はフィッツの法則を直接参照して決められたわけではありませんが、「ターゲットが小さすぎると操作が困難になる」という同じ原理に基づいています。
ただし、大きければ大きいほど良いというわけではありません。ターゲットのサイズと移動時間の関係は対数的なので、ある程度以上大きくしても改善は頭打ちになります。そして、画面のスペースは有限です。ターゲットを大きくするほど他の要素を圧迫するため、全体のレイアウトとのバランスを考慮する必要があります。
画面の端と角
デスクトップUIの設計において、フィッツの法則の応用で特に興味深いのが「画面の端」の特性です。
マウスカーソルは画面の端を超えることができません。つまり、画面の端に配置されたターゲットに対しては、ユーザーはカーソルを勢いよく動かしても「行き過ぎる」ことがないのです。フィッツの法則の観点では、画面の端に置かれた要素のターゲット幅は事実上「無限」とみなすことができ、非常に素早くアクセスできる位置となります。
macOSのメニューバーが画面最上部の端に固定されているのは、この原理を活用した設計です。Windowsのタスクバーが画面下端に配置されているのも同様です。一方、Windowsのメニューバーはウィンドウの内部に配置されているため、画面端の恩恵を受けられず、macOSのメニューバーに比べてフィッツの法則上は不利な配置と言えます。
さらに、画面の四隅はもっとも到達しやすい位置です。角では上下方向と左右方向の両方でカーソルが止まるため、二次元的に「無限の幅」を持つことになります。macOSのアップルメニュー（左上）やWindowsのスタートボタン（左下）が角に配置されているのは、この特性を活かした設計と言えるでしょう。
距離を縮める設計
フィッツの法則のもう一つの変数、距離（D）を小さくするアプローチもUIデザインでは重要です。
右クリックで表示されるコンテキストメニューは、カーソルの現在位置に直接表示されるため、ターゲットまでの距離がほぼゼロになります。画面上部のメニューバーまでカーソルを移動させる必要がないため、フィッツの法則に照らすと非常に効率的なインタラクションパターンと言えます。
さらに効率的なのがパイメニュー（Pie Menu）です。一般的な縦並びのリニアメニューでは、上部の項目と下部の項目で距離に大きな差が生じます。一方、パイメニューは放射状にメニュー項目を配置するため、すべての項目がメニュー中心から等距離にあります。さらに、扇形の各項目はリニアメニューの矩形項目よりも面積が広くなりやすいため、ターゲット幅も大きくなります。距離が等しく、ターゲット幅も大きいパイメニューは、フィッツの法則の観点からは理想的なメニュー形式です。
ただし、パイメニューは項目数が増えるとそれぞれの扇形が狭くなるため、項目数が多い場合にはリニアメニューのほうが適しています。また、パイメニューは空間認知的に馴染みのないレイアウトであるため、学習コストとのトレードオフも存在します。
モバイルにおけるナビゲーション配置
スマートフォンのUIデザインにおいても、フィッツの法則は重要な設計指針となります。
多くのモバイルアプリがボトムナビゲーションを採用しているのは、片手操作時に親指が自然に届く範囲（画面下部）にナビゲーションを配置するためです。画面上部に配置すると、親指の移動距離が大きくなり、持ち替えやもう一方の手で操作する必要が生じます。フィッツの法則の観点では、移動距離を短くする配置として下部ナビゲーションは合理的です。
これは画面の端の特性とも合わせて考えると、画面下端に配置されたナビゲーションは「端の無限幅」と「短い移動距離」の両方の恩恵を受けられる設計と言えます。
フィッツの法則の限界と注意点
フィッツの法則は強力な設計指針ですが、いくつかの限界があります。
まず、フィッツの法則はあくまで「運動時間」を予測するモデルであり、ユーザーの意思決定時間は含まれていません。ユーザーがボタンを押すまでの時間には、「どのボタンを押すべきか」という判断の時間も含まれます。この判断時間はヒックの法則が扱う領域であり、選択肢が多いほど判断時間が長くなるとされています 。実際のインタラクションでは、フィッツの法則（運動時間）とヒックの法則（判断時間）の両方を考慮する必要があります。
次に、フィッツの法則は「類推によるモデル」であるという点も理解しておく必要があります。フィッツはシャノンの情報理論から着想を得ましたが、人間の運動制御の生理学的なメカニズムに直接基づいているわけではありません。つまり、フィッツの法則は「人間の運動がなぜそうなるのか」を説明するものではなく、「こういう条件ではこういう結果になりやすい」という予測モデルです。この点は、ゲシュタルト原則やアフォーダンスのような概念的なフレームワークとは性格が異なります。
さらに、フィッツの法則の式に含まれる定数 a と b は、使用するデバイスや環境によって異なります。マウス操作、トラックパッド操作、タッチ操作、視線追跡など、入力手段によって具体的な数値は変わります。法則の「構造」はデバイスを問わず成り立ちますが、具体的な予測値はデバイスごとに実験で確認する必要があります。
他の法則との関係
フィッツの法則は、UIデザインに関連する他の認知科学的な法則や原則と組み合わせて理解すると、より実践的に活用できそうです。
先述のヒックの法則は、フィッツの法則と相補的な関係にあります。ヒックの法則が「何を選ぶか」の判断時間を扱い、フィッツの法則が「選んだものにどう到達するか」の運動時間を扱います。メニュー設計では、項目数を減らして判断時間を短くし（ヒックの法則）、残った項目のターゲットサイズを大きくして到達時間を短くする（フィッツの法則）、という両方から のアプローチが可能です。
また、以前の記事で紹介したゲシュタルト原則との関連もあります。ゲシュタルト原則の近接の法則に従って関連する操作ボタンをグルーピングすることで、一つの操作を完了した後の次のターゲットまでの距離（D）を短くできます。知覚的なグルーピングと運動効率が、結果的に同じ方向の設計を促すわけです。
さらに、ステアリングの法則という関連法則もあります。フィッツの法則がある地点からある地点への「直線的な移動」を扱うのに対して、ステアリングの法則は「経路に沿った移動」を扱います。階層を持つメニュー（例：グローバルナビゲーションとサイドメニュー）でサブメニューに移動する操作などがこれに該当し、ステアリング操作はポインティング操作よりも時間がかかるとされています。深い階層構造のメニューが使いにくい理由の一つは、このステアリングの法則で説明できるとされています。
まとめ
ターゲットのサイズを適切に確保すること、操作対象までの距離を短くすること、画面の端や角の特性を活かすこと。これらは、法則を意識していなくても経験的に「使いやすいUI」に辿り着く中で自然と実践されてきたことかもしれません。
しかし、法則として明示的に理解していることには、2つの意味があると思います。
1つは、設計判断の根拠を言語化できることです。「なぜこのボタンはこのサイズなのか」「なぜナビゲーションはここに配置したのか」という問いに対して、フィッツの法則という共通言語で説明できるようになります。
もう1つは、AIが生成したUIを評価する際の判断基準になることです。AIが出 力した画面に対して「この配置はフィッツの法則から見て合理的か」と問えるかどうか。その問いを立てられるかどうかは、こうした原理的な知識の有無に依存します。
ゲシュタルト原則がUIの「見え方」を、アフォーダンスがUIの「伝え方」を、メンタルモデルがUIの「理解のされ方」を扱うなら、フィッツの法則はUIの「操作のしやすさ」を扱う法則と言えるかもしれません。
