デザイントークンについて調べてみたけど、必要なのはデザインシステムでは?
と思い、いろいろ調べてみたときの備忘録。というか、走り書きレベルのメモ書き(*´ω`*)
ざっと眺めた実例はこのあたり。
多くのアプリやWebサービスを作っているけど、毎回試行錯誤している気がする。。
個人開発だとしても自分なりの指針/方針などを整理しておくと、
楽に作れそうな気がするので、決めておくポイントなどを理解できるといい(*´ω`*)
デザインシステムとは
デザインシステムとは、企業のビジョンやブランドアイデンティティなどから
「良いデザイン」を定義するデザイン原則などのドキュメント、それらを具体的にデザイン・実装するためのUIパターンやコンポーネント などを備えた一連のリソースのことを指します。
引用元: デザインシステムとは?内容や作り方、運用方法を解説します | in-Pocket インポケット
いろんな実例を見ているけど、決まったフォーマットみたいなものはなく、
それぞれ必要なものを用意している感じ。
デザインシステムの構成要素
- デザイン原則 ... 意図/方針をまとめた文書
- スタイル ... 色/形/タイポグラフィなどの基礎
- コンポーネント ... ボタン/フォームなどのUIパーツ
- パターン ... コンポーネントを使った配置
- テンプレート ... パターン/コンポーネントを使った画面テンプレート
原則やスタイルは似ている部分が多いけど、
コンポーネント以降は、各サイトで粒度に個性がある。
ターゲットユーザや作るもの、ポリシーなどによって、
良いデザインや目指す方向性が異なるので、それぞれ違いがあっておもしろい。
スタイル
プリミティブな要素。token化して利用すると便利。
- 色/カラーパレット
- タイポグラフィ
- アイコン/ロゴ/イラスト
- レイアウト/サイズ/余白
- アニメーション/Motion
- Shape(形)/Corner Radius(角丸)
- Evevation(高さ)/Shadow(影)
スタイルは2つに分類できる気がする。
していないところも多い。
- primitive style ... 利用できる要素
- semantic style ... 意図を付与したprimitive styleのalias
イメージとしては、以下のイメージ
- primitive: color pallet ... 利用できる色のすべて(color-red-100とか)
- semantic: primary/brand color ... 意味/用途を含む色名(color-primaryとか)
なので、primitiveのバリエーションは、
以下のように用途を含めず命名する感じ
- color ... 100/200/.../800/900/950
- fontWeight ... 100/200/.../800/900/950
- size ... 1/2/4/8/16/24.../64
- shadow ... small/medium/large
一方、semanticのバリエーションは、
以下のように用途も含めて命名する感じ
- color ... primary/secondary/success/danger/...
- text ... title/body/label/display
色
利用できる色を定義している感じ。
主には、
- primitive: 利用する色とそのバリエーション
- red-50/100/200/300/.../900/950 etc.
- semantic
- primary/brand color
- status/inform color (success/danger etc.)
- text color
- background color
- overlay color
- etc...
どこまでスタイルのColorで決めて、
どこからレイアウトやタイポグラフィなどの別スタイルや、
コンポーネントなどで決めるかは各サイト異なるっぽい。
タイポグラフィ
フォントの種類(フォントファミリー)やフォントサイズなどの文字関連。
主には、以下をスタイルごとに決めている感じ。
- フォントの種類(font-family)
- フォントの大きさ(font-size)
- フォントの太さ(font-weight)
- 行の高さ(line-height)
- 文字間隔(letter-spacing)
- 文字の色(text-color)
スタイルは以下のような種類で、
それぞれバリエーション(1/2/3, S/M/L)がある感じ。
- Headline/Heading
- Title
- Body
- Label
- Display
- Help Message
これもどこまでここで決めるかは、サイトそれぞれ。
font-familyだけとかもある。
また、primaryはフォントサイズのみで、
semanticはどこで使うかを含めてスタイルとして定義。
というパターンもある。
アイコン/ロゴ/イラスト
利用できるアイコンやロゴ、イラストなどの、
画像リソースをまとめた部分。
新しいリソースを作る際の指針などが書かれている場合もある。
レイアウト/サイズ/余白
レイアウト関連をまとめた部分。
余白やサイズ関連とも統合されている場合もある。
スクリーンサイズやBreakpointのサイズなども書かれている場合も。
サイズとしては、4の倍数を利用した4 Porint Grid Systemがよいっぽい。
アニメーション/Motion
AnimationやMotion関連をまとめた部分。
主には、以下それぞれを定義していたり、
タイポグラフィのようにまとめて名前付けしていたりする。
- easing (easing/ease-out/ease-in/ etc.)
- duration (quick/normal/slow/ etc.)
Shape(形)/Corner Radius(角丸)
角の丸み(corner-radius)など図形についてまとめた部分。
丸みだけでなく、多角形(cut)なども含んでいる場合も。
あるいは、画像のアスペクト比などもまとめている場合もある。
Evevation(高さ)/Shadow(影)
影(box-shadow)や影で表現する高さのバリエーションについてまとめた部分。
Evelationの段階や各段階で使う影のパターンが定義されている。
コンポーネント
ボタンとかフォームのテキストフィールドとか、
UIコンポーネントカタログ的な感じ。
ボタンなどの状態があるものについては、
各状態について表現されている。
- normal
- active
- disable
- hover
- focus
- loading
- etc.
また、どういったときにどのボタンを使うかなども記載されている。
- スタイル: normal/outlined/text/etc.
- variant: primary/success/danger/etc.
- サイズ: normal/small/large/wide/etc.
パターン
検索ボックスとかコンポーネントの組み合わせを
パターンとして整理した感じ。
コンポーネントの配置や余白などもまとめているサイトもある。
テンプレート
画面やダイアログなど、パターンがさらに広くなった感じ。
ログイン画面/一覧画面/詳細画面とかをテンプレートとして整理。
おまけ
Font Weightのバリエーション
num | design token/OpenType | css |
---|---|---|
100 | thin, hairline | |
200 | extra-light, ultra-light | |
300 | light | |
400 | normal, regular, book | normal |
500 | medium | |
600 | semi-bold, demi-bold | |
700 | bold | bold |
800 | extra-bold, ultra-bold | |
900 | black, heavy | |
950 | extra-black, ultra-black |
- Font weight | Design Tokens Format Module
- font-weight - CSS: カスケーディングスタイルシート | MDN
- OS/2 - OS/2 and Windows metrics table (OpenType 1.9) - Typography | Microsoft Learn
以上!!
実装する際のカタログや知見の集約場所として重宝しそうな感じ。(*´ω`*)
Themeのように、メインカラーなどの特定の部分はアプリごとに決めるけど、
大枠などは整理しておいて、発見した良いデザインをまとめておくとよいかもしれない(*´ω`*)
参考にしたサイトさま
- デザインシステム実例
- デザインシステムについて
- 便利そうなツール
- 参考になりそうな書籍