IT用語集 › Web › デザインシステム

デザインシステム

Web Svenska → 更新: 2026-10-21

デザイントークン(色、タイポグラフィ、余白)、コンポーネント、ドキュメント、ガイドラインを一貫してまとめたもの。すべてのプロダクトでUIの統一を保つ。

有名なものにはMaterial Design(Google)、Polaris(Shopify)、Carbon(IBM)、Atlassian Design System、Apple Human Interface Guidelines、Microsoft Fluentがある。ツールは、Figma(デザイン)、Storybook(コンポーネントのドキュメント)、Style Dictionary(トークンのマルチプラットフォーム変換)、Chromatic(ビジュアルリグレッション)など。中心になるのは「デザイントークン」で、抽象的な値(color.primary)が各プラットフォーム固有の出力値に対応づけられる。優れたデザインシステムは、新機能ごとに数週間の手間を省いてくれる。

← 用語集に戻る