fitts-law

フィッツの法則

ターゲットのサイズや距離と、操作の正確さとの関係に精通しています。

できること

フィッツの法則を適用し、インタラクティブなターゲットのサイズと配置を調整して、到達して操作するまでに必要な時間と労力を最小限に抑えます。

原則

ターゲットを選択するまでの時間は、ターゲットまでの距離とターゲットのサイズによって決まります。 MT = a + b × log₂(2D / W) ここで、MT = 移動時間、D = ターゲットまでの距離、W = ターゲットの幅、a/b = 経験的に導き出された定数です。 **簡単に言うと：**ポインターの近くにある大きなターゲットは素早く操作できますが、遠くにある小さなターゲットは操作に時間がかかり、ミスも起きやすくなります。サイズと近さの両方が、それぞれ独立して重要です。

実用上の意味

ターゲットのサイズ

• タッチインターフェースでの最小タッチターゲット：44×44pt（Apple HIG）／48×48dp（Material Design）
• ポインターのターゲットはより小さくできますが、十分な大きさを確保してください。ポインター操作では最小でも24×24pxとし、小さな画面や密度の高いUIではさらに大きくします。
• ターゲットのサイズとは、アイコンの見た目の大きさではなく、操作できる領域です。16pxのアイコンでも、44pxのタップ領域を設定できます。
• 使用頻度が高い操作や、結果が重大な操作（主要なCTA、削除の確認など）は大きくします。

ターゲットまでの距離

• 関連する操作は、対象となるコンテンツの近くに配置します。カードの操作は画面の反対側ではなく、カード上に配置します。
• 画面の端や隅は無限の大きさを持つターゲットです（ポインターが通り過ぎることがありません）。永続的なナビゲーション（macOSのメニューバー、Windowsのタスクバーなど）に活用します。
• モバイルでは画面下部に配置すると、右手の親指で操作する際に届きやすくなります。
• 確認操作のあるダイアログでは、「OK」に到達するために画面全体を横切らなくて済むようにします。

フィッツの法則で扱えないこと

• **認知的な負荷：**モデル化するのは身体的な操作にかかる時間であり、何をタップするか決めるまでの時間ではありません。サイズと配置が完璧でも、ラベルが曖昧ならボタンは機能しません。
• **タッチの正確さとポインターの正確さ：**タッチは接触範囲が広く、精度が低くなります。ポインターの仕組みは異なります。この法則はどちらにも適用できますが、パラメーターは異なります。
• **ジェスチャーのターゲット：**スワイプ領域、ドラッグハンドル、スクロール領域にも同じ原則（大きく、近いほど速い）が当てはまりますが、基本モデルでは捉えられない誤操作のリスクも伴います。

よくあるデザインへの適用例

パターン	フィッツの法則の適用
主要なCTA	大きく、コントラストを高め、親指が届く範囲に配置します
フローティングアクションボタン	モバイルでは右下に配置し、利き手の親指に近づけます
ナビゲーションタブ	片手で使う場合、モバイルでは上部ナビゲーションより下部ナビゲーションが適しています
モーダルの操作	ボタンはモーダルの下部に配置し、ばらばらに配置しません
フォームの送信	最後のフィールドの下に、全幅または目立つボタンを配置します
閉じるボタン	ターゲットを十分に大きくします。モバイルでは下部から閉じられる方法も検討します
削除などの破壊的な操作	誤操作を防ぐため、小さく、遠くに配置します

ベストプラクティス

• 実機でタップターゲットのサイズを必ずテストします。デザインツール上では十分に見えても、手元では小さすぎることがよくあります。
• 見た目のサイズではなく、パディングで操作領域を広げます。
• 大きすぎるボタンを正当化するためにフィッツの法則だけを適用せず、視覚的な階層や余白とのバランスを取ります。
• デスクトップでは画面の端を永続的なナビゲーションに活用し、無駄にしないでください。
• 操作ミス（タップミス、クリックミス）が多い箇所から監査します。ほとんどの場合、フィッツの法則に反しています。