ボトムシートUIパターン：設計・アニメーション・ユースケース完全ガイド
モバイルUIのボトムシート（Bottom Sheet）の設計パターンを解説。標準型・モーダル型・ハーフシート・フルシートの使い分け・スナップポイント設計・ジェスチャー・アクセシビリティ対応など、実践的な実装ガイドを紹介します。
ボトムシート（Bottom Sheet）は、モバイルアプリのUIパターンとして非常に広く使われているコンポーネントです。画面下部からスライドアップして追加の情報・操作メニューを提供するこのパターンは、地図アプリ・ショッピングアプリ・SNSアプリなど、国内外の主要アプリで標準的に採用されています。本記事では、ボトムシートの設計パターンと実装のポイントを解説します。
ボトムシートの種類
標準ボトムシート（Persistent Bottom Sheet）：
メインコンテンツと共存し、常に画面の一部として表示されます。Googleマップの「場所の詳細」パネルが典型例で、最小化・展開の2つ以上の状態を持ちます。メインコンテンツも操作可能です。
モーダルボトムシート（Modal Bottom Sheet）：
背景のコンテンツをオーバーレイで暗くし、ボトムシートのみ操作可能にします。オプションの選択・確認ダイアログ・フィルタ設定など、ユーザーに選択・入力を求める場面で使います。
ハーフシートと3/4シート：
画面の約半分または3/4を占めるボトムシート。iOSのUISheetPresentationControllerで実装される形式で、詳細情報の確認・フォーム入力に適しています。
スナップポイントの設計
スナップポイントとは：
ボトムシートをドラッグしたとき「止まる位置」のことです。自然なドラッグ体験のためにスナップポイントを適切に設計します。
典型的なスナップポイント例（Googleマップ型）：
- 最小化（peek状態）: 画面下部に少し見える（高さ 60〜80px）
- ハーフ（半画面）: 地図と詳細が同時に見える（画面高さの約50%）
- フル展開: 詳細情報全体が見える（画面高さの約90%、SafeArea以内）
スナップポイントの実装：
iOSネイティブでは UISheetPresentationController の detents プロパティ（.medium()・.large()）で設定できます。Webでは CSS の touch-action: pan-y とJavaScript でのdrag tracking実装が必要です。
ドラッグハンドルの設計
ドラッグハンドルの形状：
ボトムシートの上部中央に配置する小さな横長の丸い棒状インジケーターです。幅32〜48px・高さ4〜6px・角丸が標準的な形状で、背景との十分なコントラストを確保します。
タップでの展開・閉じる：
ドラッグハンドルのタップで展開・最小化を切り替えられる実装を加えることで、操作性が向上します。
ボトムシートのアニメーション設計
スプリングアニメーション：
ボトムシートのスライドアップ・スライドダウンには、直線的なease-outよりもスプリングアニメーション（ばねのような減衰振動）が自然に見えます。iOSでは UISpringTimingParameters、Webでは spring() 関数（Framer Motion等）が利用できます。
ドラッグ中のリアルタイム追従：
ドラッグ中はシートがタッチポイントにリアルタイムで追従し、指を離した瞬間に最も近いスナップポイントへスプリングアニメーションで移動する設計が理想的です。
背景のオーバーレイ連動：
モーダルボトムシートの場合、シートの展開量に比例して背景オーバーレイの不透明度を変化させると（0〜0.5）、ドラッグ操作中の状態が自然に伝わります。
ボトムシートのユースケース別設計
アクションシート（操作メニュー）：
「シェア・コピー・削除・報告」などの操作リストを提供する場合、項目間の区切り線・アイコン・ラベルを統一したリストUIを使います。キャンセルボタンは最下部に独立して配置するのがiOSの標準パターンです。
フィルター・ソート：
検索結果やリストのフィルタ設定をボトムシートで提供するパターン。チェックボックス・ラジオボタン・スライダーを使ったフィルタUIと「適用」「リセット」ボタンを配置します。
詳細プレビュー：
リスト項目タップ時に詳細ページへ遷移する代わりに、ハーフシートで概要を表示し、さらに詳しく見たい場合に全画面へ展開するパターン。リスト → 詳細の流れをスムーズにします。
アクセシビリティ対応
フォーカス管理：
ボトムシートが開いた際、フォーカスをシート内の最初のインタラクティブ要素に移動させます。シート外へのフォーカス移動はトラップ（閉じ込め）します。
ESCキー・スワイプダウンで閉じる：
キーボードナビゲーションユーザーのためにESCキーで閉じる実装、スクリーンリーダーユーザーのための「閉じる」ボタン配置が必要です。
`role="dialog"` と `aria-modal="true"`：
モーダルボトムシートには適切なARIAロールを付与します。
まとめ
ボトムシートはモバイルUIにおける多目的なパターンです。標準型・モーダル型を目的に応じて使い分け、スナップポイント・スプリングアニメーション・アクセシビリティを適切に設計することで、ユーザーにとって自然で快適な体験を提供できます。UI ZUKANではボトムシートの実装例を多数掲載しています。