小さなボタンは押しづらい？見た目の大きさと押せる範囲を分けて確認しよう

スマホで隣のボタンを押してしまった。指が太いから仕方ない、と終わらせず、押せる範囲と間隔を確認してみよう。

この記事では、画面上の「ターゲット」、つまり操作を受け付ける領域の考え方を知る。準備するのは確認したい画面と端末。削除や購入など、実際の処理が起きるボタンは練習に使わないよ。

絵の大きさと、反応する範囲

小さな虫眼鏡の絵でも、その周囲を含めて押せる設計がある。逆に、大きく見える飾りでも、反応する範囲は文字だけという場合もある。

見た目のサイズ、操作を受け付ける範囲、隣の操作との距離の三つを分けて考えよう。どこまで押せるかは、画像の大きさだけでは判断できないよ。

「24」と「44」は同じ基準ではない

WCAG 2.2のターゲットサイズの最低限の基準は、原則24×24 CSSピクセル以上という大きさを扱う。間隔、文中のリンク、同等の操作などには条件付きの例外もある。

44×44 CSSピクセルは、別の強化された基準で使われる数値。「全部の文字リンクが24未満なら必ず失敗」「24にすればどんな配置でも押しやすい」と単純化しないようにしよう。

安全な画面で確かめる

1. メニューを開くなど、元へ戻せる操作を選ぶ。
2. 文字や絵の中央だけでなく、その近くでも反応するか確認する。
3. 隣の操作を誤って選びやすくないか見る。
4. 画面を拡大しても、操作が重ならないか確かめる。
5. 問題があれば、端末・画面・対象の位置を記録する。

期待するのは、狙った操作を選べて、意図しない隣の操作へ進まないこと。指で押せたという感覚だけで正式な寸法の確認を終えず、制作側では開発者ツールなどで範囲も調べよう。

広げた範囲が重ならないように

反応する範囲を広げても、隣の範囲と重なると別の問題になる。ラベルの分かりやすさや、キーボードでの操作も、面積とは別に確認が必要だよ。

文字だけで状態を伝えられるかは、色と形で状態を分ける方法も参考になるよ。

参照した公式資料

• W3C：Target Size (Minimum)

• W3C：Target Size (Enhanced)

確認日：2026年10月24日。