トースト通知とは

操作の結果を短く知らせ、数秒で自動的に消える小さな通知。複数出ると画面の隅に積み上がる。

概要

「保存しました」「送信に失敗しました」のように、操作の結果を短く伝えて、数秒で自動的に消える通知です。画面の隅に表示され、ユーザーの操作をブロックしません。連続して発生すると、上または下に積み上がって複数表示されます。

別名

表記ゆれ：トースト、スナックバー、toast

パンがトースターから飛び出す動きに見立てて「トースト」と呼ばれます。「スナックバー」は Material Design での呼び方で、意味はほぼ同じです。

AI への伝え方

「保存したらトーストを出して」「3 秒で消えるようにして」で通じます。何秒で消えるか、複数同時に出たときに積み上げるか置き換えるかを伝えると仕様がぶれません。

似たパーツとの違い

「通知バー」は画面の上部や下部に帯状で表示され、自分で閉じるまで残ることが多いのに対し、トーストは小さく数秒で自動的に消えます。「ダイアログ」はユーザーの判断を待つために表示され続けるのに対し、トーストは判断を求めず、結果を伝えるだけで自動的に消える違いがあります。

デモ

コード

HTML

<div class="toast-demo">
  <button class="toast-demo__trigger" type="button" data-toast-show>
    通知を表示
  </button>
  <div class="toast-demo__container" aria-live="polite"></div>
</div>

CSS

.toast-demo {
  font-family: sans-serif;
}

.toast-demo__trigger {
  padding: 10px 20px;
  border: 0;
  border-radius: 8px;
  background: #0017c1;
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.toast-demo__trigger:hover {
  background: #00118f;
}

.toast-demo__container {
  position: fixed;
  right: 24px;
  bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
}

.toast-demo__toast {
  min-width: 200px;
  padding: 10px 16px;
  border-radius: 8px;
  background: #1a1a1a;
  color: #fff;
  font-size: 14px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast-demo__toast--visible {
  opacity: 1;
  transform: translateY(0);
}

const container = document.querySelector(".toast-demo__container");
let count = 0;

document.querySelector("[data-toast-show]").addEventListener("click", () => {
  count += 1;
  const toast = document.createElement("div");
  toast.className = "toast-demo__toast";
  toast.textContent = `保存しました (${count})`;
  container.appendChild(toast);

  // 追加直後に visible クラスを付けてフェードインさせる
  requestAnimationFrame(() => {
    toast.classList.add("toast-demo__toast--visible");
  });

  setTimeout(() => {
    toast.classList.remove("toast-demo__toast--visible");
    setTimeout(() => toast.remove(), 200);
  }, 3000);
});