JavaScriptでコピー成功時にアイコンを変化させる方法｜UXを高めるフィードバック演出術

6月 24, 2025 6月 24, 2025

小瀧

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

ボタンを押してテキストがコピーされるUI、最近ではもう定番になってきましたよね。
SNSの共有URLやクーポンコード、コードスニペットの「コピーボタン」など、さまざまな場面で活用されています。

でも、そのコピー操作に「ちゃんと成功したのかどうか」が分からないと、ユーザーはちょっと不安になります。

そこで今回は、コピーに成功した瞬間にアイコンを変化させてフィードバックを返す演出を、JavaScriptと少しのCSSでスマートに実装する方法をご紹介します！

コピー操作に“変化”があるとUXは大きく上がる

ただのボタンをクリックしただけでは、コピーが成功したのかどうか、ユーザーには伝わりません。

そこで有効なのが

コピー成功後にテキストが「Copied!」に変わる
ボタンの色やアイコンが変化する
一瞬だけチェックマークや完了演出が出る

こうした「フィードバック付きUI」はユーザー体験を向上させるだけでなく、直感的で安心感があるのが特徴です。

実際のコード

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

まずは基本のHTML構造

ここでは、テキスト＋コピーアイコンボタンというシンプルな構造でいきます。

<div class="copy-wrap">
  <input type="text" id="copyText" value="https://example.com" readonly>
  <button id="copyBtn">
    <span class="icon" id="copyIcon">📋</span>
  </button>
</div>

ここでは、コピーアイコンとしてシンプルな絵文字📋を使用していますが、Font AwesomeやSVGに差し替えることも可能です。

CSSで変化前・変化後のスタイルを用意

.copy-wrap {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

button {
  position:relative;
  background: #2196f3;
  color: white;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  border-radius: 4px;
  font-size: 1.2em;
}

button.copied {
  background: #4caf50;
}

button.copied .icon::after {
  content: "✅";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

ここでのポイントは .copied クラス。
コピー成功後にこのクラスを付与し、色やアイコンを変化させることで、「コピーできた！」という視覚的な合図を出せます。

JavaScriptでコピー＋フィードバック処理

const copyBtn = document.getElementById('copyBtn');
const copyText = document.getElementById('copyText');
const copyIcon = document.getElementById('copyIcon');

copyBtn.addEventListener('click', () => {
  navigator.clipboard.writeText(copyText.value).then(() => {
    copyBtn.classList.add('copied');
    setTimeout(() => {
      copyBtn.classList.remove('copied');
    }, 2000);
  });
});