Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
MUIをベースにしたデザインシステムの構築
Search
KazukiHayase
January 27, 2023
Technology
0
580
MUIをベースにしたデザインシステムの構築
KazukiHayase
January 27, 2023
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
もし今からGraphQLを採用するなら
kazukihayase
12
5.2k
Goでテストをしやすくするためにやったこと
kazukihayase
1
810
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
6.9k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
940
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.3k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.7k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.1k
Hasuraを活用するためのTips集
kazukihayase
0
34k
Other Decks in Technology
See All in Technology
ITエンジニアを取り巻く環境とキャリアパス / A career path for Japanese IT engineers
takatama
3
1.5k
Digitization部 紹介資料
sansan33
PRO
1
3.7k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
1
7.1k
超簡単!RAGアプリケーション構築術
oracle4engineer
PRO
0
110
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
310
What's Next in OpenShift Q2 CY2025
redhatlivestreaming
1
290
Houtou.pm #1
papix
0
520
AWS パートナー企業のテクニカルサポートが日々思っていること 〜そして、4/15 の現場から〜
kazzpapa3
2
410
Roo Codeにすべてを委ねるためのルール運用
pharma_x_tech
1
120
Okayama WordPress Meetup #12 | そのバックアップ、本当に復元できますか? リストアやってみた!
takeshifurusato
0
110
AIエージェントデザインパターンの選び方
almondo_event
0
120
プラットフォームとしての Datadog / Datadog as Platforms
aoto
PRO
1
310
Featured
See All Featured
Building Adaptive Systems
keathley
41
2.6k
KATA
mclloyd
29
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
180
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to Ace a Technical Interview
jacobian
276
23k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building an army of robots
kneath
306
45k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
740
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Transcript
MUIをベースにした デザインシステムの構築 CTOA若手エンジニアコミュニティ 勉強会#1
自己紹介 早瀬和輝 ◦ 2021年4月 BuySell Technologies入社 ◦ フロントエンドエンジニア ◦ React
/ TypeScript / Go / GraphQL / Hasura ◦ Zenn: kazu777 ◦ 趣味:マンガ、アニメ、開発、旅行 2
アジェンダ ◦ 背景 ◦ MUIとは ◦ デザインシステムを導入する目的 ◦ 具体的な取り組み ◦
おわりに 3
背景 1 4
背景 リユースプラットフォームを開発中 5
背景 ◦ 各サービスごとに開発チームが存在 ◦ サービス間でUI・UXを統一する必要がある ◦ プラットフォーム全体のデザインシステムはない 作りたい気持ちはあるが開発コストが大きい 全体のデザインシステムの構築はもう少し未来の話 6
背景 チーム間で共通のコンポーネントライブラリを 使用することで、UI・UXの統一を図る その他のルールや開発は基本的に各チームに委ねる 7 ※今回紹介するのは自分が所属するチーム内のデザインシステムについてであり、 プラットフォーム全体のデザインシステムについてではないです
MUIとは 2 8
MUIとは ◦ React用のコンポーネントライブラリ ◦ Github stars 84.1k(2023/01/21時点) ◦ かなり多い種類のコンポーネントを提供 9
MUIとは 10 https://mui.com
MUIを選択した理由 ◦ コンポーネントが豊富 ◦ デザインがカスタマイズしやすい ◦ Figmaが提供されている 11
デザインシステムを導入する目的 3 12
デザインと実装の同期 ◦ 変更の反映をしやすくする ◦ 運用コストは極力抑える 属人性の排除 ◦ 特定の実装者に依存しない ◦ 実装者による差異を減らす
◦ レビューコストの削減 デザインシステムを導入する目的 13
具体的な取り組み 4 14
具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用
15
具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用
16
カラーコードの集約 カラーコードをピックアップして名前を付け、 定数として定義 17 Figma src/styles/theme.ts
カラーコードの集約 コンポーネント側で指定する際は定数を使用 カラーコードが氾濫せず、型安全に実装できる 18
具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用
19
デフォルトスタイルのオーバーライド オーバーライドしたい場合はトップレベルで指定 20
具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用
21
Typographyの定義 fontSizeやfontWeightは使用するものを厳選 22
Typographyの定義 sizeとweightをconst assertionで定義して、 それらをPropsで受け取るコンポーネントを作成 23
Typographyの定義 MUIのTypographyのimportをeslintで禁止して、 独自定義のTypographyのみ使用する 予期しないsize, weightが使用されることがなくなる 24
具体的な取り組み ◦ カラーコードの集約 ◦ デフォルトスタイルのオーバーライド ◦ Typographyの定義 ◦ Atomic Designの不採用
25
Atomic Designに感じていた課題から不採用 ◦ Organismsの肥大化 ◦ コンポーネント設計の難しさ Atomic Designの不採用 26
ざっくりとしたディレクトリ構成 コンポーネントの分類はシンプルにする Atomic Designの不採用 27
コンポーネントの設計に悩む場面が少なくなる Atomic Designの不採用 28 アプリケーション共通で使用する src/components src/features/*/components Yes No
おわりに 5 29
おわりに ◦ MUIをベースにすることで、 低コストでデザインシステムを構築できた ◦ デザインシステムの導入目的も達成できている デザインとの同期には、ほぼコストがかかってない チーム全員でフロントエンドの開発に取り組めている 30