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

【コピペOK】ミニマルテキストアニメーション｜5種類【Web制作】

2025-08-23

ケケンタ

ミニマルテキストアニメーションを実装したい……

ケケンタ

シンプルで洗練されたテキスト効果を作りたい……

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

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="text-container">
  <div class="minimal-fade-text">
    <span class="minimal-fade-char" data-char="M">M</span>
    <span class="minimal-fade-char" data-char="I">I</span>
    <span class="minimal-fade-char" data-char="N">N</span>
    <span class="minimal-fade-char" data-char="I">I</span>
    <span class="minimal-fade-char" data-char="M">M</span>
    <span class="minimal-fade-char" data-char="A">A</span>
    <span class="minimal-fade-char" data-char="L">L</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-fade-text {
  display: flex;
  gap: 4px;
}

.minimal-fade-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  opacity: 0.7;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-fade-char:hover {
  opacity: 1;
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalFade {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}

.minimal-fade-char.animate {
  animation: minimalFade 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-fade-char');

  // ミニマルフェードアニメーションクラス
  class MinimalFadeAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.fadeIn(char);
        });

        char.addEventListener('mouseleave', () => {
          this.fadeOut(char);
        });

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

    fadeIn(char) {
      char.style.opacity = '1';
      char.style.color = '#007bff';
    }

    fadeOut(char) {
      char.style.opacity = '0.7';
      char.style.color = '#333';
    }
  }

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

⑤ カスタマイズ例

/* フェード強度の調整 */
.minimal-fade-char:hover {
  opacity: 0.9;
}

/* フェード速度の調整 */
.minimal-fade-char {
  transition: all 0.6s ease;
}

/* フェード時の色効果 */
.minimal-fade-char:hover {
  color: #28a745;
}

ミニマルスライド効果

シンプルで控えめなスライドアニメーションです。

① デモ

See the Pen ミニマルテキストスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルスライド効果の特徴

シンプルなスライド動き
控えめな表現
スムーズな動き

② HTML

<div class="text-container">
  <div class="minimal-slide-text">
    <span class="minimal-slide-char" data-char="S">S</span>
    <span class="minimal-slide-char" data-char="L">L</span>
    <span class="minimal-slide-char" data-char="I">I</span>
    <span class="minimal-slide-char" data-char="D">D</span>
    <span class="minimal-slide-char" data-char="E">E</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-slide-text {
  display: flex;
  gap: 4px;
}

.minimal-slide-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transform: translateY(0);
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-slide-char:hover {
  transform: translateY(-4px);
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalSlide {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.minimal-slide-char.animate {
  animation: minimalSlide 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-slide-char');

  // ミニマルスライドアニメーションクラス
  class MinimalSlideAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.slideUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.slideDown(char);
        });

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

    slideUp(char) {
      char.style.transform = 'translateY(-4px)';
      char.style.color = '#007bff';
    }

    slideDown(char) {
      char.style.transform = 'translateY(0)';
      char.style.color = '#333';
    }
  }

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

⑤ カスタマイズ例

/* スライド強度の調整 */
.minimal-slide-char:hover {
  transform: translateY(-6px);
}

/* スライド速度の調整 */
.minimal-slide-char {
  transition: all 0.6s ease;
}

/* スライド時の色効果 */
.minimal-slide-char:hover {
  color: #28a745;
}

ミニマルスケール効果

シンプルで控えめなスケールアニメーションです。

① デモ

See the Pen ミニマルテキストスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルスケール効果の特徴

シンプルな拡大/縮小
控えめな表現
視覚的インパクト

② HTML

<div class="text-container">
  <div class="minimal-scale-text">
    <span class="minimal-scale-char" data-char="S">S</span>
    <span class="minimal-scale-char" data-char="C">C</span>
    <span class="minimal-scale-char" data-char="A">A</span>
    <span class="minimal-scale-char" data-char="L">L</span>
    <span class="minimal-scale-char" data-char="E">E</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-scale-text {
  display: flex;
  gap: 4px;
}

.minimal-scale-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transform: scale(1);
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-scale-char:hover {
  transform: scale(1.1);
  color: #007bff;
}

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

.minimal-scale-char.animate {
  animation: minimalScale 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-scale-char');

  // ミニマルスケールアニメーションクラス
  class MinimalScaleAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.scaleUp(char);
        });

        char.addEventListener('mouseleave', () => {
          this.scaleDown(char);
        });

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

    scaleUp(char) {
      char.style.transform = 'scale(1.1)';
      char.style.color = '#007bff';
    }

    scaleDown(char) {
      char.style.transform = 'scale(1)';
      char.style.color = '#333';
    }
  }

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

⑤ カスタマイズ例

/* スケール強度の調整 */
.minimal-scale-char:hover {
  transform: scale(1.15);
}

/* スケール速度の調整 */
.minimal-scale-char {
  transition: all 0.6s ease;
}

/* スケール時の色効果 */
.minimal-scale-char:hover {
  color: '#28a745';
}

ミニマルカラー効果

シンプルで控えめな色変化アニメーションです。

① デモ

See the Pen ミニマルテキストカラー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルカラー効果の特徴

シンプルな色変化
控えめな表現
上品な印象

② HTML

<div class="text-container">
  <div class="minimal-color-text">
    <span class="minimal-color-char" data-char="C">C</span>
    <span class="minimal-color-char" data-char="O">O</span>
    <span class="minimal-color-char" data-char="L">L</span>
    <span class="minimal-color-char" data-char="O">O</span>
    <span class="minimal-color-char" data-char="R">R</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-color-text {
  display: flex;
  gap: 4px;
}

.minimal-color-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-color-char:hover {
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalColor {
  0%, 100% {
    color: #333;
  }
  50% {
    color: #007bff;
  }
}

.minimal-color-char.animate {
  animation: minimalColor 3s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-color-char');

  // ミニマルカラーアニメーションクラス
  class MinimalColorAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.changeColor(char);
        });

        char.addEventListener('mouseleave', () => {
          this.resetColor(char);
        });

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

    changeColor(char) {
      char.style.color = '#007bff';
    }

    resetColor(char) {
      char.style.color = '#333';
    }
  }

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

⑤ カスタマイズ例

/* 色変化の調整 */
.minimal-color-char:hover {
  color: '#28a745';
}

/* 色変化速度の調整 */
.minimal-color-char {
  transition: all 0.6s ease;
}

/* 色変化時の影効果 */
.minimal-color-char:hover {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

ミニマルシャドウ効果

シンプルで控えめな影効果アニメーションです。

① デモ

See the Pen ミニマルテキストシャドー by ケケンタ (@lgshifbg-the-looper) on CodePen.

このミニマルシャドウ効果の特徴

シンプルな影効果
控えめな表現
上品な印象

② HTML

<div class="text-container">
  <div class="minimal-shadow-text">
    <span class="minimal-shadow-char" data-char="S">S</span>
    <span class="minimal-shadow-char" data-char="H">H</span>
    <span class="minimal-shadow-char" data-char="A">A</span>
    <span class="minimal-shadow-char" data-char="D">D</span>
    <span class="minimal-shadow-char" data-char="O">O</span>
    <span class="minimal-shadow-char" data-char="W">W</span>
  </div>
</div>

③ CSS

/* 共通スタイル */
.text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  background: #f8f9fa;
  font-family: 'Arial', sans-serif;
}

/* 固有のスタイル */
.minimal-shadow-text {
  display: flex;
  gap: 4px;
}

.minimal-shadow-char {
  font-size: 32px;
  font-weight: 300;
  color: #333;
  text-shadow: none;
  transition: all 0.4s ease;
  cursor: pointer;
}

.minimal-shadow-char:hover {
  text-shadow: 0 2px 4px rgba(0, 0, 255, 0.1);
  color: #007bff;
}

/* アニメーション効果 */
@keyframes minimalShadow {
  0%, 100% {
    text-shadow: none;
  }
  50% {
    text-shadow: 0 1px 2px rgba(0, 0, 255, 0.5);
  }
}

.minimal-shadow-char.animate {
  animation: minimalShadow 2s ease-in-out infinite;
}

④ JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const chars = document.querySelectorAll('.minimal-shadow-char');

  // ミニマルシャドウアニメーションクラス
  class MinimalShadowAnimation {
    constructor(chars) {
      this.chars = chars;
      this.init();
    }

    init() {
      this.chars.forEach((char, index) => {
        // ホバー効果
        char.addEventListener('mouseenter', () => {
          this.addShadow(char);
        });

        char.addEventListener('mouseleave', () => {
          this.removeShadow(char);
        });

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

    addShadow(char) {
      char.style.textShadow = '0 2px 4px rgba(0, 0, 0, 0.1)';
      char.style.color = '#007bff';
    }

    removeShadow(char) {
      char.style.textShadow = 'none';
      char.style.color = '#333';
    }
  }

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

⑤ カスタマイズ例

/* シャドウ強度の調整 */
.minimal-shadow-char:hover {
  text-shadow: 0 3px 6px rgba(0, 0, 255, 0.15);
}

/* シャドウ速度の調整 */
.minimal-shadow-char {
  transition: all 0.6s ease;
}

/* シャドウ時の色効果 */
.minimal-shadow-char:hover {
  color: '#28a745';
}