Carbon Design System

Carbon Design System / 2015– / スタイル / プラットフォームの画面言語

IBMのデジタル製品を、2x Grid、IBM Plex、明快な情報階層、再利用部品で統一するオープンソースのデザインシステム。企業向け画面の高い密度を保ちながら、操作・状態・データの違いを規則で読ませる。

Carbon Design System — IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — UI-shell usage example from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0
IBM Carbon — annotated data-table anatomy from the archived official documentation — Carbon Design System contributors / Apache-2.0 · Apache-2.0
Carbon Design System — AI生成の解釈イメージ 1
AI生成の解釈イメージ（参考作品ではありません）

ひと目で判断

見た目の特徴

  • IBM Plexと2の倍数で刻む間隔
  • 白・灰・黒の面に青い主操作
  • 表、タブ、サイドナビの高い情報密度
  • 四角い部品と明確な焦点線

向いている用途

  • 分析・開発・運用のデータを一画面で扱う企業向け製品
  • 複数の業務製品を同じ部品とアクセシビリティ基準へ揃えるとき

このスタイルを使う

短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。

design.md画像プロンプトJSON APIMCP・機械向け入口掛け合わせ
ChatGPTで開くClaudeで開くGoogle AIで開く
詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式

辞書情報

文字
IBM Plex系のサンセリフで、見出し・本文・ラベルの段階を少数に固定する。
構成
2の倍数の間隔でサイドナビ、表、詳細ペインを組み、重要度を密度差で示す。
素材
無彩色の面を主にし、青を操作、赤・黄・緑を状態へ限定する。
注意
Carbonの部品を並べるだけでは業務の順序は生まれない。最初に判断と操作の優先順位を決める。
関連研究
IBM Design Languageとの関係 / 2x Grid / Carbonのcomponentsとpatterns

関連項目

プラットフォームの画面言語をさらに見る

同じ「プラットフォームの画面言語」から、共通する印象が多い順に次の項目を選んだ。

プラットフォームの画面言語の全項目を見る

この項目を引用する

辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。

Link
https://indexstyle.org/ja/styles/carbon-design-system
Markdown
[Carbon Design System（Carbon Design System） — デザインスタイル辞典](https://indexstyle.org/ja/styles/carbon-design-system)
HTML
<a href="https://indexstyle.org/ja/styles/carbon-design-system">Carbon Design System（Carbon Design System） — デザインスタイル辞典</a>

一覧内の位置へ戻る