デザインシステムの構築方法

デザインシステムの5つのレイヤー

デザインシステムは階層的に構成されます。最も基礎となるのはトークンレイヤーです。色、間隔、フォントサイズなどの基本単位を定義し、CSS変数として管理します。

次に来るのはコンポーネントレイヤー。ボタン、入力フィールド、カードといった再利用可能な部品を構築します。その上に、ページレイアウト用のパターンレイヤーがあります。そして最後に、具体的なページテンプレートとアプリケーションの実装層が存在します。

• トークンレイヤー（色、サイズ、フォント）
• コンポーネントレイヤー（UI部品）
• パターンレイヤー（レイアウト組み合わせ）
• テンプレートレイヤー（ページ単位）
• アプリケーション層（実装）

CSS変数による統一管理

ダークモード実装の鍵は、CSS変数（カスタムプロパティ）の活用です。これにより、色の定義を一箇所で管理できます。

:rootで定義したCSS変数を使うことで、デザイナーと開発者の間での認識のズレが減ります。例えば、background-color: var(--color-bg-primary)とすれば、その値が何かは変数定義を見るだけで分かります。

さらに重要なのは、アクセシビリティです。WCAG AA基準では、テキストと背景のコントラスト比が4.5:1以上である必要があります。CSS変数を使えば、色の変更時にこの比率を自動的にチェックできるツール統合も可能になります。

コンポーネント設計の実践的アプローチ

コンポーネントを設計する際は、3つの原則を忘れずに。まず、単一責任の原則。1つのコンポーネントは1つの役割だけを持つべきです。

次に、組み合わせ可能性です。小さなコンポーネントが組み合わさって大きな部品になるように設計します。ボタンだけでなく、ボタングループ、ボタンツールバーなどのバリエーションも定義しておくといいでしょう。

そして、制約の明確化。何をカスタマイズできて、何ができないのかを明確に示しておくことで、チーム全体での使用の一貫性が保たれます。幅は可変だが、高さは固定、といった制約を文書化することが大切です。

ドキュメンテーションの構成

デザインシステムは使われなければ意味がありません。だから、充実したドキュメンテーションが欠かせません。

最初に必要なのは、哲学と原則です。なぜこのシステムが存在するのか、どんな価値観で設計されているのかを説明します。次に、トークン定義のリファレンス。色一覧、フォントサイズ、間隔のすべてを視覚的に示します。

そして、各コンポーネントの使用ガイド。何をすべきで、何を避けるべきかを示す。さらに実装例を添えることで、開発チームがすぐに使えるようになります。