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
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエン...
Search
semigura
September 08, 2023
2
1.6k
OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する
2023.09.08 UIT Meetup vol.20『これがぼくらのスタンダード』で発表したスライドです。
https://twitter.com/@semigura
semigura
September 08, 2023
Tweet
Share
More Decks by semigura
See All by semigura
MUI v6, v7 が2024年にリリースされるので新機能を調べてみた
semigura
3
2.4k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
200
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
38
MUIのオススメコンポーネント5選
semigura
0
120
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
110
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
240
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
120
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
210
DatoCMS + Next.js でプレビュー機能付きブログを作る
semigura
0
57
Featured
See All Featured
Adopting Sorbet at Scale
ufuk
73
9k
How GitHub (no longer) Works
holman
311
140k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A better future with KSS
kneath
237
17k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
From Idea to $5000 a Month in 5 Months
shpigford
381
46k
A designer walks into a library…
pauljervisheath
202
24k
Six Lessons from altMBA
skipperchong
26
3.4k
The Language of Interfaces
destraynor
154
24k
Typedesign – Prime Four
hannesfritz
39
2.3k
Ruby is Unlike a Banana
tanoku
96
11k
Transcript
semigura @ 株式会社Gaji-Labo 2023/09/08 UIT Meetup vol.20 OpenAPI, Storybook, Figma
のワークフローを標準化して デザイナーとエンジニアのコラボレーションを促進する 1
自己紹介 株式会社Gaji-Labo フロントエンドエンジニア React + TypeScript + Next.js の案件で奮闘中 猫と音楽が好き
石垣祥太郎 @semigura 2
「エンジニアとデザイナーが幸せになれるワークフロー」 3 チームワークを発揮できるワークフローを作りたい!
かつての Web アプリケーション制作は…… 4 • バックエンドエンジニアが API を設計 • フロントエンドエンジニアがコンポーネントの
State を設計 • デザイナーがデザインパターンを展開 デザインとエンジニアリングの 領域は分断している
各工程で完全分業 でも、よく考えると設計や命名は似たようなことをしている もっと洗練できるのでは? 5
各工程が一気通貫するようなワークフローを作りたい! 6 …というわけで
• OpenAPI による API 定義のコミュニケーション • Storybook による React コンポーネントの可視化とState
定義のコミュニケーション • Figma によるコンポーネントデザインと Properties 定義のコミュニケーション 7 具体的には
OpenAPI による API 定義のコミュニケーション • バックエンドエンジニアで完結している • APIとフロントエンドの実装にズレがあり、 ある程度固まった時点で手戻りが発生する 8
かつては……
OpenAPI による API 定義のコミュニケーション バックエンドとフロントエンドで コミュニケーションを取りながらAPI定義をしている 9 現在は……
OpenAPI による API 定義のコミュニケーション 10 バックエンドとフロントエンドで コミュニケーションを取りながらAPI定義をしている 現在は…… • 共同でAPI定義を行うことで、早期にフィードバックを受けやすく改善が回る
• API定義をコンポーネントの仕様として、 TypeScript の型生成を可能にする
OpenAPI による API 定義のコミュニケーション 11 ➔ ドキュメントオーナー - バックエンドエンジニア ➔
主に編集する人 - バックエンドエンジニア - フロントエンドエンジニア ➔ 参照する人 - バックエンドエンジニア - フロントエンドエンジニア - UIデザイナー ※UIデザイナーもデータセットの確認や名前の確 認に使えると◎
Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 12 • Storybook が
React コンポーネントのドキュメントとし て整備されていない • フロントエンドエンジニアしか Storybook を見られない かつては……
Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 13 デザイナーやフロントエンド以外のエンジニアが Storybookを参照できるようにしている 現在は……
Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 14 デザイナーやフロントエンド以外のエンジニアが Storybookを参照できるようにしている 現在は……
• コンポーネントを可視化することで早期にフィードバックを受けやすく改善が回 る
Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 15 ➔ ドキュメントオーナー -
フロントエンドエンジニア ➔ 主に編集する人 - フロントエンドエンジニア ➔ 参照する人 - フロントエンドエンジニア - UIデザイナー - バックエンドエンジニア
Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 16 • エンジニアが Figma の機能を理解していない
• Figma と Storybook で命名などに差異がある かつては……
Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 17 Figma と Storybook が作業的に連結している状態になっている
現在は……
Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 18 Figma と Storybook が作業的に連結している状態になっている
現在は…… • Figma と Storybook を同期させることでズレが見つけやすくなる • 早期にフィードバックを受けやすく改善が回る
Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 19 ➔ ドキュメントオーナー ⚪ UIデザイナー
➔ 主に編集する人 ⚪ UIデザイナー ➔ 参照する人 ⚪ UIデザイナー ⚪ フロントエンドエンジニア ⚪ バックエンドエンジニア
ポイント 20 • 各工程・各職種で共通のコミュニケーションの土 台があることが大事 • 各領域は尊重する
全てが繋がった状態! 21 その結果……
すべてが繋がった結果…… 22 • 不要な手戻りやコミュニケーションロスを減らす • エンジニアとデザイナーが密に連携できる • 全体の設計が洗練される • 浮いた時間でプロダクトの改善につなげられる
• ズレを見つけやすくなるので事前にコミュニケーションを取れる • ワークフローが分離せず標準化されているので同様の工程を効率化できる
標準を定着するために 23 ワークフローを定着していく中で、 コミュニケーションが活発になっている • 具体的なワークフローを社内 wiki に策定中 • それぞれの領域への理解の促進
• エンジニアとデザイナーの橋渡しになる用語集も作成中
「エンジニアとデザイナーの密な連携」 でチームワーク最大化! 24
会社紹介 25 すべてのサービスとプロダクトに 「手ざわりのいいUI」を 新規事業やサービス開発⁄プロダクト開発に取り組 むチームのサポートが得意な会社です。 それぞれのチームの考える「手ざわりのよさ」を一緒 に捉え、事業の成⻑にコミットします。 フロントエンド開発 UIデザイン
/ 情報設計 チーム / プロセス支援
26 私たち Gaji-Labo は、 事業を成長させる UI を作ります。 少しでも興味を持っていただけましたら、気軽にお問い合わせください。 お仕事のご依頼・ご相談 採用に関するお問い合わせ
サービス案内ページ https://www.gaji.jp/services 採用情報ページ https://www.gaji.jp/recruit
参考URL 27 • OpenAPI: https://www.openapis.org/ • Stoplight Studio: https://github.com/stoplightio/studio •
Storybook: https://storybook.js.org/ • Figma: https://www.figma.com/ja/ • Gaji-Labo corporate site: https://www.gaji.jp/