こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、Web制作の中でも「ちょっとした工夫でUXがぐっと良くなる」そんなテクニックをご紹介します。
突然ですが、みなさん「トースト通知」って使ったことありますか？
画面の端にふわっと表示されて、数秒で自動的に消えるあの小さな通知です。
フォーム送信後や、ボタン操作後に「完了しました！」とユーザーに伝えるのにピッタリなUIですね。
ライブラリを使えば簡単に実装できますが、今回はJavaScriptとCSSだけでゼロから作ってみましょう。
「通知は欲しいけど、外部ライブラリは重いから避けたい…」そんな方にもおすすめですよ！
トースト通知って何？どんな時に使うの？
まず「トースト通知ってどんなもの？」というところから押さえておきましょう。
- 画面の一部に表示される軽い通知
- ユーザーの操作に応じて「保存しました」「エラーが発生しました」などを表示
- 数秒で自動的に消える（＝ユーザーの操作を邪魔しない）
スマホアプリではよく見かけますが、Webサイトでも操作フィードバックとして活用されるようになってきました。
なぜトースト通知を使うの？
トースト通知のいいところは、ユーザーの操作を遮らずに情報を伝えられるという点。
モーダルのように画面を覆うわけではなく、控えめながらも存在感のある演出ができます。
例えばこんな場面で役立ちます
- お問い合わせフォーム送信後に「送信が完了しました」
- クリップボードにコピーしたときに「コピーしました」
- 設定変更を反映させたときに「保存しました」
ちょっとした通知があるだけで、ユーザーは安心して操作を進めることができます。
完成イメージを先にチェック！
まずは、今回実装するトースト通知の完成イメージを見てみましょう。
- 画面右上に、通知がスッと表示
- 数秒後に自動で消える
- スタック表示で複数もOK
シンプルだけどCSSで見た目も調整できる
今回は、「表示→数秒後に非表示→DOMから削除」という一連の流れを自動で処理する構造で作ります。
デモHTML
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
通知を表示する「コンテナ要素」と「個々の通知」を分けて管理します。
<div id="toast-container"></div> ここでは単純に空のdivを用意しておいて、JavaScriptでそこに通知を追加していくスタイルにします。
CSSで通知の見た目とアニメーション
最低限のCSSで、ふわっと表示・非表示のアニメーションをつけます。
#toast-container {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.toast {
background: #333;
color: #fff;
padding: 0.8rem 1.2rem;
border-radius: 4px;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
}
.toast.show {
opacity: 1;
transform: translateY(0);
}
見た目はシンプルですが、背景色やサイズ、角丸は自由に調整してOKです。
JavaScriptで表示・非表示の処理
実際に通知を表示して、一定時間後に削除するJavaScriptのロジックはこちら。
function showToast(message, duration = 3000) {
const container = document.getElementById("toast-container");
const toast = document.createElement("div");
toast.className = "toast";
toast.textContent = message;
container.appendChild(toast); // アニメーションクラスを追加（非同期で遅延）
requestAnimationFrame(() => {
toast.classList.add("show");
}); // 指定時間後に非表示 → DOMから削除
setTimeout(() => {
toast.classList.remove("show");
toast.addEventListener("transitionend", () => {
toast.remove();
});
}, duration);
} showToast("コピーしました！"); この関数を使えば、例えばこう呼び出せます：
showToast("コピーしました！"); シンプルですが、十分に実用的な通知UIが完成します。
ちょっと応用：通知の種類を増やす
さらに一歩進めて、通知の種類ごとに色を変えるようにするのもアリです。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
こうすることで、状況に応じたトーストを表示できますね。
まとめ
今回は、JavaScriptとCSSだけで実装するトースト通知をご紹介しました。
- 外部ライブラリ不要で軽量
- スタック表示やアニメーションも可能
- カスタマイズ性が高く実用的
ちょっとした機能ですが、UI/UXをぐっと良くする要素として、ぜひ取り入れてみてください！
Web制作では、こうした小さな改善がユーザーの満足度を左右します。
「通知があるだけで安心できる」って、誰しも経験があるはずです。
ぜひあなたのサイトにも、手軽に導入してみてくださいね。
satokotadesignキャンペーン実施中！
