トースト通知 デザイン見本
ユーザーのアクション結果を画面隅に一時表示するトースト通知UIの実装デモ。コピーしてすぐに使えるHTML・CSS・JSのコードを掲載しています。
コピペで使えるソースコード
<div id="toast-area" aria-live="polite"></div>
<button class="toast-btn" data-msg="保存しました" data-kind="success">保存</button>
<button class="toast-btn" data-msg="エラーが発生しました" data-kind="error">削除</button>
<button class="toast-btn" data-msg="注意が必要です" data-kind="warn">警告</button>
<button class="toast-btn" data-msg="新機能を追加しました" data-kind="info">情報</button>#toast-area {
position: fixed;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 9999;
}
.tn-toast {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
min-width: 200px;
max-width: 320px;
opacity: 0;
transform: translateX(30px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.tn-toast.tn-show {
opacity: 1;
transform: translateX(0);
}
.tn-icon {
font-size: 18px;
flex-shrink: 0;
}
.tn-success { background: #22c55e; }
.tn-error { background: #ef4444; }
.tn-warn { background: #f97316; }
.tn-info { background: #3b82f6; }(function () {
var area = document['getElementById']('toast-area');
if (!area) return;
var icons = { success: '✓', error: '✕', warn: '!', info: 'i' };
function showToast(msg, kind) {
var toast = document.createElement('div');
toast.className = 'tn-toast tn-' + (kind || 'info');
var icon = document.createElement('span');
icon.className = 'tn-icon';
icon.textContent = icons[kind] || 'i';
toast.appendChild(icon);
var txt = document.createElement('span');
txt.textContent = msg;
toast.appendChild(txt);
area.appendChild(toast);
setTimeout(function () {
toast.className = 'tn-toast tn-' + (kind || 'info') + ' tn-show';
}, 10);
setTimeout(function () {
toast.className = 'tn-toast tn-' + (kind || 'info');
setTimeout(function () {
if (toast.parentNode) {
toast.parentNode.removeChild(toast);
}
}, 350);
}, 3000);
}
var btns = document['querySelectorAll']('.toast-btn');
for (var n = 0; n < btns.length; n++) {
(function (btn) {
btn.addEventListener('click', function () {
showToast(
btn.getAttribute('data-msg'),
btn.getAttribute('data-kind')
);
});
})(btns[n]);
}
})();実装のポイント
-
position: fixed でコンテナを画面に固定する
トーストをまとめる親要素
#toast-areaにposition: fixed; top: 20px; right: 20px;を設定します。ページをスクロールしても常に画面右上に表示され、個々のトーストをこのコンテナに追加するだけで縦に積み重なります。 -
opacity と transform でスライドインを実現する
トーストの初期状態は
opacity: 0; transform: translateX(30px)（右にオフセット）。表示時にtn-showクラスを付与してopacity: 1; transform: translateX(0)に変化させます。transitionを設定しているので、クラスの切り替えだけで滑らかなアニメーションが自動適用されます。 -
setTimeout でクラスを付け外しして表示・非表示を制御する
要素をDOMに追加した直後（10ms後）に表示クラスを付与し、一定時間後（3000ms）に取り外します。クラスを取り外すとフェードアウトが始まり、アニメーション完了後（350ms後）に
parentNode.removeChild()でDOMから削除します。 -
document.createElement で動的に要素を生成する
HTMLにトーストのひな形を書いておく必要はありません。
createElement→textContent→appendChildの3ステップで要素を組み立て、コンテナに追加します。innerHTMLを使わないことでXSSリスクも回避できます。 -
種別ごとにクラスで背景色を切り替える
.tn-success / .tn-error / .tn-warn / .tn-infoのように種別クラスをCSSで定義し、JSではtoast.className = 'tn-toast tn-' + kindと動的に付与するだけで対応します。新しい種別の追加もCSSに1行足すだけで完了します。 -
aria-live=”polite” でアクセシビリティに対応する
トーストコンテナに
aria-live="polite"を付与すると、スクリーンリーダーがトーストの内容を自動的に読み上げます。視覚に頼らないユーザーにも通知内容を届けることができます。
モーダルやポップアップはユーザーが明示的に閉じる必要のある「ブロッキング型」のUIです。トースト通知はユーザー操作を遮らず自動で消える「非ブロッキング型」で、「保存しました」「コピーしました」などアクション結果の即時フィードバックに最適です。重要な確認が必要な場合はダイアログを、一時的な通知にはトーストを使い分けてください。
当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。
