Bottom Sheetとは？画面の下から補助操作を開く方法

確認日：2026年10月19日

参照したオンライン文書の版番号：未確認

Bottom Sheetは画面の下から現れる補助的な領域です。元の画面を見ながら、選択肢や詳しい情報を開きたいときに使います。

Bottom Sheetとは

AndroidのModalBottomSheetは下端から表示して閉じる状態を持つ要素です。Appleのシートにも、元の画面から一時的な作業を開く考え方があります。ただし、どちらの製品も見た目と操作が同一という意味ではありません。対象の環境に合わせて、閉じ方や背景との関係を決めます。

例えば、地図で場所を選んだ後にその場所の詳細を開く場合、地図との関係を保てる設計です。記事の共有先を選ぶ場合にも、別のページへ移らず候補を見せられるでしょう。重要なのは元の画面で何を選んだから開いたのかが分かることです。

左は地図から開く場所の詳細、右は記事の共有先です。架空の画面では背後の内容を少し残し、シートの先頭に題名を置いて関係を示しました。地図では位置の確認、共有では選択肢を中心にしています。

地図上の場所の詳細と、記事の共有先を画面下端のシートに表示した例

内容が長い場合はシート内をスクロールさせるのか、別画面へ移るのかを決めます。入力欄を置くなら、閉じたときに入力を破棄するか残すかも明示してください。閉じる操作や背景の扱いは画面ごとに一貫させます。

Android Developersの公式画像で、シートに入れる内容と、画面幅に合わせた配置を見比べます。この節の引用画像は出典元の著作物で、当サイトのCC BY 4.0の対象外です。

左は植物の詳細、右は絞り込み条件をシートに入れています。写真を背後に残して対象とのつながりを見せ、条件の選択では「Cancel」と「Apply」を下端へまとめた構成です。

上は絞り込みを全画面で開き、下は商品一覧を残して右側に開く例です。下の領域はボトムシートではなくサイドシートで、広い画面でも元の内容を見ながら条件を変えられます。

AppleのSheetsガイドも、シートの中で扱う作業の範囲を考える参考になります。

プロンプトの例

地図上の場所を選んだら、下端から場所の詳細を開いてください。地図のどの点を選んだか分かるようにし、シート内の情報が長い場合は中をスクロールできるようにします。閉じる操作、背景を押したときの動作、入力途中で閉じた場合の扱いも決めてください。