画面遷移させないUX：ハーフモーダル（ボトムシート）設計の4つの急所
スマートフォン向けアプリのUI設計において、画面下部からスライドして現れる「ハーフモーダル（ボトムシート）」は欠かせない要素となっています。画面を完全に切り替えることなく、現在のコンテキスト（文脈）を維持したまま一時的な操作や情報表示を行うのに非常に有効なパターンです。
出典: KATRIN BOLOVTSOVA / Pexels
しかし、ハーフモーダルは実装が容易である反面、インタラクションの自由度が高いために設計ミスが起きやすいUIでもあります。ユーザーにストレスを与えず、直感的に操作してもらうための4つの設計の急所をまとめました。
1. ドラッグインジケータ（ハンドル）の適切な提示
ハーフモーダルの最大の特徴は、「上下のスワイプ操作で高さを変えたり閉じたりできる」というジェスチャー操作にあります。このジェスチャーが利用可能であることをユーザーに直感的に理解させるのが、上部中央に配置される「ドラッグインジケータ（ハンドル）」です。
インジケータは、単なる視覚的アクセントではなくアフォーダンス（物理的な操作の可能性を伝える手がかり）として機能します。
- 静的なシートの場合: スワイプで閉じることができず、タップでのみ操作するモーダルの場合は、ドラッグインジケータを配置してはいけません。スワイプできると誤認させ、操作エラーを引き起こす原因になります。
- 動的なシートの場合: 高さを伸縮できる、あるいはスワイプで閉じられる場合は、角丸の細長いバーを配置し、これが「動かせるオブジェクト」であることを示します。
2. スナップポイント（高さの設定）の最適化
ハーフモーダルが表示された際のデフォルトの高さ（初期スナップポイント）は、シート内のコンテンツ量とメイン画面の情報の関係性から決定されるべきです。
一般的には以下の3つの高さ（スナップポイント）が用いられます。
- コンテンツフィット（最小限）: 選択オプションやシェアシートなど、必要な要素が少ない場合は画面の下半分（30%〜40%程度）に収めます。
- ミドル（中間）: マップ上のスポット詳細を表示する場合など、背景の地図を見せつつ情報を確認させたいときは画面の半分（50%〜60%）に設定します。
- フル（最大化）: さらに詳細なレビューを読んだり、長文のフォームに入力したりする場合は、画面のほぼ全体（90%程度）まで引き上げられるようにします。
初期表示で画面を覆い隠しすぎると、文脈が途切れてしまうため、まずは背後の画面が適度に見える高さで表示し、必要に応じてユーザーが引き上げられる設計が理想的です。
3. スワイプで閉じる際の「しきい値」とアニメーション
ユーザーがハーフモーダルを下方向にスワイプした際、どのタイミングで「閉じる」と判定するか（しきい値の設定）は、UXに直結します。
- しきい値が浅すぎる場合: スクロール操作の誤操作や、少し指が触れただけでシートが閉じてしまい、ユーザーが入力していたデータや閲覧中の状態が失われるイライラを引き起こします。
- しきい値が深すぎる場合: 何度も下にドラッグしているのにシートが頑なに閉じず、操作が効かないような錯覚（フィードバックの不足）を与えます。
これを防ぐためには、指の移動速度（ベロシティ）と移動距離の組み合わせで判定します。勢いよく下にスワイプ（フリック）された場合は、移動距離が短くても閉じる処理を行い、ゆっくり動かされた場合は画面の一定比率（例：シート高の半分）を超えたら閉じる、といった繊細な調整が必要です。
4. ディミング（背景の遮蔽）パネルのタップ領域制御
ハーフモーダルが表示されている間、背後のメイン画面は暗い半透明のマスク（ディミングパネル）で覆われることが一般的です。これはフォーカスをハーフモーダルに集めるための手法です。
この背景部分がタップされた際の挙動は、タスクの性質によって切り替える必要があります。
- 一時的な情報確認・選択: 背景タップでシートが閉じるようにします。ユーザーにとって最も手軽な「キャンセル操作」として機能するため、UXの摩擦を減らすことができます。
- 重要なデータ入力や設定: 誤って背景をタップしただけで入力内容が消えてしまうのを防ぐため、背景タップを無効化（モーダル性を強化）し、明確な「閉じる」または「保存」ボタンを押させるように設計します。
まとめ
ハーフモーダルは、画面遷移を最小限に抑え、流れるような体験を作るための強力な道具です。しかし、ドラッグのアフォーダンス、高さの段階設定、ジェスチャーの感度、そしてキャンセル操作の挙動という4つの要素を細かく詰めなければ、かえって操作しづらいアプリになってしまいます。実装時には常に、実際の端末を触りながら、指の動きに対する「心地よさ」をチューニングすることが大切です。
お役立ち情報
- Apple Human Interface Guidelines - Sheets Appleの公式デザインガイドラインにおける、シート（ハーフモーダル）の使い方と推奨事項が詳しく記載されています。
- Material Design - Sheets: bottom GoogleのMaterial Designによるボトムシートの設計原則、状態（State）、および実装コードへのリンクがまとまっています。
- Nielsen Norman Group - Bottom Sheets Semantics UX研究機関であるニールセン・ノーマングループによる、モバイルにおけるボトムシートとモーダルダイアログの使い分けに関する調査レポート（英語）です。