世界一わかりやすいデザイントークンの話

UXデザイナーのけんじです。

「デザインシステム」という言葉も大分一般的に浸透してきましたが、近年では「デザイントークン」という言葉もよく耳にするようになってきたのではないでしょうか。

デザインシステムやデザイントークンの概念は、中規模以上のプロジェクト、特に一つのブランドを継続的にアップデートしていくような場合に、そのデザイン原則をより強固なものにするために、必要になってくるものと言えます。

とはいえ、「デザイントークン」という言葉は知っていても、実はよく理解できていない、という方もおられるかもしれません。

そこでここでは、世界一わかりやすいデザイントークンのお話をしようと思います。

小学生が塗り絵をします

まず、小学生に風景画の塗り絵をしてもらう場面を考えます。

ただし、使うのは「夢の色鉛筆120色セット」です。

するとどうなるかというと、それぞれのほとばしる創造性（クリエイティビティ）を発揮し、存分に色塗りしてくれることでしょう。

青空だったり、夕暮れや夜のイメージだったり、中には現実にはあり得ない配色で塗る小学生もいるかもしれません。

良いんですよ！ど紫で空を塗ったって。
僕の大好きな漫画家さんも、よくエキセントリックな空の色を描いておられます。
個々の作品として捉えるのであれば、どれも全く問題ありません。

グループワークの場合はどうか？

では、これがグループワークとして、一つのテーマ、例えば「夏の青空」というテーマに沿って、みんなで一枚の絵を塗る場合はどうなるでしょうか？

すると、おそらく次のような問題が出てくるのではないかと思います。

• 「途中から田中くんが塗ったら色が変わりました」

• 「青って200色あんねん」

これらは、主に認識の違いによる問題で、特に「色」というものは、それぞれに「赤色」「青色」「なんとかグリーン」みたいな名前は付いていますが、それを聞いて思い浮かぶイメージは人それぞれだったりします。

なぜ認識がズレるのか？

色の名前というものは言ってしまえば識別可能な記号でしかなく、その定義は意外と曖昧です。
もちろん、カラーコードのように厳密に決まっているものもありますが、そんなもの知ったことではない小学生にとっては、「色の名前」という集合体の中から「夏の青空」という自分のイメージのままに選択したに過ぎません。

どうすれば認識を合わせられるか？

では、グループ内で認識を合わせて、一貫したトーンで色塗りをするにはどうしたら良いかを考えてみましょう。

それにはまず、色の名前に役割を与えて、「空の色」のように、それを使う場所と色の組み合わせを定義することが有効です。

これにより、空は「空の色」で塗ります、という誰もがわかりやすいルールで、グループで一貫した色塗り（デザイン）を行うことができ、引き継ぎも容易になります。

例えばグループごとにテーマを分け、別のグループは「秋の夕暮れ」というテーマで色塗りをするような場合でも、「空の色」というシールを貼り替えてあげるだけで、同じルールで運用することができます。

デザイントークンに置き換える

さて、この小学生の塗り絵に適用したルールをデザイントークンに置き換えると、

• 色鉛筆120色セットにあるそれぞれの色の名前が「Primitiveトークン」

• 色の名前に役割を与えた「空の色」が「Semanticトークン」

と定義することができます。

このように、デザイントークンとは、

デザインを構成する最小の要素であり、デザインの一貫性を保ち、他者との共通認識を補強する仕組み

と言えるのではないかと思います。

以上、デザイントークンとはなんぞや？と聞かれたら、「小学生の塗り絵ルール」と考えると、もしかしたらわかりやすいかもしれません。

おわり。