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

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

UI・動きカタログ

トースト通知

Toast notification

保存やコピーのあと、画面の端へ短く現れるお知らせです。

危険度: 通常フィードバック

今すぐ使う

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

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

動きを試す

トースト通知

現在の操作を覆わず、画面の端へ短い結果メッセージが現れます。

AIへの依頼文

トースト通知を追加する依頼

危険度:通常

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

分かる範囲で2か所だけ

自分の状況を入れる

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

コピーされる依頼文を確認
目的:
保存やコピーの結果を、現在の操作を妨げず短く伝える通知を追加する。

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

今回依頼すること:
指定した操作の完了後に、短い結果を伝えるトースト通知を追加してください。重要度に合うライブ領域を使い、通知だけに必要操作を置かず、消えても結果を別の場所で確認できるようにしてください。

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

変更しない範囲:
重大なエラーや確認必須の内容を自動で消す、通知へフォーカスを強制移動する、連続表示で操作を妨げる実装は行わない。

完了条件:
- 何が完了したか短い文で分かる
- 通知がフォーカスを奪わない
- 通知を見逃しても操作結果を確認できる

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

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

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

10秒で分かる説明

現在の操作を覆わず、画面の端へ短い結果メッセージが現れます。

向いている場面

  • 保存、コピー、送信などの短い完了を伝える
  • 結果を知らせても利用者の次の操作を止めない

確かめる

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

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

向いていない場面

  • 利用者が判断や操作をしないと先へ進めない
  • 重大なエラーや、あとから確認できない情報を伝える

アクセシビリティ

  • 重要度に合うライブ領域を使い、フォーカスを強制移動しない
  • 通知だけに必須のボタンや唯一の情報を置かない

理解する

名前と仕組みを知る

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

別名・探すときの言葉

トースト・一時通知・完了メッセージ

実装時の確認

  • 一文で結果が分かる短さにする
  • 連続操作で通知が重なりすぎないよう整理する