JavaScriptだけで実装！ライブラリ不要のカスタムトースト通知の作り方
JavaScriptだけで実装！ライブラリ不要のカスタムトースト通知の作り方

JavaScriptだけで実装！ライブラリ不要のカスタムトースト通知の作り方

スポンサーリンク

こんにちは！静岡県浜松市で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キャンペーン実施中！

静岡県浜松市でホームページ制作ならsatokotadesign

スポンサーリンク Facebook postはてブPocketFeedly この記事を書いた人
小瀧 静岡県浜松市在住のフリーランスWEBデザイナー小瀧です。 サイト制作、デザイン制作、SEO対策等も行っています。 お気軽にお問い合わせください！ 業務委託も大歓迎です！ 最近書いた記事 WEBデザイン GridとFlexの使い分けは超シンプル｜迷わないレイアウト設計の結論 WEBデザイン 2026年のWebデザイン、もう「キレイ」だけじゃ勝てない｜埋もれないための3つの新戦略 WEBデザイン 2026年版：モダンWebデザインのリセットCSS｜最新ブラウザに最適化した実装テンプレート完全ガイド WEBデザイン 2026年CSS新機能3選｜JSなしでここまでできる時代へ【Scroll・Transition・if()を徹底解説】
📎📎📎📎📎📎📎📎📎📎
BOT