重ねて出す画面の違い
ボトムシート・アクションシート・モーダル・ポップオーバー
今の画面の上に何かを重ねて出すUIの違いです。出てくる場所と、中に入れられるものが違います。
表で比べる
| ボトムシート | アクションシート | モーダル | ポップオーバー | |
|---|---|---|---|---|
| 出る場所 | 画面の下から | 画面の下から | 画面の真ん中 | 押したボタンのすぐそば |
| 中に入れるもの | 自由（地図の詳細、フォームなど） | 選択肢のボタンだけ | 確認の文とボタン | 少しの選択肢や設定 |
| 大きさの変更 | つまんで上下に変えられる | できない | できない | できない |
| 得意な端末 | スマホ | スマホ（iPhone） | スマホ・パソコン | パソコン・iPad |
こんなときは、これ
- 地図や一覧を見せたまま、詳しい情報を重ねたいボトムシート →
- 「写真を撮る／選ぶ」など短い選択肢から選ばせたいアクションシート →
- 大事な確認をしたいモーダル →
- ボタンのすぐそばに小さなメニューを出したいポップオーバー →
迷ったらスマホで中身が自由ならボトムシート、選ぶだけならアクションシート、確認ならモーダルです。