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
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
KazukiHayase
January 27, 2023
Technology
0
650
MUIをベースにしたデザインシステムの構築
KazukiHayase
January 27, 2023
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
entのPrivacy機能とgo/astを使って、意図しないDBアクセスを防ぐ
kazukihayase
1
350
go testのキャッシュの仕組みにDeep Diveする
kazukihayase
0
110
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
490
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
540
もし今からGraphQLを採用するなら
kazukihayase
13
5.8k
Goでテストをしやすくするためにやったこと
kazukihayase
1
900
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.6k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
1.1k
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.5k
Other Decks in Technology
See All in Technology
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
140
GitLab Duo Agent Platform × AGENTS.md で実現するSpec-Driven Development / GitLab Duo Agent Platform × AGENTS.md
n11sh1
0
140
AIエージェントを開発しよう!-AgentCore活用の勘所-
yukiogawa
0
160
Kiro IDEのドキュメントを全部読んだので地味だけどちょっと嬉しい機能を紹介する
khmoryz
0
190
セキュリティについて学ぶ会 / 2026 01 25 Takamatsu WordPress Meetup
rocketmartue
1
300
モダンUIでフルサーバーレスなAIエージェントをAmplifyとCDKでサクッとデプロイしよう
minorun365
4
200
AzureでのIaC - Bicep? Terraform? それ早く言ってよ会議
torumakabe
1
540
AI駆動開発を事業のコアに置く
tasukuonizawa
1
180
30万人の同時アクセスに耐えたい!新サービスの盤石なリリースを支える負荷試験 / SRE Kaigi 2026
genda
4
1.3k
SREチームをどう作り、どう育てるか ― Findy横断SREのマネジメント
rvirus0817
0
240
変化するコーディングエージェントとの現実的な付き合い方 〜Cursor安定択説と、ツールに依存しない「資産」〜
empitsu
4
1.4k
Featured
See All Featured
Prompt Engineering for Job Search
mfonobong
0
160
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
99
The Curse of the Amulet
leimatthew05
1
8.5k
The B2B funnel & how to create a winning content strategy
katarinadahlin
PRO
0
270
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Noah Learner - AI + Me: how we built a GSC Bulk Export data pipeline
techseoconnect
PRO
0
110
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
The Invisible Side of Design
smashingmag
302
51k
Side Projects
sachag
455
43k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Scaling GitHub
holman
464
140k
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