押しやすいボタンには理由がある——フィッツの法則と最小タップサイズ
「このアプリ、なんか押しにくい」——その感覚には、ちゃんと理屈がある。小さすぎるボタン、隣とくっついたリンク、指の届かない隅。押しやすさは美的センスの問題ではなく、半世紀以上前にモデル化されたフィッツの法則という「動作の物理」で説明できる。今日はこの法則を、UIを設計する手元の判断に落とし込んでみたい。
「押しやすさ」を決める式
フィッツの法則は、1954年に心理学者ポール・フィッツが提唱した、人がある対象に手（やカーソル、指）を動かして到達するまでの時間を予測するモデルだ。式の細部より、含意がふたつあると押さえれば実務には十分だ。
- ターゲットが大きいほど速く・正確に押せる。
- ターゲットが近いほど速く押せる。
当たり前に聞こえるが、設計の現場ではこの当たり前が驚くほど守られていない。重要なボタンが小さい、よく使う操作が画面の遠い場所にある——どちらもフィッツの法則に逆らっており、操作のたびに利用者へ小さなストレスを課している。逆に言えば、「大きく」「近く」を意識するだけで、UIの体感速度は素直に上がる。
なぜ「画面の端」は押しやすいのか
フィッツの法則には、デザイナーが見落としがちな”おいしい”系がある。画面の端と四隅だ。
マウスカーソルは画面の外には出られない。だから画面の端に置かれたターゲットは、勢いよくカーソルをぶつけても通り過ぎないため、実質的に「無限の大きさ」を持つように振る舞う。四隅はさらに強く、縦横どちらの方向から突っ込んでも止まる。PCのメニューバーが画面最上部に貼り付いているのも、スマホの主要操作が画面下部の親指の届く弧に集まっているのも、この性質を利用している。「端は強い」——置き場所に迷ったら思い出したい原則だ。
最小タップサイズ：44pt と 48dp
「大きく」と言われても、具体的にどれだけ要るのか。ここはプラットフォームの公式ガイドラインに明確な答えがある。
- Appleのヒューマンインターフェイスガイドラインは、タップ可能な要素を最小44×44ptにするよう求めている。
- Googleのマテリアルデザインは、タッチターゲットを最小48×48dp（約9mmの物理サイズ）とし、ターゲット同士の間隔を8dp以上空けることを推奨している。
ポイントは、見た目の大きさとタップ領域は別物でいいということ。アイコン自体は小さく繊細にデザインしても、その周囲に透明な余白を含めて44pt／48dpの「当たり判定」を確保すればいい。Google製の計測ツールLighthouseも、タップ要素が48px四方より小さいと警告を出す。指は思っているより太い、という前提で当たり判定を引くのがコツだ。
実践：余白とグルーピングで効かせる
最後に、明日から効く小さなチェックを3つ。
- 主要ボタンは大きく、近くに。 一番押させたい操作（送信・購入・次へ）こそ、サイズと位置で優遇する。小さな「キャンセル」と並べて同サイズにしない。
- 隣接ターゲットに8px以上の余白を。 削除と保存が隣り合って同じ大きさだと、誤タップは利用者ではなく設計の責任になる。
- 危険な操作は、あえて押しにくく。 フィッツの法則は「押しにくくする」設計にも使える。取り消せない操作は小さめ・遠めにして、勢いで押させない。
押しやすさは才能ではなく設計だ。サイズと距離という二つのつまみを意識するだけで、「なんか使いやすい」は再現できる。
お役立ち情報
- 📄 Android: 最小のタップ領域サイズは 48dp（Qiita）
- マテリアルデザインの48dp指針を、実装目線でコンパクトにまとめた日本語記事。なぜ「見た目」と「当たり判定」を分けるのかが腑に落ちる。
- 📄 モバイルアプリの最小タップサイズを考える（dotproof）
- 44pt／48dpの根拠や、現場で迷いやすいケースを日本語で整理したデザインブログ。
- 📐 All accessible touch target sizes（LogRocket・英語）
- Apple・Google・WCAGなど各基準のタップサイズを横断比較した、英語の決定版的まとめ。