モーダルは、現在のページの上にレイヤーとして重なり、ユーザーの操作を強制的にそのウィンドウ内に限定するコンポーネントです。

使用すべきシーン

モーダルはユーザーのフローを 中断 させる強いUIです。乱用するとユーザーをイライラさせます。以下のシーンに限定して使用しましょう。

1. クリティカルな確認 : 「本当に削除しますか？」といった、取り返しのつかない操作の前の確認。
2. 文脈を維持したままの入力 : 親画面の情報を参照しながら簡単な入力をしたい場合（例：一覧画面でのクイック編集）。
3. 重要な情報の通知 : ユーザーに必ず読んでほしい規約改定のお知らせなど。

避けるべきシーン :

• 単なるエラーメッセージ（トーストやインライン表示を使うべき）。
• 複雑すぎる入力フォーム（別ページに遷移させるべき）。

構造と挙動

1. オーバーレイ (Scrim / Backdrop)

背景を暗くすることで、背面のコンテンツが操作できないことを視覚的に示し、モーダルへの集中を促します。 一般的に、オーバーレイをクリックするとモーダルを閉じる（Dismiss）挙動が期待されますが、データ損失のリスクがある場合は確認を入れるか、閉じないようにします。

2. フォーカストラップ (Focus Trap)

アクセシビリティの最重要項目 です。 モーダルが開いている間、キーボード操作のフォーカス（Tabキー移動）はモーダル内だけで循環し、裏側のページに移動してはいけません。 また、モーダルが閉じた後は、フォーカスを開く前のボタンに戻す必要があります。

3. スクロール

モーダル内のコンテンツが長くなる場合は、モーダル内部でスクロールさせます。背景のページ（Body）のスクロールはロックする必要があります（スクロール・ジャンクの防止）。