なぜ追従させるか
戻る手間をなくし次の道を近くに（Pirolli & Card, 1999）。小さく高コントラストに（Laubheimer, 2021）。アプリでは縮むバーも（Google, n.d.）。
小画面のコスト
表示量が減り（Kim et al., 2015）、上部は親指から遠い（Fitts, 1954）。下スクロールで隠し上で再表示、頻出機能は下部ナビへ。
隠れとアクセシビリティ
position: sticky（MDN, n.d.）。scroll-padding-topで見出しの隠れを防ぎ、WCAG 2.2の2.4.11と1.4.10に沿い、セーフエリアも考慮。
よくある質問
- 常に良い？
- 長いページで有効、短いページでは小さく。
- stickyとfixedの違い？
- stickyは基準点で固定、fixedは最初から固定です。
出典確認日：2026-10-27
参考文献
- Laubheimer, P. (2021, April 4). Sticky headers: 5 ways to make them better. Nielsen Norman Group. 固定ヘッダー改善の5つの方法です。
- Google. (n.d.). Top app bar. Material Design 3. トップアプリバーの挙動です。
- MDN Web Docs. (n.d.). position. Mozilla. stickyとfixedの違いです。
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. 小画面は表示量が少ない研究です。
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. 移動コストを下げる理論です。
- 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. 2.4.11と1.4.10の基準です。