【ITニュース解説】What Are Design Tokens, and Why Should You Care?

システム開発において、ウェブサイトやアプリケーションの見た目、つまりユーザーインターフェース（UI）を統一することは非常に重要である。しかし、この一貫性を保つことは多くのプロジェクトで課題となることが多い。例えば、新しい機能を追加する際に、開発者がブランドのメインカラーを使おうとして、既存のボタンからカラーコード「#3B82F6」をコピーして利用したとする。一週間後、別の開発者が似たようなバナーからカラーコードをコピーしたところ、わずかに異なる「#3B83F7」というコードになってしまった。このように、個々の小さな不一致はすぐには大きな問題にならないかもしれないが、これらが積み重なると、アプリケーションのUIは「ほぼ正しい」値の寄せ集めとなり、ユーザーは違和感を覚え、開発者にとっては将来的なメンテナンスが非常に困難になるという負の連鎖を生み出す。

この問題を解決するために登場したのが「デザインシステム」である。デザインシステムとは、デザインに関する全ての決定事項を一元的に管理するための手法で、デザインの「変数」と考えると理解しやすい。具体的には、色、余白のサイズ、フォントの種類やサイズ、角の丸みといった、UIを構成する個々の基本的な要素の値を、名前を付けて定義し、一箇所で管理する仕組みを指す。例えば、先ほどの具体的なカラーコード「#3B82F6」を直接CSSファイルやUIコンポーネントに書き込むのではなく、「color-brand-primary」といった名前の変数として定義し、コード内でその変数を参照するというアプローチをとる。

これらのデザインの変数は、JSON（JavaScript Object Notation）という、プログラミング言語に依存しない汎用的なテキスト形式で保存されることが一般的である。JSON形式は、データを構造化して保存するためによく使われ、ウェブサイト、モバイルアプリ、デスクトップアプリなど、様々なプラットフォームで同じデザインの値を共有できる柔軟性を持つ。

以下に、デザインシステムのJSONファイルの簡単な例を示す。

Copy
1{
2  "color": {
3    "brand": {
4      "primary": "#3B82F6",
5      "secondary": "#EC4899"
6    },
7    "text": {
8      "base": "#1F2937",
9      "subtle": "#6B7280"
10    }
11  },
12  "font": {
13    "family": {
14      "sans": "Inter, sans-serif"
15    },
16    "size": {
17      "base": "1rem",
18      "lg": "1.125rem"
19    }
20  },
21  "spacing": {
22    "sm": "0.5rem",
23    "md": "1rem",
24    "lg": "1.5rem"
25    }
26}

このJSONファイルが、アプリケーション全体のデザインに関する「唯一の正しい情報源」となる。

デザインシステムを導入することは、初期の段階で追加の作業が必要に思えるかもしれないが、長期的に見ると、UI開発の基盤を非常に堅牢で拡張性の高いものにするため、計り知れないメリットをもたらす。

まず、デザインシステムは揺るぎない一貫性をもたらす。アプリケーションの全ての部分、例えばCSSのスタイルやJavaScriptで実装されたコンポーネントが、同じデザインシステムを参照するようになるため、UIは自然と一貫した見た目になる。もしブランドのメインカラーが変わる必要が生じても、このJSONファイル内の「color-brand-primary」の値を一箇所更新するだけで、その変更がアプリケーション全体の関連する箇所に自動的に反映される。これにより、手作業による修正漏れや、わずかな不一致が発生するリスクを完全に排除できる。

次に、デザインシステムはデザイナーと開発者の共通言語となる。デザイナーはFigmaやSketchなどのデザインツールで「spacing-md」のようなデザインシステムを使ってレイアウトを作成し、開発者はその全く同じデザインシステムをコードに正確に実装できる。これにより、デザイナーの意図と開発者の実装の間で食い違いが生じるのを防ぎ、手動での値の変換作業が不要になる。両者が同じ参照点を持つことで、よりスムーズで正確な共同作業が可能になる。

さらに、デザインシステムはテーマ変更を容易にする。アプリケーションにダークモードを追加したい場合や、複数の異なるクライアント向けにブランドイメージ（ホワイトラベリング）を変更したい場合でも、デザインシステムがあれば非常に簡単に対応できる。それぞれのテーマやブランドごとに異なるデザインシステムファイルを作成し、アプリケーションの構造は変えずに、使用するデザインシステムの値だけを切り替えるだけで済む。これにより、大規模なコードの書き換えなしに、多様な見た目のバリエーションを提供できるようになる。

もしあなたがTailwind CSSのようなユーティリティファーストのCSSフレームワークを使った経験があるなら、デザインシステムの概念には既に馴染みがあるかもしれない。Tailwind CSSのtailwind.config.jsファイルにあるthemeオブジェクトは、実質的にデザインシステムそのものとして機能する。bg-blueやp-1といったクラス名を使うとき、あなたは実際にはデザインシステムを参照している。Tailwind CSSが提供するものは特定のフレームワークに特化しているが、専用のデザインシステムを構築する最大の利点は、これらのデザインの決定を特定のフレームワークから切り離し、ウェブ、モバイル、デスクトップなど、必要なあらゆるプラットフォームや技術で再利用できる点にある。

では、JSONファイルで定義されたデザインの決定事項を、実際にコードで使えるCSSなどに変換するにはどうすればよいのだろうか。このような課題を解決するために、@fylgja/props-builderのようなツールが存在する。これは、JavaScript開発でよく使われるNPMパッケージの一つで、デザインシステムファイルを受け取り、それをCSSカスタムプロパティ（CSSの変数）、Sass変数、JavaScriptオブジェクトなど、様々な形式にコンパイルする機能を提供する。このツールを使うことで、開発者はデザインの決定に関する「唯一の正しい情報源」を維持しながら、プロジェクトが必要とするどんな形式でもそのデザインの決定を利用できるようになる。Props Builderは、デザインシステムを開発ワークフローに完全に統合するための、最終的かつ重要なステップとなる。このようなツールを活用してデザインシステムを取り入れることは、単にスタイルを整理するだけでなく、UI開発においてより一貫性があり、拡張可能で、協調的な未来に投資することに他ならない。