プログレスバー – ケケンタの独学ITブログ

【完全版】プログレス・ローディングアニメーション完全ガイド｜4カテゴリ・20種類を網羅

ケケンタ — Wed, 20 Aug 2025 07:39:46 +0000

Webサイトの進捗状況や段階的な進行を魅力的で分かりやすくするプログレス・ローディングアニメーションを4カテゴリ・20種類完全網羅！

ケケンタ

各カテゴリから厳選した代表的なアニメーションをCodePenデモ付きで紹介し、詳細な実装方法は各専門記事で詳しく解説しています。

プログレス・ローディングアニメーション完全カタログ

1. ステップ表示アニメーション【5種類】

段階的な進行を視覚的に表現するステップ表示のアニメーション効果

代表アニメーション：フェード効果

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

このカテゴリーの特徴

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

詳細ページはこちら

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

2. パーセンテージアニメーション【5種類】

数値の変化を視覚的に表現するパーセンテージのアニメーション効果

代表アニメーション：カウントアップ効果

See the Pen パーセンテージカウントアップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカテゴリーの特徴

カウントアップ（数字のカウントアップ）
フェード効果
スケール効果
スライド効果
ズーム効果

詳細ページはこちら

【コピペOK】パーセンテージアニメーション｜5種類【Web制作】

3. プログレスバーアニメーション【5種類】

進捗状況を視覚的に表現するプログレスバーのアニメーション効果

代表アニメーション：スライド効果

See the Pen プログレスバースライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカテゴリーの特徴

フェード効果
スライド効果
スケール効果
ズーム効果
フリップ効果

詳細ページはこちら

【コピペOK】プログレスバーアニメーション｜5種類【Web制作】

4. ローディングアニメーション【5種類】

データ読み込みや処理中であることを伝えるローディングのアニメーション効果

代表アニメーション：スピナー効果

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このカテゴリーの特徴

スピナー効果
パルス効果（脈動効果）
フェード効果
スライド効果
ズーム効果

詳細ページはこちら

【コピペOK】ローディングアニメーション｜5種類【Web制作】

用途別おすすめアニメーション

ビジネスサイト向け

ステップ表示アニメーション：段階的な情報提供
パーセンテージアニメーション：達成率や満足度の表示

ECサイト向け

プログレスバーアニメーション：購入プロセスの進行状況
ステップ表示アニメーション：チェックアウトの段階表示

ポートフォリオサイト向け

パーセンテージアニメーション：スキルレベルの表示
ローディングアニメーション：作品の読み込み表示

モバイルサイト向け

ステップ表示アニメーション：タッチ操作に最適
プログレスバーアニメーション：進捗状況の明確な表示

アニメーション効果の比較表

カテゴリ	視覚的インパクト	実装難易度	パフォーマンス	ブラウザ対応
ステップ表示	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
パーセンテージ	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
プログレスバー	⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
ローディング	⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

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

スライダー

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

特殊効果

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

まとめ

プログレス・ローディングアニメーションは、Webサイトの進捗状況や段階的な進行を直感的で魅力的にする重要な要素です。

今回紹介した4カテゴリ・20種類のアニメーションから、ご自身のプロジェクトに最適なものを選択するようにしましょう。

ケケンタ

各専門記事では、詳細な実装方法、カスタマイズ例、パフォーマンス最適化のコツまで詳しく解説しています。ぜひ各記事を読んで、使いやすく魅力的なプログレス・ステップアニメーションを実装してみてください！

【コピペOK】プログレスバーアニメーション｜5種類【Web制作】

ケケンタ — Thu, 14 Aug 2025 03:31:09 +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

0%

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* フェード固有のスタイル */
.fade-progress .progress-fill {
  background: linear-gradient(90deg, #4CAF50, #45a049);
  transition: width 0.3s ease, opacity 0.5s ease;
  opacity: 0;
  animation: fadeInOut 2s ease-in-out infinite;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

④ JavaScript

function startFadeProgress() {
  const progressFill = document.querySelector('.fade-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressFill.style.opacity = '0';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 15;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // フェード効果を追加
    progressFill.style.opacity = '1';
  }, 200);
}

⑤ カスタマイズ例

/* カラーテーマの変更 */
.fade-progress .progress-fill {
  background: linear-gradient(90deg, #2196F3, #1976D2);
}

/* アニメーション速度の調整 */
.fade-progress .progress-fill {
  animation: fadeInOut 1.5s ease-in-out infinite;
}

/* フェード効果の強度調整 */
@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

スライド効果

① デモ

See the Pen プログレスバースライド by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスライド効果の特徴

動的な進捗表示
視覚的インパクトが高い
スムーズなアニメーション

② HTML

0%

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* スライド固有のスタイル */
.slide-progress .progress-fill {
  background: linear-gradient(90deg, #FF9800, #F57C00);
  position: relative;
  overflow: hidden;
}

.slide-progress .progress-fill::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: slideShine 2s infinite;
}

@keyframes slideShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

④ JavaScript

function startSlideProgress() {
  const progressFill = document.querySelector('.slide-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 12;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';
  }, 300);
}

⑤ カスタマイズ例

/* スライド方向の変更 */
.slide-progress .progress-fill::before {
  animation: slideShineVertical 2s infinite;
}

@keyframes slideShineVertical {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* スライド速度の調整 */
.slide-progress .progress-fill::before {
  animation: slideShine 1.5s infinite;
}

スケール効果

① デモ

See the Pen Untitled by ケケンタ (@lgshifbg-the-looper) on CodePen.

このスケール効果の特徴

拡大・縮小による動的表現
視覚的なインパクト
モダンな印象

② HTML

0%

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px; 
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* スケール固有のスタイル */
.scale-progress .progress-fill {
  background: linear-gradient(90deg, #9C27B0, #7B1FA2);
  transition: width 0.3s ease, transform 0.2s ease;
  transform-origin: left center;
}

.scale-progress .progress-fill:hover {
  transform: scaleY(1.2);
}

/* スケールアニメーション */
.scale-progress .progress-fill {
  animation: scalePulse 1s ease-in-out infinite;
}

@keyframes scalePulse {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.1); }
}

④ JavaScript

function startScaleProgress() {
  const progressFill = document.querySelector('.scale-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 10;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // スケール効果を追加
    progressFill.style.transform = 'scaleY(1.2)';
    setTimeout(() => {
      progressFill.style.transform = 'scaleY(1)';
    }, 100);
  }, 400);
}

⑤ カスタマイズ例

/* スケール効果の強度調整 */
.scale-progress .progress-fill:hover {
  transform: scaleY(1.5);
}

/* スケールアニメーションの速度調整 */
.scale-progress .progress-fill {
  animation: scalePulse 0.8s ease-in-out infinite;
}

ズーム効果

① デモ

See the Pen プログレスバーズーム by ケケンタ (@lgshifbg-the-looper) on CodePen.

このズーム効果の特徴

拡大・縮小による動的表現
視覚的なインパクトが高い
注目を集める効果

② HTML

0%

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* ズーム固有のスタイル */
.zoom-progress .progress-fill {
  background: linear-gradient(90deg, #E91E63, #C2185B);
  transition: width 0.3s ease, transform 0.3s ease;
  transform-origin: center;
  animation: zoomInOut 1.5s ease-in-out infinite;
}

@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

④ JavaScript

function startZoomProgress() {
  const progressFill = document.querySelector('.zoom-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 8;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // ズーム効果を追加
    progressFill.style.transform = 'scale(1.1)';
    setTimeout(() => {
      progressFill.style.transform = 'scale(1)';
    }, 150);
  }, 500);
}

⑤ カスタマイズ例

/* ズーム効果の強度調整 */
.zoom-progress .progress-fill {
  animation: zoomInOut 1.5s ease-in-out infinite;
}

@keyframes zoomInOut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* ズーム方向の変更 */
.zoom-progress .progress-fill {
  transform-origin: left center;
}

フリップ効果

① デモ

See the Pen プログレスバーフリップ by ケケンタ (@lgshifbg-the-looper) on CodePen.

このフリップ効果の特徴

3D的な回転効果
視覚的インパクトが最大
プレミアムな印象

② HTML

0%

③ CSS

/* 共通スタイル */
.progress-container {
  width: 100%;
  max-width: 400px;
  margin: 20px auto;
  text-align: center;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #f0f0f0;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 10px;
  width: 0%;
  transition: width 0.3s ease;
}

.progress-text {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.start-btn {
  background: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 20px;
  display: block;
  margin-inline: auto;
}

.start-btn:hover {
  background: #45a049;
}

/* フリップ固有のスタイル */
.flip-progress {
  perspective: 1000px;
}

.flip-progress .progress-fill {
  background: linear-gradient(90deg, #607D8B, #455A64);
  transition: width 0.3s ease, transform 0.6s ease;
  transform-style: preserve-3d;
  animation: flipRotate 2s ease-in-out infinite;
}

@keyframes flipRotate {
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(180deg); }
}

④ JavaScript

function startFlipProgress() {
  const progressFill = document.querySelector('.flip-progress .progress-fill');
  const progressText = document.querySelector('.progress-text');
  let progress = 0;

  // プログレスバーをリセット
  progressFill.style.width = '0%';
  progressText.textContent = '0%';

  const interval = setInterval(() => {
    progress += Math.random() * 6;
    if (progress >= 100) {
      progress = 100;
      clearInterval(interval);
    }

    progressFill.style.width = progress + '%';
    progressText.textContent = Math.round(progress) + '%';

    // フリップ効果を追加
    progressFill.style.transform = 'rotateX(180deg)';
    setTimeout(() => {
      progressFill.style.transform = 'rotateX(0deg)';
    }, 300);
  }, 600);
}

⑤ カスタマイズ例

/* フリップ軸の変更 */
.flip-progress .progress-fill {
  animation: flipRotateY 2s ease-in-out infinite;
}

@keyframes flipRotateY {
  0%, 100% { transform: rotateY(0deg); }
  50% { transform: rotateY(180deg); }
}

/* フリップ速度の調整 */
.flip-progress .progress-fill {
  animation: flipRotate 1.5s ease-in-out infinite;
}

まとめ

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

用途別おすすめ

ファイルアップロード: フェード効果・スライド効果
データ処理: スケール効果・ズーム効果
プレミアムサイト: フリップ効果

実装のポイント

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

ケケンタ

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

あわせて読みたい

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

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

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

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

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

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

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

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

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

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

基本的なアニメーション

スクロール系

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

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

フォーム・UI要素

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

ボタン・アイコン

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

テキスト

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

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

スライダー

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

特殊効果

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

プログレスバー – ケケンタの独学ITブログ

【完全版】プログレス・ローディングアニメーション完全ガイド｜4カテゴリ・20種類を網羅

プログレス・ローディングアニメーション完全カタログ

1. ステップ表示アニメーション【5種類】

2. パーセンテージアニメーション【5種類】

3. プログレスバーアニメーション【5種類】

4. ローディングアニメーション【5種類】

用途別おすすめアニメーション

ビジネスサイト向け

ECサイト向け

ポートフォリオサイト向け

モバイルサイト向け

アニメーション効果の比較表

関連記事

基本的なアニメーション

スクロール系

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

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果

まとめ

【コピペOK】プログレスバーアニメーション｜5種類【Web制作】

プログレスバーアニメーションとは

効果的な使用場面

実装方法の比較

フェード効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スライド効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

スケール効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

ズーム効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

フリップ効果

① デモ

② HTML

③ CSS

④ JavaScript

⑤ カスタマイズ例

まとめ

用途別おすすめ

実装のポイント

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

関連記事

基本的なアニメーション

スクロール系

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

フォーム・UI要素

ボタン・アイコン

テキスト

スライダー

特殊効果