なぜ大きさが問題か
指先の接触面はカーソルよりずっと広く、押す瞬間に目標を隠してしまいます。ボーゲルとバウディッシュ(2007)はこれをファットフィンガー問題と呼びました。ホルツとバウディッシュ(2010)は、意図した点と検出された点に系統的なずれがあることを示しました。そのためフィッツの法則だけでは誤りを説明しきれません。
どのくらいの大きさか
パルヒら(2006)は約9.2mm未満で誤りが増えると報告し、ヘンツェら(2011)の1億タップ分析も小さな目標と画面端で誤差が大きいことを確認しました。iOSは約44pt、Androidは48dpを推奨し、WCAG 2.2は最小24×24 CSSピクセル、強化基準44×44を定めています。
間隔と配置
大きさと同じくらい間隔も重要です。視覚的な大きさとタッチ領域を分け、サムゾーンの外や角のボタンは大きく、危険なボタンは離して置きます。これは手の震えや視力低下のある人に特に重要で、ウェブアクセシビリティの要点です。
よくある質問
- 最小で何ピクセル必要?
- WCAG 2.2の最小は24×24 CSSピクセルで、快適さには44×44以上が推奨されます。
- アイコンが小さい場合は?
- 絵は小さいまま、透明な余白で押せる範囲を広げます。
出典確認日:2026-10-27
参考文献
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of the 8th Conference on Human-Computer Interaction with Mobile Devices and Services (pp. 203–210). ACM. 約9.2mm前後で誤りが安定するという結果でよく引用され、最小サイズの根拠になります。
- Park, Y. S., & Han, S. H. (2010). Touch key design for one-handed thumb interaction with a mobile phone: Effects of touch key size and touch key location. International Journal of Industrial Ergonomics, 40(1), 68–76. サイズと位置の相互作用を示し、端のボタンを大きくすべきか判断するのに役立ちます。
- Vogel, D., & Baudisch, P. (2007). Shift: A technique for operating pen-based interfaces using touch. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 657–666). ACM. 指が目標を隠すファットフィンガー問題と解決策を扱っています。
- Holz, C., & Baudisch, P. (2010). The generalized perceived input point model and how to double touch accuracy by extracting fingerprints. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 581–590). ACM. 意図した点と検出された接触点のずれを明らかにし、タッチのオフセットを理解できます。
- Henze, N., Rukzio, E., & Boll, S. (2011). 100,000,000 taps: Analysis and improvement of touch performance in the large. In Proceedings of the 13th International Conference on Human Computer Interaction with Mobile Devices and Services (pp. 133–142). ACM. ゲームアプリで1億回のタップを集めた大規模研究で、実環境の誤差傾向がわかります。
- Bi, X., Li, Y., & Zhai, S. (2013). FFitts law: Modeling finger touch with Fitts' law. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1363–1372). ACM. 目標が小さくなるほど指の誤差が占める割合を計算しています。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2 (W3C Recommendation). 達成基準2.5.8(24×24 CSS px)と2.5.5(44×44)があり、アクセシビリティ基準の確認に役立ちます。
