ボトムシート
Bottom sheet画面下端からせり上がり、背面のコンテンツを保ったまま任意の内容を表示するモバイル向けの部分オーバーレイUI。
○ 使う場面
- モバイル幅で画面下端からせり上がる形が、フォームや詳細情報の表示に自然なとき
- ドラッグで半分／全体の高さを切り替えるなど、余白を活かした柔軟な表示量を持たせたいとき
× 避ける場面
- 選択肢を数個のリストに絞った操作メニューを出したいだけのとき（→アクションシート）
- PC幅で画面中央に汎用ダイアログを出す方が自然なとき（→モーダル）
別名
ボトムシート、下部シート
近縁種との比較
「シート」は本来一枚の紙を意味する語で、Googleが提唱したMaterial Designという考え方も、画面の要素を現実の紙のように重なり合う一枚の面として扱う比喩に基づいている。ボトムシートは、その紙の面が画面下端から引き上げられ、背後のコンテンツの上に重なって現れるイメージで名付けられている。
| 近縁種 | 違い・使い分け |
|---|---|
| アクションシート | どちらも画面下端からせり上がる点で似るが、ボトムシートは任意のコンテンツを自由に配置できる汎用コンテナであるのに対し、アクションシートは現在のアクションに関連する2〜4個程度の選択肢リストに用途を絞る。 |
| ドロワーメニュー | 同じオーバーレイ層のUIだが、ドロワーは画面端（多くは左右）からスライドしナビゲーションや設定パネルに使われるのに対し、ボトムシートは画面下端に固定されモバイルでの片手操作を意識した表示位置を取る。 |
| モーダル | 背面操作を止める点で共通するが、モーダルは画面中央に浮かぶ汎用ダイアログであるのに対し、ボトムシートは画面下端からせり上がりドラッグで表示量を調整できる。 |
分類
機能・役割
- ナビゲーション
- 入力・操作
- 表示・整理
- フィードバック・状態
表示レイヤー
- インライン
- 固定・追従
- オーバーレイ
- 全画面・遷移
複雑さ
- 単体パーツ
- 複合パーツ
- セクション