【でざいんしすてむ】
デザインシステム とは？
最終更新:
💡 UIの「共通言語」と「部品棚」
UIコンポーネント、スタイルガイド、設計原則をまとめた一貫したデザインの基盤。チーム全体でUIの統一性を保つ。
📌 このページのポイント
- 再利用するUI部品、設計原則、使い方のガイドを共有する
- IBM Carbonや米国政府のUSWDSなどがある
- デザイナーと開発者が、共通の部品と判断基準を使う
- 整備後も、利用者の要望や変更に合わせて改善を続ける
ひよこ スタイルガイドとの違いは？
ペンギン先生 色や文字などの見た目のルールに加え、再利用するUI部品や使い方の文書、設計原則などをまとめて共有する仕組みだよ。たとえばCarbonは、デザイン資料と動くコード、ガイドラインを組み合わせているんだ。
ひよこ どんなデザインシステムがあるの？
ペンギン先生 IBMのCarbonや米国政府のUSWDSがあるよ。Carbonはコンポーネントやパターン、ガイドを公開し、共同で改善している。USWDSは設計原則、利用のガイド、コードを段階的に取り入れられるようにしているんだ。
ひよこ 小規模チームでも、全部そろえる必要がある？
ペンギン先生 一度に全部を導入する必要はないよ。たとえば共通の原則やボタンの使い方など、必要な部分から始める方法がある。テーマの色を設定するだけで完成とはせず、チームがどう使い、どう変更するかも共有するんだ。
ひよこ 運用では何に気をつけるの？
ペンギン先生 部品やルールを作って終わりにはしないことだよ。使い方の文書を整え、利用者の意見を受けて改善する。Carbonのように変更を提案し、メンテナーが確認する仕組みもある。整備しただけで開発速度や品質が必ず上がるわけではないんだ。
まとめ：ざっくりこれだけ覚えればOK！
「デザインシステム」って出てきたら「UIの部品と使い方のルールを共有する設計基盤」と思えばだいたいOK！
📖 おまけ：英語の意味
「Design System」 ＝ 設計体系
💬 System（体系）としてDesign（デザイン）を管理する。単なるスタイルガイド以上の包括的な仕組みだよ