JavaScriptでコピー完了を通知する方法｜クリップボード＋トーストUIを簡単実装！

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

「コピーされました」「完了しました」といった、ちょっとしたフィードバックって、Webサイトやアプリのユーザー体験に欠かせませんよね！
特に「URLをコピーする」「コードをコピーする」「クーポンコードを控える」などの場面では、コピー操作自体よりも「ちゃんとコピーされたよ」という通知の方が安心感を生むんです。

そこで今回は、JavaScriptでクリップボードにテキストをコピーし、その直後にトースト通知を表示する
シンプルかつ実用的な実装方法をご紹介します。

ライブラリ不要、HTML＋CSS＋JSだけでOKです。

UIのちょっとした気配りを加えたい方、必見です！

まずはコピー機能：navigator.clipboard.writeText()

JavaScriptで文字列をコピーする場合、今や定番となっているのがこのAPI

navigator.clipboard.writeText("コピーしたい文字列");

とてもシンプルですが、https環境（SSL）＆ユーザーアクションに応じた操作でないと動作しない点に注意が必要です。

コピー＋通知までをまとめて実装してみよう

実際のユースケースとして、「ボタンをクリックしてテキストをコピーし、その場で通知を表示」してみましょう。

HTML構造

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

たったこれだけのコードで、コピー成功のフィードバックが視覚的に伝わるUIが完成します！

なぜトースト通知が大切なのか？

「コピーができたかどうか」って、ユーザーからは見えません。

音もない、ビジュアル変化もない…そんな処理がユーザーに不安を与えるのは当然です！

そこで役立つのが、数秒だけふわっと出てくる「トースト通知」。
最近のアプリやWebサービスでは当たり前のように使われていますが、実はこれがUXを支える大黒柱だったりします。

通知があるだけで安心して操作できる、
通知があるだけで「ちゃんと動いてる」と思える、
そんな当たり前の安心感を支えるのがトースト通知の力なんですね。

応用：トーストの位置や色をカスタマイズ

「コピーしました！」以外にも、通知はさまざまな使い方ができます。

これらはCSSやJavaScriptで簡単に調整できるので、デザインやシチュエーションに合わせて最適化してみましょう。

まとめ：コピー＋通知でワンランク上のUXを

ただコピーするだけではなく、「完了しましたよ」ときちんとユーザーに伝える。
それだけで、Webサイトやアプリの使いやすさは一段と上がります。

しかも、今回ご紹介したように、JavaScriptとCSSだけで簡単に実装できるのが嬉しいところ。
コピー完了通知は、「ちょっとした気遣い」の代表例です。

あなたのWebサイトにも、ぜひこの機能を取り入れてみてくださいね！

satokotadesignキャンペーン実施中！