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
600
MUIをベースにしたデザインシステムの構築
KazukiHayase
January 27, 2023
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
450
もし今からGraphQLを採用するなら
kazukihayase
13
5.4k
Goでテストをしやすくするためにやったこと
kazukihayase
1
830
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.2k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
1k
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.3k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.3k
Other Decks in Technology
See All in Technology
知られざるprops命名の慣習 アクション編
uhyo
11
2.5k
ドキュメントはAIの味方!スタートアップのアジャイルを加速するADR
kawauso
3
380
JavaScript 研修
recruitengineers
PRO
3
180
Android Studio の 新しいAI機能を試してみよう / Try out the new AI features in Android Studio
yanzm
0
270
Backboneとしてのtimm2025
yu4u
4
1.5k
[CV勉強会@関東 CVPR2025 読み会] MegaSaM: Accurate, Fast, and Robust Structure and Motion from Casual Dynamic Videos (Li+, CVPR2025)
abemii
0
190
Preferred Networks (PFN) とLLM Post-Training チームの紹介 / 第4回 関東Kaggler会 スポンサーセッション
pfn
PRO
1
220
Claude Code x Androidアプリ 開発
kgmyshin
1
580
あなたの知らない OneDrive
murachiakira
0
240
どこで動かすか、誰が動かすか 〜 kintoneのインフラ基盤刷新と運用体制のシフト 〜
ueokande
0
190
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
130
mruby(PicoRuby)で ファミコン音楽を奏でる
kishima
1
240
Featured
See All Featured
Music & Morning Musume
bryan
46
6.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
480
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
How to Ace a Technical Interview
jacobian
279
23k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Review Best Practice
trishagee
70
19k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
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