フィッツの法則とは?UIデザインに活かす方法をわかりやすく解説

本日ご紹介するのは、『フィッツの法則』と呼ばれる、人間の行動をモデル化した理論です。

この『フィッツの法則』、webデザインにおけるUI(※1)に大きく影響するため、webデザインに携わる方は、ぜひともおさえておきたい法則です。

(※1)UI:User Interface(ユーザーインターフェース)の略。ユーザーとサービスの接点のこと。パソコンやスマートフォンの画面が代表例。

フィッツの法則とは

さて、まずフィッツの法則とは何でしょうか。

フィッツの法則は、もともとは、人間の行動をモデル化する方程式のことでしたが、現在では、画面上でマウスを移動させて物を指し示すのにかかる時間を求めるときに使われることが多いです。

これを数式で表現すると、下記のようになります。

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

T = ターゲットまでポインターを動かすのにかかる時間

a = ポインター移動の開始・停止時間(実験に基づく定数)

b = ポインターの速度(実験に基づく定数)

D = ポインターとターゲットの中心までの距離

W = ターゲットの大きさ(ポインターから見た奥行き)

数式だけ見ると難しく思えますが、要するに、ある点から移動して何かを指すときにかかる時間は、「ポインターとターゲットの中心までの距離が遠いほど」あるいは「ターゲットが小さければ小さいほど」、移動に時間がかかるということです。

物が遠くにあればあるほど移動に時間がかかる、というのはすぐに理解できることですが、

「物体が大きいほど早く移動できる」というのは、「言われてみればそうだな」といった印象でしょうか。

当然のことを言っているように思えるフィッツの法則ですが、webデザインにおいては重要になります。

「操作しやすさ」は何で決まるのか?

少し話は変わりますが、パソコンやスマートフォンなどのデバイスの「操作しやすさ」は何で決まるのでしょうか。

もちろん、要素は様々ありますが、「操作しやすさ」を決める大きな要素の1つが、「タスクの進めやすさ」です。

ネットで検索する、ゲームで遊ぶ、友達にメールする、資料を作成する……。

我々はデバイスを用いて、様々な「タスク」をこなしています。

その1つ1つの作業を、いかにスムーズに、スピーディに進められるか、それが「操作しやすさ」を決めることになります。

そして、この「操作しやすさ」に、デザイン面が大きく寄与します。

例えば、下記の写真をご覧ください。

皆さん一度は目にしたことがあるであろう、アイフォンの画面です。

サファリアプリを示す砂時計マークを長押しすると、この写真のようなタブが登場します。

今、あなたは、アプリの削除を伴うホーム画面整理を進めていたとします。

このとき、「Appを削除」というボタンと、「ホーム画面を編集」というボタンは、同じあるいは似たようなタスクを遂行するときに併用するはずですから、これら二つのボタンの間を「移動しやすい」方が、使いやすく、タスクも進めやすいということになります。

では、「移動しやすさ」は何で決まるのか?

その答えを教えてくれるのが、前述のフィッツの法則だというわけです。

フィッツの法則によると、移動したいものが近くにあればあるほど、またその物が大きければ大きいほど、移動しやすいということになります。

そのため、一緒に使われるボタンをグループ化して近くに配置することが重要になります。

一方、上記の例で言えば、「Appを削除」と「ホーム画面を編集」のボタンが離れていたら、

「アプリの削除を伴うホーム画面整理」というタスクは、大変やりづらく、ストレスフルなものになってしまいます。

Webサイトへの活かし方

さて、それではここからいよいよ本格的に、フィッツの法則は、どのようにWebサイトに活かせるのか、見ていきたいと思います。

例えば、下記の画像をご覧ください。

このデザインにも、フィッツの法則に基づく工夫がなされています。

例えば、「お問い合わせ」ボタンと「無料ダウンロード」のボタン。

会社に問い合わせようと思っている人は、資料のダウンロードにも興味がある可能性が高いですから、この2つを近くに配置することはすごく重要でしょう。

しかし、フィッツの法則に基づくデザインは、これだけではありません。

「お問い合わせ」ボタンや、「会社概要」ボタンなど、あらゆるボタンが画面の隅に配置されているのも、フィッツの法則に基づいてのことです。

フィッツの法則によれば、画面の四隅にある物体は、その大きさに関わらず、指し示しやすいということになります。

比較的多くのwebページにおいて、ユーザーが多くクリックするであろうボタンが、画面の四隅に配置されているのは、こうした理由からです。

まとめ

以上、ユーザーの「使いやすさ」を大きく左右する『フィッツの法則』の解説でした。

ユーザーにとって重要なのは、「タスクをスムーズにこなせること」です。

タスクをスムーズにこなすためには、ボタンからボタンへ、素早く移動できることが重要です。そのためにどのようなデザインをすればよいか、その答えを理論づけて教えてくれるのが、フィッツの法則です。

Webデザインに興味をお持ちの方は、ぜひとも抑えておきたい法則です。