CSSで作る！円グラフ・棒グラフ・ドーナツグラフの動くアニメーション完全ガイド【基本～実務テクニック】

WebサイトやLP、ポートフォリオで「数字やデータをもっと魅力的に見せたい」と思ったことはありませんか？

静止したグラフでは伝わりにくい情報も、アニメーションを加えるだけで「わかりやすく」「目を引く」表現に変わります。例えば、円グラフがスッと塗りつぶされていったり、棒グラフが下から伸びていったりする動きは、視覚的なインパクトと理解しやすさを同時に与えてくれます。

ところが、グラフのアニメーションと聞くと「JavaScriptのライブラリ（Chart.jsやD3.jsなど）が必要なのでは？」と思う方も多いのではないでしょうか。確かにライブラリを使えば高度な表現は可能ですが、ページが重くなったり、ちょっとした修正が大変だったりと、実務では使いにくいケースもあります。実は、CSSだけでもシンプルかつ軽量にグラフアニメーションを実装することが可能です。

この記事では、初心者でも理解しやすいように「CSSだけで作れるグラフアニメーション」の基礎から応用までをわかりやすく解説します。基本の円グラフ・棒グラフの描画方法から、ドーナツグラフやレスポンシブ対応、実務で役立つテクニックまで、コピペですぐ使えるサンプルコード付きで紹介していきます。

「軽量でおしゃれなグラフを導入したい」「クライアント案件やポートフォリオに映える表現を入れたい」という方は、ぜひ最後まで読んでみてください。きっと、あなたのWebデザインの引き出しがひとつ増えるはずです。

CSSだけで作る！グラフアニメーションの基本と実装ステップ

現代のWEBサイトにおいて、データを視覚的に魅力的に表現することは重要な要素です。JavaScriptライブラリを使わずに、CSSだけでグラフアニメーションを実装することで、軽量で高速な表示を実現できます。このセクションでは、CSSグラフアニメーションの基礎から具体的な実装方法まで、実務で即座に活用できる知識を提供します。

CSSで円グラフ・棒グラフを描画する基本構造

円グラフの基本構造

円グラフをCSSで描画する際の最も効率的な方法は、border-radiusとconic-gradientを組み合わせた手法です。以下のコードは、基本的な円グラフの構造を示しています。

▼HTML

<div class="pie-chart">
  <div class="pie-center">
    データ表示
  </div>
</div>

▼CSS

.pie-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  /* conic-gradientで扇形を描画 */
  background: conic-gradient(
    #3498db 0deg 120deg,
    /* 33.3%を青色で表示 */ #e74c3c 120deg 240deg,
    /* 33.3%を赤色で表示 */ #f39c12 240deg 360deg /* 33.4%をオレンジ色で表示 */
  );
  margin: 50px auto;
  position: relative;
}

/* 中央にテキストを配置するための構造 */
.pie-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  text-align: center;
}

実際の表示

See the Pen graph-animation-css-01 by watashi-xyz (@watashi-xyz) on CodePen.

棒グラフの基本構造

棒グラフはheightやwidthプロパティの変化を利用して実装します。以下のコードは、縦方向の棒グラフの基本構造です。

▼HTML

<div class="bar-chart-container">
  <div class="bar" data-value="80"></div>
  <div class="bar" data-value="60"></div>
  <div class="bar" data-value="90"></div>
  <div class="bar" data-value="45"></div>
</div>

▼CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.bar-chart-container {
  display: flex;
  align-items: flex-end;
  height: 300px;
  width: 80%;
  max-width: 600px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  gap: 20px;
  position: relative;
}

.bar {
  flex-grow: 1; /* 均等な幅を確保 */
  background: linear-gradient(to top, #3498db, #2980b9);
  border-radius: 6px 6px 0 0;
  position: relative;

  /* アニメーション前の初期状態 */
  height: 0;
  opacity: 0;
  transform: scaleY(0);

  /* アニメーション設定 */
  transition: height 0.8s ease-out, transform 0.8s ease-out,
    opacity 0.6s ease-in;
}

/* グラフ表示アニメーション */
.bar-chart-container.show .bar {
  height: var(--target-height);
  opacity: 1;
  transform: scaleY(1);
}

.bar:nth-child(1) {
  --target-height: 80%;
}
.bar:nth-child(2) {
  --target-height: 60%;
}
.bar:nth-child(3) {
  --target-height: 90%;
}
.bar:nth-child(4) {
  --target-height: 45%;
}

/* ラベルのスタイル */
.bar::after {
  content: attr(data-value) "%";
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: bold;
  color: #555;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* ホバー時に値を表示 */
.bar:hover::after {
  opacity: 1;
}

▼Javascript

// ページ読み込み後にアニメーションクラスを追加
document.addEventListener("DOMContentLoaded", () => {
  const chartContainer = document.querySelector(".bar-chart-container");
  chartContainer.classList.add("show");
});

実際の表示

See the Pen graph-animation-css-02 by watashi-xyz (@watashi-xyz) on CodePen.

重要なポイントは、グラフの描画においてCSS Custom Properties（CSS変数）を活用することです。これにより、データ値を動的に変更しながら、一貫したアニメーション処理を実装できます。

@keyframesとtransitionを使ったアニメーションの書き方

transitionを使った基本的なアニメーション

transitionプロパティは、プロパティ値の変化を滑らかにアニメーション化します。グラフアニメーションでは主に以下のプロパティをアニメーション対象とします。

/* 棒グラフのアニメーション例 */
.animated-bar {
    height: 0;
    transition: height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animated-bar.animate {
    height: var(--target-height);
}

/* 円グラフのアニメーション例 */
.animated-pie {
    background: conic-gradient(#3498db 0deg 0deg, transparent 0deg);
    transition: background 2s ease-in-out;
}

.animated-pie.animate {
    background: conic-gradient(#3498db 0deg 120deg, transparent 120deg);
}

@keyframesを使った複雑なアニメーション

より複雑な動きを実現したい場合は、@keyframesを使用します。以下は、段階的に数値が増加するアニメーションの実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>keyframesアニメーション</title>
    <style>
        .counter-animation {
            font-size: 48px;
            font-weight: bold;
            color: #2c3e50;
            text-align: center;
            margin: 50px 0;
        }

        .counter-animation::after {
            content: "0";
            animation: countUp 3s ease-out forwards;
        }

        @keyframes countUp {
            0% { content: "0"; }
            10% { content: "8"; }
            20% { content: "16"; }
            30% { content: "24"; }
            40% { content: "32"; }
            50% { content: "40"; }
            60% { content: "48"; }
            70% { content: "56"; }
            80% { content: "64"; }
            90% { content: "72"; }
            100% { content: "80"; }
        }

        /* 円グラフの段階的塗りつぶしアニメーション */
        .progressive-pie {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            background: #ecf0f1;
            position: relative;
            overflow: hidden;
        }

        .progressive-pie::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: conic-gradient(#e74c3c 0deg 0deg, transparent 0deg);
            animation: progressiveFill 4s ease-in-out forwards;
        }

        @keyframes progressiveFill {
            0% { background: conic-gradient(#e74c3c 0deg 0deg, transparent 0deg); }
            25% { background: conic-gradient(#e74c3c 0deg 90deg, transparent 90deg); }
            50% { background: conic-gradient(#e74c3c 0deg 180deg, transparent 180deg); }
            75% { background: conic-gradient(#e74c3c 0deg 270deg, transparent 270deg); }
            100% { background: conic-gradient(#e74c3c 0deg 288deg, transparent 288deg); }
        }
    </style>
</head>
<body>
    <div class="counter-animation"></div>
    <div class="progressive-pie"></div>
</body>
</html>

実際の表示

See the Pen graph-animation-css-03 by watashi-xyz (@watashi-xyz) on CodePen.

アニメーション最適化のポイント

1. will-change プロパティの活用: アニメーション対象プロパティを事前に宣言することで、ブラウザがGPU加速を有効にします。

.optimized-animation {
    will-change: transform, opacity;
    transform: translateZ(0); /* ハードウェア加速を強制 */
}

1. 適切なイージング関数の選択: ユーザビリティを向上させるため、自然な動きを表現するイージング関数を選択します。

/* 様々なイージングパターン */
.ease-natural { transition: all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.ease-bounce { transition: all 1s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.ease-sharp { transition: all 1s cubic-bezier(0.55, 0, 0.1, 1); }

SVGやCanvasとCSSを組み合わせる実装例

SVG + CSS アニメーションの実装

SVGは拡縮に強く、複雑なグラフ形状を描画できるため、CSSアニメーションとの相性が優れています。

▼HTML

<div class="svg-chart-container">
  <svg viewBox="0 0 400 300" xmlns="<http://www.w3.org/2000/svg>">
    <!-- 折れ線グラフのパス -->
    <path class="line-path" d="M50,250 L100,200 L150,150 L200,100 L250,120 L300,80 L350,50" />

    <!-- データポイントの円 -->
    <circle class="circle-fill" cx="100" cy="200" />
    <circle class="circle-fill" cx="150" cy="150" style="animation-delay: 0.2s" />
    <circle class="circle-fill" cx="200" cy="100" style="animation-delay: 0.4s" />
    <circle class="circle-fill" cx="250" cy="120" style="animation-delay: 0.6s" />
    <circle class="circle-fill" cx="300" cy="80" style="animation-delay: 0.8s" />

    <!-- 値ラベル -->
    <text class="svg-text" x="100" y="190" text-anchor="middle">75</text>
    <text class="svg-text" x="150" y="140" text-anchor="middle" style="animation-delay: 0.2s">60</text>
    <text class="svg-text" x="200" y="90" text-anchor="middle" style="animation-delay: 0.4s">85</text>
  </svg>
</div>

▼CSS

.svg-chart-container {
  width: 400px;
  height: 300px;
  margin: 50px auto;
}

/* SVGパスのストロークアニメーション */
.line-path {
  stroke: #3498db;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawLine 2s ease-in-out forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

/* 円の塗りつぶしアニメーション */
.circle-fill {
  fill: #e74c3c;
  r: 0;
  animation: expandCircle 1.5s ease-out forwards;
}

@keyframes expandCircle {
  to {
    r: 20;
  }
}

/* SVGテキストのフェードイン */
.svg-text {
  fill: #2c3e50;
  opacity: 0;
  animation: fadeInText 1s ease-in 2s forwards;
}

@keyframes fadeInText {
  to {
    opacity: 1;
  }
}

実際の表示

See the Pen graph-animation-css-04 by watashi-xyz (@watashi-xyz) on CodePen.

Canvas要素との連携テクニック

Canvas要素は描画パフォーマンスに優れていますが、CSS直接制御ができません。そこで、Canvas上にCSS要素をオーバーレイする手法が効果的です。

▼HTML

<div class="canvas-container">
  <canvas class="canvas-bg" width="400" height="300" id="chartCanvas"></canvas>
  <div class="data-label">データA: 75%</div>
  <div class="data-label">データB: 60%</div>
  <div class="data-label">データC: 90%</div>

  <div class="progress-overlay">
    <div class="progress-fill"></div>
  </div>
</div>

▼CSS

.canvas-container {
  position: relative;
  width: 400px;
  height: 300px;
  margin: 50px auto;
}

.canvas-bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #f8f9fa;
  border-radius: 8px;
}

/* CSS要素をCanvasに重ねる */
.data-label {
  position: absolute;
  background: rgba(52, 152, 219, 0.9);
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  transform: translate(-50%, -100%);
  opacity: 0;
  animation: popIn 0.5s ease-out forwards;
}

.data-label:nth-child(2) {
  top: 100px;
  left: 100px;
  animation-delay: 0.5s;
}
.data-label:nth-child(3) {
  top: 80px;
  left: 200px;
  animation-delay: 1s;
}
.data-label:nth-child(4) {
  top: 120px;
  left: 300px;
  animation-delay: 1.5s;
}

@keyframes popIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -100%) scale(0.8);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -100%) scale(1);
  }
}

/* プログレスバーオーバーレイ */
.progress-overlay {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db, #2980b9);
  width: 0;
  animation: fillProgress 3s ease-out forwards;
}

@keyframes fillProgress {
  to {
    width: 100%;
  }
}

▼Javascript

// Canvas基本描画（グラフの背景やグリッドなど）
const canvas = document.getElementById("chartCanvas");
const ctx = canvas.getContext("2d");

// グリッドライン描画
ctx.strokeStyle = "#e0e0e0";
ctx.lineWidth = 1;
for (let i = 0; i <= 10; i++) {
  const y = i * 30;
  ctx.beginPath();
  ctx.moveTo(0, y);
  ctx.lineTo(400, y);
  ctx.stroke();
}

実際の表示

See the Pen graph-animation-css-05 by watashi-xyz (@watashi-xyz) on CodePen.

実装時の重要な考慮点

1. パフォーマンス: SVGはDOM操作のオーバーヘッドがありますが、複雑な形状に適しています。Canvasは高速描画が可能ですが、アクセシビリティに配慮が必要です。
2. スケーラビリティ: SVGはベクター形式のため、どの解像度でも鮮明に表示されます。Canvas要素はdevicePixelRatioを考慮した実装が必要です。
3. SEO配慮: SVG内のテキストは検索エンジンに認識されますが、Canvas内のテキストは認識されません。重要なデータはHTML要素として別途記述することを推奨します。

このセクションで解説したテクニックを組み合わせることで、軽量かつ高品質なグラフアニメーションをCSSだけで実装できます。次のセクションでは、具体的な円グラフとドーナツグラフの実装例を詳しく見ていきましょう。

円グラフ・ドーナツグラフのCSSアニメーション実装例

円グラフとドーナツグラフは、データの割合を視覚的に表現する最も効果的な手法の一つです。JavaScriptライブラリを使用せずにCSSのみで実装することで、軽量かつ高速な表示を実現し、SEOにも配慮したグラフアニメーションを作成できます。このセクションでは、実務で即座に活用できる具体的な実装方法を詳しく解説します。

CSSだけで円グラフを描画・アニメーションさせる方法

基本的な円グラフの実装

conic-gradientを使用した円グラフは、モダンブラウザで効率的にアニメーション表示できます。以下のコードは、段階的に塗りつぶされる円グラフの完全な実装例です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSSアニメーション円グラフ</title>
    <style>
        .pie-chart-container {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 400px;
            background: #f8f9fa;
            padding: 40px;
        }

        .pie-chart {
            width: 280px;
            height: 280px;
            border-radius: 50%;
            position: relative;
            background: #ecf0f1;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }

        /* アニメーション前の初期状態 */
        .pie-chart::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: conic-gradient(
                transparent 0deg 0deg,
                transparent 0deg 360deg
            );
            transition: background 2.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* アニメーション実行時の最終状態 */
        .pie-chart.animated::before {
            background: conic-gradient(
                #e74c3c 0deg 144deg,      /* 40% - 赤色 */
                #3498db 144deg 252deg,    /* 30% - 青色 */
                #f39c12 252deg 324deg,    /* 20% - オレンジ色 */
                #2ecc71 324deg 360deg     /* 10% - 緑色 */
            );
        }

        /* 中央の値表示エリア */
        .pie-center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 120px;
            height: 120px;
            background: white;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            z-index: 2;
        }

        .pie-value {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
            opacity: 0;
            transform: scale(0.8);
            animation: fadeInScale 0.8s ease-out 1.5s forwards;
        }

        .pie-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-top: 4px;
            opacity: 0;
            animation: fadeIn 0.6s ease-out 2s forwards;
        }

        @keyframes fadeInScale {
            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }

        /* 凡例の実装 */
        .pie-legend {
            margin-left: 40px;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .legend-item {
            display: flex;
            align-items: center;
            opacity: 0;
            transform: translateX(20px);
            animation: slideInFade 0.5s ease-out forwards;
        }

        .legend-item:nth-child(1) { animation-delay: 2.2s; }
        .legend-item:nth-child(2) { animation-delay: 2.4s; }
        .legend-item:nth-child(3) { animation-delay: 2.6s; }
        .legend-item:nth-child(4) { animation-delay: 2.8s; }

        .legend-color {
            width: 16px;
            height: 16px;
            border-radius: 3px;
            margin-right: 12px;
        }

        .legend-text {
            font-size: 14px;
            color: #2c3e50;
        }

        @keyframes slideInFade {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }
    </style>
</head>
<body>
    <div class="pie-chart-container">
        <div class="pie-chart" id="pieChart">
            <div class="pie-center">
                <div class="pie-value">100%</div>
                <div class="pie-label">総計</div>
            </div>
        </div>

        <div class="pie-legend">
            <div class="legend-item">
                <div class="legend-color" style="background: #e74c3c;"></div>
                <div class="legend-text">売上 40%</div>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background: #3498db;"></div>
                <div class="legend-text">コスト 30%</div>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background: #f39c12;"></div>
                <div class="legend-text">利益 20%</div>
            </div>
            <div class="legend-item">
                <div class="legend-color" style="background: #2ecc71;"></div>
                <div class="legend-text">その他 10%</div>
            </div>
        </div>
    </div>

    <script>
        // ページ読み込み後にアニメーション開始
        document.addEventListener('DOMContentLoaded', function() {
            setTimeout(() => {
                document.getElementById('pieChart').classList.add('animated');
            }, 500);
        });
    </script>
</body>
</html>

実際の表示

See the Pen graph-animation-css-06 by watashi-xyz (@watashi-xyz) on CodePen.

SVGを使った高精度円グラフ

より精密な制御が必要な場合は、SVGのstroke-dasharrayプロパティを活用した実装が効果的です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG円グラフアニメーション</title>
    <style>
        .svg-pie-container {
            text-align: center;
            padding: 50px;
        }

        .svg-pie {
            transform: rotate(-90deg); /* 12時の位置から開始 */
            drop-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        .pie-segment {
            fill: none;
            stroke-width: 40;
            stroke-linecap: round;
            stroke-dasharray: 0 628; /* 円周: 2 * π * r = 628 (r=100) */
            animation: drawSegment 1.5s ease-out forwards;
        }

        /* 各セグメントの色とアニメーション遅延 */
        .segment-1 {
            stroke: #e74c3c;
            animation-delay: 0.5s;
            stroke-dasharray: 251 628; /* 40%の弧 */
        }

        .segment-2 {
            stroke: #3498db;
            animation-delay: 1s;
            stroke-dasharray: 188 628; /* 30%の弧 */
            stroke-dashoffset: -251;
        }

        .segment-3 {
            stroke: #f39c12;
            animation-delay: 1.5s;
            stroke-dasharray: 126 628; /* 20%の弧 */
            stroke-dashoffset: -439;
        }

        .segment-4 {
            stroke: #2ecc71;
            animation-delay: 2s;
            stroke-dasharray: 63 628; /* 10%の弧 */
            stroke-dashoffset: -565;
        }

        @keyframes drawSegment {
            from {
                stroke-dasharray: 0 628;
            }
        }

        /* パーセンテージ表示のアニメーション */
        .percentage-text {
            font-family: Arial, sans-serif;
            font-size: 18px;
            font-weight: bold;
            fill: #2c3e50;
            opacity: 0;
            animation: textFadeIn 0.8s ease-out forwards;
        }

        .percentage-text:nth-of-type(1) { animation-delay: 1s; }
        .percentage-text:nth-of-type(2) { animation-delay: 1.5s; }
        .percentage-text:nth-of-type(3) { animation-delay: 2s; }
        .percentage-text:nth-of-type(4) { animation-delay: 2.5s; }

        @keyframes textFadeIn {
            to { opacity: 1; }
        }
    </style>
</head>
<body>
    <div class="svg-pie-container">
        <svg class="svg-pie" width="300" height="300" viewBox="0 0 200 200">
            <!-- 円グラフのセグメント -->
            <circle class="pie-segment segment-1" cx="100" cy="100" r="100"/>
            <circle class="pie-segment segment-2" cx="100" cy="100" r="100"/>
            <circle class="pie-segment segment-3" cx="100" cy="100" r="100"/>
            <circle class="pie-segment segment-4" cx="100" cy="100" r="100"/>

            <!-- パーセンテージテキスト -->
            <text class="percentage-text" x="130" y="60" text-anchor="middle">40%</text>
            <text class="percentage-text" x="60" y="60" text-anchor="middle">30%</text>
            <text class="percentage-text" x="60" y="140" text-anchor="middle">20%</text>
            <text class="percentage-text" x="130" y="140" text-anchor="middle">10%</text>
        </svg>
    </div>
</body>
</html>

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

ドーナツグラフの塗りつぶしアニメーションとパーセンテージ表示

CSS Variablesを活用した動的ドーナツグラフ

CSS Custom Properties（CSS変数）を使用することで、データ値を動的に変更可能なドーナツグラフを実装できます。

▼HTML

<div class="donut-chart-grid">
  <div class="donut-item">
    <div class="donut-chart donut-sales" id="donut1">
      <div class="donut-center">
        <div class="donut-percentage" data-target="75">0%</div>
      </div>
    </div>
    <div class="donut-label">売上達成率</div>
  </div>

  <div class="donut-item">
    <div class="donut-chart donut-profit" id="donut2">
      <div class="donut-center">
        <div class="donut-percentage" data-target="60">0%</div>
      </div>
    </div>
    <div class="donut-label">利益率</div>
  </div>

  <div class="donut-item">
    <div class="donut-chart donut-cost" id="donut3">
      <div class="donut-center">
        <div class="donut-percentage" data-target="45">0%</div>
      </div>
    </div>
    <div class="donut-label">コスト効率</div>
  </div>

  <div class="donut-item">
    <div class="donut-chart donut-other" id="donut4">
      <div class="donut-center">
        <div class="donut-percentage" data-target="30">0%</div>
      </div>
    </div>
    <div class="donut-label">その他指標</div>
  </div>
</div>

▼CSS

.donut-chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  padding: 40px;
  max-width: 800px;
  margin: 0 auto;
}

.donut-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.donut-chart {
  --percentage: 0;
  --color: #3498db;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: conic-gradient(
    var(--color) 0deg calc(var(--percentage) * 3.6deg),
    #e0e0e0 calc(var(--percentage) * 3.6deg) 360deg
  );
  position: relative;
  transition: background 2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 中央の穴を作るための擬似要素 */
.donut-chart::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  background: white;
  border-radius: 50%;
}

/* 中央のパーセンテージ表示 */
.donut-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
}

.donut-percentage {
  font-size: 24px;
  font-weight: bold;
  color: #2c3e50;
  opacity: 0;
  animation: countUp 2s ease-out 0.5s forwards;
}

.donut-label {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 8px;
  opacity: 0;
  animation: fadeIn 0.5s ease-out 2s forwards;
}

@keyframes countUp {
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* 個別のドーナツグラフスタイル */
.donut-sales {
  --color: #e74c3c;
}
.donut-profit {
  --color: #2ecc71;
}
.donut-cost {
  --color: #f39c12;
}
.donut-other {
  --color: #9b59b6;
}

/* ホバー時のインタラクション */
.donut-chart:hover {
  transform: scale(1.05);
  transition: all 0.3s ease;
}

/* アニメーション開始用クラス */
.donut-sales.animate {
  --percentage: 75;
}
.donut-profit.animate {
  --percentage: 60;
}
.donut-cost.animate {
  --percentage: 45;
}
.donut-other.animate {
  --percentage: 30;
}

▼Javascript

// 数値カウントアップアニメーション
function animateValue(element, start, end, duration) {
  const range = end - start;
  const increment = range / (duration / 16);
  let current = start;

  const timer = setInterval(() => {
    current += increment;
    element.textContent = Math.round(current) + "%";

    if (current >= end) {
      element.textContent = end + "%";
      clearInterval(timer);
    }
  }, 16);
}

// ページ読み込み後にアニメーション開始
document.addEventListener("DOMContentLoaded", function () {
  setTimeout(() => {
    // ドーナツグラフのアニメーション開始
    document.querySelectorAll(".donut-chart").forEach((donut) => {
      donut.classList.add("animate");
    });

    // 数値カウントアニメーション開始
    document.querySelectorAll(".donut-percentage").forEach((percentage) => {
      const target = parseInt(percentage.getAttribute("data-target"));
      setTimeout(() => {
        animateValue(percentage, 0, target, 2000);
      }, 500);
    });
  }, 300);
});

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

複数セグメント対応ドーナツグラフ

複数のデータを一つのドーナツグラフで表現する高度な実装例です。

▼HTML

<div class="multi-donut-container">
  <div class="multi-donut">
    <div class="donut-ring ring-outer"></div>
    <div class="donut-ring ring-inner"></div>

    <div class="donut-info">
      <div class="total-value">¥2,480K</div>
      <div class="total-label">総売上</div>
    </div>

    <div class="data-labels">
      <div class="data-label label-1">製品A<br>30%</div>
      <div class="data-label label-2">製品B<br>30%</div>
      <div class="data-label label-3">製品C<br>20%</div>
      <div class="data-label label-4">その他<br>20%</div>
    </div>
  </div>
</div>

▼CSS

.multi-donut-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 500px;
}

.multi-donut {
  width: 320px;
  height: 320px;
  position: relative;
}

/* 各リング層の実装 */
.donut-ring {
  position: absolute;
  border-radius: 50%;
  transition: all 0.3s ease;
}

/* 外側リング */
.ring-outer {
  width: 320px;
  height: 320px;
  background: conic-gradient(
    #e74c3c 0deg 0deg,
    #e74c3c 0deg 108deg,
    /* 30% */ #3498db 108deg 216deg,
    /* 30% */ #f39c12 216deg 288deg,
    /* 20% */ #2ecc71 288deg 360deg /* 20% */
  );
  animation: rotateRing 3s ease-in-out forwards;
}

.ring-outer::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 40px;
  width: 240px;
  height: 240px;
  background: white;
  border-radius: 50%;
}

/* 内側リング */
.ring-inner {
  top: 80px;
  left: 80px;
  width: 160px;
  height: 160px;
  background: conic-gradient(
    #9b59b6 0deg 0deg,
    #9b59b6 0deg 144deg,
    /* 40% */ #1abc9c 144deg 288deg,
    /* 40% */ #e67e22 288deg 360deg /* 20% */
  );
  animation: rotateRing 3s ease-in-out 1s forwards;
}

.ring-inner::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 100px;
  height: 100px;
  background: white;
  border-radius: 50%;
}

@keyframes rotateRing {
  from {
    background: conic-gradient(transparent 0deg, transparent 360deg);
  }
}

/* 中央情報表示 */
.donut-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
}

.total-value {
  font-size: 36px;
  font-weight: bold;
  color: #2c3e50;
  opacity: 0;
  animation: fadeInUp 1s ease-out 2s forwards;
}

.total-label {
  font-size: 14px;
  color: #7f8c8d;
  margin-top: 8px;
  opacity: 0;
  animation: fadeInUp 1s ease-out 2.5s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* データラベル */
.data-labels {
  position: absolute;
  width: 100%;
  height: 100%;
}

.data-label {
  position: absolute;
  background: rgba(255, 255, 255, 0.95);
  padding: 8px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  color: #2c3e50;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  opacity: 0;
  animation: popInLabel 0.6s ease-out forwards;
}

.label-1 {
  top: 20px;
  right: 80px;
  animation-delay: 3s;
}

.label-2 {
  bottom: 20px;
  right: 80px;
  animation-delay: 3.2s;
}

.label-3 {
  bottom: 20px;
  left: 80px;
  animation-delay: 3.4s;
}

.label-4 {
  top: 20px;
  left: 80px;
  animation-delay: 3.6s;
}

@keyframes popInLabel {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

現在の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

レスポンシブ対応でスマホでも綺麗に表示するコツ

モバイルファーストなグラフ設計

スマートフォンでも美しく表示される円グラフには、以下の配慮が必要です。

▼HTML

<div class="responsive-chart-container">
  <div class="responsive-pie" id="responsivePie">
    <div class="responsive-center">
      <div class="responsive-value">100%</div>
      <div class="responsive-label">合計</div>
    </div>
  </div>

  <div class="mobile-legend">
    <div class="mobile-legend-item">
      <div class="mobile-color-box" style="background: #e74c3c;"></div>
      <span>製品A 36%</span>
    </div>
    <div class="mobile-legend-item">
      <div class="mobile-color-box" style="background: #3498db;"></div>
      <span>製品B 20%</span>
    </div>
    <div class="mobile-legend-item">
      <div class="mobile-color-box" style="background: #f39c12;"></div>
      <span>製品C 20%</span>
    </div>
    <div class="mobile-legend-item">
      <div class="mobile-color-box" style="background: #2ecc71;"></div>
      <span>製品D 20%</span>
    </div>
    <div class="mobile-legend-item">
      <div class="mobile-color-box" style="background: #9b59b6;"></div>
      <span>その他 4%</span>
    </div>
  </div>
</div>

▼CSS

/* モバイルファーストアプローチ */
.responsive-chart-container {
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.responsive-pie {
  width: min(280px, 90vw);
  height: min(280px, 90vw);
  max-width: 400px;
  max-height: 400px;
  margin: 0 auto;
  position: relative;
  background: conic-gradient(#e74c3c 0deg 0deg, transparent 0deg);
  border-radius: 50%;
  transition: background 2s ease-in-out;
}

.responsive-pie.animate {
  background: conic-gradient(
    #e74c3c 0deg 129.6deg,
    /* 36% */ #3498db 129.6deg 201.6deg,
    /* 20% */ #f39c12 201.6deg 273.6deg,
    /* 20% */ #2ecc71 273.6deg 345.6deg,
    /* 20% */ #9b59b6 345.6deg 360deg /* 4% */
  );
}

/* フォントサイズのレスポンシブ調整 */
.responsive-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  width: clamp(80px, 35%, 140px);
  height: clamp(80px, 35%, 140px);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.responsive-value {
  font-size: clamp(18px, 6vw, 28px);
  font-weight: bold;
  color: #2c3e50;
}

.responsive-label {
  font-size: clamp(10px, 3vw, 14px);
  color: #7f8c8d;
  margin-top: 4px;
}

/* モバイル用凡例レイアウト */
.mobile-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 15px;
  margin-top: 30px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
}

.mobile-legend-item {
  display: flex;
  align-items: center;
  font-size: clamp(12px, 3.5vw, 14px);
}

.mobile-color-box {
  width: clamp(12px, 4vw, 16px);
  height: clamp(12px, 4vw, 16px);
  border-radius: 3px;
  margin-right: 8px;
  flex-shrink: 0;
}

/* タブレット以上でのレイアウト調整 */
@media (min-width: 768px) {
  .responsive-chart-container {
    padding: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
  }

  .mobile-legend {
    margin-top: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    background: transparent;
    padding: 0;
  }
}

/* 高解像度デバイス対応 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {
  .responsive-pie {
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .responsive-chart-container {
    background: #2c3e50;
    color: #ecf0f1;
  }

  .responsive-center {
    background: #34495e;
    color: #ecf0f1;
  }

  .responsive-value {
    color: #ecf0f1;
  }

  .mobile-legend {
    background: #34495e;
  }
}

/* 動作軽減設定に対応 */
@media (prefers-reduced-motion: reduce) {
  .responsive-pie {
    transition: none;
  }

  .responsive-pie.animate {
    animation: none;
  }
}

▼Javascript

// Intersection Observer を使ったビューポート検知
function initResponsiveChart() {
  const chart = document.getElementById("responsivePie");

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          setTimeout(() => {
            chart.classList.add("animate");
          }, 300);
          observer.unobserve(entry.target);
        }
      });
    },
    {
      threshold: 0.3
    }
  );

  observer.observe(chart);
}

document.addEventListener("DOMContentLoaded", initResponsiveChart);

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

タッチデバイス向けインタラクション対応

スマートフォンやタブレットでの操作性を向上させるインタラクション実装です。

▼HTML

<div class="touch-pie-container">
  <div class="touch-pie" role="img" aria-label="売上構成円グラフ">
    <div class="pie-segment segment-1" role="button" tabindex="0" aria-label="製品A: 30%" data-segment="product-a" data-value="30" data-label="製品A" data-color="#e74c3c">
      <span class="sr-only">製品A: 売上の30%を占めています</span>
    </div>

    <div class="pie-segment segment-2" role="button" tabindex="0" aria-label="製品B: 25%" data-segment="product-b" data-value="25" data-label="製品B" data-color="#3498db">
      <span class="sr-only">製品B: 売上の25%を占めています</span>
    </div>

    <div class="pie-segment segment-3" role="button" tabindex="0" aria-label="製品C: 20%" data-segment="product-c" data-value="20" data-label="製品C" data-color="#f39c12">
      <span class="sr-only">製品C: 売上の20%を占めています</span>
    </div>

    <div class="pie-segment segment-4" role="button" tabindex="0" aria-label="製品D: 15%" data-segment="product-d" data-value="15" data-label="製品D" data-color="#2ecc71">
      <span class="sr-only">製品D: 売上の15%を占めています</span>
    </div>

    <div class="pie-segment segment-5" role="button" tabindex="0" aria-label="その他: 10%" data-segment="others" data-value="10" data-label="その他" data-color="#9b59b6">
      <span class="sr-only">その他: 売上の10%を占めています</span>
    </div>

    <div class="touch-center">
      <div class="touch-value" id="centerValue">100%</div>
      <div class="touch-description" id="centerDesc">総売上</div>
    </div>
  </div>

  <div class="detail-panel" id="detailPanel">
    <div class="detail-title" id="detailTitle">データ詳細</div>
    <div class="detail-stats">
      <div class="stat-item">
        <div class="stat-value" id="statValue1">-</div>
        <div class="stat-label">売上額</div>
      </div>
      <div class="stat-item">
        <div class="stat-value" id="statValue2">-</div>
        <div class="stat-label">前年比</div>
      </div>
    </div>
  </div>
</div>

▼CSS

.touch-pie-container {
  padding: 30px 20px;
  max-width: 600px;
  margin: 0 auto;
}

.touch-pie {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
  border-radius: 50%;
  background: #ecf0f1;
  cursor: pointer;
  transition: transform 0.2s ease;
  touch-action: manipulation; /* ダブルタップズーム無効化 */
}

/* タッチフィードバック */
.touch-pie:active {
  transform: scale(0.98);
}

/* セグメント別のホバー・タッチ対応 */
.pie-segment {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%);
  transition: all 0.3s ease;
  cursor: pointer;
}

.segment-1 {
  background: #e74c3c;
  transform: rotate(0deg);
  clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%, 85.4% 50%);
}

.segment-2 {
  background: #3498db;
  transform: rotate(72deg);
  clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%, 85.4% 50%);
}

.segment-3 {
  background: #f39c12;
  transform: rotate(144deg);
  clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%, 85.4% 50%);
}

.segment-4 {
  background: #2ecc71;
  transform: rotate(216deg);
  clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%, 85.4% 50%);
}

.segment-5 {
  background: #9b59b6;
  transform: rotate(288deg);
  clip-path: polygon(50% 50%, 50% 0%, 85.4% 14.6%, 85.4% 50%);
}

/* セグメントタップ時のフィードバック */
.pie-segment:hover,
.pie-segment:focus,
.pie-segment.active {
  filter: brightness(1.1);
  transform: scale(1.05) rotate(var(--segment-rotation, 0deg));
  z-index: 2;
}

.segment-1:hover,
.segment-1:focus,
.segment-1.active {
  --segment-rotation: 0deg;
}
.segment-2:hover,
.segment-2:focus,
.segment-2.active {
  --segment-rotation: 72deg;
}
.segment-3:hover,
.segment-3:focus,
.segment-3.active {
  --segment-rotation: 144deg;
}
.segment-4:hover,
.segment-4:focus,
.segment-4.active {
  --segment-rotation: 216deg;
}
.segment-5:hover,
.segment-5:focus,
.segment-5.active {
  --segment-rotation: 288deg;
}

/* 中央の情報表示エリア */
.touch-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;
  height: 40%;
  background: white;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 10;
  pointer-events: none;
}

.touch-value {
  font-size: clamp(16px, 5vw, 24px);
  font-weight: bold;
  color: #2c3e50;
  transition: all 0.3s ease;
}

.touch-description {
  font-size: clamp(10px, 2.5vw, 12px);
  color: #7f8c8d;
  margin-top: 4px;
  text-align: center;
  transition: all 0.3s ease;
}

/* 詳細情報パネル */
.detail-panel {
  margin-top: 30px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.detail-panel.show {
  opacity: 1;
  transform: translateY(0);
}

.detail-title {
  font-size: 18px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.stat-item {
  text-align: center;
  padding: 10px;
  background: #f8f9fa;
  border-radius: 8px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #2c3e50;
}

.stat-label {
  font-size: 12px;
  color: #7f8c8d;
  margin-top: 4px;
}

/* アクセシビリティ対応 */
.pie-segment {
  outline: none;
}

.pie-segment:focus-visible {
  outline: 3px solid #007bff;
  outline-offset: 2px;
}

/* 音声読み上げ対応 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

▼Javascript

// タッチ対応インタラクション実装
class TouchPieChart {
  constructor() {
    this.segments = document.querySelectorAll(".pie-segment");
    this.centerValue = document.getElementById("centerValue");
    this.centerDesc = document.getElementById("centerDesc");
    this.detailPanel = document.getElementById("detailPanel");
    this.detailTitle = document.getElementById("detailTitle");
    this.activeSegment = null;

    this.segmentData = {
      "product-a": { sales: "¥300万", growth: "+12%" },
      "product-b": { sales: "¥250万", growth: "+8%" },
      "product-c": { sales: "¥200万", growth: "+15%" },
      "product-d": { sales: "¥150万", growth: "+5%" },
      others: { sales: "¥100万", growth: "+3%" }
    };

    this.init();
  }

  init() {
    this.segments.forEach((segment) => {
      // タッチイベント
      segment.addEventListener("touchstart", this.handleTouchStart.bind(this));
      segment.addEventListener("touchend", this.handleTouchEnd.bind(this));

      // クリック・キーボードイベント
      segment.addEventListener("click", this.handleSelect.bind(this));
      segment.addEventListener("keydown", this.handleKeydown.bind(this));

      // ホバーイベント（デスクトップ）
      segment.addEventListener("mouseenter", this.handleMouseEnter.bind(this));
      segment.addEventListener("mouseleave", this.handleMouseLeave.bind(this));
    });
  }

  handleTouchStart(e) {
    e.preventDefault();
    this.handleSelect(e);
  }

  handleTouchEnd(e) {
    e.preventDefault();
  }

  handleSelect(e) {
    const segment = e.currentTarget;
    const segmentKey = segment.dataset.segment;
    const value = segment.dataset.value;
    const label = segment.dataset.label;

    // 前のアクティブセグメントをリセット
    if (this.activeSegment) {
      this.activeSegment.classList.remove("active");
    }

    // 新しいセグメントをアクティブ化
    segment.classList.add("active");
    this.activeSegment = segment;

    // 中央表示を更新
    this.centerValue.textContent = value + "%";
    this.centerDesc.textContent = label;

    // 詳細パネルを表示
    this.showDetailPanel(segmentKey, label);

    // アクセシビリティ: フォーカス管理
    segment.focus();
  }

  handleKeydown(e) {
    if (e.key === "Enter" || e.key === " ") {
      e.preventDefault();
      this.handleSelect(e);
    }
  }

  handleMouseEnter(e) {
    if (window.innerWidth > 768) {
      // デスクトップのみ
      e.currentTarget.style.filter = "brightness(1.1)";
    }
  }

  handleMouseLeave(e) {
    if (!e.currentTarget.classList.contains("active")) {
      e.currentTarget.style.filter = "";
    }
  }

  showDetailPanel(segmentKey, label) {
    const data = this.segmentData[segmentKey];

    this.detailTitle.textContent = label + " 詳細情報";
    document.getElementById("statValue1").textContent = data.sales;
    document.getElementById("statValue2").textContent = data.growth;

    this.detailPanel.classList.add("show");
  }

  reset() {
    if (this.activeSegment) {
      this.activeSegment.classList.remove("active");
      this.activeSegment = null;
    }

    this.centerValue.textContent = "100%";
    this.centerDesc.textContent = "総売上";
    this.detailPanel.classList.remove("show");
  }
}

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

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

パフォーマンス最適化とアクセシビリティ配慮

円グラフ・ドーナツグラフの実装において、以下の点に注意することで、あらゆるデバイスとユーザーに対応できます：

パフォーマンス最適化のポイント:

1. GPU加速の活用: will-changeプロパティとtransform: translateZ(0)でハードウェア加速を有効化
2. 適切なアニメーション設計: 60FPSを維持するため、transformとopacityのみをアニメーション
3. レイジーロード: Intersection Observer APIを使用したビューポート内でのみアニメーション実行

アクセシビリティ配慮:

1. キーボード操作対応: tabindexとrole属性によるフォーカス管理
2. スクリーンリーダー対応: aria-labelと構造化された代替テキスト
3. 動作軽減設定: prefers-reduced-motionメディアクエリでアニメーション無効化

これらのテクニックを組み合わせることで、プロフェッショナルレベルの円グラフ・ドーナツグラフアニメーションを実装できます。次のセクションでは、棒グラフの実装について詳しく解説します。

棒グラフ・インフォグラフィック表現のCSSアニメーション

棒グラフは、データの比較表示に最適な視覚化手法です。CSSアニメーションを活用することで、静的な棒グラフを動的で魅力的なインタラクティブコンテンツに変身させることができます。この章では、実務でそのまま使える棒グラフのアニメーション実装例から、上級者向けのスクロール連動技術まで詳しく解説していきます。

棒グラフが下から伸びる・フェードインするアニメーションの実装例

基本的な縦棒グラフのアニメーション

まずは最も基本的な、棒が下から上に向かって伸びるアニメーションを実装してみましょう。transform: scaleY()を使用することで、スムーズな伸長アニメーションを実現できます。

▼HTML

<div class="chart-container">
  <div class="bar" data-value="75">
    <span class="bar-label">Q1</span>
  </div>
  <div class="bar" data-value="60">
    <span class="bar-label">Q2</span>
  </div>
  <div class="bar" data-value="90">
    <span class="bar-label">Q3</span>
  </div>
  <div class="bar" data-value="80">
    <span class="bar-label">Q4</span>
  </div>
</div>

▼CSS

.chart-container {
  display: flex;
  align-items: flex-end;
  height: 300px;
  padding: 20px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border-radius: 10px;
  gap: 20px;
}

.bar {
  width: 60px;
  background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  transform: scaleY(0); /* 初期状態：高さ0 */
  transform-origin: bottom; /* 下端を起点にスケール */
  animation: growUp 2s ease-out forwards; /* アニメーション実行 */
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

/* 各棒の高さとアニメーション遅延を個別設定 */
.bar:nth-child(1) {
  height: 200px;
  animation-delay: 0.1s;
}
.bar:nth-child(2) {
  height: 150px;
  animation-delay: 0.3s;
}
.bar:nth-child(3) {
  height: 250px;
  animation-delay: 0.5s;
}
.bar:nth-child(4) {
  height: 180px;
  animation-delay: 0.7s;
}

/* 伸びるアニメーションのキーフレーム */
@keyframes growUp {
  from {
    transform: scaleY(0);
    opacity: 0;
  }
  to {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* 数値ラベル */
.bar::after {
  content: attr(data-value);
  position: absolute;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: #333;
  font-weight: bold;
  font-size: 14px;
  opacity: 0;
  animation: fadeInLabel 1s ease-out 1.5s forwards;
}

@keyframes fadeInLabel {
  to {
    opacity: 1;
  }
}

/* X軸のラベル */
.bar-label {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: #666;
}

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

このコードの重要なポイントは、transform-origin: bottomの設定です。これにより、スケールの起点が下端に固定され、棒が下から上に向かって自然に伸びるアニメーションが実現できます。

横棒グラフのスライドインアニメーション

次に、左から右に伸びる横棒グラフを実装してみましょう。データの比較において、ラベルが長い場合に特に有効です。

▼HTML

<div class="horizontal-chart">
  <div class="chart-item">
    <div class="item-label">JavaScript</div>
    <div class="bar-track">
      <div class="bar-fill">
        <span class="percentage">85%</span>
      </div>
    </div>
  </div>
  <div class="chart-item">
    <div class="item-label">CSS</div>
    <div class="bar-track">
      <div class="bar-fill">
        <span class="percentage">70%</span>
      </div>
    </div>
  </div>
  <div class="chart-item">
    <div class="item-label">HTML</div>
    <div class="bar-track">
      <div class="bar-fill">
        <span class="percentage">95%</span>
      </div>
    </div>
  </div>
  <div class="chart-item">
    <div class="item-label">React</div>
    <div class="bar-track">
      <div class="bar-fill">
        <span class="percentage">60%</span>
      </div>
    </div>
  </div>
</div>

▼CSS

.horizontal-chart {
  width: 100%;
  max-width: 600px;
  padding: 30px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.chart-item {
  margin-bottom: 25px;
  position: relative;
}

.item-label {
  font-weight: 600;
  margin-bottom: 8px;
  color: #2c3e50;
  font-size: 14px;
}

.bar-track {
  height: 20px;
  background: #ecf0f1;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3498db 0%, #2ecc71 100%);
  border-radius: 10px;
  width: 0%; /* 初期状態：幅0 */
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

/* ローディング開始時のクラス */
.chart-item.animate .bar-fill {
  animation: slideIn 2s ease-out forwards;
}

/* 各バーの最終的な幅を個別設定 */
.chart-item:nth-child(1) .bar-fill.animate {
  width: 85%;
}
.chart-item:nth-child(2) .bar-fill.animate {
  width: 70%;
}
.chart-item:nth-child(3) .bar-fill.animate {
  width: 95%;
}
.chart-item:nth-child(4) .bar-fill.animate {
  width: 60%;
}

/* パーセンテージ表示 */
.percentage {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  font-weight: bold;
  font-size: 12px;
  opacity: 0;
  animation: fadeInPercentage 1s ease-out 1s forwards;
}

@keyframes slideIn {
  from {
    width: 0%;
  }
}

@keyframes fadeInPercentage {
  to {
    opacity: 1;
  }
}

▼Javascript

// ページ読み込み時にアニメーション開始
window.addEventListener("load", function () {
  setTimeout(() => {
    const items = document.querySelectorAll(".chart-item");
    const fills = document.querySelectorAll(".bar-fill");

    items.forEach((item, index) => {
      setTimeout(() => {
        item.classList.add("animate");
        fills[index].classList.add("animate");
      }, index * 200);
    });
  }, 500);
});

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

インフォグラフィックで使える動きのあるグラフデザイン集

アイコン付きプログレスバー

インフォグラフィックでよく使われる、アイコンと数値を組み合わせたデザインです。

▼HTML

<div class="infographic-container">
  <div class="stat-card">
    <div class="icon icon-1">👥</div>
    <div class="stat-number">1,234</div>
    <div class="stat-label">Active Users</div>
    <div class="progress-ring">
      <svg width="80" height="80">
        <circle cx="40" cy="40" r="40" class="background"></circle>
        <circle cx="40" cy="40" r="40" class="progress"></circle>
      </svg>
    </div>
  </div>

  <div class="stat-card">
    <div class="icon icon-2">📈</div>
    <div class="stat-number">89%</div>
    <div class="stat-label">Growth Rate</div>
  </div>

  <div class="stat-card">
    <div class="icon icon-3">⭐</div>
    <div class="stat-number">4.9</div>
    <div class="stat-label">User Rating</div>
  </div>

  <div class="stat-card">
    <div class="icon icon-4">🚀</div>
    <div class="stat-number">567</div>
    <div class="stat-label">Projects</div>
  </div>
</div>

▼CSS

.infographic-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
}

.stat-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transform: translateY(20px);
  opacity: 0;
  animation: slideUp 1s ease-out forwards;
}

.stat-card:nth-child(1) {
  animation-delay: 0.1s;
}
.stat-card:nth-child(2) {
  animation-delay: 0.3s;
}
.stat-card:nth-child(3) {
  animation-delay: 0.5s;
}
.stat-card:nth-child(4) {
  animation-delay: 0.7s;
}

.icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  transform: scale(0);
  animation: popIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) 0.5s forwards;
}

.icon-1 {
  background: linear-gradient(135deg, #ff6b6b, #ee5a52);
}
.icon-2 {
  background: linear-gradient(135deg, #4ecdc4, #44a08d);
}
.icon-3 {
  background: linear-gradient(135deg, #45b7d1, #96c93d);
}
.icon-4 {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.stat-number {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  margin-bottom: 10px;
}

.stat-label {
  color: #7f8c8d;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.progress-ring {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 15px auto;
}

.progress-ring svg {
  transform: rotate(-90deg);
}

.progress-ring circle {
  fill: none;
  stroke-width: 8;
}

.progress-ring .background {
  stroke: #ecf0f1;
}

.progress-ring .progress {
  stroke: #3498db;
  stroke-linecap: round;
  stroke-dasharray: 251.2;
  stroke-dashoffset: 251.2;
  animation: progressAnimation 2s ease-out 1s forwards;
}

@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  to {
    transform: scale(1);
  }
}

@keyframes progressAnimation {
  to {
    stroke-dashoffset: 62.8; /* 75%の進捗 */
  }
}

実際の表示

See the Pen graph-animation-css-14 by watashi-xyz (@watashi-xyz) on CodePen.

比較チャートのアニメーション

複数のデータセットを比較する際に効果的なアニメーション手法です。

▼HTML

<div class="chart-container">
  <h1 class="chart-title">年間データ比較</h1>
  <div class="comparison-chart">
    <div class="comparison-group">
      <div class="comparison-bar bar-2023" style="height: 60%;"></div>
      <div class="comparison-bar bar-2024" style="height: 85%;"></div>
    </div>
    <div class="comparison-group">
      <div class="comparison-bar bar-2023" style="height: 75%;"></div>
      <div class="comparison-bar bar-2024" style="height: 65%;"></div>
    </div>
    <div class="comparison-group">
      <div class="comparison-bar bar-2023" style="height: 50%;"></div>
      <div class="comparison-bar bar-2024" style="height: 70%;"></div>
    </div>
    <div class="comparison-group">
      <div class="comparison-bar bar-2023" style="height: 80%;"></div>
      <div class="comparison-bar bar-2024" style="height: 90%;"></div>
    </div>

    <div class="legend">
      <div class="legend-item">
        <div class="legend-color" style="background: #3498db;"></div>
        <span>2023年</span>
      </div>
      <div class="legend-item">
        <div class="legend-color" style="background: #e74c3c;"></div>
        <span>2024年</span>
      </div>
    </div>

    <div class="label-group">
      <span class="bar-label">グループA</span>
      <span class="bar-label">グループB</span>
      <span class="bar-label">グループC</span>
      <span class="bar-label">グループD</span>
    </div>
  </div>
</div>

▼CSS

/* ここに提供されたCSSコードを貼り付けます */
.comparison-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 400px;
  padding: 40px;
  background: #f8f9fa;
  border-radius: 15px;
  position: relative;
}
.comparison-group {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  height: 100%;
}
.comparison-bar {
  width: 25px;
  border-radius: 3px 3px 0 0;
  transform: scaleY(0);
  transform-origin: bottom;
  animation: growComparison 1.5s ease-out forwards;
}
.bar-2023 {
  background: linear-gradient(180deg, #3498db, #2980b9);
  animation-delay: 0.2s;
}
.bar-2024 {
  background: linear-gradient(180deg, #e74c3c, #c0392b);
  animation-delay: 0.4s;
}
@keyframes growComparison {
  to {
    transform: scaleY(1);
  }
}

/* グラフを分かりやすくするための追加スタイル */
body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #e9ecef;
}

.chart-container {
  width: 80%;
  max-width: 800px;
  padding: 20px;
}

.chart-title {
  text-align: center;
  margin-bottom: 20px;
  color: #495057;
}

.label-group {
  position: absolute;
  bottom: 20px;
  display: flex;
  justify-content: space-around;
  width: 100%;
  left: 0;
  padding: 0 40px;
  box-sizing: border-box;
  color: #6c757d;
  font-size: 14px;
}

.bar-label {
  text-align: center;
  flex: 1;
}

.legend {
  position: absolute;
  top: 20px;
  left: 20px;
  display: flex;
  gap: 15px;
  font-size: 14px;
  color: #6c757d;
}

.legend-item {
  display: flex;
  align-items: center;
}

.legend-color {
  width: 15px;
  height: 15px;
  margin-right: 5px;
  border-radius: 3px;
}

実際の表示

See the Pen graph-animation-css-15 by watashi-xyz (@watashi-xyz) on CodePen.

スクロール・ホバー連動で動くグラフアニメーションの作り方

Intersection Observer APIを使ったスクロール連動

現代のWebサイトでは、ユーザーがコンテンツを見た瞬間にアニメーションが始まる「スクロール連動アニメーション」が効果的です。

▼HTML

<div class="scroll-chart" id="animatedChart">
  <h3>売上推移（月別）</h3>
  <div class="scroll-bar" data-label="1月"></div>
  <div class="scroll-bar" data-label="2月"></div>
  <div class="scroll-bar" data-label="3月"></div>
  <div class="scroll-bar" data-label="4月"></div>
</div>

▼CSS

.scroll-chart {
  margin: 100vh 0; /* スクロールテスト用の余白 */
  padding: 60px 40px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(50px);
  transition: all 1s ease-out;
}

.scroll-chart.visible {
  opacity: 1;
  transform: translateY(0);
}

.scroll-bar {
  height: 40px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  margin: 20px 0;
  border-radius: 20px;
  width: 0%;
  transition: width 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: hidden;
}

.scroll-chart.visible .scroll-bar:nth-child(1) {
  width: 85%;
  transition-delay: 0.2s;
}
.scroll-chart.visible .scroll-bar:nth-child(2) {
  width: 70%;
  transition-delay: 0.4s;
}
.scroll-chart.visible .scroll-bar:nth-child(3) {
  width: 95%;
  transition-delay: 0.6s;
}
.scroll-chart.visible .scroll-bar:nth-child(4) {
  width: 60%;
  transition-delay: 0.8s;
}

/* シマーエフェクト（オプション） */
.scroll-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.6),
    transparent
  );
  animation: shimmer 2s infinite;
}

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

▼Javascript

// Intersection Observer for scroll-triggered animations
const observerOptions = {
    threshold: 0.3, // 30%見えたらトリガー
    rootMargin: '0px 0px -50px 0px'
};

const chartObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            entry.target.classList.add('visible');
        }
    });
}, observerOptions);

// 観測開始
document.addEventListener('DOMContentLoaded', () => {
    const charts = document.querySelectorAll('.scroll-chart');
    charts.forEach(chart => chartObserver.observe(chart));
});

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

ホバーインタラクションの実装

ユーザーとの対話性を高めるホバーエフェクトを実装します。

▼HTML

<div class="interactive-chart">
  <div class="interactive-bar">
    <div class="bar-fill-interactive" style="height: 60%;"></div>
    <div class="tooltip">データA: 60</div>
  </div>
  <div class="interactive-bar">
    <div class="bar-fill-interactive" style="height: 85%;"></div>
    <div class="tooltip">データB: 85</div>
  </div>
  <div class="interactive-bar">
    <div class="bar-fill-interactive" style="height: 40%;"></div>
    <div class="tooltip">データC: 40</div>
  </div>
  <div class="interactive-bar">
    <div class="bar-fill-interactive" style="height: 70%;"></div>
    <div class="tooltip">データD: 70</div>
  </div>
</div>

▼CSS

.interactive-chart {
  display: flex;
  gap: 20px;
  padding: 40px;
  background: linear-gradient(135deg, #1e3c72, #2a5298);
  border-radius: 15px;
}

.interactive-bar {
  flex: 1;
  height: 200px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  position: relative;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

.interactive-bar:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  background: rgba(255, 255, 255, 0.3);
}

.bar-fill-interactive {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, #4facfe, #00f2fe);
  border-radius: 0 0 8px 8px;
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s ease-out;
}

.interactive-bar:hover .bar-fill-interactive {
  transform: scaleY(1);
}

.tooltip {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.interactive-bar:hover .tooltip {
  opacity: 1;
}

実際の表示

See the Pen Untitled by watashi-xyz (@watashi-xyz) on CodePen.

パフォーマンス最適化のテクニック

スクロール連動アニメーションでは、パフォーマンスが重要です。以下の最適化手法を適用します：

// Passive Event Listener（パフォーマンス向上）
let ticking = false;

function updateScrollAnimations() {
    const scrollTop = window.pageYOffset;
    const charts = document.querySelectorAll('.performance-chart');

    charts.forEach(chart => {
        const rect = chart.getBoundingClientRect();
        const isVisible = rect.top < window.innerHeight && rect.bottom > 0;

        if (isVisible && !chart.classList.contains('animated')) {
            chart.classList.add('animated');
        }
    });

    ticking = false;
}

function requestTick() {
    if (!ticking) {
        requestAnimationFrame(updateScrollAnimations);
        ticking = true;
    }
}

// Passive listener for better performance
window.addEventListener('scroll', requestTick, { passive: true });

/* GPU加速の活用 */
.performance-chart {
    will-change: transform, opacity;
    backface-visibility: hidden;
    perspective: 1000px;
}

/* CSS Containment（レイアウト最適化） */
.chart-container {
    contain: layout style;
}

/* Reduced Motion対応 */
@media (prefers-reduced-motion: reduce) {
    .scroll-bar,
    .interactive-bar,
    .performance-chart {
        transition: none !important;
        animation: none !important;
    }
}

これらのテクニックを組み合わせることで、ユーザーエンゲージメントの高い、パフォーマンスに優れたグラフアニメーションを実装できます。次のセクションでは、これらの実装を実務レベルで活用するための更なる最適化手法について詳しく解説していきます。

実務で使えるCSSグラフアニメーションのテクニック

実際のWebサイトやアプリケーションでグラフアニメーションを実装する際は、美しい見た目だけでなく、パフォーマンス、アクセシビリティ、クロスブラウザ対応など、実務レベルの品質が求められます。この章では、プロフェッショナルな現場で即座に活用できる高度なテクニックと最適化手法を詳しく解説します。

ページ読み込み時に動き出すローディング演出の実装方法

DOMContentLoadedを活用した段階的ローディング

ページ読み込み完了と同時に、自然な流れでグラフアニメーションを開始する実装です。ユーザーの注意を適切に引きつけながら、データの重要性を視覚的に伝えることができます。

▼HTML

<!-- プリローダー -->
<div class="preloader" id="preloader">
  <div class="loader-chart">
    <div class="loader-bar"></div>
    <div class="loader-bar"></div>
    <div class="loader-bar"></div>
    <div class="loader-bar"></div>
    <div class="loader-bar"></div>
  </div>
</div>

<div class="dashboard">
  <h1 style="color: white; text-align: center; font-size: 32px; margin-bottom: 20px;">
    Analytics Dashboard
  </h1>

  <div class="dashboard-grid">
    <div class="chart-card" data-chart="revenue">
      <h3 class="chart-title">月間売上推移</h3>
      <div class="counter" data-target="1234567">¥0</div>
      <div class="chart-bars">
        <div class="data-bar"></div>
        <div class="data-bar"></div>
        <div class="data-bar"></div>
        <div class="data-bar"></div>
      </div>
    </div>

    <div class="chart-card" data-chart="users">
      <h3 class="chart-title">アクティブユーザー</h3>
      <div class="counter" data-target="45280">0人</div>
      <div class="chart-bars">
        <div class="data-bar"></div>
        <div class="data-bar"></div>
        <div class="data-bar"></div>
      </div>
    </div>

    <div class="chart-card" data-chart="conversion">
      <h3 class="chart-title">コンバージョン率</h3>
      <div class="counter" data-target="12.5">0%</div>
      <div class="chart-bars">
        <div class="data-bar"></div>
        <div class="data-bar"></div>
      </div>
    </div>
  </div>
</div>

▼CSS

.dashboard {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 40px;
}

.chart-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  transform: translateY(30px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.chart-card.loaded {
  transform: translateY(0);
  opacity: 1;
}

.chart-title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  position: relative;
}

.chart-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 2px;
  animation: titleUnderline 1s ease-out 0.5s forwards;
}

@keyframes titleUnderline {
  to {
    width: 60px;
  }
}

/* ローディングスケルトン */
.skeleton-bar {
  height: 20px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  border-radius: 10px;
  margin: 15px 0;
  animation: skeleton-loading 2s infinite;
}

@keyframes skeleton-loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* 実際のチャートバー */
.data-bar {
  height: 20px;
  background: linear-gradient(90deg, #667eea, #764ba2);
  border-radius: 10px;
  margin: 15px 0;
  width: 0%;
  opacity: 0;
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.data-bar.animate {
  opacity: 1;
}

.data-bar:nth-child(1).animate {
  width: 85%;
  transition-delay: 0.2s;
}
.data-bar:nth-child(2).animate {
  width: 70%;
  transition-delay: 0.4s;
}
.data-bar:nth-child(3).animate {
  width: 95%;
  transition-delay: 0.6s;
}
.data-bar:nth-child(4).animate {
  width: 60%;
  transition-delay: 0.8s;
}

/* 光沢エフェクト */
.data-bar::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: shine 3s infinite 1s;
}

@keyframes shine {
  0%,
  100% {
    left: -100%;
  }
  50% {
    left: 100%;
  }
}

/* 数値カウンターアニメーション */
.counter {
  font-size: 32px;
  font-weight: bold;
  color: #2c3e50;
  margin: 20px 0;
}

/* プリローダー */
.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-chart {
  width: 100px;
  height: 100px;
  position: relative;
}

.loader-bar {
  position: absolute;
  bottom: 0;
  width: 12px;
  background: white;
  border-radius: 6px 6px 0 0;
  animation: loaderPulse 1.5s ease-in-out infinite;
}

.loader-bar:nth-child(1) {
  left: 0px;
  animation-delay: 0s;
}
.loader-bar:nth-child(2) {
  left: 20px;
  animation-delay: 0.2s;
}
.loader-bar:nth-child(3) {
  left: 40px;
  animation-delay: 0.4s;
}
.loader-bar:nth-child(4) {
  left: 60px;
  animation-delay: 0.6s;
}
.loader-bar:nth-child(5) {
  left: 80px;
  animation-delay: 0.8s;
}

@keyframes loaderPulse {
  0%,
  100% {
    height: 20px;
  }
  50% {
    height: 60px;
  }
}

▼Javascript

// カウンターアニメーション関数
function animateCounter(element, target, duration = 2000, suffix = "") {
  const start = 0;
  const startTime = performance.now();

  function updateCounter(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);

    // イージング関数（ease-out）
    const easeOut = 1 - Math.pow(1 - progress, 3);
    const current = Math.floor(start + (target - start) * easeOut);

    element.textContent = current.toLocaleString() + suffix;

    if (progress < 1) {
      requestAnimationFrame(updateCounter);
    }
  }

  requestAnimationFrame(updateCounter);
}

// ページ読み込み完了時の処理
window.addEventListener("load", function () {
  // プリローダーを隠す
  setTimeout(() => {
    document.getElementById("preloader").classList.add("hidden");
  }, 1500);

  // メインコンテンツのアニメーション開始
  setTimeout(() => {
    const cards = document.querySelectorAll(".chart-card");
    const counters = document.querySelectorAll(".counter");
    const dataBars = document.querySelectorAll(".data-bar");

    // カードを順次表示
    cards.forEach((card, index) => {
      setTimeout(() => {
        card.classList.add("loaded");
      }, index * 200);
    });

    // カウンターアニメーション開始
    setTimeout(() => {
      counters.forEach((counter) => {
        const target = parseFloat(counter.dataset.target);
        const suffix = counter.textContent.includes("¥")
          ? ""
          : counter.textContent.includes("人")
          ? "人"
          : counter.textContent.includes("%")
          ? "%"
          : "";
        const prefix = counter.textContent.includes("¥") ? "¥" : "";

        animateCounter(counter, target, 2000, suffix);
      });
    }, 1000);

    // データバーアニメーション開始
    setTimeout(() => {
      dataBars.forEach((bar) => {
        bar.classList.add("animate");
      });
    }, 1500);
  }, 2000);
});

// パフォーマンス監視（開発時用）
if (window.performance && window.performance.mark) {
  window.addEventListener("load", () => {
    performance.mark("charts-animation-start");

    setTimeout(() => {
      performance.mark("charts-animation-end");
      performance.measure(
        "charts-animation-duration",
        "charts-animation-start",
        "charts-animation-end"
      );

      const measure = performance.getEntriesByName(
        "charts-animation-duration"
      )[0];
      console.log(`Chart animation took: ${measure.duration}ms`);
    }, 3000);
  });
}

実際の表示

See the Pen graph-animation-css-19 by watashi-xyz (@watashi-xyz) on CodePen.

CSS-in-JSライブラリ連携時の考慮事項

React、Vue.jsなどのモダンフレームワークと組み合わせる場合の実装パターンです。

// React Hooks を使用した例
import { useState, useEffect, useRef } from 'react';

const AnimatedChart = ({ data, delay = 0 }) => {
    const [isVisible, setIsVisible] = useState(false);
    const [shouldAnimate, setShouldAnimate] = useState(false);
    const chartRef = useRef(null);

    useEffect(() => {
        // コンポーネントマウント後にアニメーション準備
        const timer = setTimeout(() => {
            setIsVisible(true);

            // さらに遅延してアニメーション開始
            const animationTimer = setTimeout(() => {
                setShouldAnimate(true);
            }, 300);

            return () => clearTimeout(animationTimer);
        }, delay);

        return () => clearTimeout(timer);
    }, [delay]);

    return (
        <div
            ref={chartRef}
            className={`chart-container ${isVisible ? 'visible' : ''}`}
            style={{
                transform: isVisible ? 'translateY(0)' : 'translateY(30px)',
                opacity: isVisible ? 1 : 0,
                transition: 'all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
            }}
        >
            {data.map((item, index) => (
                <div
                    key={index}
                    className="chart-bar"
                    style={{
                        width: shouldAnimate ? `${item.percentage}%` : '0%',
                        transitionDelay: `${index * 200}ms`
                    }}
                />
            ))}
        </div>
    );
};

クロスブラウザ対応（Chrome/Safari/Firefox/Edge）の注意点

ベンダープレフィックスと機能検出

主要ブラウザでの互換性を確保するために、適切なフォールバック戦略を実装します。

/* ベンダープレフィックス付きのCSS */
.modern-chart {
    /* 標準仕様 */
    transform: translateZ(0);
    will-change: transform, opacity;

    /* Webkit系（Safari, Chrome） */
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;

    /* Firefox */
    -moz-backface-visibility: hidden;

    /* 古いEdge */
    -ms-transform: translateZ(0);
}

/* CSS Grid のフォールバック */
.chart-grid {
    /* Flexbox フォールバック */
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    flex-wrap: wrap;

    /* CSS Grid（モダンブラウザ） */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

/* CSS Custom Properties のフォールバック */
.progress-bar {
    /* フォールバック値 */
    background-color: #3498db;

    /* CSS変数使用 */
    background-color: var(--primary-color, #3498db);
}

/* CSS Clip-path のフォールバック */
.clipped-chart {
    /* 古いブラウザ用 */
    border-radius: 50%;
    overflow: hidden;

    /* モダンブラウザ用 */
    clip-path: circle(50%);
}

/* Safari特有の問題対応 */
@supports (-webkit-appearance: none) {
    .safari-specific {
        /* Safariでのちらつき防止 */
        -webkit-transform: translateZ(0);
        -webkit-perspective: 1000px;
        -webkit-backface-visibility: hidden;
    }
}

JavaScript による機能検出とポリフィル

// ブラウザ機能検出クラス
class BrowserSupport {
    static checkCSS3Support() {
        const testElement = document.createElement('div');
        const transforms = {
            'transform': 'transform',
            'WebkitTransform': '-webkit-transform',
            'MozTransform': '-moz-transform',
            'msTransform': '-ms-transform'
        };

        for (let transform in transforms) {
            if (testElement.style[transform] !== undefined) {
                return transforms[transform];
            }
        }
        return false;
    }

    static checkIntersectionObserver() {
        return 'IntersectionObserver' in window;
    }

    static checkAnimationSupport() {
        const testElement = document.createElement('div');
        return 'animate' in testElement;
    }
}

// ポリフィル読み込み関数
async function loadPolyfills() {
    const polyfills = [];

    // Intersection Observer ポリフィル
    if (!BrowserSupport.checkIntersectionObserver()) {
        polyfills.push(import('intersection-observer'));
    }

    // Web Animations API ポリフィル
    if (!BrowserSupport.checkAnimationSupport()) {
        polyfills.push(import('web-animations-js'));
    }

    await Promise.all(polyfills);
}

// アニメーション実行関数（フォールバック付き）
function animateChart(element, options) {
    if (BrowserSupport.checkAnimationSupport()) {
        // Web Animations API使用
        return element.animate(options.keyframes, options.timing);
    } else {
        // CSS transition フォールバック
        return new Promise((resolve) => {
            const transform = BrowserSupport.checkCSS3Support();
            if (transform) {
                element.style.transition = 'all 1s ease-out';
                element.style[transform] = options.transform;
                setTimeout(resolve, 1000);
            } else {
                // 最終フォールバック（アニメーションなし）
                resolve();
            }
        });
    }
}

// 使用例
document.addEventListener('DOMContentLoaded', async function() {
    await loadPolyfills();

    const charts = document.querySelectorAll('.animated-chart');
    charts.forEach(chart => {
        animateChart(chart, {
            keyframes: [
                { transform: 'translateY(50px)', opacity: 0 },
                { transform: 'translateY(0)', opacity: 1 }
            ],
            timing: {
                duration: 1000,
                easing: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
            }
        });
    });
});

ブラウザ固有のバグ対策

/* Internet Explorer 11 対応 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ie11-chart {
        /* IE11でのFlexboxバグ対策 */
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Safari のスクロール問題対策 */
@supports (-webkit-overflow-scrolling: touch) {
    .scroll-chart {
        -webkit-overflow-scrolling: touch;
        transform: translateZ(0);
    }
}

/* Firefox の position: sticky バグ対策 */
@-moz-document url-prefix() {
    .sticky-chart-header {
        position: -moz-sticky;
        position: sticky;
    }
}

軽量かつSEO/UXに優しいパフォーマンス最適化のコツ

CSS アニメーションのパフォーマンス最適化

/* GPU加速の活用 */
.optimized-chart {
    /* レイヤー作成を強制 */
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;

    /* 不要なペイントを回避 */
    contain: layout style paint;
}

/* 効率的なアニメーションプロパティの選択 */
.efficient-animation {
    /* ❌ 避けるべき：レイアウトを変更するプロパティ */
    /*
    animation: badAnimation 1s ease-out;
    @keyframes badAnimation {
        from { width: 0%; height: 0px; left: 0px; }
        to { width: 100%; height: 200px; left: 50px; }
    }
    */

    /* ✅ 推奨：コンポジットレイヤーのみを変更 */
    animation: goodAnimation 1s ease-out;
}

@keyframes goodAnimation {
    from {
        transform: scale(0) translateX(0);
        opacity: 0;
    }
    to {
        transform: scale(1) translateX(50px);
        opacity: 1;
    }
}

/* Critical Rendering Path の最適化 */
@media screen and (max-width: 768px) {
    .mobile-optimized {
        /* モバイルでは複雑なアニメーションを簡略化 */
        animation-duration: 0.5s;
        animation-timing-function: ease-out;
    }
}

/* Reduced Motion 対応 */
@media (prefers-reduced-motion: reduce) {
    .respectful-animation {
        animation: none;
        transition: none;
        transform: none;
    }

    /* 代替的な視覚的フィードバック */
    .respectful-animation.loaded {
        outline: 2px solid #3498db;
        outline-offset: 2px;
    }
}

JavaScript パフォーマンス最適化

// パフォーマンス監視付きアニメーション管理クラス
class ChartAnimationManager {
    constructor() {
        this.animations = new Map();
        this.performanceObserver = null;
        this.frameCount = 0;
        this.startTime = performance.now();

        this.initPerformanceMonitoring();
    }

    // パフォーマンス監視の初期化
    initPerformanceMonitoring() {
        if ('PerformanceObserver' in window) {
            this.performanceObserver = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                entries.forEach(entry => {
                    if (entry.entryType === 'measure') {
                        console.log(`${entry.name}: ${entry.duration}ms`);
                    }
                });
            });

            this.performanceObserver.observe({
                entryTypes: ['measure', 'navigation', 'paint']
            });
        }
    }

    // 効率的なアニメーション実行
    animateChart(element, config) {
        const animationId = `chart-${Date.now()}`;

        performance.mark(`${animationId}-start`);

        // Intersection Observer による最適化
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    this.startAnimation(element, config, animationId);
                    observer.disconnect();
                }
            });
        }, {
            rootMargin: '50px',
            threshold: 0.1
        });

        observer.observe(element);

        return animationId;
    }

    // 実際のアニメーション実行
    startAnimation(element, config, animationId) {
        // requestAnimationFrame を使用した最適化
        let startTime = null;
        const duration = config.duration || 1000;

        const animate = (timestamp) => {
            if (!startTime) startTime = timestamp;
            const elapsed = timestamp - startTime;
            const progress = Math.min(elapsed / duration, 1);

            // Custom easing function
            const easedProgress = this.easeOutCubic(progress);

            // DOM 更新を最小限に
            if (config.transform) {
                element.style.transform = config.transform(easedProgress);
            }

            if (config.opacity !== undefined) {
                element.style.opacity = config.opacity * easedProgress;
            }

            this.frameCount++;

            if (progress < 1) {
                requestAnimationFrame(animate);
            } else {
                performance.mark(`${animationId}-end`);
                performance.measure(
                    `${animationId}-duration`,
                    `${animationId}-start`,
                    `${animationId}-end`
                );

                this.reportPerformance();
            }
        };

        requestAnimationFrame(animate);
    }

    // イージング関数
    easeOutCubic(t) {
        return 1 - Math.pow(1 - t, 3);
    }

    // パフォーマンスレポート
    reportPerformance() {
        const currentTime = performance.now();
        const elapsed = currentTime - this.startTime;
        const fps = Math.round((this.frameCount * 1000) / elapsed);

        if (fps < 30) {
            console.warn(`Low FPS detected: ${fps}fps`);
            // 必要に応じてアニメーション品質を下げる
            document.documentElement.classList.add('low-performance');
        }
    }
}

// 使用例
const animationManager = new ChartAnimationManager();

document.addEventListener('DOMContentLoaded', () => {
    const charts = document.querySelectorAll('.performance-chart');

    charts.forEach((chart, index) => {
        animationManager.animateChart(chart, {
            duration: 1000,
            transform: (progress) => `translateY(${(1 - progress) * 50}px) scale(${progress})`,
            opacity: 1,
            delay: index * 200
        });
    });
});

SEO とアクセシビリティの最適化

<!-- SEO に配慮した構造化データ -->
<div class="chart-container"
     role="img"
     aria-label="2024年第1四半期の売上推移グラフ">

    <!-- スクリーンリーダー用の代替テキスト -->
    <div class="sr-only">
        売上データ: 1月 75万円、2月 60万円、3月 90万円、4月 80万円
    </div>

    <!-- 構造化データ（JSON-LD） -->
    <script type="application/ld+json">
    {
        "@context": "<https://schema.org>",
        "@type": "Dataset",
        "name": "2024年第1四半期売上推移",
        "description": "月別の売上推移を示すグラフデータ",
        "temporalCoverage": "2024-01/2024-04",
        "variableMeasured": "売上高"
    }
    </script>

    <!-- 実際のチャート -->
    <div class="visual-chart">
        <div class="chart-bar" data-value="75" tabindex="0"
             aria-label="1月の売上: 75万円">
            <span class="bar-fill"></span>
        </div>
        <!-- 他のバー要素... -->
    </div>
</div>

/* アクセシビリティ対応CSS */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* フォーカス対応 */
.chart-bar[tabindex]:focus {
    outline: 3px solid #4A90E2;
    outline-offset: 2px;
}

/* 高コントラスト対応 */
@media (prefers-contrast: high) {
    .chart-bar {
        border: 2px solid #000;
        background: #fff;
    }
}

リソース最適化とロード戦略

// 遅延ローディングとリソース最適化
class ResourceOptimizer {
    static async loadChartAssets() {
        // Critical CSS は inline で配置
        const criticalCSS = `
            .chart-container{opacity:0;transform:translateY(20px)}
            .chart-container.loaded{opacity:1;transform:translateY(0)}
        `;

        // 非クリティカルCSS の遅延ロード
        const linkElement = document.createElement('link');
        linkElement.rel = 'stylesheet';
        linkElement.href = '/css/charts-extended.css';
        linkElement.media = 'print';
        linkElement.onload = function() {
            this.media = 'all';
        };

        document.head.appendChild(linkElement);

        // Web Workers による計算処理の最適化
        if ('Worker' in window) {
            const worker = new Worker('/js/chart-calculations.worker.js');
            return new Promise((resolve) => {
                worker.postMessage({ type: 'INIT_CALCULATIONS' });
                worker.onmessage = (e) => {
                    if (e.data.type === 'READY') {
                        resolve(worker);
                    }
                };
            });
        }

        return null;
    }

よくある質問（FAQ）

CSSでグラフアニメーションを実装する際に、開発者の皆さんから頻繁に寄せられる質問と、その実践的な解決策をまとめました。初心者が躓きやすいポイントから、上級者向けの高度な技術課題まで、現場で即座に活用できる回答を提供します。

まとめ

CSSを活用したグラフアニメーションは、現代のWebサイトにおいて単なる装飾を超えた、ユーザーエンゲージメントを高める重要な技術となっています。本記事では、基本的な実装方法から実務レベルの高度なテクニックまで、段階的に解説してまいりました。

CSSアニメーションの最大の魅力は、JavaScriptライブラリに依存することなく軽量でパフォーマンスに優れたグラフ表現を実現できることです。@keyframesとtransformプロパティを組み合わせることで、円グラフの塗りつぶしから棒グラフの伸長まで、多様なアニメーションパターンを作成できます。特に、GPU加速を活用したtransformの使用は、60fpsを維持する滑らかなアニメーションの鍵となります。

実務において重要なのは、美しい見た目だけでなく、アクセシビリティとパフォーマンスを両立させることです。スクロール連動アニメーションではIntersection Observer APIを活用し、ユーザーが実際にコンテンツを見た瞬間にアニメーションを開始することで、自然で効果的な演出を実現できます。

また、レスポンシブデザインへの対応も欠かせません。Container QueriesとCSS Gridを組み合わせることで、デバイスサイズに応じて最適なレイアウトを提供し、モバイルユーザーにも快適な体験を届けることができます。

CSSグラフアニメーションをマスターすることで、あなたのWebサイトはより魅力的で、ユーザビリティに優れた、そして検索エンジンにも評価される高品質なコンテンツへと進化していくはずです。