【Ant Design 入門】企業向けオープンソースデザインシステム

Ant Design は、エンタープライズ向け製品を開発するための一般的なデザインシステムであり、包括的なコンポーネントライブラリには、製品チームが最新のB2Bデザインにおいての課題のほとんどを解決するのに必要なものがすべて揃っています。

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

UXPin Merge を使って、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成しませんか。この先進的なプロトタイプ技術の詳細と入手方法については、Merge のページをぜひご覧ください。

Ant Design （AntD）とは

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

オープンソースのデザインシステムのAnt Designとは？ -企業での活用方法をご紹介！

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

Ant Design – メリット

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

ここでは、ソフトウェアデベロッパーから聞いた Ant Design のメリットをご紹介します：

万全なメンテナンス：Ant Designは、頻繁にアップデートを行ってデザインシステムの改善に取り組んでいる。バグが少ないともよく言われている。
包括的なライブラリ：Ant Design には、あらゆるデザイン上の課題を解決するためのコンポーネント、パターン、アイコンがあり、さらに、各要素には複数のバージョンがあり、あらゆるシナリオに対応可能。
ネイティブライブラリ：Ant Design Mobile には、クロスプラットフォームのネイティブアプリケーションを構築するための豊富なライブラリが提供されている。
アニメーションライブラリ： Ant Motion は、ネイティブおよび Web コンポーネントライブラリを補完するのに、パターンとマイクロインタラクションのためのアニメーションを提供する。
サードパーティライブラリ：Ant Design のサードパーティ製 React ライブラリには、デザインシステムの機能を高めるデータビジュアライゼーション、無限スクロール、マップ、メディアクエリなどがある。
多言語対応：Ant Designのは、世界中の言語に対応しており、言語の追加も可能。
フォーム：フォームの操作性に優れた豊富なフォームライブラリ。
スキャフォールド：ダッシュボードやレポート、テーブル、管理者 UI 、チャットやログインなど、のテンプレートプロジェクトが１００以上用意されている。
Typescript対応

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

マテリアルデザインとAnt Design は、相違点よりも類似点の方が多く、どちらにも、クロスプラットフォームのアプリケーションを構築するための包括的なデザインシステムがあり、優れたドキュメントと大規模なグローバルコミュニティがあります。

テーマ設定

マテリアルデザインと Ant Design では、テーマ設定にデザイントークンを使用しているため、デベロッパーは UI コンポーネントやパターンをカスタマイズしやすくなります。

アクセシビリティ

アクセシビリティは、両者の最も大きな違いの１つです。マテリアルデザインは、原則とベストプラクティスによってアクセシビリティを全コンポーネントに含まれているのに対し、Ant Design ではアクセシビリティはデベロッパーに委ねられています。

技術スタックの互換性

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

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

Ant Design と Bootstrap

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

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

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

Ant Design で構築できるもの

Ant Design の膨大なコンポーネント、パターン、テンプレート、アイコンのライブラリにより、B2B および B2C のデジタル製品の開発ができ、デザインシステムのフォームとデータビジュアライゼーションパターンは、エンタープライズ向けアプリケーションによく利用されています。

Ant Design を採用している企業：

Yuque：ナレッジマネジメントプラットフォーム
Alibaba：世界最大のオンラインマーケットプレイス
Baidu：中国版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 のパレット生成ツールは、製品の原色をベースにした１０色のパレットを生成しますが、マテリアルテーマビルダーや他のパレットジェネレータに比べると、やや原始的なものです。

平均的な距離５０cm、角度０.３度で計算されたユーザーの読書効率に基づいて、フォントスケールと行の高さを目安に表示されます。そしてベースとなるフォントは１４px、行の高さは２２pxです。

Ant Design のアイコンは、［Outlined（アウトライン）］、［Filled（塗りつぶし）］、［Two Tone（ツートン）］の３種類が用意されています。また、デザインシステムのカスタムアイコンを作成するための手順も用意されており、それによってカスタマイズの最大限の一貫性が確保されます。

Ant Design – コンポーネント

ここでは、Ant Design のコンポーネントライブラリの概要と主な機能をご紹介します。

一般情報

一般的なコンポーネントには、ボタン、アイコン、タイポグラフィがあり、ボタンの種類は以下の５種類です：

プライマリ：メインCTA
デフォルト：セカンダリCTA
ダッシュ
文字ボタン
リンクボタン

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

危険：削除などの危険度の高い行為
ゴースト：アウトライン化されたボタンとも呼ばれる
無効：アクションが利用できない場合
ロード：スピナーを追加し、多重投稿を防ぐためにコントローラを無効にする。

レイアウト

Ant Design のレイアウトには、仕切り、グリッド、スペース（配列、方向、大きさなど）があります。

データ入力

Ant Design のデータ入力コンポーネントによって、このデザインシステムが、エンタープライズ向けアプリケーションの開発において好ましい選択肢となっており、製品チームは、Ant Design のすぐに使えるパターンを使って、以下のような企業向けのUIを簡単に構築することができます：

オートコンプリート入力フィールド
カスケードドロップダウンメニュー
チェックボックス
日付ピッカー
フォーム
入力（文字と数字のみ）
言及（ユーザーへのタグ付け）
ラジオ
評価（アイコンや絵文字など）
メニューの選択
スライダー
スイッチ類
タイムピッカー
セレクトボックスの転送
ツリーセレクタ
アップロード

データ表示

データ入力に関連するのが、データを可視化し、ユーザーに提示するデータ表示です。

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

フィードバック

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

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

その他

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

Ant Design の Reactコンポーネントを UXPin に取り込む

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

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

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

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

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

Ant Design と npm統合

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

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

パッケージ名：antd
アセットの場所：antd/dist/antd.css

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

このブログ記事で紹介する手順に沿って、Ant DesignのコンポーネントをUXPin にインポートしてみましょう。

また、CoderOneのYouTubeでのチュートリアルでは、セットアップと基本的なプロトタイプの構築について説明されています。

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

【Ant Design 入門】企業向けオープンソースデザインシステム

Ant Design （AntD）とは

Ant Design – メリット