この記事にはプロモーションが含まれています。

【コピペOK】アイコンクリックアニメーション｜5種類【Web制作】

2025-08-26

ケケンタ

アイコンクリックアニメーションを実装したい……

ケケンタ

クリック時の視覚的フィードバックを作りたい……

今回はこのようなお悩みをお持ちの方へ向けて

Web制作において必須のUI要素
アイコンクリックアニメーション

をご紹介します。

5種類のアニメーション効果を完全網羅した実装なので、いままさに「アイコンクリックアニメーションを実装しないといけない！」という方は丸っとコピペしてどうぞご活用ください！

この記事で紹介するアイコンクリックアニメーション

スケール効果（クリック時の拡大/縮小）
カラー効果（クリック時の色変化）
リップル効果（クリック時の波紋）
ローテーション効果（クリック時の回転）
シャドウ効果（クリック時の影変化）

ケケンタ

特にボタンやインタラクティブ要素には、アイコンクリックアニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

なお、今回ご紹介するアニメーションはCSSとJavaScriptで実装できるので、基本的なコーディング知識があれば安心してご利用いただけます。

あわせて読みたい

【Web制作】ボタンホバーアニメーション完全版｜8カテゴリ・53種類を網羅

【Web制作】ナビゲーションタブアニメーション完全版｜5カテゴリ・26種類を網羅

【Web制作】メニューアニメーション完全版｜8カテゴリ・40種類を網羅

Webアニメーションの引き出しを増やすのにおすすめの書籍

動くWebデザインアイディア帳

created by Rinker

ケケンタ

ケケンタのITブログでは、Webアプリ（PHP・Laravel）やWeb制作（WordPress・コーディング）について情報を発信しています。
学習中の方や実務をされている方など多くの方にアクセスいただいていますので、ぜひほかの記事も参考にしてみてください！

運動不足、気になっていませんか？

もしプログラミング学習やお仕事で運動不足が気になっているなら

連続屈伸運動がおすすめです！

ボタンにカーソルを合わせるだけで
カウントダウンが始まるタイマーをご用意してみました！

ケケンタ

無理のない範囲で、ぜひ隙間時間に屈伸運動を取り入れてみて下さい！

タイマースタート

3:00

1分 3分 5分 10分

※運動不足だと連続３分で取り組んでもかなり息が切れます。
（僕は加えて気分もちょっと悪くなりました……）
絶対にご無理の無い範囲でお取り組みください！

Laravelの教科書バージョン10対応【Laravel11サポートガイドあり】

created by Rinker

アイコンクリックアニメーションとは

アイコンクリックアニメーションは、クリック時にアイコンに動的な効果を与えることで、視覚的フィードバックとユーザビリティ向上を実現するアニメーション効果です。ユーザーの操作に対する明確な反応を提供し、インタラクション促進を実現する効果的な手法です。

効果的な使用場面

適している場面

ボタンやリンク
インタラクティブ要素
フォーム送信ボタン
ダウンロードボタン
お問い合わせボタン
ソーシャルシェアボタン

避けるべき場面

過度に派手なアニメーション
パフォーマンスを重視する場面
アクセシビリティを重視する場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
スケール効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
カラー効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
リップル効果	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
ローテーション効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐
シャドウ効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

スケール効果

アイコンがクリック時に拡大・縮小するアニメーションです。

① デモ

See the Pen アイコンクリックスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

基本的な拡大・縮小効果
視覚的インパクトが高い
クリック感の演出

② HTML

<div class="icon-container">
  <div class="scale-click-icons">
    <i class="icon scale-click-icon" data-icon="🎯">🎯</i>
    <i class="icon scale-click-icon" data-icon="🎪">🎪</i>
    <i class="icon scale-click-icon" data-icon="🎭">🎭</i>
    <i class="icon scale-click-icon" data-icon="🎨">🎨</i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.scale-click-icons {
  display: flex;
  gap: 20px;
}

.scale-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.scale-click-icon:active {
  transform: scale(0.9);
  color: #ffd700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes scaleClick {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.scale-click-icon.clicked {
  animation: scaleClick 0.3s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.scale-click-icon');

  // スケールクリックアニメーションクラス
  class ScaleClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.scaleClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    scaleClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ffd700';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 300);
    }
  }

  // アニメーション初期化
  new ScaleClickAnimation(icons);
});

⑤ カスタマイズ例

/* スケール強度の調整 */
.scale-click-icon:active {
  transform: scale(0.8);
}

/* スケール速度の調整 */
.scale-click-icon {
  transition: all 0.1s ease;
}

/* スケール時の影効果 */
.scale-click-icon:active {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

カラー効果

アイコンの色がクリック時に変化するアニメーションです。

① デモ

See the Pen アイコンクリックカラー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカラー効果の特徴

シンプルな色変化
視覚的インパクトが高い
状態変化の明確化

② HTML

<div class="icon-container">
  <div class="color-click-icons">
    <i class="icon color-click-icon" data-icon="❤">❤</i>
    <i class="icon color-click-icon" data-icon="💙">💙</i>
    <i class="icon color-click-icon" data-icon="💚">💚</i>
    <i class="icon color-click-icon" data-icon="💛">💛</i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.color-click-icons {
  display: flex;
  gap: 20px;
}

.color-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.color-click-icon:active {
  color: #ff6b6b;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  transform: scale(1.1);
}

/* アニメーション効果 */
@keyframes colorClick {
  0% {
    color: white;
  }
  50% {
    color: #ff6b6b;
  }
  100% {
    color: white;
  }
}

.color-click-icon.clicked {
  animation: colorClick 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.color-click-icon');

  // カラークリックアニメーションクラス
  class ColorClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.colorClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 200);
      });
    }

    colorClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ff6b6b';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 500);
    }
  }

  // アニメーション初期化
  new ColorClickAnimation(icons);
});

⑤ カスタマイズ例

/* 色変化の調整 */
.color-click-icon:active {
  color: #00d2ff;
}

/* 色変化速度の調整 */
.color-click-icon {
  transition: all 0.2s ease;
}

/* 色変化時のスケール効果 */
.color-click-icon:active {
  transform: scale(1.2);
}

リップル効果

アイコンにクリック時に波紋が広がるアニメーションです。

① デモ

See the Pen アイコンクリックリップル by ケケンタ (@lgshifbg-the-looper) on CodePen.

このリップル効果の特徴

波紋の動的な広がり
視覚的インパクトが高い
インタラクティブな印象

② HTML

<div class="icon-container">
  <div class="ripple-click-icons">
    <i class="icon ripple-click-icon" data-icon="🌊">🌊</i>
    <i class="icon ripple-click-icon" data-icon="💧">💧</i>
    <i class="icon ripple-click-icon" data-icon="🌊">🌊</i>
    <i class="icon ripple-click-icon" data-icon="💧">💧</i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.ripple-click-icons {
  display: flex;
  gap: 20px;
}

.ripple-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
  position: relative;
  overflow: hidden;
}

.ripple-click-icon:active {
  color: #00d2ff;
  transform: scale(1.1);
}

.ripple-click-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.ripple-click-icon.ripple::after {
  width: 100px;
  height: 100px;
}

/* アニメーション効果 */
@keyframes ripple {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0;
  }
}

.ripple-click-icon.ripple::after {
  animation: ripple 0.6s ease-out;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.ripple-click-icon');

  // リップルクリックアニメーションクラス
  class RippleClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', (e) => {
          this.rippleClick(icon, e);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rippleClick(icon, e) {
      icon.classList.add('ripple');
      icon.style.color = '#00d2ff';

      setTimeout(() => {
        icon.classList.remove('ripple');
        icon.style.color = 'white';
      }, 600);
    }
  }

  // アニメーション初期化
  new RippleClickAnimation(icons);
});

⑤ カスタマイズ例

/* リップルの色変更 */
.ripple-click-icon::after {
  background: rgba(255, 107, 107, 0.6);
}

/* リップルの速度調整 */
.ripple-click-icon::after {
  transition: width 0.8s, height 0.8s;
}

/* リップルのサイズ調整 */
.ripple-click-icon.ripple::after {
  width: 120px;
  height: 120px;
}

ローテーション効果

アイコンがクリック時に回転するアニメーションです。

① デモ

See the Pen アイコンクリックローテーション by ケケンタ (@lgshifbg-the-looper) on CodePen.

このローテーション効果の特徴

動的な回転動き
視覚的インパクトが高い
クリック感の演出

② HTML

<div class="icon-container">
  <div class="rotate-click-icons">
    <i class="icon rotate-click-icon" data-icon="⚙">⚙</i>
    <i class="icon rotate-click-icon" data-icon="🔄">🔄</i>
    <i class="icon rotate-click-icon" data-icon="🎯">🎯</i>
    <i class="icon rotate-click-icon" data-icon="⭐">⭐</i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.rotate-click-icons {
  display: flex;
  gap: 20px;
}

.rotate-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.4s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.rotate-click-icon:active {
  transform: rotate(180deg);
  color: #ff6b6b;
  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

/* アニメーション効果 */
@keyframes rotateClick {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}

.rotate-click-icon.clicked {
  animation: rotateClick 0.4s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.rotate-click-icon');

  // ローテーションクリックアニメーションクラス
  class RotateClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.rotateClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 300);
      });
    }

    rotateClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#ff6b6b';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
      }, 400);
    }
  }

  // アニメーション初期化
  new RotateClickAnimation(icons);
});

⑤ カスタマイズ例

/* 回転軸の変更（X軸） */
.rotate-click-icon:active {
  transform: rotateX(180deg);
}

/* 回転速度の調整 */
.rotate-click-icon {
  transition: all 0.6s ease;
}

/* 回転時の影効果 */
.rotate-click-icon:active {
  text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

シャドウ効果

アイコンの影がクリック時に変化するアニメーションです。

① デモ

See the Pen アイコンクリックシャドウ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このシャドウ効果の特徴

立体的な影の変化
奥行きのある表現
上品な印象

② HTML

<div class="icon-container">
  <div class="shadow-click-icons">
    <i class="icon shadow-click-icon" data-icon="🔮">🔮</i>
    <i class="icon shadow-click-icon" data-icon="💎">💎</i>
    <i class="icon shadow-click-icon" data-icon="🌟">🌟</i>
    <i class="icon shadow-click-icon" data-icon="✨">✨</i>
  </div>
</div>

③ CSS

/* 共通スタイル */
.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.shadow-click-icons {
  display: flex;
  gap: 20px;
}

.shadow-click-icon {
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  user-select: none;
}

.shadow-click-icon:active {
  text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  color: #feca57;
  transform: translateY(-3px);
}

/* アニメーション効果 */
@keyframes shadowClick {
  0% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
  50% {
    text-shadow: 0 8px 16px rgba(0, 0, 0, 0.6);
  }
  100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  }
}

.shadow-click-icon.clicked {
  animation: shadowClick 0.5s ease;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const icons = document.querySelectorAll('.shadow-click-icon');

  // シャドウクリックアニメーションクラス
  class ShadowClickAnimation {
    constructor(icons) {
      this.icons = icons;
      this.init();
    }

    init() {
      this.icons.forEach((icon, index) => {
        // クリック効果
        icon.addEventListener('click', () => {
          this.shadowClick(icon);
        });

        // 自動アニメーション
        setTimeout(() => {
          icon.classList.add('animate');
        }, index * 250);
      });
    }

    shadowClick(icon) {
      icon.classList.add('clicked');
      icon.style.color = '#feca57';
      icon.style.transform = 'translateY(-3px)';

      setTimeout(() => {
        icon.classList.remove('clicked');
        icon.style.color = 'white';
        icon.style.transform = 'translateY(0)';
      }, 500);
    }
  }

  // アニメーション初期化
  new ShadowClickAnimation(icons);
});

⑤ カスタマイズ例

/* 影の強度調整 */
.shadow-click-icon:active {
  text-shadow: 0 12px 24px rgba(0, 0, 0, 0.8);
}

/* 影の速度調整 */
.shadow-click-icon {
  transition: all 0.5s ease;
}

/* 影の色変更 */
.shadow-click-icon:active {
  text-shadow: 0 8px 16px rgba(255, 107, 107, 0.6);
}