Kina

Design System for DE LIKER

Kinaのデザイントークン設計について

Kinaでは、セマンティックトークンの値として「kina」「juno」「nozo」といった、特殊な名前付けをしています。この設計についての覚書です。

セマンティックトークンの命名の難しさ

セマンティックトークンの設計で特に難しいのが尺度の「名付け」です。
例えばテキストの大きさを例に考えると、基準となるサイズをTシャツのサイズになぞらえて「M」と名付け、それより1つ大きいものを「L」としたとします。その後、MとLの間のサイズが欲しくなったとき、なんと名付ければ良いでしょうか？

このような通称Tシャツサイズ問題から逃れるために、実際のサイズを名付けに使ってしまう(1remを1、2remを2といった具合に)やり方もあります。しかし、こちらは今度サイズを変更したくなったときに、改修方法によっては2が指す値が1.8rem になったりしてしまい本質的な問題解決にはなっていません。

そもそも実際に指す値が変わることで名付けの意味が変わってしまうようでは、セマンティックトークンとしての役割を果たせていません。

セマンティックトークンは順序尺度である

Kinaでは、まず尺度水準にヒントを見出しました。尺度水準はいくつかの尺度の定義ですが、ここでは「名義尺度」「順序尺度」「間隔尺度」の3つをとりあげます。

名義尺度
名称のみに意味があり、順序はない。
例: 血液型
順序尺度
名称に順序があり、均等な間隔はない。
例: Tシャツのサイズ
間隔尺度
名称に順序があり、均等な間隔がある。
例: 温度
この区分でいうと、今回解決したいセマンティックトークンの尺度は「順序尺度」にあたります。それなのに、Tシャツサイズという本来Tシャツ用に設計された尺度を借りてきてしまったのでこの問題が起きるし、プリミティブトークンの間隔尺度の名前を借りてこようとしたために問題が起きるのです。

kから始める命名

ここまでを踏まえると、実はデザインシステムはそれ自体に独自のセマンティックトークンの順序尺度を持つ必要があるのではないか、という結論に至りました。

では、その尺度はどうやって設計すれば良いのでしょうか。
Kinaでは電子殻にヒントを得ました。有名な逸話として、ボーアが水素原子の電子殻を設計したとき、それぞれの電子が入る殻を名付ける必要があったのですが、内側からK, L, M, …… と名付けました。その理由は、当時時点ではK殻が最も内側にあるかわからず、将来的にその内側にも殻があることがわかったときにJ, I, H, …… と名付けられるように、というものでした。

これにヒントを得て、Kinaではセマンティックトークンの順序尺度を、現時点で中心となりそうなものについて「k」から始まる名前で設計することにしました。

ただし、セマンティックトークンはよく使うもののため、ただ「k」から始まる名前をつけるだけではなく、実際に使うときに「k」から始まる名前を見て思い出せるような名前をつける必要があります。
また、結局KとLの間に値が欲しくなると同じ問題が発生してしまうため、4文字程度の名前をつけることにしました。

例えば現時点だと、使っているのは以下のとおりです。

見て分かる通り、KとLの間に必要になっても、辞書順を考慮しある程度増やすことができます。
これで、ある程度順序尺度としての拡張性を持たせつつ、セマンティックトークンの名前をつけることができるようになるのではないかと考えています。

余談ですが、kinaを選んだのはiがkに近く、kの中でもある程度拡張しやすいと考えたためです。

まとめ

Kinaではセマンティックトークンの命名として順序尺度としての拡張性を持たせるため、kから始まる4文字程度の言葉を独自に定義し、それを使用することにしました。