16pxの次が24pxで困った話 ー Radix UIから学んだデザイントークンの考え方

『初登壇大歓迎！学生エンジニアの学びのアウトプットLT』で発表した資料です

Transcript

1. 16pxの次が24pxで困った話 Radix UIから学んだデザイントークンの考え⽅ 初登壇⼤歓迎︕学⽣エンジニアの学びのアウトプットLT 2026/04/17 (金)
2. p-5 = ?px
3. Tailwind CSS p-1 → 4px p-2 → 8px p-3 → 12px p-4 → 16px p-5 → 20px ★ p-6 → 24px p-7 → 28px p-8 → 32px p-9 → 36px
4. --space-5 = ?px
5. Radix UI --space-1 → 4px --space-2 → 8px --space-3 → 12px --space-4 → 16px --space-5 → 24px ★ --space-6 → 32px --space-7 → 40px --space-8 → 48px --space-9 → 64px
6. 16pxの次が24pxで困った話 Radix UIから学んだデザイントークンの考え⽅ 初登壇⼤歓迎︕学⽣エンジニアの学びのアウトプットLT 2026/04/17 (金)
7. 今⽇の結論 デザイントークンには、 あえて作らない値がある。 そこに意図がある。
8. ⾃⼰紹介 まてぃ / akio 神⽥外語⼤学 学部4年 27卒 Twitter · GitHub @akiomatic #初登壇 #Minecraft出⾝SWE #フロントエンド #UI/UX #a11y #マジ価値
9. 問題提起 Radix UI Headless UI コンポーネントライブラリ for React アクセシビリティ カスタマイズ⾃由 shadcn/ui のコアに採⽤
10. 問題提起 20px デザイン側 ある 開発側 ない
11. 問題提起 どれを使う︖ --space-4 16px 最も近い ⼩さめの値 20px ハードコード --space-5 24px 最も近い ⼤きめの値
12. 問題提起 どれを使う︖ --space-4 16px 最も近い ⼩さめの値 20px ハードコード --space-5 24px 最も近い ⼤きめの値
13. 問題提起 どれを使う︖ --space-4 16px 最も近い ⼩さめの値 20px ハードコード --space-5 24px 最も近い ⼤きめの値
14. デザイントークンの考え⽅ なんで 20px がないんだろう︖
15. デザイントークンの考え⽅ linear non-linear • ⼀定刻みで増える • 細かく調整しやすい • 迷いが⽣まれやすい • 段階的にジャンプ • 選択肢が絞られる • 迷いを減らしやすい 4 8 12 16 20 24 28 32 36 4 8 12 16 24 32 40 48 64
16. デザイントークンの考え⽅ ¹ Nathan Curtis · "Space in Design Systems" · Medium / EightShapes · 2016 · medium.com "When do I use 24 or 28? I dunno."¹ 16 20 24 28 32 36 ? 「24と28、どっちを使えばいいの︖わからん」
17. デザイントークンの考え⽅ "When do I use 24 or 28? I dunno."¹ border-radius: 24px border-radius: 28px ? 「24と28、どっちを使えばいいの︖わからん」 ¹ Nathan Curtis · "Space in Design Systems" · Medium / EightShapes · 2016 · medium.com
18. デザイントークンの考え⽅ "De-emphasize to emphasize"² 強調したいなら、周りを⽬⽴たなくしろ ² Adam Wathan & Steve Schoger · Refactoring UI · 2018 · refactoringui.com
19. デザイントークンの考え⽅ 引き算することで、 ⼀貫性と判断しやすさが⽣まれる
20. まとめ デザイントークンには、 あえて作らない値がある。 そこに意図がある。 このスライドは Claude Cowork と共に作成しました