Ant Design – デザインシステム入門【エンタープライズ向け】

Ant Design は、エンタープライズ製品開発のためのよく使われているデザインシステムであり、その包括的なコンポーネントライブラリには、製品チームが最新の B2B デザインの問題を解決するのに必要なものがすべて備わっています。

主なポイント：

Ant Design は、ボタン、フォーム、ナビゲーションメニュー、データテーブル、モーダルなど、幅広いユースケースをカバーする高品質な UI コンポーネントが集まったものである。
Ant Design は、一貫性とユーザビリティを促進するデザイン原則とガイドラインの遵守で知られている。
Ant Design は「Ant Design 言語」の原則に従い、それが明快さ、効率性、シンプルさを重視したデザインとなっている。
Ant Design には、デザイナーとデベロッパーの強力で活発なコミュニティがあり、それが継続的な開発とサポートに貢献している。

UXPin Merge で、デザインチームは Ant Design の UI コンポーネントをインポートして、完全に機能するプロトタイプを作成することができます。そこで本記事では、Ant Design で作業する利点、その膨大なコンポーネントライブラリ、そして最終製品のように見える Ant Design プロトタイプを構築する方法について概説していきます。

UXPin Merge で、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成しませんか。詳細およびこの高度なプロトタイプ技術へのアクセス方法については、Merge のページをぜひご覧ください。

Ant Design （AntD）とは

Ant Design は、アリババ、アリペイ、Huabei、MYbank などの親会社である Ant グループによって開発されたオープンソースのデザインシステムであり、そのコンポーネントライブラリは、React、Vue、Angular のフロントエンドフレームワークに対応しています。

Ant Design には、レイアウト、アイコン、タイポグラフィ、ナビゲーション、データ入力/フォーム、データビジュアライゼーションなどが含まれ、デザイントークンで、組織は製品要件に合わせてコンポーネントライブラリをカスタマイズできます。

Ant Design の主な利点

製品開発者が Ant Design を選ぶ主な理由の一つに、その包括的なコンポーネントライブラリと機能があります。データビジュアライゼーションなどの、あらゆるタイプの UI パターンを見つけることができることから、エンタープライズ製品に最適です。

以下に、ソフトウェア開発者から学んだ Ant Design の利点を挙げてみましょう：

行き届いたメンテナンス： Ant Design のチームは、頻繁にアップデートを行い、デザインシステムの改善に継続的に取り組んでいる。バグはほとんど発見されいないとのエンジニアからの報告もある。
包括的なライブラリ： Ant Design には、あらゆるデザイン問題を解決するコンポーネント、パターン、アイコンがある。さらに、各要素には複数のバージョンがあり、どのようなシナリオにも対応できる。
ネイティブライブラリ： Ant Design Mobile には、クロスプラットフォームのネイティブアプリケーションを構築するための広範なライブラリがある。
アニメーションライブラリ： Ant Motion は、ネイティブと Webコンポーネントライブラリを補完するために、一般的なパターンとマイクロインタラクションのアニメーションを提供する。
サードパーティライブラリ： Ant Design のサードパーティの React ライブラリには、デザインシステムの機能を上げるデータビジュアライゼーション、無限スクロール、マップ、メディアクエリなどが含まれる。
国際化対応： Ant Design の国際化機能は、世界中の言語に対応しており、デベロッパーは言語を追加することもできる。
フォーム：優れたフォーム処理機能を備えた広範なフォームライブラリ。
Scaffold：ダッシュボード、レポート、テーブル、管理者 UI、チャット、ログインなど、１００以上のテンプレートプロジェクト。

タイプスクリプトの互換性

マテリアルデザインと Ant Design

マテリアルデザインと Ant Design は、相違点よりも類似点の方が多くあります。

どちらにも、クロスプラットフォームのアプリケーションを構築するための包括的なデザインシステムがあり、優れたドキュメントと大規模なグローバルコミュニティが備わっています。

テーマ設定

マテリアルデザインとAnt Designでは、テーマ設定にデザイントークンが使われています。そのため、デベロッパーはUIコンポーネントやパターンを簡単にカスタマイズできるようなります。

アクセシビリティ

アクセシビリティは、両デザインシステムの最も大きな違いの１つです。マテリアルデザインには、原則とベストプラクティスが各コンポーネントに「組み込まれている」アクセシビリティが備わっているのに対し、Ant Designではこれをデベロッパーに任せています。

技術スタックの互換性

マテリアルデザインは、クロスプラットフォームの Flutterのアプリケーションを開発するための最善策であり、デベロッパーは数行のコードでコンポーネントを呼び出し、UI（ユーザーインターフェース）を簡単に構築できます。また、マテリアルデザインはMUIを通じて Reactアプリでも利用できます。

対する Ant Designは、React、Vue、Angular のフレームワークに対応していることから、より多くのソフトウェアデベロッパーがデザインシステムにアクセスできるようになります。

Ant Design と Bootstrap

Bootstrap は、レスポンシブ Webサイトや Webアプリケーションを構築するための、最も古いフロントエンドの CSS フレームワークの１つです。フレームワークの CSS と Javascript のライブラリを活用して、少ない労力で Webサイトや Webアプリケーションを開発できるため、多くのエンジニアがプロトタイプに Bootstrap を使っています。

Ant Design と同様に、Bootstrap は React、Vue、Angular に対応していますが、Bootstrap がフレームワークであるのに対し、Ant Design はデザインシステムである点が両者の最大の違いです。

プロトタイプと Webサイト構築には、Bootstrap を選ぶ方がいいですが、Ant Design には、Web とネイティブのクロスプラットフォームアプリケーションを構築するのにより多くの機能があります。

Ant Designで構築できるもの

Ant Design のコンポーネント、パターン、テンプレート、アイコンの膨大なライブラリで、B2B や B2C のデジタル製品の開発が実現します。そして、このデザインシステムのフォームとデータ可視化パターンは、エンタープライズアプリケーションのための一般的な選択肢となっています。

以下は、Ant Designを採用している企業です：

Yuque（语雀）：ナレッジマネジメントのプラットフォーム
アリババ：世界最大のオンラインマーケットプレイス
バイドゥ：中国の Google に相当し、Ant Design を実行する複数の製品がある世界最大級の AI・インターネット企業。
Fielda：フィールド調査用のモバイルデータ収集アプリケーショ
Moment：プロジェクト管理ソフトウェア
Videsk: ビデオベースのカスタマーサービス・プラットフォーム
Solvvy：Zoomのチャットボット・ソフトウェア
Ant Financial：中国有数の FinTech企業

Ant Designのデザイン言語

１．デザイン言語

Ant Design のデザインバリューには、多くのユーザビリティの問題を解決するための原則とパターンが含まれており、そのデザインシステムには以下の４つの価値があります：

自然：認知的負荷を最小限にするため、製品や UI は直感的でないといけない。
一定：デザイナーは、連携を強化し、一貫したユーザー体験を提供するために、コンポーネントとパターンを一貫して使用しないといけない。
有意義：製品には明確な目標があり、ユーザーを支援するために各アクションに対して即座にフィードバックを提供しないといけない。また、デザイナーは、ユーザーが気が散ることなくタスクに集中できるような体験を作らないといけない。
成長：デザイナーは、人間とコンピュータのインタラクションの共生を考慮し、スケーラビリティを考慮したデザインをしないといけない。

２．動作の原理

Ant Design には以下の３つの動作の原理があります：

自然：デザイナーは、スムーズで直感的なアニメーションとトランジションで、自然の法則に基づいた動きをしないといけない。
パフォーマンス：アニメーションは遷移時間が短く、製品のパフォーマンスに影響を与えてはいけない。
簡潔：デザイナーは、UX（ユーザーエクスペリエンス）に付加価値を与えない過剰なアニメーションを避けながら、正当で有意義なインタラクションを作成しないといけない。

３．グローバルスタイル

Ant Design のドキュメントの「Global Styles（グローバルスタイル）」のセクションには、色、レイアウト、フォント、アイコン、ダークモードのガイドラインが含まれています。

Ant Design のパレット生成ツールでは、製品の原色に基づいて１０色のパレットが生成されますが、Material Theme Builder や他のパレット生成ツールに比べると、やや原始的なツールです。

フォントのスケールと行の高さは、平均的な距離の５０cm（２０インチ）、角度０.３度で計算されたユーザーの読書効率に基づいて、有益なガイドラインを提供します。ちなみに、ベースフォントは１４px、行の高さは２２pxです。

Ant Design のアイコンは、アウトライン、塗りつぶし、ツートンの３種類があります。また、デザインシステムのイコノグラフィーの原則に準拠したカスタムアイコンを作成するための説明書もあることから、カスタマイズの一貫性が最大限に確保されます。

Ant Design のコンポーネント

Ant Designのコンポーネントライブラリの概要と主な機能は以下の通りです。

一般的なコンポーネント

ボタン、アイコン、タイポグラフィなどがあります。また、ボタンの種類は以下の５つになります：

プライマリ：メインCTA（Call to Action）
デフォルト：セカンダリ（二次的）CTA
破線
テキストボタン
リンクボタン

さらに、以下の４つのボタンのプロパティがあります：

危険：削除のようなリスクの高い操作
ゴースト：アウトラインボタンとも呼ばれる
無効：アクションが利用できない場合
読み込み中：スピナーを追加し、コントローラを無効にして複数投稿を防ぐ

レイアウト

Ant Design のレイアウトには、仕切り、グリッド、スペース（配置、方向、サイズなど）が含まれます。

データ入力

Ant Design のデータ入力コンポーネントにより、そのデザインシステムはエンタープライズアプリケーション開発に最適な選択肢となるでしょう。

プロダクトチームは、Ant Designのすぐに使用できるパターンを使って、以下のようなエンタープライズ UIを簡単に構築できます：

オートコンプリート入力フィールド
カスケードのドロップダウンメニュー
チェックボックス
日付ピッカー
フォーム
入力（テキストと数値のみ）
メンション（ユーザーへのタグ付け）
ラジオ
レーティング（アイコンと絵文字）
セレクトメニュー
スライダー
スイッチ
タイムピッカー
転送セレクトボックス
ツリーセレクター
アップロード

データ表示

データ入力にはデータ表示が関係しており、以下のようにデータを視覚化してユーザーに提示します。

アバター
バッジ
カレンダー
カード
カルーセル
折りたたみ（アコーディオン）
コメント（ユーザーディスカッション）
説明（注文、取引、レコードなどのテーブル）
空（空のコンポーネントのプレースホルダー）
画像
リスト
ポップオーバー
セグメント
統計（ダッシュボード用の数値コンポーネント）
テーブル
タブ
タグ
タイムライン
ツールチップ
ツリー

フィードバック

デザイナーは、以下の Ant Design のフィードバックのコンポーネントを使って、ユーザーとコミュニケーションをとります。

アラート
引き出し
メッセージ（画面上部にシステムフィードバックを表示）
モーダル
通知
ポップコンファーム
進行状況
結果（成功、失敗、エラーなど）
スケルトン（遅延ロード・プレースホルダー）
スピン（スピナー）

その他

最後のカテゴリーには、アンカー（目次）とバックトップ（トップに戻る）があり、基本的にはナビゲーション・コンポーネントです。また、デベロッパーがコンポーネントをグループ化できるコンフィグプロバイダーもあります。

Ant DesignのReactコンポーネントをUXPinにインポートする

どのようなデザインシステムでも、「信頼できる唯一の情報源（Single source ofn truth）」があるにもかかわらず、デザイナーとエンジニアで、デザイナーは画像ベースの UI キットを使い、エンジニアは React、Vue、Angularなど、コードベースのコンポーネントライブラリを使うというように、異なる UI 要素が使われていることが課題となります。

UXPin Merge は、真の「信頼できる唯一の情報源（Single source of truth）」を作成します。ソフトウェアのデベロッパーは、製品のデザインシステムやAnt Design などのオープンソースのコンポーネントライブラリを UXPin に取り込むことができるため、デザイナーは、エンジニアが最終製品の開発に使うのと同じ UI 要素をプロトタイプに使うことができます。

Merge のコンポーネントはコードによって駆動されることから、デザイナーは完全なインタラクティブ性とデザインシステムによって確定されたプロパティを得られます。例えば、この Ant Design ボタンには、UXPin で何も変更しなくても、デフォルトでホバーとクリックのインタラクションが含まれています！

また、デザイナーは、（色、サイズ、タイプ、コンテンツなど）デザインシステムで確定されたコンポーネントのプロパティにプロパティパネルからアクセスして、変更を加えることができます。

UXPinはそれを JSXとしてレンダリングするため、エンジニアはSpecモードからコピー＆ペーストして開発を始めることができることから、ドリフトがなく、常に100％の一貫性を保つことができるのです！

Ant Design の npm統合

UXPin の npm統合により、デザイナーは Ant Design などの npm レジストリにホストされているオープンソースのコンポーネントライブラリから UI 要素をインポートすることができます。

デザイナーは Merge のコンポーネントマネージャーを使って、以下の Ant Design の npm の詳細を追加するだけです。

パッケージ名：antd
アセット位置：antd/dist/antd.css

そして、UXPinは npm経由でAnt DesignのGitHub のレポジトリに接続します。デザイナーは、Ant Design のドキュメントを使って、プロトタイプに必要なコンポーネントとプロパティを選択できます。

Ant Design のコンポーネントを UXPin にインポートするには、このステップバイステップガイドをご覧ください。

また、セットアップと基本的なプロトタイプの構築を説明する CoderOne の YouTube のチュートリアルを見るのもいいでしょう。

ユーザーテスト中に有意義な結果を生み出す、完全に機能する Ant Design プロトタイプを構築しませんか。より多くの機会を特定しながら、デザインプロセス中により多くの問題を解決することで、デザインチームの価値を高めましょう。詳細とアクセスのリクエスト法については、Merge のページをぜひご覧ください。