2021年8月12日

デザイン

デザイントークンとは?デザインシステムに関わる人が知っておきたいメリットや使い方まで

目次

  1. はじめに
  2. デザイントークンとは?
  3. デザイントークンを使うメリット
  4. デザイントークンを使うための基本ステップ
  5. まとめ

はじめに

デザイントークンとは、デザインシステムにおいて最小単位のスタイルを定義するものです。

その目的としては「デザイナーとエンジニアの共有言語として、一貫性がありつつも柔軟なデザインを可能」とすることで、デザインシステムを今後しっかりやっていきたいという方が抑えておくべき概念です。

今回は、そんなデザイントークンとは何か、そのメリット、使い方についてご紹介します。

デザイントークンとは?

デザイントークンの定義

デザイントークンとはデザインシステムにおいて信頼できる最も基礎的な情報 (Single source of truth)です。
当時Salesforceでデザインシステムを担当していたJina Aneeが提唱したコンセプトです。

デザイントークンの中には最小単位のスタイルの情報が保存されます。
プロダクトの中でよく使われるデザインの要素をパッケージ化し、複数のプラットフォームに横断的に読み込んで使用します。

デザイントークンは色、余白、行間、Elevation(高さ)、フォント、フォントサイズ、シャドウ、アニメーション時間など複数のコンポーネントやテキスト要素にまたいで使われる情報を保存します。

デザイントークンの具体例

具体的な例を使って、デザイントークンとはどういったものなのか見ていきます。

あなたのプロダクトのブランドのプライマリーカラーが#4A90E2だとします。
そうしたら、デザイントークンをこのように設定することができます。

color.primary = #4A90E2

この場合、デザイントークンの名前はcolor.primaryでそのトークンに格納される値が#4A90E2 となります。

普通の変数とデザイントークンの違いは?

color.primary = #4A90E2

これだけを見ると、フロントエンドでスタイルを書くときに、色を設定するときの変数のように見えます。

ですが、デザイントークンは普通の変数よりも抽象度が高いもので、プラットフォームに依存しない情報です。抽象度の高いレイヤーで命名規則に則ってデザイントークンを設定することにより、プラットフォームやフレームワークをまたいだデザインの基礎となる部分の共有言語を作ることができます。

デザイントークンを使うメリット

デザインシステムは生きているシステムです。

毎日修正が加えられたり、違うコンポーネントなどが追加されたりしています。

その中でデザイントークンとはそのデザインシステムを管理するsubatomic levelのデザイン要素を決めることができます。

subatomic levelとは

    Atomic Designをはじめ、デザインをAtoms(原子)、Molecules(分子)、Organismsといったコンポーネントに分けそれらの概念を組み合わせてページを作る設計は広く知られていますが、subatomicというのはatomよりもさらに小さい単位のことを言います。例えばフォント、余白、色などコンポーネントレベルよりもさらに小さいデザイン要素の単位のことを言います。

    Tailwind CSSでも「Utility-first」という名前をつけ、コンポーネントよりもさらに小さい単位のデザイン要素を重要視するCSSフレームワークなどがあります。

Subatomic levelのデザイン要素を定義することにより、デザインシステムに変更を加えるのが簡単になります。

例えば、みなさんのデザインシステムの中にこのようなボタンがあるとします。
この中からデザイントークンになるものを抽出していきます。

実際にデザイントークンを使っている場合とそうでない場合とで、修正に必要なためのステップを比べてみましょう。

デザイントークンなしの場合

  1. 1プライマリーカラーを変えたいという意思決定がされる
  2. 2デザイナーがそれぞれのプラットフォームのエンジニアにその旨を伝える
  3. 3それぞれのプラットフォームのリードエンジニアがそれぞれのプロダクト担当者にプライマリーカラー変更の旨を伝える
  4. 4変更をある程度足並み揃えて行いたいため、すべてのチームと日付を決めて変更日を決定する
  5. 5変更反映

上記のステップの中で、それぞれのプロダクトごとの変更漏れなども出てくるため、1つのカラーの変更だけでもかなり大変になってしまいます。

では、デザイントークンを使用した場合はどうなるでしょうか?

デザイントークンありの場合

  1. 1プライマリーカラーを変えたいという意思決定がされる
  2. 2デザイナーがデザイントークンを変更し、ビルドエンジンがそれぞれのプラットフォームに応じた新しい設定を作成
  3. 3それぞれのプラットフォームのエンジニアがデザイントークンをエクスポートし、取り込み

デザイントークンがない時よりも、シンプルなためミスも少なくすることができます。

デザイントークンを使うための基本ステップ

ここからはデザインシステムを実際に運用しているけど、デザイントークンをどうやって導入したら良いかわからない方のために、デザイントークンを既存のデザインシステムに組み込むための基本ステップをご紹介していきます。

ステップ1: デザイントークンとしてどういう情報を格納するかを決める

まず最初のステップでは、デザイントークンにどういう情報を保存するかを決めていきます。
具体的には、あなたのデザインシステムにおいてどういったトークンが必要なのかを考えて行きます。

デザイントークンは下記のいずれかを 満たしているものが該当します:

何をデザイントークンとして保存するべきか

  • 複数のコンポーネント間で使われているもの
  • 複数のレイアウトで使われているもの
  • 複数のテキストスタイルで使われているもの

例えば下記のようなボタンがあなたのデザインシステム内にあるとしましょう。
image.png (14.5 kB)

このコンポーネントからは以下のデザイントークンが抽出できます。

- 色: #4A90E2, #FFFFFF
- レイアウト: 余白、角丸の設定
- タイポグラフィ: フォント、フォントサイズなど

これらの設定が他のコンポーネントやレイアウトでも使われているものであれば、そちらをデザイントークンとして設定するのが良いでしょう。

ステップ2: それぞれの情報に名前をつける

次にデザイントークンとして保存したい情報に名前をつけて行きます。

ボタンの背景色はプライマリーカラーの透明度 (100%)なので

color.primary.100

という名前をつけるのが良いかもしれません。

また、角丸はsoft, medium, hardと3つのレベルを設け、

radius.hard

という名前にしても良いかもしれません。

このようにあなたのデザインシステムで使われている色や余白、タイポグラフィの設定などsubatomic levelのデザイン要素を分解しそれぞれに名前をつけていきます。

ステップ3: それぞれの情報に名前をつける

ステップ2が終わると、あなたのデザイントークンのコアトークンの定義が終わっており、下記のような形になるはずです。

デザイントークン簡易例: カラー

    Brand
    color.primary.100 = #4A90E2
    color.accent.100 = #D32B75

    Background and Text
    color.surface.100 = #FFFFFF

デザイントークン簡易例: レイアウト

    Radii
    radius.soft = 0.4rem
    radius.medium = xxx
    radius.strong = xxx

    Padding
    space.padding.100 = 0.4rem
    space.padding.200 = xxx

ここまでできればデザイントークン自体は出来上がっており、先程のボタンの再現もデザイントークンを使って作成することができます。

ステップ4: コアトークンにそれぞれエイリアストークンを作成する

ステップ3まででもデザイントークン自体はできているのですが、デザイントークンの中でもいわゆる「コアトークン」と呼ばれているものが定義できている状態です。

この後、さらにデザイントークンを生かすために別の種類のデザイントークン、「エイリアストークン」というものを作成していきます。

「コアトークン」では色味や余白の種類などは定義できましたが、それぞれがどのように デザインの中で使われているかの定義はできていません。

「エイリアストークン」は下記のように設定することができます。

#4A90E2  (格納する情報)
↓
color.primary.100 (コアトークン)
↓
color.cta.default (エイリアストークン)

このように、 エイリアストークンではコアトークンがどんな状況で使われるのかを定義することができます。

上記のエイリアストークンではCTA (CTAボタン)のデフォルトカラーとして使用するということが定義されています。

エイリアストークンを設定することにより、デザインシステムはさらに管理がしやすくなります。

エイリアストークンを設定するとどう違うのか

例えばCTAの背景色のデフォルトを#4A90E2から#D32B75に変える場合、エイリアストークンがないと以下2つの方法で変更を加えることができます。

1. コアトークンの中の色の値を変える
2. 1つ1つのコアトークンを変更後のコアトークンにマニュアルで変更する

1の方法を使用すると、他にも同じ色を使っているところで影響が出てしまうため、2.の方法でやるしかありませんが、それだと結局1つ1つマニュアルで変更する作業が発生してしまいます。

このようなシチュエーションで、エイリアストークンを使用することにより変更作業を短縮することができます。

CTAの背景色を変える場合:

#4A90E2  (格納する情報)
↓
color.primary.100 (コアトークン)
↓
color.cta.default (エイリアストークン)

となっていましたが、color.cta.defaultを別の色に変更する場合は、color.cta.defaultcolor.accent.100など変更後の色に紐づけることで、意図するところ以外に影響することなく、色を変更することができます。

このほかにもエイリアストークンのさらに上位概念、コンポーネントトークンなどを作ることもできますが、まずはシンプルにスタートするためにコアトークンから定義することをお勧めします。

まとめ

以上本日はデザイントークンとは何か、そのメリット、使い方についてご紹介しました!
デザインシステムをこれから作成する、運営中の方の参考になる部分があればぜひご活用いただければと思います。

UIのお仕事に関するご相談

Bageleeの運営会社、palanではUIに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

3

1

AUTHOR

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

taro

taro

xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

CONTACT PAGE TOP