このページの中だけを絞ります。ページは移りません。
デザインシステムの混同されやすい語
デザインシステムで境界が曖昧になりやすい語の対。全 76 組・26 語。
| この語 | と混同されやすい語 | 違い |
|---|---|---|
| Adoption（導入率） | Governance（ガバナンス） | ガバナンスは運用の仕組み |
| カバレッジ | テストの網羅率。別概念 | |
| Design Debt（デザイン負債） | デザイン負債はシステム外の実装が蓄積した状態 | |
| Atomic Design（アトミックデザイン） | Design System（デザインシステム） | デザインシステムは仕組み全体 |
| Component（コンポーネント） | コンポーネントは粒度を問わない部品 | |
| Atom（アトム） | Molecule（モルキュール） | モルキュールはアトムの組み合わせで機能を持つ |
| Design Token（デザイントークン） | トークンは値。アトムは部品 | |
| HTML 要素 | ブラウザが提供する素の要素 | |
| Component API（コンポーネントAPI） | Variant（バリアント） | バリアントは API が受け取る値の一つ |
| Slot（スロット） | スロットは中身を差し込む口 | |
| Component Token（コンポーネントトークン） | トークンは CSS 経由の調整口 | |
| Component Token（コンポーネントトークン） | Semantic Token（セマンティックトークン） | セマンティックはシステム全体で共有 |
| Component API（コンポーネントAPI） | API は部品が受け取る引数の設計 | |
| Variant（バリアント） | バリアントは定義済みの型 | |
| Component（コンポーネント） | Variant（バリアント） | バリアントは同一コンポーネントの見た目の型 |
| パターン | パターンは部品を組み合わせた定型的な解 | |
| Atom（アトム） | アトミックデザインでの最小単位 | |
| Composition（コンポジション） | Variant（バリアント） | バリアントは定義済みの型を選ぶ |
| Slot（スロット） | スロットはコンポジションを実現する仕組み | |
| 継承 | 既存の部品を拡張する方式 | |
| Custom Property（カスタムプロパティ） | プリプロセッサの変数 | ビルド時に展開され、実行時には残らない |
| Design Token（デザイントークン） | トークンは設計上の概念 | |
| Design Debt（デザイン負債） | 技術的負債 | コードの構造に関する負債 |
| Adoption（導入率） | システムの利用度 | |
| 不具合 | 動作の誤り | |
| Design Handoff（ハンドオフ） | Design QA（デザインQA） | QA は実装後の検品 |
| Acceptance Criteria（受入条件） | 受入条件は完成の判定基準 | |
| Mockup（モックアップ） | モックアップは成果物そのもの | |
| Design System（デザインシステム） | Style Guide（スタイルガイド） | スタイルガイドは見た目の規則をまとめた文書 |
| Pattern Library（パターンライブラリ） | パターンライブラリは部品の一覧 | |
| UI Kit（UIキット） | UI キットはデザインツール上の素材集 | |
| Design Token（デザイントークン） | CSS カスタムプロパティ | トークンを実装する手段の一つ |
| 変数 | 一般的なプログラミングの変数 | |
| Style Guide（スタイルガイド） | スタイルガイドは規則の文書 | |
| Governance（ガバナンス） | Adoption（導入率） | 導入率は実際に使われている度合い |
| Design Review（デザインレビュー） | レビューは個別の成果物への評価 | |
| コーディング規約 | 実装の書き方の規則 | |
| Molecule（モルキュール） | Atom（アトム） | アトムは最小単位で、単独では機能しない |
| Organism（オーガニズム） | オーガニズムは独立したセクションを構成する | |
| Composition（コンポジション） | コンポジションは組み合わせ方の設計思想 | |
| Organism（オーガニズム） | Molecule（モルキュール） | モルキュールは小さな機能単位 |
| Template | テンプレートは内容を持たない骨組み | |
| セクション | HTML の構造上の区画 | |
| Pattern Library（パターンライブラリ） | Design System（デザインシステム） | デザインシステムは運用と指針を含む上位概念 |
| Component（コンポーネント） | コンポーネントは単一の部品 | |
| UI Kit（UIキット） | UI キットはデザインツール上の素材 | |
| Storybook | Storybook はパターンライブラリを構築するツール | |
| Primitive Token（プリミティブトークン） | Semantic Token（セマンティックトークン） | セマンティックは役割で命名 |
| Component Token（コンポーネントトークン） | コンポーネントトークンは部品固有 | |
| ハードコードされた値 | 名前を持たない直書きの値 | |
| Semantic Token（セマンティックトークン） | Primitive Token（プリミティブトークン） | プリミティブは値で命名 |
| Component Token（コンポーネントトークン） | コンポーネントトークンは部品固有 | |
| Semantic Color（セマンティックカラー） | セマンティックカラーは色に限った話 | |
| Single Source of Truth（唯一の情報源） | Design Token（デザイントークン） | トークンは SSOT を実現する手段の一つ |
| Governance（ガバナンス） | ガバナンスは変更の運用ルール | |
| ドキュメント | 文書は正になることもならないこともある | |
| Slot（スロット） | プロパティ | 値を受け取る引数 |
| Composition（コンポジション） | コンポジションは設計方針 | |
| テンプレート | 内容の入る前の骨組み | |
| Storybook | Pattern Library（パターンライブラリ） | パターンライブラリは概念 |
| ユニットテスト | 動作の自動検証 | |
| Design QA（デザインQA） | デザイン QA は検品の工程 | |
| Style Guide（スタイルガイド） | Design System（デザインシステム） | デザインシステムは実装と運用を含む |
| Brand Guideline（ブランドガイドライン） | ブランドガイドラインは identity の規則。Web に限らない | |
| Pattern Library（パターンライブラリ） | パターンライブラリは部品の一覧 | |
| Theming（テーマ切り替え） | Dark Mode（ダークモード） | ダークモードはテーマの具体例 |
| Variant（バリアント） | バリアントは部品ごとの型 | |
| スキン | 見た目だけを差し替える。ほぼ同義で使われる | |
| Token Naming（トークン命名） | BEM | BEM は CSS クラスの命名規約 |
| 変数名 | 一般的なコードの命名 | |
| UI Kit（UIキット） | Design System（デザインシステム） | デザインシステムは実装を含む |
| Pattern Library（パターンライブラリ） | パターンライブラリは実装された部品の一覧 | |
| テンプレート | 完成した画面の雛形 | |
| Variant（バリアント） | Component（コンポーネント） | コンポーネントは部品そのもの |
| 状態（state） | hover、押下、無効など、操作によって変わる見た目 | |
| サイズ | 大きさの型。バリアントとは別の軸で持つことが多い |