ボトムシートUIの活用パターンとデザインガイド完全版

スマートフォンの大画面化に伴い、ボトムシートはモバイルアプリUXの重要なパターンとして定着しました。画面下部からスライドアップするこのUIコンポーネントは、親指でのアクセスしやすさを最大限に活かした設計です。本記事では、ボトムシートの種類・活用シーン・設計のポイントを詳しく解説します。

ボトムシートの3種類

ボトムシートには大きく分けて3つの種類があります。それぞれの特徴と使い分けを理解することが、適切な設計の第一歩です。

1. スタンダードボトムシート（Persistent Bottom Sheet）

常に画面上に存在し、メインコンテンツと同時に表示されるタイプ。マップアプリで地図を表示しつつ下部に場所の情報を表示するパターンが代表例です。ユーザーは上下にドラッグしてシートの展開度を変えられます。

2. モーダルボトムシート（Modal Bottom Sheet）

メインコンテンツを半透明のオーバーレイで覆い、一時的に表示されるタイプ。フィルター設定・共有メニュー・アクションシートとして広く使われています。外側のオーバーレイをタップするか、スワイプダウンで閉じられます。

3. 拡張ボトムシート（Expanding Bottom Sheet）

複数のスナップポイントを持ち、折りたたみ→半展開→全画面の3段階で高さが変わるタイプ。GoogleマップやUberのアプリが典型例で、地図と詳細情報を同時に閲覧しながら操作できます。

ボトムシートの主要活用シーン

フィルター・ソート設定

リスト画面やギャラリー画面で絞り込み条件を設定する際にボトムシートを使うと、画面遷移なしにフィルターを適用できます。チェックボックス・スライダー・タグ選択などのUI要素をまとめて配置できるため、快適な操作感を提供できます。

シェア・アクションメニュー

コンテンツの共有・保存・報告などのアクションをリストアップする際にボトムシートを使用。アイコン＋テキストのリスト形式が最も一般的で、iOS標準のアクションシートをカスタマイズしたデザインも多く見られます。

商品・場所の概要表示

ECアプリで商品カードをタップした際に、商品の概要をボトムシートで表示するパターン。詳細ページへの遷移前にキーとなる情報（価格・評価・購入ボタン）を確認できるため、コンバージョン率の向上が期待できます。

ステップ式フォーム

複数ステップの設定やフォームをボトムシートで展開するパターン。日付選択・人数選択・オプション選択など、サブタスク的な入力を画面遷移なしに完結させられます。

スナップポイントとアニメーション設計

ボトムシートのUXを決定づける重要な要素がスナップポイントとアニメーションです。

スナップポイントの設計：

• ピークポイント（覗き見状態）：20〜30%の高さ
• ハーフポイント：50%の高さ
• フルスクリーンポイント：90〜95%の高さ（ノッチ・ステータスバーを考慮）

スナップポイント間のトランジションは、スプリング物理演算を使ったアニメーションが自然な感触を生み出します。iOSのUISheetPresentationController（iOS 15+）では、こうしたスナップポイントが標準でサポートされています。

ドラッグインジケーター：

シートの上部中央に表示される小さな横線（ハンドル）は、ドラッグ可能であることをユーザーに伝えます。幅36〜44px、高さ4〜5pxが標準的なサイズです。

ボトムシートのアクセシビリティ

ボトムシートのアクセシビリティ対応は見落とされがちですが、重要な設計ポイントです。

• VoiceOver/TalkBackでのフォーカス制御：シートが開いた際にフォーカスをシート内に移動させる
• キーボード表示時のシート位置調整：テキスト入力がある場合、キーボードが表示された際にシートが押し上げられる動作を実装
• 閉じるボタンの提供：スワイプダウンだけでなく、明示的な「閉じる」ボタンも設置

まとめ

ボトムシートはモバイルアプリの操作性を大幅に向上させる強力なUIパターンです。適切なタイプ・スナップポイント・アニメーションを設計することで、ユーザーが直感的に使えるインターフェースを実現できます。UI ZUKANでは、国内アプリのボトムシート事例を豊富に収録していますので、デザインの参考にご活用ください。