フィッツの法則とは、ボタンのサイズや距離がユーザーの操作しやすさに直結するという法則で、WebデザインのUI改善に活用できます。ボタンが押しにくい、フォームの送信ボタンまで遠いといった問題も、フィッツの法則を意識したデザインで解消できます。
このページでは、フィッツの法則の基本とWebデザインへの活かし方、取り入れる際の注意点を解説します。
フィッツの法則とは
フィッツの法則とは、1954年にオハイオ大学のポール・フィッツが提唱した、人間の動作をモデル化した法則です。対象までの距離が遠いほど、また対象が小さいほど、その対象を選択するのに時間がかかるという相関関係を説明しています。
もともとフィッツの法則は、片手で木のブロックを選ぶ実験から生まれました。ブロックの大きさや2つのブロック間の距離を変えながら、一方から他方へ触れるまでの時間を計測したもので、この実験結果をもとに法則が体系化されました。その後、研究者たちが改良を重ね、2次元・3次元の操作にも応用できるようになっています。
現在ではパソコンやスマートフォンの操作性研究に広く使われており、WebデザインのUI設計においてもフィッツの法則は重要な指針のひとつとして知られています。
Webデザインにおいてフィッツの法則が重要な理由
Webデザインにおいてフィッツの法則が重要な理由は、ボタンやリンクの配置・サイズがユーザーの離脱率やコンバージョン率に直接影響するからです。
どれだけ見た目の整ったデザインであっても、ボタンが小さすぎる、押したいボタンまでの距離が遠いといった状況では、ユーザーはストレスを感じてホームページから離脱してしまいます。フィッツの法則を意識したデザインにすることで、ユーザーがスムーズに操作でき、問い合わせや購入といったアクションにつながりやすくなります。
中小企業のホームページでは、デザインの見栄えに注力する一方で、操作性の改善が後回しになるケースが少なくありません。フィッツの法則はむずかしい知識がなくても実践できるため、ホームページの成果を高めるうえで取り入れやすい考え方です。
フィッツの法則をWebデザインに活かすポイント
フィッツの法則をWebデザインに活かすポイントは、ボタンの大きさと距離の2点に集約されます。以下を意識するだけで、ユーザーの操作性は大きく改善されます。
ボタンは大きくする
フィッツの法則では、対象が大きいほど選択しやすくなります。
問い合わせボタンや購入ボタンといったコンバージョンに直結するボタンは、ユーザーが迷わずクリック・タップできるサイズに設定することが重要です。
ボタンのサイズを大きくする際に意識したいのが、クリック可能な領域です。テキストリンクのようにテキスト部分だけをリンクにしているケースがありますが、フィッツの法則の観点ではボタン全体をクリック可能な領域にする方が選択しやすくなります。
同じデザインに見えても、クリックできる範囲が広いほどユーザーのストレスは軽減されます。重要度の高いボタンを優先的に大きくし、他のボタンとの差をつけることで、ユーザーは迷わず次のアクションに移れます。
ボタンを近い距離に配置する
フィッツの法則では、対象までの距離が短いほど操作しやすくなります。ユーザーが直前に操作した場所からボタンまでの距離が遠いと、それだけ操作の負担が増え、アクションを起こす前に離脱するリスクが高まります。
わかりやすい例がメールフォームです。最後の入力欄と送信ボタンが離れていると、ユーザーは入力後にわざわざスクロールして送信ボタンを探す必要が生じます。入力欄の直下に送信ボタンを配置するだけで、ユーザーはスムーズに送信まで完了できます。
同様に、商品説明の直下に購入ボタンを置く、記事の末尾に問い合わせボタンを設置するといった工夫も、フィッツの法則を意識した配置の代表例です。ユーザーがページ上でどのような順番で操作を進めるかを想定し、次のアクションへ自然に移れる位置にボタンを置くことが重要です。
よく使うボタンはまとめてグループ化する
関連性の高いボタンは近くにまとめて配置することが、フィッツの法則を活かしたデザインの基本です。ユーザーはひとつのボタンを押した後、関連する別のボタンを押すことが多く、その移動距離が長いと操作の手間が増えてストレスにつながります。
たとえば問い合わせボタンと資料請求ボタンは、どちらも会社に興味を持ったユーザーが使うボタンです。この2つが離れた場所に置かれていると、ユーザーはページ内を行き来しなければなりません。近くにまとめて配置することで、ユーザーは迷わず次のアクションに移れます。
ナビゲーションメニューも同じ考え方が当てはまります。関連するページへのリンクをグループ化することで、ユーザーは目的のページへ最短距離でたどり着けます。
追従ボタンでボタンとの距離をゼロにする
フィッツの法則を最大限に活かした手法のひとつが追従ボタンです。通常のボタンはページ内の特定の位置に固定されているため、ユーザーがスクロールするとボタンから離れてしまいます。追従ボタンはスクロールしても画面上に固定表示されるため、ユーザーがどのページのどの位置を閲覧していても、常にボタンまでの距離がゼロの状態を維持できます。
PCではヘッダーに固定した問い合わせボタンやチャットボタン、スマートフォンでは画面下部に固定したボタンバーなどが代表的な例です。ユーザーが興味を持った瞬間にすぐアクションを取れる状態を常に作っておくことで、離脱を防ぎコンバージョン数の向上につながります。
追従ボタンの効果を最大限に引き出すには、コンテンツの閲覧を妨げない適切なサイズで、ユーザーの目に自然に入る位置に設置することが大切です。
フィッツの法則をWebデザインに取り入れる時の注意点
フィッツの法則をWebデザインに取り入れる際は、法則を意識しすぎるあまり使いにくいデザインになってしまうケースがあります。ポイントを押さえたうえで注意点も理解しておくことが大切です。
ボタンを大きくしすぎるとデザインが崩れる
フィッツの法則に基づいてボタンを大きくすることは有効ですが、サイズに上限はありません。大きくすればするほど良いと考えてしまうと、ページ全体のバランスが崩れる原因になります。
コンバージョンボタンを必要以上に大きくすると、デザインとして浮いてしまい、かえってユーザーに違和感を与えます。また、すべてのボタンを大きくしてしまうと、重要なボタンと補助的なボタンの差がなくなり、ユーザーがどこを押せばよいか迷う状況を生みます。
フィッツの法則を活かすには、重要度に応じてボタンのサイズに差をつけることが前提です。ページ全体のデザインとのバランスを保ちながら、最適なサイズを見極めることが重要です。
スマートフォンはボタンのサイズと位置に注意する
スマートフォンの操作はマウスではなく指で行うため、フィッツの法則をPCと同じ基準で適用することはできません。指の接触面積はマウスポインターよりはるかに大きく、ボタンが小さいとタップミスが頻発します。
Appleのヒューマンインターフェースガイドラインではタップターゲットの推奨サイズを44×44pt以上、GoogleのMaterial Designでは48×48dp以上と定めており、スマートフォン向けのデザインではこの基準を目安にすることが重要です。
またスマートフォンは片手で持って親指で操作するケースが多いため、画面上部は指が届きにくい位置になります。問い合わせボタンや送信ボタンといった重要なボタンは画面下部に配置する方が、ユーザーにとって操作しやすいデザインになります。
PCとスマートフォンそれぞれの操作特性を踏まえたうえで、フィッツの法則を適切に応用することが大切です。
まとめ
フィッツの法則とは、ボタンのサイズが大きいほど、また距離が近いほどユーザーが操作しやすくなるという法則です。Webデザインにおいては、ボタンを大きくする、近くに配置する、関連するボタンをグループ化する、追従ボタンを活用するといった形で実践できます。
むずかしい知識がなくても取り入れられる考え方ですが、ボタンを大きくしすぎるとデザインのバランスが崩れる点や、スマートフォンではPCと異なる基準が必要な点には注意が必要です。
フィッツの法則を正しく理解し、ユーザーが迷わず操作できるホームページづくりに役立ててください。
