Slide 1
Slide 1 text
活きたデザインシステムに
必要な3つのこと
uknmr｜2025-01-23｜エンジニア視点で考えるデザインシステム
Slide 2
Slide 2 text
どうすればデザインシステム
って活きるんでしょう?
Slide 3
Slide 3 text
デザイン + システム = ?
design + system = ?
Slide 4
Slide 4 text
デザインシステム
って言わない
Slide 5
Slide 5 text
3 株式会社 SmartH
3 プロダクトデザイナÇ
3 SmartHR Design System の中の人
@uknmr
ゆー
Slide 6
Slide 6 text
ざっくりとした職歴
ウェブアプリケーションエンジニア
フロントエンドエンジニア
プロダクトデザイナー
Slide 7
Slide 7 text
smarthr.design
Slide 8
Slide 8 text
構成要素を埋めにいかない
目的をはっきりさせよう
Slide 9
Slide 9 text
デザインシステムって何?
Slide 10
Slide 10 text
デザインシステム?
デザイン原則 デザイントークン コンポーネント
/ レイアウトパターン
ドキュメント
Slide 11
Slide 11 text
誰が、どんな風に作ってるのか知ってますか?
Slide 12
Slide 12 text
デザインシステムは
何のために
作るんですか?
Slide 13
Slide 13 text
きっかけは
小さくてもいい
コードが読みにくい・理解しにくい
マジックナンバーが多いとか、適切に定数に切り出されていな
いとか、変数名がおかしいとか
デザイナーと前向きに話せない
コミュニケーションコストが高い、同じ土俵・同じ目線で話せ
てない、なんで話せてない? Figma を介してコミュニケーショ
ンしてない?
もっと多様な環境でも使えるようにしたい
プラットフォームの特性を理解した人が少ない。特定の画面幅
で、特定の挙動しか考慮できていない。
Slide 14
Slide 14 text
“成果” を第一に考える
Slide 15
Slide 15 text
ユーザーの手元で
動くものを作る意識
Slide 16
Slide 16 text
まとめ
デザインシステムって言わない
構成要素を埋めにいかない
“成果” を第一に考える
Slide 17
Slide 17 text
成長や育成? のためのデザインシステムへ