ボトムシート

Bottom sheet

別名: ボトムシート、下部シート、Bottom sheet、Sheet

生態(さわってみる)

一言定義

画面下端からせり上がり、背面のコンテンツを保ったまま任意の内容を表示するモバイル向けの部分オーバーレイUI。

分類

使う場面

  • モバイル幅で画面下端からせり上がる形が、フォームや詳細情報の表示に自然なとき
  • ドラッグで半分/全体の高さを切り替えるなど、余白を活かした柔軟な表示量を持たせたいとき

避ける場面

  • 選択肢を数個のリストに絞った操作メニューを出したいだけのとき(→アクションシート)
  • PC幅で画面中央に汎用ダイアログを出す方が自然なとき(→モーダル)

近縁種との比較

アクションシートとはどちらも画面下端からせり上がる点で似ているが、Material Design 3のBottom sheetが任意のコンテンツを自由に配置できる汎用コンテナであるのに対し、Apple HIGのAction sheetは現在のアクションに関連する2〜4個程度の選択肢リストに用途を絞る、という設計思想の違いがある。本図鑑ではこの区別に沿って両者を別カードとして扱う。ドロワーも同じオーバーレイ層のUIだが画面端(多くは左右)からスライドしナビゲーションや設定パネルに使われるのに対し、ボトムシートは画面下端に固定されモバイルでの片手操作を意識した表示位置を取る。モーダルとは背面操作を止める点で共通するが、モーダルは画面中央に浮かぶ汎用ダイアログであるのに対し、ボトムシートは画面下端からせり上がりドラッグで表示量を調整できる点で異なる。

実例リンク

アクセシビリティ

role
ネイティブ<dialog>のshowModal()を使うとrole="dialog"相当の振る舞いとトップレイヤー化が得られる。ドラッグハンドルはaria-hidden="true"の装飾要素とし、実際の高さ切り替えはボタンとしても操作できるようにする
キーボード操作
Escで閉じて呼び出し元へフォーカスを戻す。開いた瞬間にシート内の最初のフォーカス可能要素へ移動し、Tabはシート内に閉じ込める(フォーカストラップ)
補足
M3のBottom sheetは中身を自由に構成できる汎用コンテナである一方、HIGのAction sheetは選択肢リストに用途を絞る——この違いが両者の呼称の使い分けの核になる