- 公開日： 最終更新日：
フィッツの法則とは？UIを最適化するWebデザインの考え方
ユーザーが扱いやすいWebデザインを作成することは当たり前の時代になりました。
ユーザーが扱いやすいWebデザインとは、UI（ユーザーインターフェイス）が最適化され、直感でホームページの操作やコンテンツの理解ができることを言い、UIを最適化するためには、フィッツの法則を活用することがおすすめです。
当ページでは、フィッツの法則とは何かや、Webデザインのポイントを紹介します。
目次
フィッツの法則とは
フィッツの法則とは、1954年にオハイオ大学のポール・フィッツ氏が提唱した法則です。
フィッツの法則は、人間の行動をモデル化した方程式で、対象の大きさと対象までの距離、対象の選択のしづらさとの相関関係を説明するものになります。
もともと、フィッツの法則は、片手を使って木のブロックを選ぶ実験に基づいて考案され、1つのブロックに触ってから別のブロックに触るまでの時間を計測するものになります。
ブロックの厚さを変えたり、２つのブロック同士の距離を変えたりしてかかる時間の変化を調べ、この実験に基づいて、1次元の対象を選ぶことがどれだけ難しいかを説明するフィッツの法則ができました。
その後、研究者たちが、このフィッツの法則に改良を加え、2次元や3次元でも使えるようになったのです。
これがフィッツの法則になり、現在ではパソコンやスマートフォンはもちろんですが、Webデザインにも活用することで、UIに最適化することができるようになりました。
ちなみにフィッツの法則の方程式は以下になります。
- T=ターゲットまでポインターを動かすのにかかる時間
- a=ポインター移動の開始・停止時間
- b=ポインターの速度
- D=ポインターとターゲットの中心までの距離
- W=ターゲットの大きさ
方程式の中身を深く理解する必要はなく、方程式を知らなくても、フィッツの法則を活かしたUIに最適化されたWebデザインを作成することが可能になるので、当ページでは上記の方程式を利用せずに解説しています。
ホームページで利用するのは以下の3つの内容だけを理解しておけば十分です。
- マウスポイントの移動時間を短くする
- マウスポイントの移動距離を短くする
- ボタンは大きくする
フィッツの法則を活かしたWebデザインのポイント
フィッツの法則を活かして、ボタンの大きさと距離、位置を最適化することが可能になります。
では、フィッツの法則を活かしたWebデザインのポイントを4つ紹介します。
ボタンを大きくして選択がしやすいようにする
ボタンの大きさは、ユーザーの選択のしやすさに大きな影響を与え、大きいボタンの方がクリックしやすくなるので、ユーザーにアクションを行って欲しいコンバージョンボタンは大きくすることが大切です。
ただし、Webデザイン次第では、あまりに大きなコンバージョンボタンは浮いてしまう可能性もあるので、全体的なWebデザインのテイストから最適なサイズを定めなくてはなりません。
ユーザーが選択しやすい距離にボタンを設置する
マウスポイントがあるコンテンツから、送信ボタンまでの距離が遠くならない意識が大切です。
ユーザーのマウスポインターの位置とボタンが遠くなってしまうと、ユーザーは直感的に操作性が悪いWebデザインだと認識してしまうので、状況によっては、ユーザーは混乱してしまい、ホームページから離脱してしまう恐れがあります。
ユーザーにスムーズな操作をしてもらうためには、最後に操作したマウスポインターからボタンまでの距離を適切に定めることを意識しなくてはなりません。
常に近い距離にボタンを設置する
ユーザーに利用して欲しいボタンがある場合に利用するのが追従コンテンツです。
上記は制作実績のカナダ留学を支援するホームページですが、追従コンテンツがあることで、ユーザーはどのページのどこを見ていたとしても、常にラインで相談という追従コンテンツを目にします。
あまりに過剰に大きな追従コンテンツだと、Webデザインの品質を落とすだけになってしまい、ホームページの操作性が悪くなりますが、適切なサイズで設置することで、確実にコンバージョン数を伸ばすことが可能です。
ユーザーが操作しやすい位置にボタンを設置する
ユーザーの操作性を考えた位置にボタンを設置することも大切です。
例えば、上記の追従ボタンを事例にすると、右端にリンクボタンが設置されているので、ユーザーはそれ以上は右にマウスポイントを動かすことができず、操作ミスが発生する可能性が0に近くなります。
このように、単に見栄えのWebデザインだけで考えるのではなく、サイト全体がユーザーにとって操作しやすい仕組みを作ることが、フィッツの法則で重要なポイントです。
フィッツの法則のまとめ
UIに最適化されたWebデザインを作成するために知っておきたいフィッツの法則を解説しました。
ボタンの大きさや距離がUIに大きな影響を与えており、そのためにはフィッツの法則を活用して、ユーザーが直感的に操作がしやすいWebデザインを作成することが大切です。
フィッツの法則って何？とお思いの方の参考になれば幸いです。
