なぜ下から?
Hoober(2013)は多くの人が片手・親指で操作すると観察し、Bergstrom-LehtovirtaとOulasvirta(2014)は親指が届く範囲が画面下部に集中すると示しました。ボトムシートは親指ゾーンに選択肢を置きます(Fitts, 1954)。
標準とモーダル
Material Design(Google, n.d.)は標準とモーダルを区別し、Apple(n.d.)は高さ段階を定めています。重要で長い判断はモーダルダイアログか別画面が適切です(Cooper et al., 2014)。
閉じる操作とアクセシビリティ
下へのドラッグや外側タップで閉じられるようにし、ジェスチャー操作と衝突しないよう内部スクロールと区別します。閉じるボタンとフォーカス移動も必要です(Parhi et al., 2006)。
よくある質問
- モーダルダイアログとの違いは?
- シートは下から現れ文脈を保ち、ダイアログは中央で即決を求めます。
- 入れてはいけないものは?
- 長いフォームや多段階の作業です。
出典確認日:2026-10-27
参考文献
- Google. (n.d.). Bottom sheets. Material Design 3. 標準とモーダルのボトムシートを区別する公式ガイドです。
- Apple. (n.d.). Sheets. Human Interface Guidelines. iOSシートの高さ段階と閉じ方を説明しています。
- 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. 親指が届く範囲をモデル化した研究です。
- Hoober, S. (2013, February 18). How do users really hold mobile devices? UXmatters. 1,300人以上の持ち方を観察した記事です。
- 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. 片手親指操作のターゲットサイズを測定しました。
- Cooper, A., Reimann, R., Cronin, D., & Noessel, C. (2014). About face: The essentials of interaction design (4th ed.). Wiley. モーダルとモードレスの原則を扱っています。
- 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. 距離と大きさと動作時間の古典です。
