なぜ必要か
ノッチ等に置いたボタンは隠れたりジェスチャーと衝突します。Apple（n.d.）はセーフエリア、Android（Android Developers, n.d.）はエッジツーエッジとインセットを推奨。
実装
viewport-fit=coverとenv()（MDN, n.d.）。固定下部ボタンや下部ナビに加算。横向きも確認（WCAG 2.2 1.3.4; W3C, 2023）。
配置と届きやすさ
少し上がっても親指は届きます（Bergstrom-Lehtovirta & Oulasvirta, 2014）。タッチターゲットを縮めない（Parhi et al., 2006; Fitts, 1954）。
よくある質問
- 外側に何も描けない？
- 背景は端まで可、文字とボタンだけ内側に。
- env()が0？
- viewport-fit=coverが必要です。
出典確認日：2026-10-27
参考文献
- Apple. (n.d.). Layout. Human Interface Guidelines. iOSのセーフエリアです。
- MDN Web Docs. (n.d.). env(). Mozilla. CSSのenv()変数です。
- Android Developers. (n.d.). Display content edge-to-edge in views. Androidのエッジツーエッジです。
- 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. サイズと距離の法則です。
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. 1.3.4と1.4.10の基準です。