【コピペOK】ステップ表示アニメーション｜5種類【Web制作】

ケケンタ — Sat, 16 Aug 2025 02:49:36 +0000

ケケンタ

ステップ表示にアニメーション効果を追加したい……

ケケンタ

ステップセクションをもっと魅力的にしたい……

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

Web制作において必須のUI要素
ステップ表示アニメーション

をご紹介します。

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

この記事で紹介するステップ表示アニメーション

フェード効果（フェードイン/アウト）
スライド効果（スライドイン/アウト）
ズーム効果（ズームイン/アウト）
スケール効果（スケールイン/アウト）
横並びステップ表示（プログレスバー付き）

ケケンタ

特にフォームウィザードや設定画面には、ステップ表示アニメーションが非常に効果的です。この記事のコードをご活用いただきWeb制作の効率化に繋がれば何よりです。

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

あわせて読みたい

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

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

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

ステップ表示アニメーションとは

ステップ表示アニメーションは、段階的な進行を視覚的に表現するアニメーション効果です。ユーザーに現在の進行状況を分かりやすく伝え、操作の完了感を演出する効果的な手法です。

効果的な使用場面

適している場面

フォームウィザード
設定画面の段階表示
チュートリアルの進行
ショッピングカートのチェックアウト
アカウント作成の段階表示

避けるべき場面

即座に完了する操作
複雑すぎる段階分け
ユーザーが操作を中断できない場面

実装方法の比較

アニメーション	難易度	視覚的インパクト	パフォーマンス	ブラウザ対応
フェード効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
スライド効果	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ズーム効果	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐
スケール効果	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
横並びステップ	⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐⭐

フェード効果

① デモ

See the Pen ステップアニメーションフェード by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフェード効果の特徴

シンプルで分かりやすい実装
高いパフォーマンス
すべてのブラウザで対応

② HTML

HTML


  
    1
    
      ステップ1
      最初のステップの内容です。
    
  

  
    2
    
      ステップ2
      2番目のステップの内容です。
    
  

  
    3
    
      ステップ3
      最後のステップの内容です。

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* フェード効果固有のスタイル */
.step-item {
  opacity: 0;
  transform: translateY(20px);
}

.step-item.active {
  opacity: 1;
  transform: translateY(0);
}

.step-item.completed {
  opacity: 0.7;
  border-color: #27ae60;
  background: #f8fff9;
}

④ JavaScript

class StepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new StepDisplay();
});

⑤ カスタマイズ例

/* 遅いフェード効果 */
.step-item.slow {
  transition: all 1s ease;
}

/* 速いフェード効果 */
.step-item.fast {
  transition: all 0.3s ease;
}

/* バウンス効果付き */
.step-item.bounce {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

スライド効果

① デモ

See the Pen ステップアニメーションスライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

方向性のある動きで進行感を演出
視覚的な流れを作成
ユーザーの視線を自然に誘導

② HTML


  
    1
    
      ステップ1
      最初のステップの内容です。
    
  

  
    2
    
      ステップ2
      2番目のステップの内容です。
    
  

  
    3
    
      ステップ3
      最後のステップの内容です。

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スライド効果固有のスタイル */
.step-container.slide {
  height: 200px;
}

.step-item {
  position: absolute;
  width: calc(100% - 40px);
  transform: translateX(100%);
  opacity: 0;
}

.step-item.active {
  transform: translateX(0);
  opacity: 1;
}

.step-item.completed {
  transform: translateX(-100%);
  opacity: 0;
}

④ JavaScript

class SlideStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new SlideStepDisplay();
});

⑤ カスタマイズ例

/* 上下スライド */
.step-item.slide-vertical {
  transform: translateY(100%);
}

.step-item.slide-vertical.active {
  transform: translateY(0);
}

.step-item.slide-vertical.completed {
  transform: translateY(-100%);
}

/* 斜めスライド */
.step-item.slide-diagonal {
  transform: translate(100%, 100%);
}

.step-item.slide-diagonal.active {
  transform: translate(0, 0);
}

ズーム効果

① デモ

See the Pen ステップアニメーションズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

要素の拡大・縮小効果
注目を集める視覚的インパクト
重要度の表現

② HTML


  
    1
    
      ステップ1
      最初のステップの内容です。
    
  

  
    2
    
      ステップ2
      2番目のステップの内容です。
    
  

  
    3
    
      ステップ3
      最後のステップの内容です。

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.5s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ズーム効果固有のスタイル */
.step-item {
  transform: scale(0.8);
  opacity: 0;
}

.step-item.active {
  transform: scale(1);
  opacity: 1;
}

.step-item.completed {
  transform: scale(0.9);
  opacity: 0.7;
}

④ JavaScript

class ZoomStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new ZoomStepDisplay();
});

⑤ カスタマイズ例

/* 大きなズーム効果 */
.step-item.zoom-large {
  transform: scale(0.5);
}

.step-item.zoom-large.active {
  transform: scale(1.1);
}

/* バウンス付きズーム */
.step-item.zoom-bounce {
  transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 段階的ズーム */
.step-item.zoom-staged {
  transform: scale(0.6) rotate(-5deg);
}

.step-item.zoom-staged.active {
  transform: scale(1) rotate(0deg);
}

スケール効果

① デモ

See the Pen ステップアニメ―ションスケール by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

微細な拡大・縮小効果
ミニマルで洗練された演出
自然な動き

② HTML


  
    1
    
      ステップ1
      最初のステップの内容です。
    
  

  
    2
    
      ステップ2
      2番目のステップの内容です。
    
  

  
    3
    
      ステップ3
      最後のステップの内容です。

③ CSS

/* 共通スタイル */
.step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.step-item {
  margin-bottom: 30px;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.4s ease;
}

.step-number {
  display: inline-block;
  width: 40px;
  height: 40px;
  background: #667eea;
  color: white;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  font-weight: bold;
  margin-bottom: 15px;
}

.step-content h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-content p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

.step-buttons {
  text-align: center;
  margin-top: 30px;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* スケール効果固有のスタイル */
.step-item {
  transform: scale(0.95);
  opacity: 0.8;
}

.step-item.active {
  transform: scale(1.02);
  opacity: 1;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
}

.step-item.completed {
  transform: scale(0.98);
  opacity: 0.9;
}

④ JavaScript

class ScaleStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateButtons();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
    }
  }

  updateDisplay() {
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    this.updateButtons();
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new ScaleStepDisplay();
});

⑤ カスタマイズ例

/* 微細なスケール */
.step-item.scale-subtle {
  transform: scale(0.98);
}

.step-item.scale-subtle.active {
  transform: scale(1.01);
}

/* バウンス付きスケール */
.step-item.scale-bounce {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 段階的スケール */
.step-item.scale-staged {
  transform: scale(0.9);
}

.step-item.scale-staged.active {
  transform: scale(1.05);
}

.step-item.scale-staged.completed {
  transform: scale(0.95);
}

横並びステップ表示

① デモ

See the Pen ステップアニメーション横並びステップ表示【プログレスバー付き】 by ケケンタ (@lgshifbg-the-looper) on CodePen.

この横並びステップ表示の特徴

横並びのステップ表示
プログレスバーによる進行状況の可視化
コンパクトでスペース効率が良い

② HTML


  
    
  

  
    
      
        1
        ✓
      
      基本情報
    

    
      
        2
        ✓
      
      詳細設定
    

    
      
        3
        ✓
      
      確認・完了
    
  



  
    基本情報
    最初のステップの内容です。
  

  
    詳細設定
    2番目のステップの内容です。
  

  
    確認・完了
    最後のステップの内容です。

③ CSS

/* 横並びステップ表示のスタイル */
.horizontal-step-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.progress-bar {
  width: 100%;
  height: 6px;
  background: #e1e5e9;
  border-radius: 3px;
  margin-bottom: 30px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 3px;
  transition: width 0.5s ease;
  width: 33.33%;
}

.step-items {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.step-items::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  height: 2px;
  background: #e1e5e9;
  z-index: 1;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}

.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #e1e5e9;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  position: relative;
}

.step-number {
  font-weight: bold;
  color: #7f8c8d;
  transition: all 0.3s ease;
}

.checkmark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  font-weight: bold;
  opacity: 0;
  transition: all 0.3s ease;
}

.step-label {
  font-size: 14px;
  color: #7f8c8d;
  text-align: center;
  transition: all 0.3s ease;
}

/* アクティブ状態 */
.step-item.active .step-circle {
  border-color: #667eea;
  background: #667eea;
  transform: scale(1.1);
}

.step-item.active .step-number {
  color: #ffffff;
}

.step-item.active .step-label {
  color: #667eea;
  font-weight: 600;
}

/* 完了状態 */
.step-item.completed .step-circle {
  border-color: #27ae60;
  background: #27ae60;
  transform: scale(1.05);
}

.step-item.completed .checkmark {
  opacity: 1;
}

.step-item.completed .step-number {
  opacity: 0;
}

.step-item.completed .step-label {
  color: #27ae60;
  font-weight: 600;
}

/* ステップパネル */
.step-content {
  margin-bottom: 30px;
}

.step-panel {
  display: none;
  padding: 20px;
  border: 2px solid #e1e5e9;
  border-radius: 12px;
  background: #ffffff;
  animation: fadeIn 0.5s ease;
}

.step-panel.active {
  display: block;
}

.step-panel h3 {
  margin: 0 0 10px 0;
  color: #2c3e50;
}

.step-panel p {
  margin: 0;
  color: #7f8c8d;
  line-height: 1.6;
}

/* ボタンスタイル */
.step-buttons {
  text-align: center;
}

.prev-btn, .next-btn {
  padding: 12px 24px;
  margin: 0 10px;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.prev-btn {
  background: #95a5a6;
  color: white;
}

.next-btn {
  background: #667eea;
  color: white;
}

.prev-btn:hover:not(:disabled) {
  background: #7f8c8d;
  transform: translateY(-2px);
}

.next-btn:hover {
  background: #5a6fd8;
  transform: translateY(-2px);
}

.prev-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* アニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* プログレスバーのアニメーション */
.progress-fill.step-1 { width: 33.33%; }
.progress-fill.step-2 { width: 66.66%; }
.progress-fill.step-3 { width: 100%; }

④ JavaScript

class HorizontalStepDisplay {
  constructor() {
    this.currentStep = 1;
    this.totalSteps = document.querySelectorAll('.step-item').length;
    this.init();
  }

  init() {
    this.updateProgress();
    this.bindEvents();
  }

  bindEvents() {
    const nextBtn = document.querySelector('.next-btn');
    const prevBtn = document.querySelector('.prev-btn');

    nextBtn.addEventListener('click', () => this.nextStep());
    prevBtn.addEventListener('click', () => this.prevStep());
  }

  nextStep() {
    if (this.currentStep < this.totalSteps) {
      this.currentStep++;
      this.updateDisplay();
      this.updateProgress();
    }
  }

  prevStep() {
    if (this.currentStep > 1) {
      this.currentStep--;
      this.updateDisplay();
      this.updateProgress();
    }
  }

  updateDisplay() {
    // ステップアイテムの更新
    document.querySelectorAll('.step-item').forEach((item, index) => {
      const stepNum = index + 1;

      if (stepNum < this.currentStep) {
        item.classList.remove('active');
        item.classList.add('completed');
      } else if (stepNum === this.currentStep) {
        item.classList.remove('completed');
        item.classList.add('active');
      } else {
        item.classList.remove('active', 'completed');
      }
    });

    // ステップパネルの更新
    document.querySelectorAll('.step-panel').forEach((panel, index) => {
      const stepNum = index + 1;

      if (stepNum === this.currentStep) {
        panel.classList.add('active');
      } else {
        panel.classList.remove('active');
      }
    });

    this.updateButtons();
  }

  updateProgress() {
    const progressFill = document.querySelector('.progress-fill');
    const progressPercentage = (this.currentStep / this.totalSteps) * 100;

    progressFill.style.width = progressPercentage + '%';

    // ステップに応じたクラス名の更新
    progressFill.className = 'progress-fill';
    if (this.currentStep === 1) {
      progressFill.classList.add('step-1');
    } else if (this.currentStep === 2) {
      progressFill.classList.add('step-2');
    } else if (this.currentStep === 3) {
      progressFill.classList.add('step-3');
    }
  }

  updateButtons() {
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');

    prevBtn.disabled = this.currentStep === 1;

    if (this.currentStep === this.totalSteps) {
      nextBtn.textContent = '完了';
    } else {
      nextBtn.textContent = '次へ';
    }
  }
}

// 初期化
document.addEventListener('DOMContentLoaded', () => {
  new HorizontalStepDisplay();
});

⑤ カスタマイズ例

/* 大きなステップサークル */
.step-item.large .step-circle {
  width: 50px;
  height: 50px;
}

/* カラフルなプログレスバー */
.progress-fill.colorful {
  background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
}

/* バウンス効果付き */
.step-item.bounce .step-circle {
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* 影付きステップ */
.step-item.shadow .step-circle {
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.step-item.shadow.active .step-circle {
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
}

まとめ

今回ご紹介した5種類のステップ表示アニメーションは、それぞれ異なる特徴と用途があります。

用途別おすすめ

フォームウィザード: フェード効果・スライド効果
設定画面: ズーム効果・スケール効果
プレミアムサイト: 横並びステップ・ズーム効果

実装のポイント

パフォーマンスを考慮: アニメーションは軽量に
ユーザビリティを重視: 進行状況が分かりやすく
ブラウザ対応: 幅広いブラウザで動作するように
アクセシビリティ: スクリーンリーダー対応も考慮

ケケンタ

ステップ表示アニメーションは、ユーザーエクスペリエンスを向上させる重要な要素です。この記事のコードを参考に、プロジェクトに最適なアニメーションを実装してください！

あわせて読みたい

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

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

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

もっと効率的にWeb制作を学びたい方へ

Web制作の学習は楽しいものですが、一人で進めていると「これで合っているのかな？」と不安になることもありますよね。

僕も独学でWeb制作を学んできましたが、今思うと「もっと早く知りたかった」と思うことがたくさんあります。

特に以下のような方は、一度プログラミングスクールの利用を検討してみることをおすすめします。

学習の方向性に迷いがある方
効率的にスキルを身につけたい方
転職や副業でWeb制作を活用したい方
挫折経験がある方

忍者CODEなら、業界最安値で24時間サポート付きの学習環境が整っています。

ご興味のある方は、こちらの記事で詳しくご紹介しています。

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

＼どれを読むか迷ったときのおすすめ‼／

フォーム・UI要素

＼どれを読むか迷ったときのおすすめ‼／

ボタン・アイコン

＼どれを読むか迷ったときのおすすめ‼／

テキスト

＼どれを読むか迷ったときのおすすめ‼／

【完全版】テキスト・タイポグラフィアニメーション完全ガイド｜5カテゴリ・26種類

スライダー

【Splide】サムネイル型スライダーの簡単な作成方法【JSライブラリ】

特殊効果

背景アニメーション完全ガイド｜5種類

ステップ表示 – ケケンタの独学ITブログ

【コピペOK】ステップ表示アニメーション｜5種類【Web制作】

ステップ表示アニメーションとは

効果的な使用場面

実装方法の比較

フェード効果

① デモ

② HTML

ステップ1

ステップ2

ステップ3

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライド効果

① デモ

② HTML

ステップ1

ステップ2

ステップ3

③ CSS

④ JavaScript

⑤ カスタマイズ例

ズーム効果

① デモ

② HTML

ステップ1

ステップ2

ステップ3

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケール効果

① デモ

② HTML

ステップ1

ステップ2

ステップ3

③ CSS

④ JavaScript

⑤ カスタマイズ例

横並びステップ表示

① デモ

② HTML

基本情報

詳細設定

確認・完了

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

用途別おすすめ

実装のポイント

もっと効率的にWeb制作を学びたい方へ

関連記事

基本的なアニメーション

スクロール系

メニュー・タブ・ナビゲーション

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果