担当デザイナーの経験則に依存しないデザインシステムづくり

こんにちは。エキサイトでデザイナーをしている齋藤です。

最近、とあるサービスのデザインシステムの構築を担当する中で、他事業部のデザイナーに協力のもと、デザインシステムのユーザビリティテストを実施し、使用感や認知負荷の検証を行いました。

その中で、サービス担当デザイナーの経験則やドメイン知識に依存しないようなデザインシステムに設計する重要性を再認識したので共有します。

そもそもデザインシステムとは

デザインシステムとは、色やタイポグラフィ、余白などの基本のデザイン要素のルールや、汎用的なUIパーツを使い回せるようにしたコンポーネントからなる、UI設計のガイドラインのようなものです。

例えば「色」の場合、カラーコードのトークン化（変数化）で、「こちらの黒は#000000だけれどもあちらの黒は#141414」のようなバラバラな状態を防ぎます。

これにより、見た目の一貫性はもちろん、色の変更が発生した場合にトークンの値を変更するだけで使用先に反映できるため、大規模なリファクタが不要になるといった効率化の実現が可能になります。

しかし、単にトークン化するだけでは経験則に依存してしまう可能性があります。

例えば、灰色を濃淡のレベルに分けてカラーパレットとしてトークン化したとします。

これにより、一貫性や効率性がカラーコードの直指定よりかは担保されましたが、特定のシーンで、どのトークンを用いるべきかの判断はトークンからはできません。

長きにわたってサービスを担当してきたデザイナーと、新たに担当に加わったデザイナーとではサービスに関する知見に差があるため、せっかくのデザインシステムも担当デザイナーの経験則に依存してしまいます。

トークンを2種類に分けることで、トークンの選択が経験則に依存しないようにできると考えます。

1つ目が、原子的な値（色であればカラーコード）を持ったトークンです。（グローバルトークンやプリミティブトークンと呼ばれます）

これが、先にお示ししたカラーパレットとしてトークン化したgray-950やgray-500に当たります。

2つ目が、原子的な値を持ったトークンを包んだトークンです。（エイリアストークンやセマンティックトークンと呼ばれます）

このトークンには、用いるシーンを明示した名前を与えます。

例えば、基本の境界線色にはgray-500を使用するとルールを決め、gray-500を持つcolor-border-baseといったトークンを作成します。

Figmaでの実装方法については以下の記事で詳しくご紹介しています。 tech.excite.co.jp

トークンを使い分けることにより、特定のシーンで、どのトークンを用いるべきかの判断を補助し、サービスに対する知見に依らずにトークン選択ができるようになります。

これにより、表題の担当デザイナーの経験則に依存しないデザインシステムに一歩前進です。

また、「基本の境界線色を変更したい」といった、特定の要素に対して手を加えたい場合にも効果があります。

該当する要素のエイリアストークンを編集することで一括変更が可能な上、関係のない要素の意図しない変更も防ぐことができます。

一方で、エイリアストークンを作りすぎてしまうと管理しなければならないトークン量が増え、メンテナンスコストが上がってしまったり、命名に悩む時間も増えてしまいます。

そのため、境界線をはじめ、文字色や角丸の値など頻繁に指定するものに限るといった、トークン設計のルールづくりが別途必要になります。

トークンの使い分けをするかどうかはサイトの規模や性質にも依りますので、チームの中でよく議論することが必要と考えます。

今回は、担当デザイナーの経験則に依存しないデザインシステムにするために、トークンを2種類に分けて設計する方法をご紹介しました。

今回の気づきは、サービス担当外の他事業部のデザイナーの協力があったからこその賜物です。この場をお借りして感謝申し上げます。

デザインシステムの構築に携わる方の一助となれば幸いです。

ご精読ありがとうございました。