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
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識し...
Search
Takuma Kajikawa
January 22, 2025
Technology
3
710
デザインシステムを始めるために取り組んだこと - TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会
「TechTrain x ゆめみ ここを意識してほしい!リファクタリング勉強会」のLT資料です
https://yumemi.connpass.com/event/341090/
Takuma Kajikawa
January 22, 2025
Tweet
Share
More Decks by Takuma Kajikawa
See All by Takuma Kajikawa
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
110
副作用と戦う PHP リファクタリング ─ ドメインイベントでビジネスロジックを解きほぐす
kajitack
3
570
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
1.2k
エラーって何種類あるの?
kajitack
5
450
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
770
ドメインイベントを活用したPHPコードのリファクタリング
kajitack
2
1.5k
例外処理を理解して、設計段階からエラーを「見つけやすく」「起こりにくく」する
kajitack
17
5.6k
責務を分離するための例外設計 - PHPカンファレンス 2024
kajitack
13
3k
Figmaで進化するデザイナーとエンジニアの連携 FoF Tokyo 2024
kajitack
0
110
Other Decks in Technology
See All in Technology
GISエンジニアよ 現場に行け!
sudataka
1
140
データモデリング通り #2オンライン勉強会 ~方法論の話をしよう~
datayokocho
0
190
九州の人に知ってもらいたいGISスポット / gis spot in kyushu 2025
sakaik
0
200
「Roblox」の開発環境とその効率化 ~DAU9700万人超の巨大プラットフォームの開発 事始め~
keitatanji
0
140
AI時代の大規模データ活用とセキュリティ戦略
ken5scal
1
260
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
330
薬屋のひとりごとにみるトラブルシューティング
tomokusaba
0
390
20250807 Applied Engineer Open House
sakana_ai
PRO
2
610
Claude Codeは仕様駆動の夢を見ない
gotalab555
23
7.2k
AIに目を奪われすぎて、周りの困っている人間が見えなくなっていませんか?
cap120
1
710
生成AIによるソフトウェア開発の収束地点 - Hack Fes 2025
vaaaaanquish
34
16k
Kiro と Q Dev で 同じゲームを作らせてみた
r3_yamauchi
PRO
1
120
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Speed Design
sergeychernyshev
32
1.1k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Music & Morning Musume
bryan
46
6.7k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Transcript
デザインシステムを始める ために取り組んだこと 梶川 琢馬 @kajitack
梶川 琢馬 (Takuma Kajikawa) 2023年に中途入社、バックエンドとフロントエンド半々ぐらい。 趣味はトライスロンやランニング。 TechBowl社内でもランニングを報告するチャンネルがあります。 株式会社 TechBowl プロダクトエンジニア
@kajitack
TechTrainについて
業界最強のメンター陣が ありとあらゆる お悩みにお答えします。 大手上場企業やベンチャー企業の最前線で活躍している 60社140名以上のトップエンジニアが在籍。 キャリアのことも、技術のことも、まとめて相談できます。 あなたのロールモデルがきっと見つかります。
テクノロジーを支える、 すべての人のターミナルに。
TechTrainについて Railway フロントエンド ネイティブアプリ データサイエンス その他 バックエンド 実務レベルの経験が積める、 プロ監修の超実践型課題。 実際にIT最前線企業で使う技術に絞って、迷わずスキルアップできる!
現場で活きる技術だけを集約した実践型課題。 メガベンチャースタートアップに在籍中のトップエンジニアと共同開発している ので、実務に必要な技術に絞って効果的に学習できます。 入門 入門 入門 初級 初級 初級 初級 初級 初級 初級 基礎 基礎 基礎 基礎 基礎 基礎1-4 入門1-2 入門 教材のレベル感 入門 初級 基礎 教材のレベル感 入門 初級 基礎
None
TechTrainについて TechTrainが目指す未来 テクノロジーを支える、 すべての人のターミナルに。 今、テクノロジーを支えている全ての方の生活に溶け込み、 支えていることが常識となるような世界。 学習、就職、交流、あらゆるフェーズで立ち寄っては成長し、 また新たな世界へと乗り換えていく。 そんなあなたの、人生のターミナル(始発終着駅)としてあり続ける。
DDDや開発体制などを発信中
今日話すこと
デザインシステム始めました 公開準備中!
7@ 再利用性の高いUIライブラリの作% !@ Monorepoでライブラリ管理を一元É Ç@ アプリケーション側のデザインシステム適用 デザインシステム導入の取り組み
再利用性の高いUIライブラリの作成
コンポーネントの種類で分離 全プロダクトで一貫して使用する 共通のスタイルガイド・コンポーネント 特定のプロダクト間で共通して使用する 固有のコンポーネント 共通コンポーネント スタイルガイド 固有コンポーネント
ルールを参照しながら開発 ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン
ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン ボタン PrimaryButton プライマリー セカンダリー ターシャリー CautionButton default hover active focused desable SecondaryButton TertiaryButton デザインシステム レギュレーションも含めたコンポーネント アプリケーション独自のコンポーネント レビュレーション守りつつある程度の自由度がある Rank2にRank UPしました! 努力が結果につながりましたね。次のランクも目指していきましょう! 閉じる
デザインチェックを開発フローに Snapshot Test Vitest を使ったスナップショットテスト Visual Regression Test デザインシステムチームのエンジニアによるレビュー UI
Review Chromatic でデザインシステムチームのデザイナーによるレビュー Storybookのデプロイ Chromatic で Storybook をホスティングし、コンポーネントをエンジニア以外でも確認できる状態に
Monorepoでライブラリ管理を一元化
Multi Repoの運用コストが高かった V エンジニア社員5Q V フロントエンド専任は8 V メンテしているフロントエンドのRepositoryが4つ
Monorepoで集約
アプリケーション側の適用
移行戦略 g ページ単位で段階的に切り替F g デザインやコードベースだけでなく機能自体も見直すた! g 機能毎にデザインのばらつきがあるが、デリバリー速度を優 g ユーザーにとってより価値のある機能を優先度付け
UIコンポーネントの責務分離 X 既存のコンポーネントの責務が大きくなっていてい@ X デザインのみの修正・検証ができなS X Container/Presentation パターンでレイヤーを分離
レイヤーごとの ドキュメント整備
I デザインシステムの運用ができる状態になっ5 I エンジニアとデザイナー間の連携が取りやすくなっ5 I 複数のプロダクト間で統一感のある開発体験ができ5 I もっとデザインシステムと実装の同期をスムーズにしたい 振り返り
None