UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates (エヌズクリエイツ) 株式会社 フロントエンドエンジニアの齋藤 (@31mskz10) です。

ここ数年でよく聞くようになった概念に「デザイントークン」があります。
デザインシステムを見ているとよく出てくるのですが、一体どのような考え方でしょうか？

今回は、デザイントークンについて紹介します。

デザイントークンとは？

デザイントークンは、デザインシステムにける基本的な要素を抽象化した最小単位を指し、主に下記のようなスタイルを扱います。

• 色
• タイポグラフィ
• スペーシング（余白）
• シャドウ

デザインシステムが複雑になっていく中で生まれた考え方です。

デザインの一貫性を保つために、SalesforceのデザインシステムであるLightning Design Systemのチームが提唱し、広く認知されていったと言われています。

デザイントークンは方法論

軽く話を聞いただけだと「変数と一緒では？」と思ってしまいます。
もちろん、使うときには変数のような形にはなりますが、もっと根本的な方法論がデザイントークンです。

デザイントークンの発案者の1人であるJina Anneは下記のように発言しています。

Design Tokens are a methodology. IMHO, saying “design tokens are just variables” is like saying “responsive design is just media queries”. It’s a technology-agnostic architecture and process for scaling design across multiple platforms and devices, including native, and more.

— Jina Anne (@jina) November 14, 2018

デザイントークンは方法論です。
「デザイントークンは単なる変数です」と言うことは、「レスポンシブデザインは単なるメディアクエリです」と言うようなものです。これは、ネイティブなどを含む複数のプラットフォームとデバイスにわたってデザインを拡張するための、テクノロジーに依存しないアーキテクチャとプロセスです。

変数は機能の1つでしかありません。

デザイントークンという考え方で、デザインシステム上のさまざまな要素を管理し、その管理をラクに実現する機能の1つとして、変数があるようなイメージです。

デザイントークンの管理方法

デザイントークンは多くのデザインシステム上で、下記2種類に分けて管理されています。

• グローバルトークン（Global Tokens）
  • 文脈に依存しない値のこと
  • 「red」「blue」という名前のトークンなら、どんな文脈でも「red」は赤色を示し、「blue」なら青色を示す
• エイリアストークン（Alias Tokens）
  • グローバルトークンを参照し、特定の用途に紐付けるトークンのこと
  • 「button-primary」という名前のトークンに、グローバルトークンの「red」を紐付けて使用する

使用するときにはできる限りエイリアストークンを使うことで、「この値はこの場所で使う」ということが明確にできます。

例えば、「このデザインシステムにおいて、赤色はこれだ！」という値を「color-red」グローバルトークンに設定します。

そして、「error-text」エイリアストークンに「color-red」を設定することで、エラーテキストにはすべて指定の赤色が使えるようになります。

同じように「primary-text」エイリアストークンにも「color-red」を設定しましたが、やっぱり赤色ではなくプライマリーカラーは青色がいいとなったら、「color-blue」を設定するようにすれば、影響範囲は「primary-text」だけで済みます。

これがちゃんと管理できていないと、赤色から青色に変更した影響でエラーテキストの色まで青色になってしまう可能性があります。

このように、2ステップで管理することで、あとで色を変えたときに意図しない変更をしてしまう可能性が低くなります。

JSON形式での管理

W3C Design Tokens Community Groupが提案するデザイントークンの管理方法は、JSON形式がベースになっています。

具体的には、下記のようなJSONです。

{
  "color": {
    "brand": {
      "primary": {
        "type": "color",
        "value": "#ED6D0F"
      },
      "secondary": {
        "type": "color",
        "value": "#222"
      }
    },
    "background": {
      "default": {
        "type": "color",
        "value": "#FEFEFE"
      }
    }
  }
}

「Style Dictionary」というツールを使えば、このJSONをさまざまな環境向けに変換できます。
CSSやSass、SwiftやXMLなど、さまざまな形式に対応しているので、これで開発側と連携します。

正直、どこまでデザイン側で行うのかは考える必要があると思います。
命名も開発側に影響してくるので、うまく話し合いながらデザイントークンを「育てていく」ような感覚が必要になってきそうです。

デザインと開発の連携

デザインと開発で命名がバラバラだと、あとあと困ることがあります。

デザイントークンを使うことで、色以外にもさまざまなデザイン要素を管理できるようになりますし、それをそのまま開発に引き継げます。

グローバルトークンやエイリアストークンも、デザイン時点から意識することで、変更に強く一貫性のあるデザインになりますし、その状態であれば開発スピードも上がっていくのではないでしょうか。

---

UX / UI のデザインに強いWebシステムの開発と、BtoB Webマーケを支援するWeb制作を提供する
N's Creates 株式会社は、神戸三宮オフィスまで週１出社（それ以外はリモートワーク）できる「デザイナー」「エンジニア」を募集しています。

興味のある方は、カジュアル面談しますので気軽にお問い合わせください！