Ant Design（アントデザイン）は、Ant Group（アリババグループの金融関連会社）が開発するエンタープライズ向けのデザインシステムで、そのReact実装がnpmパッケージのantdです。テーブル・フォーム・日付ピッカーなど管理画面で使う部品が一通りそろい、MITライセンスで商用でも無料で使えます。この記事では、2026年10月11日時点の最新版antd 6.6.5を実際にインストールして、導入手順、Next.js App Routerでの使い方、テーマ設定、日本語化の落とし穴、Tableのサーバー側ソート、v5からv6への移行、Ant Design Proの対応状況、Material UIとの選び方までを確かめた結果をまとめます。
まとめ：Ant Design 6.6系の用途と導入・移行の要点
- 中身：デザイン言語「Ant Design」をReactで実装した
antd。最新は6.6.5（2026年9月20日公開）で、React 18以上が必須です。 - 導入：
npm install antdでコンポーネントをimportするだけで使えます。Next.js App Routerでは@ant-design/nextjs-registryを併用します。 - 見た目の調整：
ConfigProviderのDesign Tokenで色・角丸・ダークテーマを一括で切り替えます。 - 日本語化：
ja_JPロケールに加えてdayjs/locale/jaも読み込みます。読み込まないと日付表示の曜日・月名が英語に残ります。自前のコードでDay.jsを使って整形する部分まで日本語にするならdayjs.locale('ja')も設定します。 - v6への移行：多くのAPIは互換のままです。
@ant-design/iconsを直接の依存に入れているなら、6系へ同時に上げます。ProComponentsの安定版はantd 6に未対応で、組み合わせるにはv3（beta）が必要です。本番採用の前に対象画面の動作を確かめます。 - 向き不向き：一覧・検索・登録フォームが中心の管理画面なら第一候補です。ブランド独自のデザインをゼロから作る場合や、Server Components中心で作るサイトでは他の選択肢が合います。
Ant Designの位置づけ：デザイン言語とReact実装antd
「Ant Design」と「antd」の違い
Ant Designはデザインの原則・色・余白・部品の振る舞いを定めたデザイン言語の名前で、それに沿って作られたReactコンポーネントライブラリがantdです。公式の紹介ページは、TypeScriptで書かれ型定義を同梱していること（@types/antdは不要）、数十言語の国際化、テーマのカスタマイズを特徴に挙げています。npmの週間ダウンロード数は377万件（2026年10月3〜9日）、GitHubのスター数は約9.97万（2026年10月11日）で、ライセンスはMITです。
Ant Design関連製品の役割と対応バージョン
同じ名前を冠したプロダクトが複数あり、検索結果で混ざりやすいので役割を分けておきます。
| 名前 | 中身 | 現行版（2026年10月） |
|---|---|---|
| antd | React UIライブラリ本体 | 6.6.5 |
| Ant Design Pro | 管理画面の雛形一式 | v6.0.3 |
| ProComponents | ProTable・ProFormなど上位部品 | 安定版2.8.10／v3はbeta |
| Ant Design X | AIチャット画面向け部品 | 2.9.0（antd 6.1.1以上） |
| Ant Design Vue | Vue 3向けの別実装 | 4.2.6（2024年11月11日） |
Ant Design VueはvueComponentという別組織が開発するVue実装で、React版とはコードベースもバージョン番号も別です。npmに出ている最新版は4.2.6（2024年11月11日公開）のままで、React版の6系にあたるリリースはありません。React版の記事をVue版に当てはめないようにしてください。
antdのインストールと最初のコンポーネント
npm installとimportの手順
公式のはじめにが前提にしているのはNode.js 16以上とReactの基礎知識です。インストールしたら、使うコンポーネントを名前付きでimportします。ES Modulesのツリーシェイキングに対応しており、ViteやwebpackなどのES Modules対応のビルドで最適化すると、使っていない部品をバンドルから除けます。スタイルはCSS-in-JSで自動的に注入されるため、v4までのように全体CSSを手でimportする必要はありません。
npm install antd
// src/App.tsx
import { Button, DatePicker, Space } from 'antd';
export default function App() {
return (
<Space>
<DatePicker />
<Button type="primary">送信</Button>
</Space>
);
}Next.js App Routerで使う場合の設定
Next.js App Routerで初期HTMLにantdのスタイルを含めない構成では、初回表示でスタイルの当たっていない画面が一瞬見えることがあります。公式のNext.js連携ガイドは、@ant-design/nextjs-registryを入れてルートレイアウトをAntdRegistryで包む方法を案内しています。
npm install antd @ant-design/nextjs-registry
// app/layout.tsx
import { AntdRegistry } from '@ant-design/nextjs-registry';
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="ja">
<body>
<AntdRegistry>{children}</AntdRegistry>
</body>
</html>
);
}注意点が2つあります。1つ目は、Server Componentの中で<Select.Option />や<Typography.Text />のようにドットでサブコンポーネントを呼べないことです。antd/es/typography/Textのようにパスを指定してimportするか、そのファイルをClient Componentにします。2つ目は、antdを使う部分をClient Componentとして扱う必要があることです（Client Componentも初回表示ではサーバー側でHTMLに事前描画されます）。dayjsのロケールを読み込むファイルにも'use client'が要ります。App Router自体の仕組みはApp Routerとは？Next.jsのファイル規約・動的ルーティング・Pages Routerとの違いで解説しています。
ConfigProviderとDesign Tokenでテーマを変える方法
色や角丸は、個別のCSSを上書きせずConfigProviderのthemeで一括設定します。公式のテーマ設定ガイドによると、colorPrimaryのように他の値の起点になるトークンをSeed Tokenと呼び、これを1つ変えると派生する色やホバー時の色が連動して変わります。algorithmにはtheme.defaultAlgorithm・theme.darkAlgorithm・theme.compactAlgorithmの3つがあり、配列で渡すとダークと高密度を組み合わせられます。特定の部品だけ変えたいときはcomponentsにComponent Tokenを書きます。
import { ConfigProvider, theme, Button, message } from 'antd';
export function Root({ children }: { children: React.ReactNode }) {
return (
<ConfigProvider
theme={{
algorithm: [theme.darkAlgorithm, theme.compactAlgorithm],
token: { colorPrimary: '#1677ff', borderRadius: 4 },
components: { Button: { fontWeight: 600 } },
}}
>
{children}
</ConfigProvider>
);
}
// 通知はフック版を使う（静的な message.success() はテーマを受け取れない）
export function SaveButton() {
const [messageApi, contextHolder] = message.useMessage();
return (
<>
{contextHolder}
<Button type="primary" onClick={() => messageApi.success('保存しました')}>保存</Button>
</>
);
}ここでつまずきやすいのが通知です。message.success()やModal.confirm()といった静的メソッドは別のDOMツリーに描画されるため、ConfigProviderのテーマやロケールを受け取れないと公式FAQが明記しています。ダークテーマにしたのに通知だけ白い、という症状はこれが原因です。上のコードのようにmessage.useMessage()などのフック版に置き換えます。
v6.0.0からはtheme={{ zeroRuntime: true }}も選べます。実行時のスタイル生成を止め、antd/dist/antd.cssを読み込む方式です。antd.cssはハッシュ付きのクラス名を含まないため、prefixを変えている場合や読み込むスタイルを絞りたい場合は、@ant-design/static-style-extractで静的CSSを生成し直します。
DatePickerの日本語化：ja_JPとDay.jsロケールの設定範囲
antdの既定の言語は英語です。antd/locale/ja_JPをConfigProviderのlocaleに渡すとUIの文言は日本語になりますが、日付の表示形式までは日本語になりません。DatePickerのドキュメントは、対応するdayjsのロケールも読み込むよう注記しています。どこまでが日本語になるのか、antd 6.6.5・dayjs 1.11.23で同じ画面をサーバー描画し、設定を1段ずつ足して比べました。
| 表示箇所 | (1) ja_JPのみ | (2) (1)＋ja読み込み | (3) (2)＋dayjs.locale(‘ja’) |
|---|---|---|---|
| DatePickerのプレースホルダー | 日付を選択 | 日付を選択 | 日付を選択 |
| カレンダーの曜日見出し | 日 月 火 水 木 金 土 | 日 月 火 水 木 金 土 | 日 月 火 水 木 金 土 |
| ページサイズ切替 | 10 件 / ページ | 10 件 / ページ | 10 件 / ページ |
| DatePickerのformat (ddd) | 2026/10/11 (Sun) | 2026/10/11 (日) | 2026/10/11 (日) |
| DatePickerのformat MMMM | October 2026 | 10月 2026 | 10月 2026 |
| 自前の dayjs().format(‘ddd’) | Sun | Sun | 日 |
部品の固定文言はantd側のロケールが持っているので、ja_JPだけでも日本語になります。一方、ddd（曜日）やMMMM（月名）のような書式トークンはDay.jsが変換するため、dayjs/locale/jaを読み込むまで英語のままです。読み込めば、DatePickerはantd側のロケール指定に合わせて日本語で整形します。dayjs.locale('ja')のグローバル設定が効くのは、一覧の日付列など自前のコードでDay.jsを直接使う部分だけです。Day.jsを直接importするので、npm install dayjsで依存関係にも追加しておきます。Next.js App Routerでは、この例をClient Componentの中に置きます。
import { ConfigProvider, DatePicker } from 'antd';
import jaJP from 'antd/locale/ja_JP';
import dayjs from 'dayjs';
import 'dayjs/locale/ja';
dayjs.locale('ja'); // 自前のコードで使う dayjs().format() も日本語にする
export default function App() {
return (
<ConfigProvider locale={jaJP}>
<DatePicker format="YYYY/MM/DD (ddd)" />
</ConfigProvider>
);
}もう1つ、DatePickerが返す値はJavaScriptのDateではなくdayjsのオブジェクトです。選択をクリアすると値はnullになるので未選択の場合を分け、日付があるときはサーバーへ送る前にvalue.toDate()やvalue.format('YYYY-MM-DD')で変換してください。
Tableのサーバー側ページング・ソートの実装
列にsorter: (a, b) => …のような比較関数を書くと、並べ替えは手元にあるデータの中だけで行われます。1ページ20件ずつAPIから取る画面では、表示中の20件しか並ばないということです。全件を対象に並べ替えるには、列にsorter: trueを指定し、onChangeで受け取ったページ番号とソート条件をAPIに渡します。列見出しのソートボタンはantdが描画するので、自前で作る必要はありません。Tableのドキュメントにも同じ構成の例があります。
以下はフロントエンド側の例です。別途、/api/usersでpage・size・sort・orderを受け取り、全件を並べ替えてからページを切り出して{ items, total }（totalは全体の件数）を返すAPIを用意する前提です。
import { useEffect, useState } from 'react';
import { Table, message } from 'antd';
import type { TableProps, TablePaginationConfig } from 'antd';
type User = { id: string; name: string; createdAt: string };
type Query = { page: number; pageSize: number; sortField?: string; sortOrder?: 'ascend' | 'descend' | null };
const columns: TableProps<User>['columns'] = [
{ title: '氏名', dataIndex: 'name', sorter: true }, // true = 並べ替えはサーバーに任せる
{ title: '登録日', dataIndex: 'createdAt', sorter: true },
];
export default function UserTable() {
const [query, setQuery] = useState<Query>({ page: 1, pageSize: 20 });
const [data, setData] = useState<User[]>([]);
const [total, setTotal] = useState(0);
const [loading, setLoading] = useState(false);
const [messageApi, contextHolder] = message.useMessage();
useEffect(() => {
const params = new URLSearchParams({ page: String(query.page), size: String(query.pageSize) });
if (query.sortField && query.sortOrder) {
params.set('sort', query.sortField);
params.set('order', query.sortOrder === 'ascend' ? 'asc' : 'desc');
}
let active = true; // 古いリクエストの結果で上書きしない
setLoading(true);
fetch('/api/users?' + params.toString())
.then((res) => {
if (!res.ok) throw new Error('HTTP ' + res.status);
return res.json();
})
.then((json: { items: User[]; total: number }) => {
if (active) {
setData(json.items);
setTotal(json.total);
}
})
.catch(() => {
if (active) {
setData([]);
setTotal(0);
messageApi.error('一覧を取得できませんでした');
}
})
.finally(() => {
if (active) setLoading(false);
});
return () => {
active = false;
};
}, [query, messageApi]);
const handleChange: TableProps<User>['onChange'] = (pagination: TablePaginationConfig, _filters, sorter, extra) => {
const s = Array.isArray(sorter) ? sorter[0] : sorter;
setQuery({
page: extra.action === 'sort' ? 1 : pagination.current ?? 1, // 並べ替えたら1ページ目へ戻す
pageSize: pagination.pageSize ?? 20,
sortField: s?.field as string | undefined,
sortOrder: s?.order ?? null,
});
};
return (
<>
{contextHolder}
<Table<User>
rowKey="id"
columns={columns}
dataSource={data}
loading={loading}
pagination={{ current: query.page, pageSize: query.pageSize, total }}
onChange={handleChange}
/>
</>
);
}onChangeの第4引数extra.actionにはpaginate・sort・filterのどれで呼ばれたかが入ります。上の例では並べ替えたときに1ページ目へ戻しています。そうしないと、5ページ目を見ている途中で並べ替えた利用者は並べ替え後の5ページ目に飛ばされ、先頭の行を見落とします。フォームの入力と検証を組み合わせるなら、Refine（React）とは？react-adminとの違い・v5の変更点と管理画面の作り方のように、antdを画面部品として使う管理画面フレームワークに一覧・編集の配線を任せる方法もあります。
antd v6の変更点とv5からの移行手順
antd v6.0.0の主要変更（2025年11月22日公開）
v6.0.0は公式の変更履歴で2025年11月22日のリリースです。主な変更は次のとおりです。
- React 18以上が必須になり、React 16・17のサポートを終了
- CSS変数によるスタイル出力が既定になり、IEは対象外
- 各コンポーネントの内部構造に名前（semantic structure）が付き、
classNames・stylesで部位ごとに指定できるようになった zeroRuntimeモードを追加- 配布ファイル
antd.js・antd.min.jsでReact Compilerを有効化
最後の項目は、6.3.0（2026年2月10日）でUMD版の互換性を修正し、既定で無効に戻されています。v6.0.0のリリース時点の解説を読むと「antd.jsはReact Compilerで速い」と書かれていることがありますが、現行版には当てはまりません。モーダルやドロワーの背景をぼかすmask.blurも、6.0.0〜6.2系は既定で有効、6.3.0以降は既定で無効です。
v5からv6へ上げる手順と注意点
公式の移行ガイドは「主に技術的なアップグレードで、多くのAPIは互換のまま」と位置づけています。手順は次の3段階です。
# 1. v5の最新へ上げ、コンソールの非推奨警告を消す
npm install antd@5
# 2. antd と @ant-design/icons を同時に6系へ（片方だけ上げるとビルドが壊れる）
npm install antd@6 @ant-design/icons@6
# 3. React 19 用の互換パッチを入れていたら、ソース中の
# import '@ant-design/v5-patch-for-react-19'; を削除してから外す
npm uninstall @ant-design/v5-patch-for-react-19@ant-design/iconsの6系はantd 5と互換性がないため、iconsを直接の依存に入れている場合は2つのパッケージを必ず同時に上げます。移行後に確認したいのは次の4点です。
- 非推奨API：
Breadcrumb.Item（itemsへ）、Cardのbordered（variantへ）、dropdownRender（popupRenderへ）などは動きますが警告が出て、v7で削除されます。 - Form.List：
onFinishの値に、Form.Itemとして登録していない項目が含まれなくなりました。 - size：6.3系で
large・medium・smallに統一され、Tableのsize="middle"は"medium"へ置き換えます。 - 内部DOM向けのCSS：コンポーネント内部のクラス名や階層を狙って上書きしていた独自CSSは、DOM構造の変更で効かなくなることがあります。
公式のAnt Design CLIをNode.js 20以上の環境にnpm install -g @ant-design/cliで入れ、antd lint ./srcを実行すると、非推奨APIの使用箇所をコードベースから洗い出せます。antd本体とは別パッケージなので、antdを入れただけのプロジェクトでnpx antdとしても起動しません。v6は毎週末にパッチ版、毎月末にマイナー版を出す運用で、6.4.0でBorderBeam、6.5.0でAIデザインツール向けのDESIGN.md、6.6.0で仮想化リストのListyが追加されました。
Ant Design Pro・ProComponentsをv6で使うときの落とし穴
ProTableやProFormを提供する@ant-design/pro-componentsは、npmのlatestタグが指す2.8.10がantd 4・5向けのままです。antd 6.6.5を入れたプロジェクトでバージョンを指定せずにインストールすると、依存関係の解決に失敗します（npm 11.17.0での出力を抜粋）。
$ npm install @ant-design/pro-components # [email protected] が入ったプロジェクトで実行
npm error code ERESOLVE
npm error Found: [email protected]
npm error Could not resolve dependency:
npm error peer antd@"^4.24.15 || ^5.11.2" from @ant-design/[email protected]
$ npm install @ant-design/pro-components@beta # v3系（antd ^6.0.0）が入り、エラーなしantd 6に対応するのはv3系で、2026年10月時点ではbetaタグで配布されています。ProComponentsの移行ガイドはv3の要件をantd 6.0.0以上・React 18以上とし、@ant-design/pro-components@betaのインストールを案内しています。v3では@ant-design/pro-tableなどの個別パッケージは出さず、@ant-design/pro-componentsの1パッケージにまとまりました。2系と3系の部品を混ぜると表示や実行時のエラーが起きるため、移行は一度に済ませます。
雛形のAnt Design Proはv6.0.0が2026年4月30日に公開され、antd 6・React 19・ProComponents v3の構成になっています。Pro v6はUmi Max（@umijs/max）を土台にした雛形なので、Umi Maxの構成で新規に管理画面を作るなら、雛形から始めると依存関係の版をそろえやすくなります。既存のNext.jsなどに組み込む場合は、ProComponents v3を単体で入れます。
Material UI・React-Bootstrap・shadcn/uiとの選び方
4つのライブラリの性格の違い
| 項目 | antd | Material UI | React-Bootstrap | shadcn/ui |
|---|---|---|---|---|
| 現行版 | 6.6.5 | 9.5.0 | 2.10.10 | コード配布型 |
| デザイン | Ant Design | Material Design | Bootstrap 5 | 自前で調整 |
| 日付範囲の選択 | RangePicker（無料） | Pro版（有償） | 無し | 部品を組み合わせる |
| テーマ設定 | Design Token | createTheme | Sass・CSS変数 | Tailwind CSS |
| 向く画面 | 管理画面・社内システム | プロダクトUI全般 | LP・小規模サイト | 独自デザインのUI |
差が最も出るのは、業務画面でよく使う重い部品です。antdはRangePicker・Tree・Transfer・固定列付きTableまでMITの本体に含みます。Material UIのDate Range Pickerは有償のPro版（@mui/x-date-pickers-pro）です。Material UIの導入とテーマ設定はMaterial UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説で扱っています。
Ant Designを選ぶべきでない場面
次の3つに当てはまるなら、antd以外を選んだほうが手戻りが少なくなります。
- ブランド独自のデザインを作り込む：antdは完成した見た目を持つため、角丸や影を変える程度なら得意ですが、部品の形そのものを変えるとToken設計とぶつかります。スタイルを持たないヘッドレス系のBase UI（React）とは？Radix UI・MUIとの違いと使い方【v1.8対応】や、コードを手元にコピーして改造するshadcn/uiとは？読み方・導入手順とBase UI既定化の変更点をReact開発者向けに解説が合います。
- 配信するJavaScriptを小さく抑えたい公開サイト：antdを使う部分にはクライアント側のJavaScriptが必要です。Server Componentsと併用はできますが、表示速度を最優先するページでは採用範囲を絞ります。
- 部品を数個しか使わない静的なページ：静的な装飾だけなら、Tailwind CSSなどのユーティリティCSSを第一候補にします。antdには実行時のスタイル生成を省く
zeroRuntimeもあるので、採否は必要な部品と配信するJavaScriptの量で決めます。
逆に、一覧・検索・登録フォーム・権限ごとのメニューが何十画面も続く社内システムなら、一覧・フォーム・レイアウトをまとめて導入できるantdとPro v6の組み合わせを第一候補にできます。画面の設計パターンからライブラリを選ぶ手順は業務システムの画面デザイン｜実装者向けUI設計パターンとライブラリ選定に、外部に任せる場合は一創のUI/UXデザイン支援にまとめています。
よくある質問
Ant Designは無料で商用利用できますか？
できます。antdはMITライセンスで、著作権表示とライセンス文を残せば商用のシステムにも無料で組み込めます。Ant Design ProとProComponentsもMITです。
Ant Designの最新バージョンはいくつですか？
2026年10月11日時点の最新は6.6.5（2026年9月20日公開）です。メジャー版の6.0.0は2025年11月22日に出ました。パッチ版は毎週出るので、正確な番号はnpmのantdのページで確認してください。
antdをv5からv6へ上げるとコードの書き換えは必要ですか？
React 18以上で動いていれば、多くのコードはそのまま動きます。@ant-design/iconsを直接の依存に入れている場合は、こちらも6系へ同時に上げます。非推奨APIは警告が出るだけでv7まで動くので、警告を見ながら順に置き換えます。
Ant Design VueはReact版と同じものですか？
見た目は同じ系統ですが、別の組織が開発する別のライブラリです。最新版は4.2.6（2024年11月11日公開）で、React版の6系の変更は入っていません。
ReactとBootstrapの違いは何ですか？
ReactはUIを部品単位で組み立てるJavaScriptライブラリ、Bootstrapはクラス名で見た目を整えるCSSフレームワークです。役割の階層が違うので、比べる相手にはなりません。React上でBootstrapの見た目を使う手段がReact-Bootstrapで、antdやMaterial UIと比べるのはこちらです。
