Ant Designとは？Reactコンポーネントライブラリの特徴・使い方・v6の変更点を解説

Ant Design（antd）は、Alibaba（Ant Group）が開発するエンタープライズ向けのReact UIコンポーネントライブラリです。ボタンやフォーム、テーブル、日付ピッカーなど業務画面で必要になる部品を高品質なまま提供し、ConfigProviderとDesign Tokenでテーマを一元管理できる点が支持されています。この記事では、Ant Designの定義とantdとの関係、インストールから基本的な使い方、2025年11月に登場したv6の変更点、そしてMaterial UI・Bootstrapとの選定基準までを実装例つきで整理します。

まとめ：Ant Designはantdというライブラリで使うエンタープライズReact UI

Ant Designは「デザイン言語」の名前で、実際にReactで使うときはantdというnpmパッケージを導入します。最新はv6系（6.0.0は2025年11月22日リリース、執筆時点の最新は6.5.1）で、動作にはReact 18以上が必要です。使い方はnpm install antdで導入し、必要なコンポーネントをimportして置くだけで整ったUIが得られます。色・角丸・フォントといった見た目はConfigProviderのtoken（Seed/Map/Aliasの3層Design Token）で一括制御でき、ダークテーマもプリセットアルゴリズムで切り替えられます。管理画面など情報量の多い業務アプリを短時間で作りたいなら第一候補になりますが、極限までバンドルサイズを削りたい静的サイトやデザインをゼロから自作したい場合は、後述のとおりMaterial UIやTailwind系・ヘッドレス系のほうが向きます。以降で定義・使い方・v6の変更点・比較を順に見ていきます。

Ant Designとは何か：Alibaba発のReact UIライブラリ

Ant Designは、Alibaba傘下のAnt Groupが公開しているオープンソースのデザインシステムです。ライセンスはMITで商用利用も可能。企業の管理画面やダッシュボードのような「情報量が多く、部品の種類が多い」画面を想定して設計されており、単なるCSSフレームワークではなく、React用の完成されたコンポーネント群と設計原則がセットになっている点が特徴です。

デザイン言語「Ant Design」とReact実装「antd」の関係

混同しやすいのが名前の使い分けです。「Ant Design」はデザインの原則やビジュアル言語そのものを指し、それをReactで実装したライブラリの名前がantdです。npmでインストールするのも、コードでimportするのもantdで、公式ドキュメントで「Ant Design of React」と呼ばれるのがこの実装にあたります。したがって「ReactでAnt Designを使う」とは、実務上「antdを導入する」ことと同義です。

Ant Design Vue・Ant Design Proなどの周辺実装

Ant DesignのビジュアルはReact以外でも使えます。Ant Design VueはVue.js向けのコミュニティ実装（vueComponentプロジェクト）で、公式のReact版antdとは別のコードベースです。見た目は共通でもAPIやバージョンは一致しないため、React版の情報をそのままVue版に当てはめないよう注意します。Ant Design Proは、antdを土台に管理画面のレイアウト・認証・ルーティングまで組み込んだ実務向けスキャフォールドで、ゼロから管理画面を作らず雛形から始めたいときに使います。「ant design vue」「ant design pro」で検索して迷ったときは、まずReactかVueか、ライブラリ本体か雛形かを切り分けると判断が早くなります。

Ant Designの導入と基本的な使い方

ここからは実際にReactプロジェクトへantdを組み込む手順です。導入・コンポーネント配置・テーマ設定の3ステップで、業務画面の見た目が整います。

インストールとコンポーネントの読み込み

パッケージマネージャでantdを追加し、使うコンポーネントを名前付きでimportします。v5以降はスタイルの自動注入（CSS-in-JS）に対応しているため、旧版のように全体CSSを手動でimportする必要はありません。

npm install antd

// App.jsx
import { Button, DatePicker, Table } from 'antd';

export default function App() {
  return (
    <div>
      <Button type="primary">送信</Button>
      <DatePicker />
    </div>
  );
}

コンポーネントを置いた時点で、余白・角丸・フォーカスリングなどAnt Designの標準スタイルが自動で当たります。ボタンのtype="primary"のように、見た目のバリエーションはpropで指定するのが基本です。

ConfigProviderによるテーマとDesign Tokenの設定

色や角丸などの見た目は、個別CSSを上書きするのではなくConfigProviderのtokenで一括設定します。Design TokenはSeed Token（起点の値）→ Map Token（そこから派生する値）→ Alias Token（用途別のエイリアス）の3層で構成され、Seedを変えると関連する値が連動して変化します。個別コンポーネントだけ調整したいときはcomponentsで対象を絞れます。

import { ConfigProvider, theme } from 'antd';

<ConfigProvider
  theme={{
    algorithm: theme.darkAlgorithm,
    token: { colorPrimary: '#52c41a', borderRadius: 4 },
    components: { Button: { fontSize: 16 } },
  }}
>
  <App />
</ConfigProvider>

ダークテーマはtheme.darkAlgorithm、情報密度を上げたい業務画面はtheme.compactAlgorithm、通常はtheme.defaultAlgorithmを渡すだけで全体が切り替わります。手書きのCSS上書きを積み上げず、tokenで一貫して管理できるのがAnt Designのテーマ設計の要です。

日本語化（ロケール）と代表的なコンポーネント

DatePickerやPagination、Tableの空表示などUI内の文言を日本語にするには、ConfigProviderに日本語ロケールを渡します。

import { ConfigProvider } from 'antd';
import jaJP from 'antd/locale/ja_JP';

<ConfigProvider locale={jaJP}>
  <App />
</ConfigProvider>

実務でよく使うのは、行選択やソート・ページングを備えたTable、バリデーションと入力制御を持つForm、日付入力のDatePicker、通知のmessage／notificationあたりです。いずれも単体で完結し、propで挙動を制御できるため、管理画面の「一覧・検索・登録フォーム」を短時間で組み上げられます。

Ant Design v6の主な変更点（2025年11月〜）

2025年11月22日にv6.0.0がリリースされ、内部実装が大きく刷新されました。新規採用でも既存プロジェクトでも、この版の前提を押さえておくと移行判断がぶれません。

CSS Variables既定化とReact Compiler対応

v6ではスタイルエンジン@ant-design/cssinjsが既定でpure CSS Variablesモードになりました。テーマ切り替えが軽くなり、複数テーマでスタイルを再利用することでバンドルサイズの削減にもつながります。加えて、配布物のantd.js／antd.min.jsでReact Compilerが有効化され、実行時のパフォーマンスが底上げされています。ConfigProviderのclassNames／stylesでコンポーネント内部の構造（semantic structure）を統一的に設定できるようになった点も、細部までスタイルを合わせたいチームには効いてきます。

React 18以上が必須・v5からの移行

v6はIEサポートを完全に廃止し、動作要件がReact 18以上に引き上げられました（react >=18.0.0）。一方で移行負荷は低く、v5から互換パッケージやcodemodなしで直接v6へアップグレードできるとアナウンスされています。すでにv5で運用している場合は、まずReactのバージョンが18以上かを確認し、問題なければantdを上げるだけで多くのプロジェクトは動きます。破壊的変更の詳細は公式のv6移行ガイドで最終確認してください。

Ant DesignとMaterial UI・Bootstrapの選び方

「react vs bootstrap」「ant design ui」などで比較検討する読者向けに、代表的な選択肢との違いと、Ant Designを選ぶべきでない場面まで踏み込みます。ここが選定でいちばん迷うところです。

3つの選択肢の性格の違い

Ant Designは、テーブル・フォーム・ツリーなど「業務系の重い部品」が最初から高品質でそろっているのが強みです。Material UIはMaterial Designの世界観に寄せたいプロダクトに向き、Bootstrap（ReactではReact-Bootstrap）は最小構成で素早く形にしたいサイトに向きます。

Ant Designを選ぶべきでない場面

万能ではありません。次のケースでは別の選択肢を検討したほうが結果が良くなります。ひとつ目は、ブランド独自のデザインをピクセル単位で自作したいプロダクトです。Ant Designは完成された見た目を持つぶん、大幅に崩す方向のカスタマイズはToken設計とぶつかりやすく、ヘッドレス系（スタイルを持たず構造だけ提供）のBase UI（React）やshadcn/uiのほうが自由度で有利です。ふたつ目は、部品を数個しか使わない小規模サイトで、バンドルサイズを極限まで削りたい場合。この用途ではユーティリティCSSのTailwind系や軽量ライブラリが向きます。逆に、管理画面のように「多種類の業務部品を、統一されたデザインで、短期間に」という要件なら、Ant Designが最も工数を圧縮できます。React本体の前提を整理したい場合はReact 19の変更点とReact Compilerもあわせて確認しておくと、v6のReact 18+要件の理解がスムーズです。

よくある質問（FAQ）

Ant Designは無料で商用利用できますか？

できます。Ant Design（antd）はMITライセンスで公開されており、商用プロジェクトでも無料で利用できます。ライセンス表記の保持など、MITの一般的な条件は守ってください。

Ant Designの最新バージョンは？

メジャーはv6系です。v6.0.0は2025年11月22日にリリースされ、執筆時点の最新は6.5.1です。動作にはReact 18以上が必要で、v5からは互換パッケージなしで直接アップグレードできます。正確な最新版はnpmのantdページで確認してください。

Ant DesignとMaterial UIはどちらを選ぶべきですか？

テーブルやフォームが多い業務・管理画面ならAnt Design、Material Designの世界観に寄せたプロダクトUIならMaterial UIが目安です。デザインを大きく自作したい場合はヘッドレス系、素早く小規模に作りたい場合はBootstrap系という切り分けになります。

Ant Design VueはReact版と同じものですか？

ビジュアルは共通ですが、コードベースは別です。React版のantdは公式実装、Ant Design VueはVue向けのコミュニティ実装で、APIやバージョン、対応状況が一致するとは限りません。フレームワークに合わせて対応するドキュメントを参照してください。

Ant Designで色やテーマをまとめて変えるには？

ConfigProviderのtheme.tokenでcolorPrimaryやborderRadiusを指定すると、Design Tokenの連動で関連スタイルが一括で変わります。ダークテーマはtheme.darkAlgorithmをalgorithmに渡すだけで切り替わります。

関連記事

• Chakra UIとは？使い方・インストール・v3の変更点をわかりやすく解説【React】
• shadcn/uiとは？使い方・導入手順とコンポーネント例をReact開発者向けに解説
• Base UI（React）とは？特徴・Radix UI／MUIとの違い・使い方をわかりやすく解説
• Material-UIとReact Routerを統合した画面遷移の実現方法
• React 19とは？18からの変更点・新機能とReact Compiler・最新バージョンを解説
• Atomic Designとは何か: コンポーネントベースのデザイン手法の概要