ux-modals-and-dialogs

モーダル & ダイアログ スキル

このスキルの動作 (最初にお読みください)

これは 生成型 スキルです。デフォルトの失敗モードは、あらゆる場面で中断してしまうこと (成功メッセージ、ヒント、ニュースレターのためのモーダル — 注意力をタダ同然のように消費すること)、ユーザーを閉じ込めること (目に見える閉じるボタンがない、Esc が効かない、モーダルの重ね表示)、そして 曖昧な選択肢 (「よろしいですか?」→ はい/いいえ) です。モーダルは インターフェース全体を人質に取ります — それが正当化されるのは重大な局面だけであり、その代償は極めて明確な目的と苦もなく退出できる手段によって返済されます。このスキルは次をゲートします:

1. 中断そのものをゲートする — そもそもここでモーダルは正当化されるのか? 最も重要な判断は、あらゆる設計の前に起こります。
2. 常に当てはまる核心を適用する — タイトルに目的、明示的なボタン、簡単な却下、フォーカス管理。
3. 種類とタイミングの判断 (ポップアップ/フルスクリーン/ポップオーバー/ボトムシート、権限の事前説明) をトレードオフとともに明らかにします。

その後、検証のために ux-heuristics-audit、ux-accessibility-audit、ux-aesthetics-audit、ux-microcopy-audit、ux-dark-patterns-audit に引き継ぎます。

---

ステップ 0 — 中断をゲートする (最も重要な判断)

モーダルはすべてをブロックします。それが正当化されるのは 重大な局面 だけです:

• 破壊的または不可逆的な操作 の確認 (アカウント削除、下書きの破棄) — 影響を示す (「12 個のファイルが削除されます」)。
• 重大なエラーまたは警告 (システムの再起動、未保存の変更が危険にさらされている)。
• 現在のタスクを 続行するために必要な情報 (保存するためのログイン、支払いの詳細)。

それ以外のすべて — 成功メッセージ、ヒント、参考情報、プロモーション — は 非モーダル パターンを使用します: インラインメッセージ、トースト、バナー、ポップオーバー。また、次を明確にします:

• 誰がトリガーするのか? ユーザー起点のモーダル (ボタンをクリックした) は予期されるものです。システム起点 のモーダル (タイマーによるポップアップ、アップグレードの催促) は予告なく中断します — 真に緊急 (セッションの期限切れ、重大なアップデート) でない限り避けてください。
• タイミング — 進行中の重大なフローを決して中断しないこと (チェックアウトの途中は典型的な罪です)。
• プラットフォーム — デスクトップのアラートと iOS のアラート / Android のダイアログの慣習。モバイルのアクション一覧にはボトムシート/アクションシート。

コンテンツが重大局面のテストに合格しない場合、モーダルの設計をやめ、インライン/トーストの代替を推奨してください。

---

常に適用する核心 (ゲートを通過したすべてのモーダルにとって正しいこと)

目的、タイトル、ボタン

• タイトルがメッセージ全体を担います — ユーザーは本文をざっと読むか飛ばします。「警告」ではなく「下書きを破棄しますか?」。本文は なぜ と文脈を補足します。重要なことが本文だけに置かれることはありません。
• タイトルに応える明示的なボタンラベル: ❌「はい」/「いいえ」/「キャンセル」 ✅「下書きを破棄」/「編集を続ける」。ユーザーは他の何も読まずに、各ボタンが何をするのか分からなければなりません。
• アクションボタンは最大 2 つ。 3 つ目 (「詳細を見る」) はユーザーを判断から逃がしてしまいます。
• オプトアウトのラベルで 非難したり羞恥を与えたりしないこと (「いいえ、お金を節約するのは嫌です」→ ダークパターンの指摘対象)。

却下は権利であり、機能ではない

• 複数の目に見える退出手段: 閉じる/キャンセルボタン + 隅の × + デスクトップでは Esc / モバイルでは戻る。
• 外側をクリック/タップすると閉じる — 入力されたデータが失われない場合。却下が作業を破壊する場合にのみ抑制します。
• モーダルを重ねないこと。 モーダルの上のモーダルは、手順が増えただけの人質状況です。

フォーカスと注意力の仕組み

• モーダルの背後に 暗いオーバーレイ — 注意を集中させ、外側の操作をブロックし、閉じるターゲットも兼ねます。
• 開いたときにキーボードフォーカスがモーダル内へ移動 (主要アクションの上へ)。すべてのコントロールがキーボードで到達可能。
• 中央配置 — モバイルではど真ん中。デスクトップでは水平方向に中央で、中央よりやや上 (ウィンドウのサイズ変更に対して安定)。
• 重大なアラートは重大に見えること: 破壊的/緊急の確認には赤いアクセントとアラートアイコン。そうすることで、習慣化したユーザーが自動操縦で却下しなくなります。

---

文脈に依存する判断（表に示し、自動適用しない）

判断	適用する場合	避ける／適応させる場合	既定の推奨
ポップアップモーダル	暗くしたコンテンツの上に重ねる、標準的な重要度の高い割り込み	ページ全体を必要とするコンテンツ	既定のモーダル種別
フルスクリーンモーダル	複雑で集中を要するタスク：複数ステップのフォーム、決済、規約、モバイルでの注目シーン	単純な確認（過剰）；ユーザーがすぐに抜け出す必要がある可能性のあるもの — 却下を明確にする	タスクが本当に画面全体を占める場合のみ
ポップオーバー	ページをブロックせずに、要素に紐づけて追加の詳細やオプションを表示	重要な情報（見逃しやすい）	文脈に応じたヘルプの非モーダルな既定
ライトボックス	ナビゲーション、キャプション、ズームを伴う画像／動画の拡大表示	メディア以外のコンテンツ	メディア中心のプロダクトのみ
ボトムシート／アクションシート（モバイル）	OS の慣習に従った、関連するアクションや共有先のリスト	重要な確認（アラート／ダイアログを使用する）	アクションリストには Android のボトムシート／iOS のアクションシート
成功フィードバック	インラインまたはページ上の状態	成功のモーダル — 「うまくいきました」と伝えるために割り込む	続行前にユーザーが確認する必要がある場合のみモーダルで成功を表示
権限リクエスト	文脈に沿って、機能がそれを必要とする時点で；事前許可の説明で準備し；一度に 1 つの権限；説得力のある理由（許可率 +81%）	初回起動時、まとめて、「推奨」という圧力ラベル付き、またはタスクの途中	準備 → 文脈に沿った要求 → 拒否を撤回するための穏やかな導線
システム起点のモーダル	本当に緊急の場合：セッションの期限切れ、セキュリティ、データ損失	サブスクリプションの催促、時間指定のプロモーション、評価の懇願	ほぼ決して使わない；代わりにバナーやバッジを使う

---

結果を検証する（オーケストレーション）

引き継ぎでは、各レンズをインストール可能なスキルの name で指定します。そのスキルがインストールされている場合にのみ呼び出してください。インストールされていない場合、このスキル自体のコアにすでにこれらのルールが含まれています — ブロックせずにそのまま進めてください。

生成または改訂した後、完了と宣言するのではなく、結果を監査レンズに引き継いでください。これらは候補のレンズです — 姿勢は docs/orchestration-policy.md で設定されるか、全体を ux-design-review 経由でルーティングします。ここでは、**heuristics、microcopy、dark-patterns は Tier A（自動実行）；accessibility、aesthetics、mobile-responsiveness は Tier B（提案）**です — 既存のデザインシステムの下では aesthetics は抑制され、accessibility は使われ方に絞られます；mobile-responsiveness はモバイルのみに適用されます。ユーザーがこのスキルを特定の 1 つの目的で呼び出した場合は、その範囲を尊重してください。

• ux-heuristics-audit (Tier A) — ユーザーの制御と自由（出口）、エラーの防止（明示的な確認）、期待との一致（プラットフォームの慣習）。
• ux-accessibility-audit (Tier B — 提案；デザインシステムの下では絞る) — フォーカストラップの正確さ、キーボードによる却下、スクリーンリーダーによるアナウンス、オーバーレイコンテンツのコントラスト。
• ux-aesthetics-audit (Tier B — 提案；デザインシステムの下では抑制) — モーダルの視覚的階層、オーバーレイの扱い、アラートスタイルの抑制。
• ux-microcopy-audit (Tier A) — タイトルの明確さ、ボタンの明示性、本文の簡潔さ、権限理由の文言。
• ux-dark-patterns-audit (Tier A) — このスキルの割り込みはダークパターンの典型的な領域です：システムモーダルでの催促、恥をかかせるオプトアウト、権限の圧力、見つけにくい却下。
• ux-mobile-responsiveness-audit (Tier B — 提案；モバイルのみに適用) — 文脈がモバイルの場合：シートの慣習、却下ジェスチャー、フルスクリーンの挙動。

監査が競合を表面化させた場合（例：グロースがページ読み込み時のサインアップモーダルを望む vs. ユーザーの制御）、主要なタスクへと解決を戻してください：ユーザーは何かをしていたのです — モーダルはそのタスクを守るか、邪魔にならないようにするかのどちらかでなければなりません。

---

よくある do/don't パターン

❌ 避ける	✅ 行う
成功メッセージやヒントにモーダルを使う	インラインの状態表示／トースト。モーダルは重要な場面のみ
閲覧中に時間指定の購読ポップアップを表示する	ユーザーが能動的に開くモーダル。システムによる中断は緊急時のみ
「よろしいですか？」→「はい」／「いいえ」	「下書きを破棄しますか？」→「破棄」／「編集を続ける」
「詳細を見る」を含む3つ以上のボタン	タイトルに揃えた2つのアクション
× も Esc も外側クリックもない	閉じるボタン + Esc／戻る + 外側クリック（安全な場合）
別のモーダルの上にモーダルが開く	一度に1つのモーダルのみ。例外なし
重要な情報が本文テキストに埋もれている	タイトルでメッセージを伝える
初回起動時に権限をまとめて要求する	事前の説明と文脈を伴い、理由を示して1つずつ要求する
「結構です、見逃すのが好きなので」	中立で敬意あるオプトアウトのラベル
フォーカスが背後のページに残る	フォーカスはモーダル内の主要アクションへ移動する
確認せずにリリースする	ヒューリスティクス + アクセシビリティ + 美学 + マイクロコピー + ダークパターンのチェックへ引き継ぐ

---

出典レッスン (Uxcel)

• Types of UI Modals
• Best Practices for Designing UI Modals
• Designing Mobile Notifications & Dialogs
• How to Ask for User Permissions Unobtrusively