デザイントークン
Design Token
色やフォントサイズなどのデザイン要素を、名前をつけて管理する共通の値。
簡単に説明すると
デザイントークンは、アプリやWebサイトで使う色や文字の大きさを、名前をつけたデータとしてまとめたものだよ。 例えば「メインの赤色」や「角の丸み」に特定の名前をつけて保存しておくと、デザイナーもプログラマーも同じ名前を使って作業するんだよ。 色やサイズを後から変更したい時も、まとめたデータを1箇所書き換えるだけで、画面全体の表示が一斉に更新されるんだよ。
名前のヒミツ
Designは設計、Tokenは象徴や最小の単位を意味し、これらを組み合わせた言葉だよ。プログラミングで使う「変数」のように、色や数値に名前をつけて共有する仕組みから名付けられたんだよ。英語ではDesign Tokensと複数形で書かれることもあるんだよ。
くわしく見てみよう！
デザイントークンとは、Webサイトやアプリの画面デザインを作る時に使う色、フォントサイズ、余白などの数値を、名前付きの共通データとして管理する仕組みのことだよ。
ざっくり言うと、デザインのルールをプログラムから読み込める小さなパーツとして保存しておく手法なんだ。
画面を作るとき、デザイナーとプログラマーがそれぞれ別々に色やサイズを数値で指定すると、デザインのズレが発生しやすくなるんだよ。
デザイントークンを使うと、例えばボタンの赤色を「カラー・主色」という名前で共通登録して、両者がその名前を指定して制作を進めるんだよ。
これにより、チーム全体で見た目の統一感を保ちやすくなるんだよ。
ブランドのイメージカラーが変わった場合でも、対応するトークンの値を変更すれば、そのトークンを使っている箇所へまとめて反映できるんだよ。
アプリ全体のボタンや文字の色が自動的に新しい色に切り替わるため、修正の手間やミスを大幅に減らせるんだよ。
大規模なシステム開発や複数の画面を制作する現場で広く活用されているんだよ。