CSS-Tricks が Another Stab at the Perfect CSS Pie Chart… Sans JavaScript!（2026-06-04）で、conic-gradient を使って JavaScript なしで円グラフ（パイチャート）を描く手法を改めて取り上げました。conic-gradient の色停止位置に割合を流し込むだけで扇形が描け、CSS変数（カスタムプロパティ）で値を渡せば、マークアップと数値を分離したまま、軽量で印刷にも耐えるチャートが作れるという内容です。同じ発想は円グラフだけでなく、linear-gradient による棒グラフ、conic-gradient のマスクによる進捗リングにも広がります。
受託 Web 制作の現場では、「コーポレートサイトの実績数値や、管理画面の単純な KPI を見せたいだけなのに、Chart.js や D3.js、ApexCharts といった重い JS ライブラリを丸ごと入れ、バンドルが膨らみ、バージョン追従とバグ対応で保守コストが積み上がる」という事故が繰り返されてきました。受託で Web 制作を支える立場では、これは 「全てのチャートを CSS で作るべきか」ではなく、「CSS で十分なケースと JS ライブラリが妥当なケースを切り分け、依存を減らし、アクセシブルかつ印刷・SEO に耐える形で引き渡せるか」を設計に組み込む課題だと捉えています。これまで CSS Anchor Positioning で脱JSライブラリ（GH Media） で扱った JS 依存を減らす方針、モダンCSSのネイティブ機能を受託で使う（GH Media） で扱った 新機能の評価軸と接続して、本記事では 「軽量データ可視化（脱JSチャート）実装支援」を 受託パッケージとして整理します。
なぜ「いま」チャートをCSSで作り直すのか
| 観点 | JSチャートライブラリ（従来） | CSS実装（2026） |
|---|---|---|
| 依存 | Chart.js / D3 / ApexCharts を追加 | 追加ライブラリ不要 |
| バンドルサイズ | 数十〜数百 KB 増える | ほぼゼロ |
| 保守 | バージョン追従が必要 | ブラウザ標準で陳腐化しにくい |
| アクセシビリティ | Canvas は読み上げ不可になりがち | 数値テキストを残せる |
| 印刷・SEO | Canvas は印刷で潰れ・索引されない | DOM 上に数値が残り索引される |
| 更新頻度 | リアルタイム更新に強い | 静的・低頻度に向く |
つまり 「JS ライブラリでチャートを描く」ことと「保守しやすく依存の少ない可視化を届ける」ことは別物であり、受託でも 「単純な可視化は CSS に寄せ、複雑なものは JS に残し、その境界を設計して引き渡す」ことが品質の前提になりました。これにより 「JS 依存を減らした構成」を成果物として保証できます。
CSSチャートでできること / 向かないこと
① conic-gradient で円グラフ・ドーナツを描く
conic-gradient は中心から角度方向に色を回す勾配です。色停止位置に割合（パーセント）を指定すれば、JS なしで扇形＝円グラフが描けます。中央を radial-gradient のマスクや mask で抜けばドーナツ（進捗リング）になります。
.pie {
--a: 45%; /* セグメントA */
--b: 75%; /* セグメントA+B */
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(
#2f6df6 0 var(--a),
#f6a72f var(--a) var(--b),
#e1e5ea var(--b) 100%
);
}② CSS変数で値を流し込む
割合を --a のような CSS変数で渡せば、マークアップ（数値）と見た目（CSS）を分離できます。style="--a: 45%" のようにインライン変数で渡せば、テンプレート側で計算した値をそのまま反映でき、グラフ本体の CSS は使い回せます。@property で型付き登録すれば値の補間（アニメーション）も安定します。
③ 進捗リング・棒グラフ
進捗リングはドーナツの応用で、達成率を 1 変数で表現できます。棒グラフは linear-gradient や width / inline-size をパーセントで指定するだけで、要素そのものが値の長さになります。いずれも DOM 上に数値テキストを併記できるのが Canvas との決定的な差です。
向かないケース
折れ線・散布図・大量データの動的描画、ツールチップやズームなどのリッチなインタラクション、リアルタイム更新は CSS では破綻します。ここは Chart.js や D3.js が妥当です。CSS チャートは 「単純・静的・低頻度・印刷/SEO 重視」の領域に限定して使います。
受託で提供する「軽量データ可視化（脱JSチャート）実装支援」5フェーズ
フェーズ 1: 棚卸し・診断（1 週間）
- 既存サイト / 管理画面のチャート・数値表現の洗い出し
- 使用中の JS ライブラリと依存サイズの計測
- 各チャートの更新頻度・インタラクション要件の確認
- 成果物: チャート棚卸し表 + 脱JS可否レポート
フェーズ 2: 設計（1 週間）
- CSS に寄せる可視化と JS に残す可視化の切り分け
- アクセシビリティ方針（数値テキスト / ARIA）の決定
- 印刷・色覚多様性・カラーパレット方針の決定
- 成果物: 実装方針書 + 可視化設計書
フェーズ 3: 実装（1〜3 週間）
- conic-gradient / linear-gradient / CSS変数によるチャート実装
- 数値テキスト併記・aria 属性・印刷スタイルの付与
- 未対応ブラウザ向けフォールバックの実装
- 成果物: 実装済みコンポーネント + 実装標準ドキュメント
フェーズ 4: 検証・引き渡し（1 週間）
- 主要ブラウザ・印刷・スクリーンリーダーでの検証
- 色覚多様性シミュレーションでの可読性確認
- 成果物: 検証レポート + 保守手順書
フェーズ 5: 継続保守（継続）
- ブラウザ対応状況の定点観測
- フォールバックの段階的撤去判断
- 新規チャートの追加実装・JS 化判断
受託向け実装標準セット
| 用途 | 推奨 | 避ける |
|---|---|---|
| 円グラフ / ドーナツ | conic-gradient + CSS変数 | 単純な円のためのChart.js |
| 棒グラフ | linear-gradient / inline-size | Canvas での静的棒グラフ |
| 進捗リング | conic-gradient + mask | 達成率1個のためのライブラリ |
| 値の受け渡し | インライン CSS変数 / @property | JS での DOM 直書き |
| 数値の保持 | DOM にテキスト併記 | Canvas のみで数値消失 |
| 複雑・動的 | JS ライブラリを採用 | CSS で無理に再現 |
どの案件に必要か / 不要か
| 必要な案件 | 優先度が低い案件 |
|---|---|
| 実績数値を見せるコーポレートサイト | 可視化がほぼないサイト |
| 単純な KPI を並べる管理画面 | 高度な分析ツール本体 |
| バンドルサイズを削りたい長期運用 | 短命なキャンペーンページ |
| 印刷 / PDF レポートが要件 | 画面表示のみで完結 |
| アクセシビリティ・SEO が要件 | 制約がほぼない |
受託契約に書く6つの条項
| 条項 | 内容 | 顧客が確認すべきこと |
|---|---|---|
| 対象範囲 | CSS化するチャートの種類 | 円/棒/リングの境界 |
| JS残置範囲 | ライブラリを残す可視化 | 動的要件の線引き |
| 対応ブラウザ | 保証する範囲 | フォールバックの程度 |
| アクセシビリティ | 数値テキスト/ARIA 基準 | 検証範囲 |
| 印刷・SEO | 印刷スタイル / DOM 数値 | レポート要件 |
| 継続保守 | 対応状況の監視 | 運用費用 |
価格モデル — 軽量データ可視化実装パッケージ
| プラン | 金額 | 対象 | 内容 |
|---|---|---|---|
| 診断 | 20 万円〜 | 1 サイト | 棚卸し + 脱JS可否レポート |
| 標準実装 | 70 万円〜 | 中規模 | 主要チャートのCSS化 + アクセシビリティ対応 |
| 本格対応 | 150 万円〜 | 大規模 | + ダッシュボード全体の作り直し + 印刷/SEO対応 |
| Lite 保守 | 3 万円〜 / 月 | 小規模 | 対応状況監視 + 軽微修正 |
| Standard 保守 | 9 万円〜 / 月 | 中規模 | + 新規チャート実装 + JS化判断 |
顧客側 ROI 試算（KPIダッシュボード想定）
| 項目 | JSライブラリ実装 | CSS 中心で実装 | 差分 |
|---|---|---|---|
| 依存ライブラリ | 複数を抱える | 削減 / 撤去 | 依存ツリーの縮小 |
| バンドルサイズ | 数十〜数百 KB 増 | ほぼゼロ | 表示速度の改善 |
| バグ対応 | バージョン追従で発生 | ブラウザ標準で減少 | 保守工数の削減 |
| アクセシビリティ | Canvas で読み上げ不可 | 数値テキスト保持 | 改修コストの回避 |
| 年間効果 | — | — | 依存削減 + 保守工数圧縮 |
診断（20 万円〜）だけでも、「いまのチャートのうち、どれだけ JS 依存を減らせるか」を可視化できること自体に価値があります。単純な円グラフ 1 個のために抱えたライブラリの保守コストは、たいてい数年かけてじわじわ効いてきます。表示速度の観点は Core Web Vitals 改善ガイド（GH Media） も併読してください。
ハマりやすい5つの落とし穴
落とし穴 1: 数値テキストを残さない
conic-gradient だけ描いてスクリーンリーダーで何も読まれません。aria-label や視覚的に隠した数値テキストを必ず併記します。
落とし穴 2: 印刷で色が潰れる
背景色は印刷時に省略されがちです。境界線・パターン・数値ラベルで色なしでも読めるように設計します。
落とし穴 3: ブラウザ対応とフォールバックを軽視する
conic-gradient や @property の挙動差で崩れます。機能検出と、数値テキスト／単純な棒への代替表示を用意します。
落とし穴 4: 更新が頻繁なのに CSS で無理する
リアルタイム更新やインタラクションを CSS で再現しようとして破綻します。動的要件は素直に JS ライブラリへ切り分けます。
落とし穴 5: 色覚多様性を無視する
似た色相だけでセグメントを分けると判別できません。明度差・パターン・ラベルを併用します。アクセシビリティ全般は Webアクセシビリティ実装ガイド（GH Media） を基準にします。
90日アクションプラン
| 週 | アクション |
|---|---|
| Week 1 | チャート・数値表現の棚卸し + 依存計測 |
| Week 2 | 脱JS可否の判定 + アクセシビリティ/印刷方針決定 |
| Week 3〜5 | 円/棒/リングのCSS実装 + 数値テキスト併記 |
| Week 6 | 主要ブラウザ・印刷・読み上げでの検証 |
| Week 7〜13 | 対応状況ウォッチ + 新規チャートのCSS/JS判断 |
まとめ — 「ライブラリで描く」から「依存を減らして引き渡す」へ
conic-gradient で円グラフが JS なしに描けることは、可視化の作り方を「ライブラリで何でも描く」から「単純なものは CSS に寄せ、複雑なものだけ JS に残す」へと押し進めます。受託で Web 制作を支える立場では、CSS で十分なケースと JS が妥当なケースを切り分け、アクセシブルかつ印刷・SEO に耐える状態で引き渡す 「軽量データ可視化（脱JSチャート）実装支援」が、依存と保守コストを減らした成果物を届ける主力サービスです。ダッシュボードの数値設計まで含めて見直すなら GA4 初心者ガイド（GH Media） を併読してください。
弊社では診断 / 標準実装 / 本格対応 / Lite / Standard の各段階で本パッケージを提供しています。「単純なチャートのためのライブラリを外したい」「KPI ダッシュボードを軽くしたい」「印刷・読み上げに耐える可視化に作り直したい」というご相談は お問い合わせフォーム からお気軽にどうぞ。
