0から作らないデザイントークン

1

⾃⼰紹介 ● kuon ● 開発部 UIデザイナー ● HelpfeelとScrapboxのUIデザイン担当 ● @沖縄 ● 三⽑猫2匹、チワワ、8ヶ⽉の娘を養育中 2

今⽇の話 ● Helpfeelの管理画⾯を⾃社デザインシステムでリニューアル中 ○ ● デザインシステムの構築とデザインリニューアルを両⽅やっている 既存の良くできた技術を取り⼊れると、コスパ良くトークン設計ができた ○ ⾊の話多め 3

今⽇の話 ● UIコンポーネントライブラリとして 開発中 ● ⾃社ツールとしてTatami、 Washituなどがあり、和⾵な名前シ リーズとしてつけた 4

本体側でのレイアウトや独⾃コンポーネントのスタイリング Tailwind CSSを採⽤ ● default themeが豊富に⽤意されてい る ○ https://github.com/tailwindlabs/tailwindcss/blob/ master/stubs/config.full.js ● ⾊以外はほぼそのまま使⽤ 5

• https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js

汎⽤UIコンポーネントの選定 @shadcn/ui(Radix UI)を採⽤ ● 挙動のクオリティが⾮常に⾼い ● コンポーネントごとにnpm installでき る(Radix UI) 6

@shadcn/uiをそのまま使うのは難しい トークン設計がかなりシンプル ● hover, activeなどの定義がない ● success, warningなどのセマンティッ クな⾊定義が少ない 7

@shadcn/uiをそのまま使うのは難しい MUIで構築されていたプロダクショ ンレベルのプロダクトにいきなり適 応するのは難しい 右の画像はMUIのカラーパレット 8

Radix Colorsで拡張する Radix Colors Radix UIと同じ提供元のカラーパレット集 9

Radix Colorsで拡張する ⼀つの⾊に12段階のスケールが⽤意されている 10

Radix Colorsで拡張する それぞれの番号にUIのどの部分に使うものなのか割当がされている 11

Radix Colorsで拡張する 12

Radix Colorsで拡張する 整合性の取れたUIになる ● ⼀貫性がもたらされる ○ インタラクション時の状態の⾒た⽬の 共通化(hover, active, disabled等) ● バッティングが起きにくい ○ 作り込める hoverよりactive(press)時のほうが⾊ が濃くなる ○ ⾼速にUIを さらに... 背景より、その上のコンポーネントの ほうが⾊が濃くなる(テキストを除く) 13

Radix Colorsで拡張する ⼗分なコントラスト⽐が担保される 背景⾊1番〜3番に対して、 ⽂字⾊11番or12番を載せた場合、 APCA基準の最⼩値LC60をクリアする 14

Radix Colorsで拡張する このレベルのカラーパレットを、スタートアップのデ ザイナーが設計するのは⾄難の業 ● かなりのリソースと、試⾏錯誤が必要になってしまう 15

デザイントークンとしての使い⽅ Alias化する ● slateだとどんな⾊でいつ使うかわからないの でneutral ● 他はMUIを参考にしつつ、必要なものだけ Pick UP ○ infoはprimaryと⻘系でかぶるので必要 なしと判断 16

デザイントークンとしての使い⽅ Figmaでの使い⽅ Variablesで定義 17

デザイントークンとしての使い⽅ Tailwind CSSでの使い⽅ ● tailwind.configに適⽤して、tailwindクラス を⽣成する primary-7 primary-3 primary-11 18

デザイントークンとしての使い⽅ Q 番号ベースだと覚えづらくない？ 役割が決まっているなら、それを命名すればいいのでは 19

デザイントークンとしての使い⽅ A 番号管理のほうが現状は都合が良い ● セマンティクスな命名にすると、Tailwind CSS が吐き出すクラス名が変になる ● ○ border-border ○ text-text ○ ？？？ 例外を許容できる ○ border-text ■ ○ ？？？ border-neutral-12 ■ 違和感少なめ 20

デザイントークンとしての使い⽅ あくまで補助線としてルール化することで 柔軟にUIを作り込める ただし... 21

つらみ① アクセシビリティ基準がAPCA ● WCAG基準の4.5:1を満たさない組み合わせが ある ● APCAがWCAG 3.0に採⽤されるか否か、様⼦ ⾒してる⼈が多い 22

アクセシビリティ基準がAPCA WCAG 2.1を満たそうとすると、逆に体験が良くない 背景色3、文字色11 背景色9、文字色白 23

アクセシビリティ基準がAPCA ⼀⾒⼗分なコントラスト⽐があるように感じる 24

アクセシビリティ基準がAPCA 今のところ、WCAG 2.1の基準を優先し て、薄い背景にしているが、ユーザーの FBによっては濃い⽅に変更したい 25

つらみ② 表現⼒が求められる場⾯で困る ● 段階ごとの⾊差が⼤きい Tailwind CSS(上)とRadix Color(下)のパレットを⽐較 この辺激しめ 26

表現⼒が求められる場⾯で困る 段階ごとの⾊差が⼤きい ● ここで困る UI要素に特化して⼿作業で微調整 ● ⾊の微妙な差異をつけたい時 されている ● 美しいグラデーションを微調整したい時 ↑opacityでグラデにしたが、下のグレーが透けてくすむ 27

表現⼒が求められる場⾯で困る 対応策 ● ● 本当に必要な表現なのか再考する ⼤抵は既存のパレットで良くできる before after 28

つらみ③ メインカラーとブランドカラーを ⼀致できない ● Helpfeelのブランドカラーは⻘とオレン ジ ● もちろんRadix Colorsには⽤意されてい ない 29

メインカラーとブランドカラーを⼀致できない 似た⾊を選定して運⽤ ● 今のところ特に問題ない ● 基本的に8、9割はneutralになるはず ● 1割をアクセントとしてprimary, secondaryにする 30

メインカラーとブランドカラーを⼀致できない 似た⾊を選定して運⽤ ● 今のところ特に問題ない ● 基本的に8、9割はneutralになるはず ● 1割をアクセントとしてprimary, secondaryにする ブランドカラーと正確にカラーコードが⼀致していることよりも、アクセシビリ ティが担保されていること、⼀貫性があることのほうが⼤事 31

まとめ 下記の組み合わせで⾼速に⼀貫性のあるUIを 構築できる ● ● 守破離が⼤事 ● 適⽤が難しい部分も出てくるの カラーパレット以外の部分をTailwind で、ある程度運⽤が回ったら⾃ CSS 社に合わせて調整するのが良さ カラーパレットをRadix Colors そう デザインルールが存在しない初期に導⼊しや すい ● ゼロイチやフルリニューアル案件におす すめ 32