株式会社セブンデザイン 大阪市都島区のホームページ制作会社

  • 公開日: 最終更新日:

フィッツの法則とは?UIを最適化するWebデザインの考え方

ユーザーが扱いやすいWebデザインを作成することは当たり前の時代になりました。

ユーザーが扱いやすいWebデザインとは、UI(ユーザーインターフェイス)が最適化され、直感でホームページの操作やコンテンツの理解ができることを言い、UIを最適化するためには、フィッツの法則を活用することがおすすめです。

当ページでは、フィッツの法則とは何かや、Webデザインのポイントを紹介します。

フィッツの法則とは

フィッツの法則とは、1954年にオハイオ大学のポール・フィッツ氏が提唱した法則です。

フィッツの法則は、人間の行動をモデル化した方程式で、対象の大きさと対象までの距離、対象の選択のしづらさとの相関関係を説明するものになります。

もともと、フィッツの法則は、片手を使って木のブロックを選ぶ実験に基づいて考案され、1つのブロックに触ってから別のブロックに触るまでの時間を計測するものになります。

ブロックの厚さを変えたり、2つのブロック同士の距離を変えたりしてかかる時間の変化を調べ、この実験に基づいて、1次元の対象を選ぶことがどれだけ難しいかを説明するフィッツの法則ができました。

その後、研究者たちが、このフィッツの法則に改良を加え、2次元や3次元でも使えるようになったのです。

これがフィッツの法則になり、現在ではパソコンやスマートフォンはもちろんですが、Webデザインにも活用することで、UIに最適化することができるようになりました。

ちなみにフィッツの法則の方程式は以下になります。

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

  • T=ターゲットまでポインターを動かすのにかかる時間
  • a=ポインター移動の開始・停止時間
  • b=ポインターの速度
  • D=ポインターとターゲットの中心までの距離
  • W=ターゲットの大きさ

方程式の中身を深く理解する必要はなく、方程式を知らなくても、フィッツの法則を活かしたUIに最適化されたWebデザインを作成することが可能になるので、当ページでは上記の方程式を利用せずに解説しています。

ホームページで利用するのは以下の3つの内容だけを理解しておけば十分です。

  • マウスポイントの移動時間を短くする
  • マウスポイントの移動距離を短くする
  • ボタンは大きくする

フィッツの法則を活かしたWebデザインのポイント

フィッツの法則を活かして、ボタンの大きさと距離、位置を最適化することが可能になります。

では、フィッツの法則を活かしたWebデザインのポイントを4つ紹介します。

ボタンを大きくして選択がしやすいようにする

ボタンは大きい方が良い

ボタンの大きさは、ユーザーの選択のしやすさに大きな影響を与え、大きいボタンの方がクリックしやすくなるので、ユーザーにアクションを行って欲しいコンバージョンボタンは大きくすることが大切です。

ただし、Webデザイン次第では、あまりに大きなコンバージョンボタンは浮いてしまう可能性もあるので、全体的なWebデザインのテイストから最適なサイズを定めなくてはなりません。

ユーザーが選択しやすい距離にボタンを設置する

メールフォームでは入力から送信ボタンが近い方が良い

マウスポイントがあるコンテンツから、送信ボタンまでの距離が遠くならない意識が大切です。

ユーザーのマウスポインターの位置とボタンが遠くなってしまうと、ユーザーは直感的に操作性が悪いWebデザインだと認識してしまうので、状況によっては、ユーザーは混乱してしまい、ホームページから離脱してしまう恐れがあります。

ユーザーにスムーズな操作をしてもらうためには、最後に操作したマウスポインターからボタンまでの距離を適切に定めることを意識しなくてはなりません。

常に近い距離にボタンを設置する

ユーザーに利用して欲しいボタンがある場合に利用するのが追従コンテンツです。

追従コンテンツでユーザーの操作性を高める

上記は制作実績のカナダ留学を支援するホームページですが、追従コンテンツがあることで、ユーザーはどのページのどこを見ていたとしても、常にラインで相談という追従コンテンツを目にします。

あまりに過剰に大きな追従コンテンツだと、Webデザインの品質を落とすだけになってしまい、ホームページの操作性が悪くなりますが、適切なサイズで設置することで、確実にコンバージョン数を伸ばすことが可能です。

ユーザーが操作しやすい位置にボタンを設置する

ユーザーの操作性を考えた位置にボタンを設置することも大切です。

例えば、上記の追従ボタンを事例にすると、右端にリンクボタンが設置されているので、ユーザーはそれ以上は右にマウスポイントを動かすことができず、操作ミスが発生する可能性が0に近くなります。

このように、単に見栄えのWebデザインだけで考えるのではなく、サイト全体がユーザーにとって操作しやすい仕組みを作ることが、フィッツの法則で重要なポイントです。

フィッツの法則のまとめ

UIに最適化されたWebデザインを作成するために知っておきたいフィッツの法則を解説しました。

ボタンの大きさや距離がUIに大きな影響を与えており、そのためにはフィッツの法則を活用して、ユーザーが直感的に操作がしやすいWebデザインを作成することが大切です。

フィッツの法則って何?とお思いの方の参考になれば幸いです。

関連サービス

視線誘導の法則とは
視線誘導の法則とは何かを解説
ビジュアルコミュニケーションとは
ビジュアルコミュニケーションにおいてフィッツの法則を理解することは必須
Webデザインの言語化とは
フィッツの法則を使ったWebデザインを言語化しよう
UI・UXとは
フィッツの法則とUI・UXは密接な関係にある
Webデザインの方向性とは
フィッツの法則はWebデザインの方向性を考える際に重要
Webデザイン作成会社
当社はフィッツの法則を使ったWebデザイン作成会社です
記事一覧に戻る