はじめに

Ant Design のコンポーネントは便利ですが、種類が多く「どれを使えばいいんだっけ？」となりがちです。この記事では、「見た目」と「やりたいこと」から逆引きできるように主要コンポーネントをまとめました。

Ant Design とは？

Ant Design（通称 antd）は、Alibabaが開発している React向けのUIライブラリです。

ボタン、フォーム、テーブルなど豊富なコンポーネントが用意されている
特に管理画面や業務システムの開発で広く使われている
TypeScript で記述されており、型定義がしっかりしているため安全に開発できる
導入するだけで統一感のあるUIを素早く構築できる

本記事では、その中でも特によく使うコンポーネントを厳選して紹介します。

この記事の対象者

Ant Designを初めて使う方
Reactで画面作成を行う方
「この見た目を作りたいけど、どのコンポーネント？」と迷う方

動作環境

今回のコードは以下のバージョンで動作を確認しています。

antd: 6.2.3
react: 19.2.4
typescript: 5.9.3
Vite: 7.3.1

ブラウザで動かせるサンプル（StackBlitz）

サンプルコードも用意しているので、手元で動かしながら確認していただくことも可能です。

逆引き早見表

やりたいこと	コンポーネント
ボタンを置きたい	Button
見出し・文字を装飾したい	Typography
要素を横/縦に並べたい	Flex
区切り線を入れたい	Divider
情報をカードにまとめたい	Card
画面内にメッセージを表示したい	Alert
ポップアップを出したい	Modal
読み込み中を示したい	Spin
ステータスを表示したい	Tag
ユーザーアイコンを表示したい	Avatar

1. ボタン（Button）

「保存」「送信」「削除」など、ユーザーにアクションをさせたいときに使用します。

i. 基本の5種

基本のアクション要素です。type プロパティで重要度を表現します。

type	用途
`primary`	メインアクション
（なし）	サブアクション
`dashed`	追加・補助
`text`	控えめな操作
`link`	リンクのような見た目

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Button, Flex } from 'antd';

<Flex gap="small">
  <Button type="primary">Primary</Button>
  <Button>Default</Button>
  <Button type="dashed">Dashed</Button>
  <Button type="text">Text</Button>
  <Button type="link">Link</Button>
</Flex>

ii. 状態・形・アイコン

ローディング表示や、危険な操作の表現などです。

Prop	用途
`loading`	処理中（クリック不可になる）
`danger`	危険な操作（赤くなる）
`disabled`	無効化（押せなくなる）
`shape="round"`	角を丸くする
`icon`	アイコンを表示

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Button, Flex } from 'antd';
import { SearchOutlined } from '@ant-design/icons';

<Flex gap="small" align="center">
  <Button type="primary" loading>Loading</Button>
  <Button type="primary" danger>Danger</Button>
  <Button disabled>Disabled</Button>
  <Button type="primary" shape="round">Round</Button>
  {/* 円形アイコンのみ */}
  <Button type="primary" shape="circle" icon={<SearchOutlined />} />
  {/* アイコン＋文字 */}
  <Button icon={<SearchOutlined />}>Search</Button>
</Flex>

2. 見出し・文字（Typography）

デザインシステムに沿った一貫性のある文字装飾をしたいときに使用します。

i. 見出し（Title）

HTMLの h1 ～ h5 に相当します。

Component	用途
`<Title>`	h1相当
`<Title level={2}>`	h2相当
`<Title level={5}>`	h5相当

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Typography } from 'antd';
const { Title } = Typography;

<Title>h1. Ant Design</Title>
<Title level={2}>h2. Ant Design</Title>
<Title level={3}>h3. Ant Design</Title>
<Title level={4}>h4. Ant Design</Title>
<Title level={5}>h5. Ant Design</Title>

ii. テキスト（Text）

色の調整や太字などは type や strong プロパティを使います。

Prop	用途
`type="secondary"`	グレー（補足など）
`type="success"`	緑
`type="warning"`	黄
`type="danger"`	赤
`disabled`	無効化（薄いグレー）
`mark`	黄色のマーカー
`code`	コード表示
`strong`	太字

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Typography, Flex } from 'antd';
const { Text } = Typography;

<Flex vertical gap="small">
  <Text>Ant Design (Default)</Text>
  <Text type="secondary">Ant Design (Secondary)</Text>
  <Text type="success">Ant Design (Success)</Text>
  <Text type="danger">Ant Design (Danger)</Text>
  <Text disabled>Ant Design (Disabled)</Text>
  <Text mark>Ant Design (Mark)</Text>
  <Text code>console.log('Hello')</Text>
  <Text strong>Ant Design (Strong)</Text>
</Flex>

3. レイアウト（Layout）

要素の間隔を保ちつつ、縦や横にきれいに並べたいときに使用します。

i. 並べる（Flex）

要素を縦や横に並べます。以前は Space を使うこともありましたが、現在はCSS Flexboxと同じ感覚で使える Flex が推奨です。

Prop	用途
`gap`	要素間の隙間（ `small`, `middle`, `large` または数値）
`vertical`	縦並びにする
`align`	整列（ `center`, `end` など）

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

{/* 横並び (デフォルト) */}
<Flex gap="small" align="center">
  <Button type="primary">A</Button>
  <Button type="primary">B</Button>
  <Button type="primary">C</Button>
  <Button type="primary">D</Button>
</Flex>

{/* 縦並び */}
<Flex vertical gap="small">
  <Button block>上</Button>
  <Button block>中</Button>
  <Button block>下</Button>
</Flex>

ii. 区切る（Divider）

要素の間に線を引きます。

Prop	用途
（なし）	横線
titlePlacement="start"	線の中に文字を入れる（左寄せ）
`orientation="vertical"`	縦線

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Divider } from 'antd';

{/* 通常の横線 */}
<p>Text</p>
<Divider style={{ borderColor: '#999' }} />
<p>Text</p>

{/* 文字入り */}
<Divider titlePlacement="start" style={{ borderColor: '#999' }} >Left Text</Divider>
<p>Text</p>

{/* 縦線 */}
<div style={{ marginTop: 16 }}>
  Text
  <Divider orientation="vertical" style={{ borderColor: '#999' }} />
  Link
  <Divider orientation="vertical" style={{ borderColor: '#999' }} />
  More
</div>

4. カード（Card）

関連する情報を一つのまとまりとして見せたいときに使用します。

Prop	用途
`title`	ヘッダータイトル
`extra`	右上の要素（リンクなど）
`variant="borderless"`	枠線を消す（背景になじむ）

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Card, Flex } from 'antd';

<Flex gap="middle">
  <Card title="Default Card" extra={<a href="#">More</a>} style={{ width: 300 }}>
    <p>基本的なカードです。</p>
  </Card>
  <Card title="Borderless Card" variant="borderless" style={{ width: 300 }}>
    <p>枠線なしのカードです。</p>
  </Card>
</Flex>

5. 通知・モーダル・読み込み

i. アラート（Alert）

ユーザーを邪魔せずに、画面内に常に表示しておきたい通知に使用します。

Prop	用途
`title`	メッセージタイトル
`description`	詳細な説明
`type`	色（ `info`, `success`, `warning`, `error` ）
`showIcon`	アイコンを表示

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Alert, Flex } from 'antd';

<Flex vertical gap="middle">
  <Alert title="Info" type="info" showIcon />
  <Alert title="Success" type="success" showIcon />
  <Alert title="Warning" type="warning" showIcon />
  <Alert
    title="Error"
    description="詳細なエラー内容をここに記述します。"
    type="error"
    showIcon
  />
</Flex>

ii. モーダル（Modal）

ユーザーの操作を一度止めて、確認や入力を求めたいときに使用します。

Prop	用途
`open`	表示状態（ `true` / `false` ）
`onOk`	OKボタンを押した時の処理
`onCancel`	キャンセル / 閉じる時の処理
`title`	モーダルのタイトル

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import React, { useState } from 'react';
import { Button, Modal } from 'antd';

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  return (
    <>
      <Button type="primary" onClick={() => setIsModalOpen(true)}>
        Open Modal
      </Button>
      
      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onOk={() => setIsModalOpen(false)}
        onCancel={() => setIsModalOpen(false)}
      >
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

iii. ローディング（Spin）

データの取得中など、待ち時間が発生していることを伝えたいときに使用します。

Prop	用途
`size`	大きさ（ `small`, `large` ）
`spinning`	表示状態 ( `true` / `false` )
`tip`	アイコンの下に文字を表示
`fullscreen`	画面全体を覆うローディング

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Spin, Flex } from 'antd';

<Flex gap="middle" align="center">
  {/* 通常サイズ */}
  <Spin />

  {/* 小さい・大きい */}
  <Spin size="small" />
  <Spin size="large" />

  {/* 文字付き */}
  <Spin tip="Loading...">
    <div style={{ padding: 20, background: 'rgba(0,0,0,0.05)' }} />
  </Spin>
</Flex>

6. ステータス

i. タグ（Tag）

「進行中」「完了」「カテゴリー名」などの短いラベルを表示したいときに使用します。

Prop	用途
`color`	色
`closable`	閉じるボタンを表示
`icon`	アイコンを表示

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Tag, Flex } from 'antd';
import { 
  TwitterOutlined, 
  YoutubeOutlined, 
  CheckCircleOutlined,
  SyncOutlined
} from '@ant-design/icons';

<Flex vertical gap="small">
  {/* 色の一覧 */}
  <Flex gap="4px" wrap="wrap">
    <Tag color="magenta">magenta</Tag>
    <Tag color="red">red</Tag>
    <Tag color="volcano">volcano</Tag>
    <Tag color="gold">gold</Tag>
    <Tag color="green">green</Tag>
    <Tag color="blue">blue</Tag>
    <Tag color="geekblue">geekblue</Tag>
  </Flex>

  {/* バリエーション */}
  <Flex gap="4px" wrap="wrap">
    <Tag icon={<TwitterOutlined />} color="#55acee">Twitter</Tag>
    <Tag icon={<YoutubeOutlined />} color="#cd201f">Youtube</Tag>
    <Tag icon={<CheckCircleOutlined />} color="success">Success</Tag>
    <Tag icon={<SyncOutlined spin />} color="processing">Processing</Tag>
    <Tag closable onClose={() => console.log('Closed')}>Closable</Tag>
  </Flex>
</Flex>

ii. アバター（Avatar）

ユーザーのプロフィール画像やイニシャルを表示するときに使用します。

Prop	用途
`icon`	アイコンを表示
`src`	画像を表示
`size`	サイズ（ `large`, `small` , 数値）
`shape`	形（ `circle`, `square` ）

▼ プレビュー

ここをクリックしてコードを表示

TypeScript

import { Avatar, Badge, Flex } from 'antd';
import { UserOutlined, AntDesignOutlined } from '@ant-design/icons';

<Flex gap="middle" align="center">
  {/* アイコン */}
  <Avatar icon={<UserOutlined />} />
  
  {/* 文字 */}
  <Avatar>U</Avatar>

  {/* 画像 (src) */}
  <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />
  
  {/* 大きいサイズ & AntDアイコン */}
  <Avatar size="large" icon={<AntDesignOutlined />} />
  
  {/* 背景色変更 */}
  <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>K</Avatar>
  
  {/* バッジ付き */}
  <Badge count={5}>
    <Avatar shape="square" icon={<UserOutlined />} />
  </Badge>
</Flex>

おわりに

本記事では、Ant Design のよく使うコンポーネントを紹介しました。

Ant Design には今回紹介した以外にも、様々なコンポーネントが用意されています。さらに詳しく知りたい方は、ぜひ公式ドキュメントもチェックしてみてください。

続編の需要があれば書こうと思いますので、コメントやいいねをいただけると嬉しいです！

はじめに

Ant Design とは？

この記事の対象者

動作環境

ブラウザで動かせるサンプル（StackBlitz）

逆引き早見表

1. ボタン（Button）

i. 基本の5種

ii. 状態・形・アイコン

2. 見出し・文字（Typography）

i. 見出し（Title）

ii. テキスト（Text）

3. レイアウト（Layout）

i. 並べる（Flex）

ii. 区切る（Divider）

4. カード（Card）

5. 通知・モーダル・読み込み

i. アラート（Alert）

ii. モーダル（Modal）

iii. ローディング（Spin）

6. ステータス

i. タグ（Tag）

ii. アバター（Avatar）

おわりに

参考資料