ボタンは44px以上にする（ちょっと良いUIおれおれAdvent Calendar 2024 – 24日目）

ボタンは推しやすいようあまり小さくするのは避けましょう、はいそうですね、じゃあどれくらいなら良いの？　

ネタバレ：44px

デモ：

ボタンに限らずユーザーインタラクション（触ると何か起きる）UI が対象です。リンクとか選択ドロップダウンとか。でも記事中ではまとめてボタン呼びしますのでご了承ください。

アクセシビリティ的に 44px が良いらしい

数字はこちらに記載があります。

算出方法が載ってないんですが、たぶん物理サイズからの逆算みたいです。

ちょっと大きめ。

デモを見てみてください。

PC だとちょっと大きめに見えますが、デモをスマホで見てもらうとなるほどちょうど良いサイズだなという感じがします。※個人の感想です。

自分はアクセシビリティ方面に詳しくないので詳しい話は詳しい方にも意見を求めてください。すみません。

今回のこの 44px にしようぜはレベル AAA に分類されていて、要は一番難しいやつです。なので、まあ、新規に考えるときの初期値、標準値としてここら辺の数字を使うのが良いんじゃないでしょうか。だめ？　また別途最低限 24px にしようというレベル AA の基準もあります。

ただ前述のとおり手元のスマホで見る感じ妥当な目標値だなとは自分は思います。知らずに作ったやつも感覚でサイズを決めたらちょうどこれくらいになってました。

というわけで小さくしたい場合でも最低 24px は確保しましょう。こっちはレベル AA なのでより求められている基準です。

ただスマホ実機で見るとだいぶ小さいです。たしか 24px 以下だとミスタップも増えるという話だった気がするので、そういう意味でも最低値としてちょうどよいかもしれません。

なお 44px の方と同様にリンク等は例外で、加えてボタン自体が 24px なくても間隔をあけて 24px 以内に他のものがなければセーフという扱いにしています。

Microsoft の UWP ではタッチ操作の対象は 7.5mm = 40px にしてねと言ってます。この UWP はなんかもう下火なのでちょっとアレですが。

Google の Material Design では 48px を推奨。同じく Google の web.dev でも 48px でした。

解釈間違ってるかもだけど結論は間違ってないと思うので迷ったら 44px にしとけば良いんじゃないですか。感覚的にもちょうど良いです。知らんけど燃やさないで……。