「CSSなんて大嫌いだぁ〜！」「スタイリングこそプロダクトに命を吹き込む行為だよ」

この記事を今読んでいるあなたはどちらのタイプでしょうか？

フロントエンド開発において、CSSは常に議論の的となってきました。「素のCSSで書くのが楽しい」という意見から「できればCSSは書きたくない」まで、様々な声を聞きます。この10年で、そうした多様なニーズに応えるように、数多くのCSSツールやフレームワークが登場してきました。

本記事では、2024年に発表された「State of CSS 2024」の調査結果を参考に、主要なCSSツールとフレームワークを解説します。各ツールの特徴、使用シーン、そして最新のトレンドを、主観と客観を交えながらお伝えしていきます。

CSSに悩んでいるそこのあなた！
本記事はそんな「あなた」に、送る記事です。
ぜひご一読いただけると嬉しいです

目次

長い記事なので、必要な部分だけ閲覧していただいても構いません

CSSツールの分類と選び方
CSSフレームワーク
- TailwindCSS
- Bootstrap
- Bulma
- UnoCSS
UIコンポーネントライブラリ
- Ant Design
- MUI
- shadcn/ui
- Headless UI
- Radix UI
- Chakra UI
CSS-in-JSソリューション
- CSS Modules
- Emotion
- Styled Components
CSSプリプロセッサー
- Sass/SCSS
まとめと今後の展望

1. CSSツールの分類と選び方

現代のWeb開発では、以下の方法でUIスタイリングを実装できます

あくまで一例として参考にしていただけると幸いです。
各々例外やデメリット解決方法などもすでに存在すると思います。

実装方法	メリット	デメリット	推奨される使用シーン
Vanilla CSS	・追加の学習コストなし・最高のパフォーマンス・完全なカスタマイズ性	・大規模開発での管理が困難・命名規則の統一が必要・再利用性が低い	・小規模プロジェクト・プロトタイプ開発・学習用途
コンポーネントライブラリ	・開発速度が速い・一貫したUI ・アクセシビリティ対応	・カスタマイズの制限・バンドルサイズの増加・学習コスト	・企業の業務システム・統一UIが必要なプロジェクト・プロトタイプの迅速な作成
CSSフレームワーク	・柔軟なカスタマイズ・高い生産性・充実したエコシステム	・クラス名の増加・独自の記法の学習・HTMLの可読性低下	・中〜大規模プロジェクト・チーム開発・長期保守が必要なサービス
CSS-in-JS	・スコープ管理が容易・動的スタイリング・型安全性	・実行時オーバーヘッド・セットアップの手間・デバッグの難しさ	・Reactプロジェクト・動的UIが多いアプリ・大規模SPAの開発
プリプロセッサー	・CSSの機能拡張・保守性の向上・変数やミックスイン	・コンパイル必要・セットアップ工数・デバッグの複雑さ	・大規模サイト・デザインシステム構築・保守重視のプロジェクト

今回は以下で定義します。
※VanillaCSS

素のCSS

※小規模プロジェクト

チーム：1-3人
期間：3ヶ月以内
例：ランディングページ、ブログ、シンプルなコーポレートサイト
特徴：単一機能、シンプルなUI、状態管理が最小限

※中規模プロジェクト

チーム：3-10人
期間：3-6ヶ月
例：ECサイト、予約システム、管理画面付きWebアプリ
特徴：複数機能、状態管理が必要、外部サービス連携あり

※大規模プロジェクト

チーム：10人以上
期間：6ヶ月以上
例：SNS、企業の基幹システム、SaaSプロダクト
特徴：複雑な機能群、高度な状態管理、多数の外部連携

選択の基準
ツールの選択は以下の要素を考慮して判断します。

プロジェクトの規模と性質
チームの技術スタック
パフォーマンス要件
保守性の重要度
開発速度の要求
カスタマイズの必要性

2. CSSフレームワーク

CSSフレームワークとは、事前に定義されたスタイルやコンポーネントを提供し、効率的なUI開発を可能にするツールです。以下では、2024年現在で特に注目されている主要なフレームワークを紹介します。

Tailwind CSS

概要
AtomicCSS（単一の目的を持つ小さなクラスを組み合わせる手法）を採用した、ユーティリティファーストのCSSフレームワークです。

主な特徴

ユーティリティクラスによる柔軟なカスタマイズ
JIT（Just-In-Time）コンパイルによる最適化
充実した開発者ツールとエコシステム
VSCode等のエディタ拡張による開発効率の向上

技術的詳細

バージョン 4.0（ベータ版）での主な改善点
- CSSファイル内での設定記述が可能に
- Rustベースの新コンパイラによる高速化
- コンテナクエリなどモダンCSS機能のサポート
- タッチデバイスでのホバー制御の改善

使用統計

GitHub Stars: 83.4k
npm週間ダウンロード数: 約300万（2024年12月時点）
主要企業での採用: Microsoft, Netflix, GitHub など

推奨される使用シーン

カスタマイズ性の高いUIが必要なプロジェクト
パフォーマンスを重視するWebアプリケーション
デザインシステムの実装
大規模なチーム開発

長所

高いカスタマイズ性
優れたパフォーマンス
充実したドキュメントとコミュニティ
モダンフレームワークとの相性の良さ

短所

初期学習コストが比較的高い
HTMLの可読性が低下する可能性
クラス名が長くなりがち
デザイナーとの協業に慣れが必要

最新のトレンドと今後の展望
近年TailwindCSSは継続的に成長していて、特にNext.js、Remix、Astroなどのモダンフレームワークとの統合が進んでいます。v4では、CSSの新機能サポートとパフォーマンスの向上に焦点を当てており、今後もWebプラットフォームの進化に合わせた機能拡張が期待されます。

Bootstrap

概要
Twitterで開発された、世界で最も広く使用されているCSSフレームワークの一つです。包括的なコンポーネントセットとレスポンシブデザインシステムを提供します。

主な特徴

豊富な事前定義コンポーネント
強力なグリッドシステム
充実したJavaScriptプラグイン
アクセシビリティ対応
広範なブラウザサポート

技術的詳細

現行バージョン（v5）の主要機能
- Sass変数とミックスインの拡充
- RTL（右から左）サポート
- CSS カスタムプロパティの活用
- SVGアイコンシステム
- ユーティリティクラスの強化

使用統計

GitHub Stars: 171k
npm週間ダウンロード数: 約200万（2024年12月時点）
CDN経由での利用も非常に多い

推奨される使用シーン

迅速なプロトタイプ開発
管理画面やダッシュボード
エンタープライズアプリケーション
チーム規模の大きいプロジェクト

長所

豊富なドキュメントとリソース
大規模なコミュニティサポート
クロスブラウザ対応の信頼性
学習リソースの充実

短所

デザインの独自性を出しにくい
ファイルサイズが比較的大きい
カスタマイズに手間がかかる
モダンな開発手法との統合が時に煩雑

Bulma

概要
モダンなFlexboxベースのCSSフレームワークで、シンプルで直感的なクラス名体系と軽量な実装が特徴です。

主な特徴

Flexboxベースのレイアウトシステム
モジュラー設計による必要な機能のみの利用
セマンティックなクラス名
CSSのみのフレームワーク（JavaScriptなし）

技術的詳細

Sassベースの変数システム
モバイルファーストのレスポンシブデザイン
モジュラーなSassファイル構造
カスタマイズ可能な変数設定

使用統計

GitHub Stars: 49.4k
npm週間ダウンロード数: 約15万（2024年12月時点）

推奨される使用シーン

中小規模のWebサイト
シンプルなデザインのプロジェクト
JavaScriptに依存したくないケース
素早いプロトタイプ開発

長所

学習曲線が緩やか
軽量なファイルサイズ
明確なドキュメント
モダンなデザイン哲学

短所

コンポーネントの種類が比較的少ない
カスタマイズの柔軟性がやや限定的
コミュニティの規模が比較的小さい
エンタープライズ向け機能の不足

最新のトレンドと今後の展望
Bulmaは安定した機能提供を続けていますが、大規模な更新は減少傾向にあります。しかし、その軽量さとシンプルさから、特定のユースケースでは引き続き支持されています。

UnoCSS

概要
新世代のAtomicCSSエンジンとして注目を集めている、高度にカスタマイズ可能なCSSフレームワークです。

主な特徴

オンデマンドな原子的CSSの生成
高度なカスタマイズ性
高速なパフォーマンス
プリセットシステムによる拡張性

技術的詳細

パフォーマンス重視の設計
プラグインベースのアーキテクチャ
カスタムルールの柔軟な定義
Viteとの緊密な統合

使用統計

GitHub Stars: 16.7k
npm週間ダウンロード数: 約5万（2024年12月時点）

推奨される使用シーン

パフォーマンス重視のプロジェクト
カスタムデザインシステムの実装
Viteベースのプロジェクト
マイクロフロントエンド

長所

優れたビルドパフォーマンス
高度なカスタマイズ性
最小限のバンドルサイズ
モダンな開発体験

短所

比較的新しいツールであり実績が少ない
学習リソースが限定的
エコシステムがまだ発展途上
大規模プロジェクトでの採用事例が少ない

最新のトレンドと今後の展望
UnoCSSは急速に注目を集めており、特にViteユーザーの間で人気が高まっています。パフォーマンスとカスタマイズ性の高さから、今後の成長が期待されています。

3. UIコンポーネントライブラリ

UIコンポーネントライブラリは、再利用可能なUIコンポーネントを提供し、効率的なアプリケーション開発を可能にします。各ライブラリは独自のデザインシステムと開発哲学を持っています。

Ant Design

概要
Alibaba社が開発した、エンタープライズ向けのUIコンポーネントライブラリです。包括的なデザインシステムと豊富なコンポーネントを提供します。

主な特徴

エンタープライズ向けの豊富なコンポーネント
統一されたデザイン言語
TypeScriptのネイティブサポート
国際化対応
テーマカスタマイズ機能

使用統計

GitHub Stars: 92.6k
npm週間ダウンロード数: 約100万（2024年12月時点）

推奨される使用シーン

大規模なエンタープライズアプリケーション
データ可視化が必要なプロジェクト
複雑なフォーム処理
国際化が必要なアプリケーション

MUI（旧Material-UI）

概要
Googleのマテリアルデザインを基にした、React向けの包括的なUIコンポーネントライブラリです。

主な特徴

マテリアルデザインの完全実装
高度なカスタマイズシステム
アクセシビリティ対応
豊富なコンポーネント群
充実したドキュメントとサンプル

使用統計

GitHub Stars: 94.1k
npm週間ダウンロード数: 約150万（2024年12月時点）

推奨される使用シーン

マテリアルデザインを採用するプロジェクト
大規模なReactアプリケーション
高度なUIカスタマイズが必要なケース
エンタープライズアプリケーション

shadcn/ui

概要
再利用可能なコンポーネントの集合体で、コピー＆ペーストで利用できる設計が特徴です。

主な特徴

コピー可能なコンポーネント
Radix UIとTailwind CSSの組み合わせ
高いカスタマイズ性
モダンなデザイン

使用統計

GitHub Stars: 75.4k
急速に成長中のコミュニティ

推奨される使用シーン

高度なカスタマイズが必要なプロジェクト
モダンなデザインシステムの構築
Reactベースのアプリケーション
アクセシビリティを重視するプロジェクト

Headless UI

概要
スタイルを持たない機能的なUIコンポーネントを提供するライブラリです。

主な特徴

完全にスタイルレスなコンポーネント
アクセシビリティファースト
Tailwind CSSとの完璧な統合
軽量な実装

使用統計

GitHub Stars: 26.3k
特にTailwind CSSユーザー間で人気

推奨される使用シーン

カスタムデザインシステムの構築
アクセシビリティ重視のプロジェクト
Tailwind CSSを使用するプロジェクト

Radix UI

概要
アクセシブルなプリミティブコンポーネントを提供する、低レベルのUIライブラリです。

主な特徴

優れたアクセシビリティ
徹底的なテスト
コンポーザブルAPI
スタイルに依存しない設計

使用統計

GitHub Stars: 16k
デザインシステム構築で人気

推奨される使用シーン

カスタムデザインシステムの開発
アクセシビリティ要件の厳しいプロジェクト
柔軟なスタイリングが必要なケース

Chakra UI

概要
アクセシブルで柔軟なReactコンポーネントライブラリです。

主な特徴

優れた開発者体験
モダンなデザインシステム
Theme UIベースのスタイリング
包括的なコンポーネント群

使用統計

GitHub Stars: 38.1k
安定した成長を続けるコミュニティ

推奨される使用シーン

迅速な開発が必要なプロジェクト
モダンなデザインを求めるケース
アクセシビリティ重視の開発

4. CSS-in-JSソリューション

CSS Modules

個人的にこのCSS Modulesは、VanillaCSS推しの私からするとかなり好感度が高い技術だろうなと思っています。VanillaCSSと同じ感覚で書けますし、VanillaCSSからModulesへの移行も楽です。それでいてクラス名被りを防止でき、コンポーネント指向にも対応しやすいと思います。

ただ公式サポートが終了している・使用が非推奨になっていることが悔やまれます...

概要
CSSのスコープをコンポーネントレベルに限定する手法です。

主な特徴

ローカルスコープのCSS
既存のCSSの知識が活用可能
ビルド時の最適化
高いパフォーマンス

使用統計

GitHub Stars: 17.7k
多くのフレームワークでサポート

推奨される使用シーン

コンポーネントベースの開発
既存のCSSスキルを活用したい場合
パフォーマンスを重視するプロジェクト

Emotion

概要
強力で柔軟なCSS-in-JSライブラリです。

主な特徴

高いパフォーマンス
動的スタイリング
サーバーサイドレンダリング対応
優れた開発者体験

使用統計

GitHub Stars: 17.5k
React開発で広く採用

推奨される使用シーン

Reactベースのプロジェクト
動的なスタイリングが必要なケース
パフォーマンス重視の開発

Styled Components

概要
ReactのコンポーネントとCSSを統合するライブラリです。

主な特徴

コンポーネントベースのスタイリング
テーマサポート
自動ベンダープレフィックス
動的スタイリング

使用統計

GitHub Stars: 40.6k
React開発での高い採用率

推奨される使用シーン

Reactプロジェクト
コンポーネントライブラリの開発
ブランディングが重要なプロジェクト

5. CSSプリプロセッサー

Sass/SCSS

概要
最も成熟したCSSプリプロセッサーで、豊富な機能と安定性が特徴です。

主な特徴

変数とミックスイン
ネスト構文
関数とモジュール
豊富なエコシステム

使用統計

GitHub Stars: 15.1k
圧倒的な市場シェア

推奨される使用シーン

大規模プロジェクト
レガシーシステムの保守
デザインシステムの構築

6. まとめと今後の展望

今回はCSSツールとフレームワークについて取り上げてみました。
2024年のCSS開発ツールは、以下のトレンドが顕著だと思います。

AtomicCSSの台頭
- TailwindCSSやUnoCSSの人気上昇
- ユーティリティファーストアプローチの普及
コンポーネント指向の強化
- HeadlessUIコンポーネントの注目度上昇
- カスタマイズ可能なコンポーネントライブラリの需要増加
パフォーマンス重視
- ビルド時最適化の重要性
- バンドルサイズへの注目
開発者体験の向上
- ツールチェーンの統合
- エディタサポートの充実

今回取り上げたツールは、それぞれに特徴があり、プロジェクトの要件に応じて適切に選択することが重要だと思います。今後も新しいツールや手法の登場が予想されますが、そのとき自分が何を実現したいのかを考え、選択していきたいと思います！

また、今回各ツールの詳細までは踏み込めなかった為、それらについては別途記事にできればと思っています。

本記事をご一読いただき、ありがとうございました！

技術用語の解説

用語	意味
ユーティリティ	単一の目的を持つ便利な機能。CSSの場合、`text-center`（中央寄せ）や`mt-4`（上部の余白）のような、1つの役割に特化したクラスのこと
セマンティック	意味を持つ、分かりやすい命名。例えば`red-button`ではなく`submit-button`のように、見た目ではなく目的で名付けること
モジュラー	機能を小さな部品（モジュール）に分けて、必要な部品だけを組み合わせて使えるような設計方式
アクセシビリティ	障がいのある人を含むすべてのユーザーが使いやすいように配慮された設計。スクリーンリーダー対応など
オンデマンドな原子的CSS	必要な時に必要な分だけ生成される、最小単位のCSS。使用されているスタイルだけが出力される仕組み
プリセットシステム	あらかじめ用意された設定のセット。初期設定として使えるテンプレートのような仕組み
マイクロフロントエンド	大きなWebアプリを小さな独立した部分に分割する開発手法。それぞれを別チームで開発可能
コンポーザブル	再利用可能な小さな部品を組み合わせて、より大きな機能を作れる設計手法