本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

UI・動きカタログ

モーダルダイアログ

Modal dialog

背景を暗くして、中央の小さな画面で確認や入力を行うUIです。

危険度: 通常重なり表示

今すぐ使う

見た目と使いどころを確かめる

まず動きを試し、意図に合うかを見てください。停止しても内容が分かる設計です。

動きを試す

モーダルダイアログ

背景が控えめに暗くなり、その手前へ目的と閉じ方が分かる小さな画面が重なります。

公開前の確認

この内容で公開しますか?

公開先と変更内容を確認してから次へ進みます。

AIへの依頼文

モーダルダイアログを追加する依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
画面を移動せずに短い確認や入力を行える、キーボードでも迷わないモーダルを追加する。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した操作から開くモーダルダイアログを追加してください。開いたら内部へフォーカスを移し、Tab移動を内部に保ち、Escapeと明示的な閉じるボタンで閉じられるようにしてください。閉じた後は元の操作へフォーカスを戻してください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
ページ全体の置き換え、重要情報の初期非表示化、閉じられない状態、背景操作ができる見せかけのモーダルは作らない。

完了条件:
- 開いたときに目的と閉じ方が分かる
- キーボードフォーカスがモーダルの外へ抜けない
- 閉じた後に元の操作へ戻れる

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

10秒で分かる説明

背景が控えめに暗くなり、その手前へ目的と閉じ方が分かる小さな画面が重なります。

向いている場面

  • 画面を移動せず短い確認や入力を終えたい
  • 今の作業の流れを保ったまま一つの判断を求める

確かめる

使いすぎと操作の妨げを防ぐ

見た目の気持ちよさより、読みやすさと操作しやすさを優先します。

向いていない場面

  • 長い説明や複数工程を見せる
  • 閉じ方が分かりにくい、または背景も操作させたい

アクセシビリティ

  • 開いたら内部へフォーカスを移し、閉じたら元の操作へ戻す
  • Tab移動を内部に保ち、Escapeと明示的なボタンで閉じられるようにする

理解する

名前と仕組みを知る

AIへ伝えるときに役立つ名前と、実装で確認するポイントです。

別名・探すときの言葉

モーダル・ダイアログ・ポップアップ画面

実装時の確認

  • 見出しをダイアログの名前として関連付ける
  • 見た目だけでなく、背景を実際に操作できない状態にする