ダイアログ表示
確認、編集、選択、詳細表示をページ遷移なしで小窓に表示します。
ダイアログ表示は、今見ている一覧や詳細画面の文脈を保ったまま、必要な確認や入力だけを小窓で行うためのUIです。Roundtableでは「どの画面から開くか」「何を確認・編集するか」「閉じたあとにどこを更新するか」まで言葉にしておくと、実装のずれを減らせます。
この機能でできること
一覧画面から詳細を確認する、削除や送信前に確認する、担当者や商品を選ぶ、登録済みデータの一部だけを編集する、といった操作をページ遷移なしで行えます。画面全体を移動しないため、元の検索条件や一覧位置を保ったまま作業を続けられます。
小さな操作を、今の画面の上で完結させる部品です。
大きな入力フォームや複数ステップの作業は、通常画面やステップウィザードに分けた方が扱いやすい場合があります。
よくある利用場面
実行前の確認
削除、確定、送信、請求書発行など、取り消しにくい操作の前に内容と注意点を確認します。
一部項目の編集
ステータス、担当者、期限、メモなど、一覧を見ながら少数項目だけを更新します。
候補の選択
顧客、商品、予約枠、関連レコードなどを検索・選択し、元画面へ反映します。
プロンプト例
「案件一覧の行ボタンから、ステータス変更ダイアログを開きたい」「保存前に確認ダイアログを出し、実行後は一覧の該当行を更新したい」のように、起点、目的、表示内容、実行後の更新範囲をセットで伝えます。
プロンプト
顧客一覧の各行に「詳細」ボタンを置き、押したら顧客名、連絡先、最近の対応履歴をダイアログで表示してください。編集はせず、閉じるだけで元の一覧に戻れる形にします。
この機能を使うときのポイント
起点ページボタン、行ボタン、リンク、保存後の確認など、どこから開くかを決めます。
役割確認だけ、入力して保存、検索して選択、詳細表示など、ダイアログ内で行う操作を絞ります。
保存後の反映一覧全体、該当行、詳細エリア、メッセージ表示など、閉じた後に更新する場所を決めます。
権限と状態誰に表示するか、どのステータスなら押せるか、実行時にもサーバー側で拒否する条件を確認します。
この機能を実装するときのコツ
初回は、よく使う起点1つと主要操作1つに絞ると確認しやすくなります。たとえば「一覧の行ボタンから詳細確認だけ」「保存前の確認だけ」「担当者変更だけ」のように範囲を限定し、検索付き選択、複数ステップ、複雑な権限分岐は必要度を見て追加します。