いつも手の届く所に
多くの人は片手・親指で操作し(Hoober, 2013)、届く範囲は画面下部です(Bergstrom-Lehtovirta & Oulasvirta, 2014)。固定ボタンは主要行動を親指ゾーンに置き、Fogg(2009)のいう「きっかけ」を常に提供します。
サイズ・幅・セーフエリア
十分な大きさ(Parhi et al., 2006)と全幅(Fitts, 1954)、高さ48dp以上が目安です。セーフエリアの余白を加え、モバイルフォームではキーボードの上に移動させます。
隠れる問題と実験
ボタンの高さ分の下余白を設けます。WCAG 2.2(W3C, 2023)の2.4.11はフォーカスが隠れないことを求めます。効果は実験で確かめ(Kohavi et al., 2009)、CVR最適化の指標と併せて見ます。
よくある質問
- 全画面に置くべき?
- 明確な主要行動が一つある画面だけです。
- FABとの違いは?
- 固定ボタンは下部全幅、FABは浮かぶ丸いボタンです。
出典確認日:2026-10-27
参考文献
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 片手親指操作が最も多いという観察です。
- Bergstrom-Lehtovirta, J., & Oulasvirta, A. (2014). Modeling the functional area of the thumb on mobile touchscreen surfaces. In Proceedings of the SIGCHI Conference on Human Factors in Computing Systems (pp. 1991–2000). ACM. 親指の機能範囲モデルです。
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. 親指用の最小ターゲットサイズを示しました。
- Fitts, P. M. (1954). The information capacity of the human motor system in controlling the amplitude of movement. Journal of Experimental Psychology, 47(6), 381–391. 広く近いターゲットは速いという法則です。
- Fogg, B. J. (2009). A behavior model for persuasive design. In Proceedings of the 4th International Conference on Persuasive Technology (Article 40, pp. 1–7). ACM. 固定ボタンを「きっかけ」と捉える助けになります。
- Kohavi, R., Longbotham, R., Sommerfield, D., & Henne, R. M. (2009). Controlled experiments on the web: Survey and practical guide. Data Mining and Knowledge Discovery, 18(1), 140–181. オンライン実験の設計ガイドです。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. フォーカスが固定要素に隠れない基準(2.4.11)です。
