こんにちは。 エキサイトで内定者アルバイト（デザイナー）をしている齋藤です。
今回は、業務の中でデザイントークンを検討して実験的に使用しているので、「デザインの仕組み化」を実現するためのデザイントークンについて記してみたいと思います。
この記事では、デザイン要素のうち、カラーに焦点を絞りご紹介させて頂きます。
デザイントークンとは？
そもそもデザイントークンとは一体何なのでしょうか。AdobeさんのデザインシステムであるSpectrumでは、以下のように定義をされています。
Design tokens — or tokens, for short — are design decisions, translated into data. They’re ultimately a communication tool: a shared language between design and engineering for communicating detailed information about how to build user interfaces.
デザインシステムとは、デザイン上の決定を言語化したものであり、UIを構築する中でデザインとエンジニアリングの間の共通言語として、最終的にはコミュニケーション・ツールになるとの定義がされています。
より具体的なものとして、CSSの変数もデザイントークンの一種であると考えられます。カラーコードやfont-size font-weight margin padding等の数値など、デザインに必要な共通要素を言語化して変数として落とし込むことは、デザイン・エンジニアリング間の共通言語となっていると思います。
なぜデザイントークンは必要なのか
デザイントークンの導入には、デザイン・エンジニアリング間の共通言語を生むこと以外にも様々な利点があると思います。
例えば、デザイン要素の中でも特に数値のばらつき（スペーシングや角丸の値を筆頭に）が解消されることでデザインの一貫性を担保することができたり、デザイン要素の大規模な変更が生じた場合に大本のトークンの値を変えることにより全体に反映できるため作業効率が向上したりなど様々な利点があると思います。
一方で、大規模なプロダクトになればなるほどトークンの管理が複雑化してしまうことや、チーム間での認識のすり合わせが必要になることなどの欠点もあります。
今回デザイントークンを定義する上で意識したこと
今回、カラー周りのデザイントークンを定義する上で、以下のようなことを理念的に意識をしました。
- 再現性
- 一貫性
- カラーコードや数値のズレを解消することで、見た目だけではなく要素内の値の面からもデザインの一貫性を担保する（例: FigmaのVariables活用）
- 非属人的
カラーのデザイントークンを定義してみる
少し前置きが長くなってしまいましたが、実際にカラーのデザイントークンを定義したいと思います。
今回のお題として以下のような、灰色に濃淡のバリエーションを設けたカラーパレットをトークンに落とし込みたいと思います。
デザイントークンの手法
今回は「非属人的」の理念のもと、エンジニアリングの側面だけでなくデザインの側面すなわちデザイナー間における個々人への依存を排除するために、プリミティブトークンとセマンティックトークンの2種類のトークンを定義する手法を用いたいと思います。
この手法はデジタル庁さんのデザインシステムやMicrosoftさんのFluent Designでも用いられている手法です。（Fluent Designの場合、グローバルトークンとエイリアストークンという表現となっています）
プリミティブトークンとは、カラーの場合は16進数のカラーコードに対して個々に名称を与えたものが該当します。
しかし、プリミティブトークンのみですと、どの色をどの場合にどんな優先度で使用するかが不透明のままであり、ここに属人化が発生することになります。
そこで、プリミティブトークンを内包（上書き）するかたちで、セマンティックトークンを定義することにより、プリミティブトークンの用途をより明確に言語化します。
セマンティックトークンに重要なのは、目的・順序・用途などを明記することです。チーム内で統一するためにも命名規則を設けることで、よりその効能を発揮すると思います。
セマンティックトークンの命名規則については、LINEさんのデザインシステムのひとつである「LINE Design System for Messenger」が大変参考になります。（参考にさせていただきました）
今回のお題に沿ってデザイントークンを定義してみる
プリミティブトークン
まずはプリミティブトークンを定義します。
今回のお題では、灰色の同系色に対して11トーンの濃淡のあるカラーパレットでしたので、「Gray」という色名を付与して接頭辞とした上で、濃淡のレベル50から950の数値で表現しました。
セマンティックトークン
次にセマンティックトークンを定義します。
定義する際に、プリミティブトークンとの関係や用途説明を付加してドキュメント化することで、エンジニア・デザイナー間の意思疎通がより円滑になると考えます。
Figmaで実装する
FigmaのVariablesを使用することにより、トークンをFigma内で定義して利用することができます。 また、Variablesではトークンの値として別トークンを参照することも可能ですので、プリミティブトークン、セマンティックトークンの棲み分けもFigma内で実現することが可能です。
詳しい使い方については、過去にお示ししていますので、こちらの記事をご参照ください。
マークアップで使用できるように環境を整備する
マークアップやフロントエンド開発でもトークンが使用できるように、CSSの:rootやEmotionなどのCSS in JSを用いている場合はトークンをまとめたJS・TSファイルを用意することで、開発環境内でもトークンを整備することができます。
おまけ：カラー定義で参考になるサイト
今回、カラーのデザイントークンを定義するにあたり、参考にしたものや参考になりそうなサイトをご紹介します。
Tailwind CSS Color Generator
こちらは、入力したカラーコード（HEX or HSL）をもとにカラーパレットを出力してくれる機能を提供しているサイトです。 国際規格であるWCAG（Web Content Accessibility Guidelines）に準拠したコントラストグリッドも瞬時に出力されるため、アクセシビリティの検討にも有用です。
Primer Prism
こちらもカラーパレットを生成するツールで、GitHubさんのデザインシステムである「Primer Design System」内で公開されているものです。 Tailwind CSS Color Generatorと比べて、より詳細にコントラスト比などを加味したカラー設計が可能です。
さいごに
最後まで読んでいただきましてありがとうございます。
今回はデザイントークンの定義をカラーに絞ってご紹介しました。その他のデザイン要素についても今後記せたらなと考えております。
なお、デザイナー見習い、デザイントークン初心者につき、至らぬ点があろうかと思います。ぜひともご指摘等いただけますと嬉しく思います。
ご精読ありがとうございました。
