モーダルダイアログのUIデザインパターン：用途・サイズ・アニメーション・アクセシビリティ

モーダルダイアログは、ユーザーの注意を特定の情報・操作に集中させるためのUIパターンです。確認・警告・フォーム入力・詳細表示など多くの用途に使われますが、不適切に使うとUXを著しく損ないます。本記事では、モーダルダイアログの適切な設計・実装パターンを解説します。

モーダルを使うべき場面・避けるべき場面

使うべき場面：

• 取り返しのつかない操作の確認（削除・キャンセルなど）
• ユーザーが入力を完了するまでフローを止めたい場面（支払い情報入力など）
• 画像・動画のフルサイズ表示（ライトボックス）
• 現在のコンテキストを失わずに補助的な情報を表示したい場面

避けるべき場面：

• ページ読み込み直後の広告モーダル（ユーザーのコンテキストが定まる前）
• 単純な情報通知（トーストやインラインメッセージで十分）
• モバイルで複雑なフォームを含む場合（全画面ページへの遷移の方が適切なことが多い）
• 入れ子モーダル（モーダルの上にモーダル）

モーダルのサイズバリエーション

スモール（確認ダイアログ）：

幅: 320〜400px。1〜2行のテキスト + ボタン2つ。シンプルな確認・警告に使います。

ミディアム（情報表示・簡易フォーム）：

幅: 480〜600px。複数段落のテキスト・画像・短いフォームに使います。

ラージ（フォーム・詳細情報）：

幅: 720〜800px（または画面幅の80〜90%）。複数ステップフォーム・詳細情報・画像ギャラリーに使います。

フルスクリーン：

画面全体を占有します。複雑なワークフロー・コードエディタ・ビデオ再生などで使います。モバイルでは通常のモーダルをフルスクリーンにすることが多いです。

モーダルの構造設計

ヘッダー：

モーダルのタイトル（左揃え・太字）+ 閉じるボタン（右端・×アイコン）が標準構成です。タイトルは「◯◯を削除」「配送先を追加」のように具体的な動詞+名詞が理想的です。

コンテンツエリア：

スクロール可能なコンテンツエリア。長いコンテンツの場合は最大高さを設定してオーバーフロースクロールにします。

フッター（アクションエリア）：

主要アクションボタンを右端・キャンセルをその左側に配置するのが標準です（Material Design・iOS Human Interface Guidelinesの推奨）。破壊的なアクション（削除など）のボタンは赤色にします。

オーバーレイ（バックドロップ）の設計

バックドロップの色と不透明度：

半透明の黒（rgba(0, 0, 0, 0.4)〜0.6程度）が一般的です。背景のコンテンツを完全に隠すのではなく、うっすらと見えることでコンテキストを維持します。

クリックで閉じる：

バックドロップをクリックするとモーダルが閉じる実装が一般的ですが、フォームを記入中にうっかり閉じるリスクがあります。フォームモーダルでは未入力時のみバックドロップクリックで閉じ、入力後は確認ダイアログを表示するパターンが安全です。

モーダルのアニメーション

登場アニメーション（推奨）：

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}
.modal { animation: modal-in 200ms ease-out; }

退場アニメーション：

登場の逆（opacity: 0 + scale縮小）を150〜200msで実行します。

アクセシビリティ（WCAG 2.1準拠）

フォーカストラップ（Focus Trap）：

モーダルが開いた際、Tabキーでのフォーカス移動をモーダル内に限定します。モーダル外のコンテンツはフォーカスを受け取らないよう、aria-hidden="true" を設定します。

フォーカスの移動：

モーダルが開いた際、最初の操作可能な要素（閉じるボタンまたは最初のフォームフィールド）にフォーカスを移動します。閉じた際は、モーダルを開くきっかけとなった要素にフォーカスを戻します。

ESCキーで閉じる：

ESCキーを押すとモーダルを閉じる実装が必須です。スクリーンリーダーユーザーと高度なキーボードユーザーのためです。

ARIAロール：

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">削除の確認</h2>
  <p id="modal-description">この操作は取り消せません。続行しますか？</p>
</div>

まとめ

モーダルダイアログは強力なUIパターンですが、過用するとユーザーのフローを妨げます。適切な使い所・サイズ・構造・アニメーション・アクセシビリティ対応を設計することで、ユーザーの注意を正しく集中させる効果的なモーダルが完成します。UI ZUKANではモーダルの実装例を多数掲載しています。