← 一覧へ

やってみよう「保存する」を押してみてください

通知・フィードバックメジャー(よく見る)

トースト

Toast / Snackbar

操作のあと、画面の下に小さなメッセージがピョコッと出て、数秒で消える。

別名スナックバーSnackbar通知バーフラッシュメッセージ

どこで使われている?

よく見かける場所
Gmail、Googleドライブ、各種アプリの保存・送信完了
使うとよい場面
「保存しました」「コピーしました」など、操作の結果を軽く知らせたいとき
避けたい場面
エラーなど必ず読んでほしい大事な知らせ(数秒で消えるので見逃される)

補足Androidでは、ボタンなしの短い表示を「Toast」、ボタン付きを「Snackbar」と呼び分けます。

似ているものとの違い

AIへの指示文

これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。

HTML / CSS / JavaScript で「トースト(Toast / Snackbar)」を実装してください。

動き:操作の結果(例:保存しました)を画面下部に小さなメッセージで表示し、数秒後に自動で消す。「元に戻す」などのボタンを1つ付けられる。

使う部品:Toast(例:sonner ライブラリ)
もっと詳しく:プログラムでの部品名

同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。

WebサイトならToast(例:sonner ライブラリ)
iPhoneアプリなら標準部品なし。自作のトースト / バナーとして伝える
AndroidアプリならSnackbar(SnackbarHost)。ボタンなしの短い表示は Toast
FlutterならSnackBar(ScaffoldMessenger.of(context).showSnackBar)
React NativeならToast(react-native-toast-message など)