UIコンポーネントライブラリ/UIキットの変遷をまとめてみた。

Anycloud PdMの南部です。

現在、自分の担当プロジェクトで、shadcn/uiを使ったデザイン・開発が進行中です。

開発現場では、LLMの進化だけでなく、UIライブラリも日進月歩。
ただ知名度などで選ぶのではなく、プロジェクトの性質に合わせて、適切なものを選択できるように、それぞれの特徴を今一度整理してみました。

Reactなどのアプリ構造を司る層ではなく、見た目を司るUIコンポーネントライブラリ、UIキット、CSSフレームワーク等に焦点をあてています。

UIコンポーネントライブラリ/UIキット年表

時代（というのも大げさですが）ごとに代表的なものをピックアップするとこのようになります。

（厳密にはライブラリ、フレームワーク、UIキットなど表現が分かれるものがありますが、以降まとめてライブラリと表記します）

ライブラリごとの特徴

それぞれのライブラリが登場した時代背景と、解決した課題は以下のようになります。

■ 2011–2013年「レスポンシブ黎明期」

• 時代背景
  • スマートフォンの普及により、レスポンシブウェブデザインの実装が急務に。
  • jQuery + Sass が一般的な構成。
• 主なライブラリ:
  • Bootstrap (2011)：Twitter 社の内部ツールが OSS 化。
  • Foundation (2011)：世界初のレスポンシブフレームワークを自称。
• 解決した課題：
  • 手書き HTML/CSS による UI 構築の工数を削減。
  • レスポンシブ対応済のレイアウトや UI コンポーネントがプリセットで提供され、プロトタイピングが高速化。

■ 2013–2015年「デザインシステム前夜」

• 時代背景
  • SPA フレームワークの主流が Angular から React へ移行。
  • "ブランドらしさ"を確保した UI が求められ始める。
• 主なライブラリ:
  • Semantic UI (2013)：自然言語風のクラス名で直感的にスタイリング。
  • Material-UI (2014)：Google の Material Design を React に実装。
  • Ant Design (2015)：Alibaba 発。BtoB 向けダッシュボードで人気。
• 解決した課題：
  • Bootstrap のような"決まった見た目"を避けつつ、一貫性のある UI を実現。
  • テーマ機能とデザインガイドラインが導入され、カスタマイズ性向上。

■ 2017–2019年「ユーティリティ & CSS-in-JS 旋風」

• 時代背景
  • BEM の肥大化とメンテナンス性への不満。
  • パフォーマンス改善のための CSS 最適化が進む。
• 主なライブラリ:
  • Tailwind CSS (2019)：ユーティリティファーストな CSS フレームワーク。
  • styled-components / Emotion (2016)：JS 内で CSS を記述する CSS-in-JS。
• 解決した課題：
  • コンポーネントごとのスタイル設計が煩雑だったのを、Atomic CSS により "使った分だけ" 出力。
  • CSS-in-JS により props ベースで動的スタイル制御が可能に。

■ 2019–2021年「アクセシビリティ & Headless」

• 時代背景
  • WCAG（Web Content Accessibility Guidelines）準拠やアクセシビリティ対応の重要性が増す。
  • "スタイルは自分で決めたい"ニーズの高まり。
• 主なライブラリ:
  • Chakra UI (2019)：React 用の Themeable + アクセシブルな UI ライブラリ。
  • Headless UI (2021)：Tailwind 作者による、ロジックのみ提供する Headless コンポーネント群。
  • Radix UI (2020)：アクセシビリティ完備の"プリミティブ"を提供。
• 解決した課題：
  • キーボード操作、フォーカス制御など難しい動作部分だけを抽象化。
  • デザインの自由度とアクセシビリティを両立。

■ 2021–2023年「ユーティリティ拡張 & Copy-Paste 世代」

• 時代背景
  • Tailwind がデファクトスタンダード化。
  • コードを install せずに "写して使う"文化が加速。
• 主なライブラリ:
  • daisyUI (2021)：Tailwind 用のテーマ付き UI コンポーネント。
  • shadcn/ui (2023)：Radix UI + Tailwind の構成を CLI で生成し、自分のリポジトリにコピーして使う方式。
• 解決した課題：
  • ライブラリ依存による更新のリスクを回避。
  • コンポーネントの完全管理とカスタマイズ性の両立。

■ 2024年〜現在「AI & プラットフォーム統合」

• 時代背景
  • AI が UI コードを生成するように（例：v0.dev）。
  • デザインシステムがフレームワークに縛られなくなる（例：Ark UI）。
  • CSS-in-JS のランタイム負荷を解消する方向へ（例：Panda CSS）。
• 主なライブラリ / ツール:
  • v0.dev (2024)：Prompt や画像から React コンポーネントを生成。
  • Ark UI (2024)：Chakra の Headless 化。React/Vue/Svelte/Solid 対応。
  • Panda CSS (2024)：CSS-in-JS の静的抽出によりランタイム不要。
• 解決した課題：
  • AI により UI コードの初期生成や試行錯誤を自動化。
  • 複数フレームワーク間での UI ロジック共有。
  • React Server Components (RSC) 時代に適した軽量・高速・セキュアな UI 実装を可能に。

それぞれが「刺さる」ユースケース

Material-UI / Ant Design

• ガイドラインに沿った一貫 UI を求める SaaS ダッシュボード
• デザイナーが Material／Ant Design の Sketch／Figma Kit を使っている場合

Tailwind CSS

• デザインが頻繁に変わる LP / マーケティングページ
• CSS 設計を捨てて “クラス記述だけで完結” したいプロジェクト

Chakra UI

• アクセシビリティ保証 + カラーモード (light/dark) 必須
• 1 コンポーネント単位で props カスタマイズしたい BtoC アプリ

Headless UI / Radix UI

• 見た目は完全に自前デザインチームに任せたいが動作は安全に
• モーダルやセレクトなど “罠が多い” コンポーネントだけを借りたいケース

shadcn/ui

• Next.js + Tailwind を採用済み、かつ "とりあえず動く UI" をコピー → すぐ改造
• npm 依存を極力持ちたくない、モノレポでコンポーネントを共有したい

v0.dev / AI CLI 生成

• ワイヤーフレーム → コード化を AI に丸投げ
• プロトタイプ段階で UI バリエーションを大量に試したい

これからのライブラリ選定の軸は？

今後は、AIが開発しやすい環境をどう準備するかが重要になってくるでしょう。

プロダクト開発者は、デザインデータをどう定義し、どの部品（UIコンポーネント）を使わせるかという、抽象度の高いレイヤーにフォーカスし、UIの実装はAIに極力任せたくなるはずです。

AIとの親和性が今後のライブラリ選定において、意思決定の一つの軸になることは間違いないでしょう。

このあたりの話は、ぜひ続編で書いてみたいと思います。お楽しみに！