Ant Design
Ant Design / 2015– / スタイル / プラットフォームの画面言語
企業向けウェブアプリの複雑さを、再利用できる部品とページの型で低エントロピーに保つ設計体系。Natural、Certain、Meaningful、Growingを価値に掲げ、表・フォーム・階層・状態を高い密度のまま規則化する。
ひと目で判断
見た目の特徴
- 小さな文字と細い罫線で密度の高い表を組む
- 青い主操作と明確な成功・警告・危険色
- フォーム、ページャー、ツリー、表の部品が一貫する
- 余白を広げず整列と反復で読みやすくする
向いている用途
- 大量の表・フォーム・権限・状態を扱う企業向け管理画面を短期間で揃えるとき
- 国際化された業務製品で、部品ごとの振る舞いと例外を共通化するとき
このスタイルを使う
短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式
辞書情報
- 文字
- 本文を小さめに保ち、ラベル、値、補助文の色と太さを厳密に分ける。
- 構成
- 表とフォームの列幅を先に決め、余白ではなく整列で項目間の関係を示す。
- 素材
- 白い面、薄い罫線、青い主操作を基礎に、状態色を意味ごとに固定する。
- 注意
- 部品カタログをそのまま並べると、画面は整っても業務の順序が設計されず、操作が多いだけの管理画面になる。
- 関連研究
- Natural・Certain・Meaningful・Growing / enterprise-class UIの部品体系 / テーマと国際化の扱い
関連項目
- GitHub Primer（GitHub Primer）同じ「プラットフォームの画面言語」の系統。Ant DesignとGitHub Primerの違いを見る
- フルーエント2（Fluent 2）共通する印象：信頼 / 技術。Ant Designとフルーエント2の違いを見る
プラットフォームの画面言語をさらに見る
同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。
- モチーフ（Motif）共通する印象：技術 / 信頼。
- オープンルック（OPEN LOOK）共通する印象：技術 / 信頼。
- アドワイタ（Adwaita）共通する印象：技術 / 信頼。
この項目を引用する
辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。
- Link
- https://indexstyle.org/ja/styles/ant-design
- Markdown
- [Ant Design（Ant Design） — デザインスタイル辞典](https://indexstyle.org/ja/styles/ant-design)
- HTML
- <a href="https://indexstyle.org/ja/styles/ant-design">Ant Design（Ant Design） — デザインスタイル辞典</a>