トースト通知
保存完了、エラー、注意事項を画面上に短く表示します。
トースト通知は、保存、送信、削除、入力エラー、注意事項などの結果を、画面遷移や大きなモーダルなしで短く知らせるUIです。Roundtableでは、どの操作で何を通知するか、成功・失敗・注意の文言をどう分けるか、ユーザーが次の作業を続けられる表示にするかを整理してから実装範囲を決めます。
この機能でできること
保存完了、送信完了、削除完了、入力エラー、権限不足、通信エラー、注意事項などを、画面の右上や下部に短時間だけ表示できます。作業中の画面を大きく邪魔せず、利用者に「処理が終わった」「直す場所がある」「注意して続ける必要がある」ことを伝えます。
操作結果を止めずに伝えるための小さな通知です。
成功、エラー、注意の表示ルールをそろえると、発注者、実装者、AIに指示する人が「どの操作後に何を知らせるか」を同じ前提で話せます。
よくある利用場面
保存・送信完了の通知
編集保存、ステータス変更、メール送信、CSV出力開始など、処理完了を短く伝えます。
入力エラーや処理失敗の通知
必須漏れ、形式不正、権限不足、外部連携失敗など、続行できない理由を画面上に出します。
注意事項の表示
下書き保存中、反映に時間がかかる処理、他ユーザーが更新した可能性など、操作前後の注意を伝えます。
プロンプト例
どの操作で表示するか、通知種別、文言、表示位置、消えるタイミング、連続操作時の扱いをまとめて伝えると、画面ごとに通知の出方がばらつくことを避けられます。
プロンプト
問い合わせ管理画面にトースト通知を追加してください。保存成功時は右上に「保存しました」を緑で3秒表示し、入力エラー時は赤で「未入力の項目があります」を表示してください。注意事項は黄で表示し、複数通知が同時に出る場合は上から新しい順に並べてください。管理側と公開側の申込フォームで同じ表示ルールを使ってください。
この機能を使うときのポイント
通知する操作保存、削除、送信、エラー、注意など、どのタイミングで表示するかを決めます。
通知種別成功、エラー、注意、情報を色やアイコンで分け、意味が混ざらないようにします。
表示位置と時間右上、下部、中央上などの位置と、自動で消える秒数、手動で閉じる可否を決めます。
本文の短さ長い説明は詳細画面や項目下エラーへ寄せ、トーストは次の行動が分かる短い文にします。
この機能を実装するときのコツ
通知のHTMLや色を画面ごとに直接書かず、成功、エラー、注意、情報の種別とメッセージを渡して表示する共通処理に寄せます。Ajax保存や公開フォーム送信では、サーバー側の結果に応じて同じ通知関数を呼び、入力項目ごとのエラーはトーストだけで済ませず、該当項目の近くにも理由を出します。連続保存や複数エラーが起きる画面では、通知が重なって操作ボタンを隠さない位置と最大表示件数も確認します。