デザイントークン

定義

デザイントークンは、色や間隔、角丸のように画面のあちこちで繰り返し使う値に名前を 付けておき、実際のコードではその名前で参照するやり方です。15px や青色のコード値を そこかしこに直接書き込むのではなく、--space-md や --color-accent といった名前を 用意して、それを指し示すようにします。こうしておけば、名前の後ろにある値を一つ 変えるだけで、そのトークンを使っているすべての箇所がまとめて一緒に変わります。値と、 その値が使われる場所とを名前という一枚の層で切り離し、散らばった数値を一つの中央 リストにまとめること。それがデザイントークンの核心です。

なぜ重要か

ハードコードされた値が画面のあちこちに散らばっていると、あとで何かを変えるたびに その値を使ったすべての箇所を一つずつ探して直さなければならず、一つでも見落とせば 画面が微妙にちぐはぐになります。トークンを使えば、ダークモードへの切り替えも、 ブランドカラーを変えるリブランディングも、複数プロダクトのスタイル統一も、すべて 一か所だけ手を入れる作業に変わります。さらに名前そのものが値の意図を説明して くれるので、--color-accent を見れば、それがアクセントカラーだという役割をコードを 読むだけで理解できます。個々の値を覚える作業が、意味を持ったシステムを扱う作業へ 変わると、一緒に働く複数の人が同じルールの上で一貫した画面を作れるようになります。 結局トークンは、散らばった決定を一つのリストに集め、デザインを個人の勘ではなく チームで共有する約束へと変えてくれるのです。

よくある間違い

• トークンの名前に色や数値をそのまま埋め込んでしまうことです。--blue-500 では なく、役割を込めた --color-accent のように付ければ、あとでアクセントを緑に 変えても、名前と値が食い違って混乱を招くことがありません。
• トークンを用意しておきながら、急ぐときに元の数値をまた直接書いてしまうことです。 例外が一つ二つと積み重なるとトークンの意味が崩れ、一か所だけ変えれば済むという 利点が失われ、結局また散らばった値を探し回るはめになります。
• 最初からトークンを作りすぎてしまうことです。使いもしない値まで先に名前を付けて おくと、どのトークンを選べばよいのか逆に迷うので、実際に繰り返し現れる値が 見えてきたときに一つずつトークンへ昇格させるほうが管理しやすくなります。

実務のヒント

• トークンは、何の値かではなく、どんな役割かで名前を付けましょう。アクセント、 背景、境界のように使いどころを表す名前にしておけば、ダークモードやリブランディングの ときに値だけ入れ替えても名前と意味がずれず、変更がずっと安全で速くなります。
• このツールで学んだ間隔、色、角丸、影といった値を、一つずつトークンにまとめて みましょう。ばらばらに覚えた概念を名前の付いたシステムへとつないだ瞬間に、 散らばっていた知識が、実際に再利用できる自分だけのデザインシステムとして完成します。
• 元の値と、画面で参照する名前とを二つの層に分けておくと、管理がぐっと楽になります。 基本の色や間隔の値を下の層に置き、アクセントや本文といった役割の名前がそれを 指すようにすれば、ダークモードのように役割だけをつなぎ直す変更を、とてもきれいに 処理できます。

関連概念