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.8k
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
3.5k
JavaScript & TypeScript 用のオールインワンツールキット「Bun」
semigura
0
220
JavaScript パッケージマネージャー pnpm を使ってみる
semigura
0
51
MUIのオススメコンポーネント5選
semigura
0
160
react-beautiful-dnd でドラッグ&ドロップが可能なリストコンポーネントを作成する
semigura
0
130
Material-UI から MUI へ 〜Material-UI v4 から v5への移行手引き〜
semigura
0
300
ユニークな React 用UIフレームワーク「Mantine」を推したい
semigura
0
140
Netlify で Next.js の ISR (Incremental Static Regeneration) を使う
semigura
0
260
DatoCMS + Next.js でプレビュー機能付きブログを作る
semigura
0
62
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Why Our Code Smells
bkeepers
PRO
335
57k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
900
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
Optimising Largest Contentful Paint
csswizardry
33
3k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.2k
How GitHub (no longer) Works
holman
312
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
174
51k
Navigating Team Friction
lara
183
15k
Done Done
chrislema
182
16k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
260
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/