---
title: ChakraUIとデザイントークン
tags:  #chakraui #デザイントークン  
author: [ashphy](https://www.docswell.com/user/ashphy)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/YE9XXYDW73.jpg?width=480
description: Chakra UIのテーマシステムを理解するために、デザイントークンについて知ってもらうための資料です。
published: June 22, 25
canonical: https://www.docswell.com/s/ashphy/5XP11R-chakra-ui-design-token
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/YE9XXYDW73.jpg)

Chakra UIと
デザイントークン
ashphy
@ashphy@mstdn.nere9.help


# Page. 2

![Page Image](https://bcdn.docswell.com/page/GE82263RED.jpg)

今日の目標
• Chakra UIのデザインシステムについて理解し、テーマを自由
に当てることができるようになる
• デザイントークンについて説明できるようになる


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LEL229V27R.jpg)

このボタンの色はどう指定しますか？


# Page. 4

![Page Image](https://bcdn.docswell.com/page/4JM88ZG9JW.jpg)

このボタンの色はどう指定しますか？
#FFFFFF
#2463EB


# Page. 5

![Page Image](https://bcdn.docswell.com/page/PJR556Z9E9.jpg)

Switchも色指定しましょう
#FFFFFF
#2463EB


# Page. 6

![Page Image](https://bcdn.docswell.com/page/PEXKKM93JX.jpg)

色が変わっちゃいました
• Switchの色を変えてみよう
#FFFFFF
#EA580C


# Page. 7

![Page Image](https://bcdn.docswell.com/page/3EK55GPNJD.jpg)

あれ、ボタンの色を変えるの忘れてた
• すべて更新するのは大変！
#FFFFFF
#2463EB


# Page. 8

![Page Image](https://bcdn.docswell.com/page/L73KKNXZ75.jpg)

これらを解消するのがデザイントークン


# Page. 9

![Page Image](https://bcdn.docswell.com/page/87D33W24JG.jpg)

デザイントークンとは
• デザインに関する決定を名前付きで記録・保存するための
唯一の情報源 (Single Source of Truth)
• 名前と値のペア
colors.blue.600
＃2563EB
Name
Value


# Page. 10

![Page Image](https://bcdn.docswell.com/page/VJP4491V78.jpg)



# Page. 11

![Page Image](https://bcdn.docswell.com/page/2EVXXMYRJQ.jpg)

グレーって200色あんねん
Colors - Core concepts - Tailwind CSS


# Page. 12

![Page Image](https://bcdn.docswell.com/page/57GVVG967L.jpg)

色をデザイントークンで定義する
• Core Token (Primitive Token)
• デザインの最小単位となる基本的な値
• 具体的な値（例：RGB値）に紐づく


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4EQ66XW2EP.jpg)

色をデザイントークンで定義する
Colors | Chakra UI


# Page. 14

![Page Image](https://bcdn.docswell.com/page/KJ4446KPJ1.jpg)

デザイントークンでスタイリングする
white
blue.600


# Page. 15

![Page Image](https://bcdn.docswell.com/page/LE144VXXEG.jpg)

画面にはボタンがいっぱい
white
white
white
blue.600
blue.600
blue.600


# Page. 16

![Page Image](https://bcdn.docswell.com/page/GEWXXLNK72.jpg)

blue.600を調整すればすべて変わる
white
white
white
blue.600
blue.600
blue.600
一貫性


# Page. 17

![Page Image](https://bcdn.docswell.com/page/47Z66M3N73.jpg)

これでメデタシ？


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YJ622NX97V.jpg)

あれ、一貫性がなくなってしまった
blue.600
blue.700


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GJ5225XDJ4.jpg)

セマンティックトークン
• UIの「意味」や「文脈」に基づいて名付けられた抽象的な
トークン
bg
colors.blue.600
＃2563EB


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LE3KKN4QE5.jpg)

セマンティックトークンで色を定義
Colors | Chakra UI


# Page. 21

![Page Image](https://bcdn.docswell.com/page/8ED33WQW7G.jpg)

コンポーネントを再定義
bg
bg


# Page. 22

![Page Image](https://bcdn.docswell.com/page/V7P449LXE8.jpg)

これで安心？


# Page. 23

![Page Image](https://bcdn.docswell.com/page/2JVXXMQ37Q.jpg)

ダークモードに対応しよう
どうすれば？


# Page. 24

![Page Image](https://bcdn.docswell.com/page/5EGVVGWYEL.jpg)

ダークモードに対応しよう
.darkを追加してみる
text
text.dark
bg
bg.dark


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4JQ66X36JP.jpg)

ダークモードに対応しよう
値が増えたので指定を忘れるかもしれない
text
text.dark
bg
bg.dark


# Page. 26

![Page Image](https://bcdn.docswell.com/page/K744461M71.jpg)

Conditional Styles
• 特定の状態に応じて使われる値が変わるスタイル設定


# Page. 27

![Page Image](https://bcdn.docswell.com/page/LJ144VGYJG.jpg)

Conditional Styles
• 特定の状態に応じて使われる値が変わるスタイル設定
ライトモードで
使われる値


# Page. 28

![Page Image](https://bcdn.docswell.com/page/GJWXXLK1E2.jpg)

Conditional Styles
• 特定の状態に応じて使われる値が変わるスタイル設定
ダークモードで
使われる値


# Page. 29

![Page Image](https://bcdn.docswell.com/page/4EZ66MZXE3.jpg)

一貫性のあるダークモード対応
• コンポーネントに指定するべき色は1つ
→ ダークモードだけ指定が抜けることがない


# Page. 30

![Page Image](https://bcdn.docswell.com/page/Y7622NZPEV.jpg)

ダークモードだけなんでしょ？
• モバイル対応
→ ディスプレイが小さい、ネイティブアプリ
• TV対応
→ ディスプレイがデカいが遠い
• 高コントラスト対応
→ 公共案件にありがち
• 印刷対応
→ 背景いらない


# Page. 31

![Page Image](https://bcdn.docswell.com/page/G75225WP74.jpg)

ボタンをアクセントカラーにしたい
• Primaryに加えて別の色のバリエーションも追加したい


# Page. 32

![Page Image](https://bcdn.docswell.com/page/9J244NQZ7R.jpg)

Virtual Color
• 色の「役割」や「意味」に名前をつけて、状況に応じて自動的
に適切な色に変化する仕組み


# Page. 33

![Page Image](https://bcdn.docswell.com/page/DEYMMPWNEM.jpg)

本当のボタンのスタイル定義
colorPalette.contrast
colorPalette = orange
colorPalette.solid


# Page. 34

![Page Image](https://bcdn.docswell.com/page/VJNWW59VJ8.jpg)

デザイントークンは色だけ？


# Page. 35

![Page Image](https://bcdn.docswell.com/page/YE9XXY2V73.jpg)

サイズもデザイントークン
4-Point Grid System


# Page. 36

![Page Image](https://bcdn.docswell.com/page/GE822654ED.jpg)

サイズもデザイントークン


# Page. 37

![Page Image](https://bcdn.docswell.com/page/LEL229YV7R.jpg)

Figma Variables
• FigmaでデザイントークンはVaribalesで実装される


# Page. 38

![Page Image](https://bcdn.docswell.com/page/4JM88ZNNJW.jpg)

実際にデザイントークンを使う
• Chakra UI Figma Kit を見てみよう


# Page. 39

![Page Image](https://bcdn.docswell.com/page/PJR556D4E9.jpg)

デザイントークンを使う
• Chakra UI Figma Kit を見てみよう
Figma


# Page. 40

![Page Image](https://bcdn.docswell.com/page/PEXKKM1ZJX.jpg)

デザイントークンを使う
• Chakra UI Figma Kit を見てみよう
<Button
size="md”
variant="solid”
colorPalette="blue”>
Button
</Button>
Figma
Chakra UI


# Page. 41

![Page Image](https://bcdn.docswell.com/page/3EK55G2VJD.jpg)

Size & Space
<Box
w="24"
h="8"
borderRadius="4"
bg="orange.200"
/>
Figma
Chakra UI


# Page. 42

![Page Image](https://bcdn.docswell.com/page/L73KKNYQ75.jpg)

Figmaで定義したデザイントークンを
Chakra UIで利用する
• Export Filtered Variables Plugin
Chakra UIは互換性のあるフォーマット
を採用しているが、規格がまだ定まって
いないので全部は動かない


# Page. 43

![Page Image](https://bcdn.docswell.com/page/87D33W5WJG.jpg)

W3C Design Tokens Community Group
• デザイナー／開発者／ツール間で“共通語”になること
• (将来的には) Figmaで定義したデザイントークンをそのまま実
装に使うことができるようになる


# Page. 44

![Page Image](https://bcdn.docswell.com/page/VJP449GX78.jpg)

まとめ
• デザイントークンはデザインに関する決定を名前付きで記録・保存
するための唯一の情報源
• デザイナ/エンジニア/ツール間での共通言語になる
• セマンティックトークンはUIの「意味」や「文脈」に基づいて名付
けられた抽象的なトークン
• デザイントークンを使うことでデザインの一貫性を保ちやすくなり、
保守性が向上する
全部実践する必要はない


# Page. 45

![Page Image](https://bcdn.docswell.com/page/2EVXXM63JQ.jpg)

参考文献
• W3C Design Tokens Community Group
• https://www.w3.org/community/design-tokens/
• Design tokens ‒ Material Design 3
• https://m3.material.io/foundations/design-tokens/overview
• Building Consistent UIs with Design Tokens | Chakra UI
• https://chakra-ui.com/blog/03-building-consistent-uis-withdesign-tokens


# Page. 46

![Page Image](https://bcdn.docswell.com/page/57GVVGNY7L.jpg)

参考文献
• The Ultimate Spacing Guide for UI Designers
• https://www.thedesignership.com/blog/the-ultimatespacing-guide-for-ui-designers
• Figma tutorial: Intro to variables
• https://www.youtube.com/watch?v=1ONxxlJnvdM
• デジタル庁デザインシステムβ版 v2.4.0
• https://design.digital.go.jp/