OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する

2023.09.08 UIT Meetup vol.20『これがぼくらのスタンダード』で発表したスライドです。
https://twitter.com/@semigura

1. semigura @ 株式会社Gaji-Labo 2023/09/08 UIT Meetup vol.20 OpenAPI, Storybook, Figma のワークフローを標準化して デザイナーとエンジニアのコラボレーションを促進する 1
2. 自己紹介 株式会社Gaji-Labo フロントエンドエンジニア React + TypeScript + Next.js の案件で奮闘中 猫と音楽が好き 石垣祥太郎 ＠semigura 2
3. 「エンジニアとデザイナーが幸せになれるワークフロー」 3 チームワークを発揮できるワークフローを作りたい！
4. かつての Web アプリケーション制作は…… 4 • バックエンドエンジニアが API を設計 • フロントエンドエンジニアがコンポーネントの State を設計 • デザイナーがデザインパターンを展開 デザインとエンジニアリングの 領域は分断している
5. 各工程で完全分業 でも、よく考えると設計や命名は似たようなことをしている もっと洗練できるのでは？ 5
6. 各工程が一気通貫するようなワークフローを作りたい！ 6 …というわけで
7. • OpenAPI による API 定義のコミュニケーション • Storybook による React コンポーネントの可視化とState 定義のコミュニケーション • Figma によるコンポーネントデザインと Properties 定義のコミュニケーション 7 具体的には
8. OpenAPI による API 定義のコミュニケーション • バックエンドエンジニアで完結している • APIとフロントエンドの実装にズレがあり、 ある程度固まった時点で手戻りが発生する 8 かつては……
9. OpenAPI による API 定義のコミュニケーション バックエンドとフロントエンドで コミュニケーションを取りながらAPI定義をしている 9 現在は……
10. OpenAPI による API 定義のコミュニケーション 10 バックエンドとフロントエンドで コミュニケーションを取りながらAPI定義をしている 現在は…… • 共同でAPI定義を行うことで、早期にフィードバックを受けやすく改善が回る • API定義をコンポーネントの仕様として、 TypeScript の型生成を可能にする
11. OpenAPI による API 定義のコミュニケーション 11 ➔ ドキュメントオーナー - バックエンドエンジニア ➔ 主に編集する人 - バックエンドエンジニア - フロントエンドエンジニア ➔ 参照する人 - バックエンドエンジニア - フロントエンドエンジニア - UIデザイナー ※UIデザイナーもデータセットの確認や名前の確 認に使えると◎
12. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 12 • Storybook が React コンポーネントのドキュメントとし て整備されていない • フロントエンドエンジニアしか Storybook を見られない かつては……
13. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 13 デザイナーやフロントエンド以外のエンジニアが Storybookを参照できるようにしている 現在は……
14. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 14 デザイナーやフロントエンド以外のエンジニアが Storybookを参照できるようにしている 現在は…… • コンポーネントを可視化することで早期にフィードバックを受けやすく改善が回 る
15. Storybook による React コンポーネントの可視化と State 定義のコミュニケーション 15 ➔ ドキュメントオーナー - フロントエンドエンジニア ➔ 主に編集する人 - フロントエンドエンジニア ➔ 参照する人 - フロントエンドエンジニア - UIデザイナー - バックエンドエンジニア
16. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 16 • エンジニアが Figma の機能を理解していない • Figma と Storybook で命名などに差異がある かつては……
17. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 17 Figma と Storybook が作業的に連結している状態になっている 現在は……
18. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 18 Figma と Storybook が作業的に連結している状態になっている 現在は…… • Figma と Storybook を同期させることでズレが見つけやすくなる • 早期にフィードバックを受けやすく改善が回る
19. Figma によるコンポーネントデザインと Component properties 定義のコミュニケーション 19 ➔ ドキュメントオーナー ⚪ UIデザイナー ➔ 主に編集する人 ⚪ UIデザイナー ➔ 参照する人 ⚪ UIデザイナー ⚪ フロントエンドエンジニア ⚪ バックエンドエンジニア
20. ポイント 20 • 各工程・各職種で共通のコミュニケーションの土 台があることが大事 • 各領域は尊重する
21. 全てが繋がった状態！ 21 その結果……
22. すべてが繋がった結果…… 22 • 不要な手戻りやコミュニケーションロスを減らす • エンジニアとデザイナーが密に連携できる • 全体の設計が洗練される • 浮いた時間でプロダクトの改善につなげられる • ズレを見つけやすくなるので事前にコミュニケーションを取れる • ワークフローが分離せず標準化されているので同様の工程を効率化できる
23. 標準を定着するために 23 ワークフローを定着していく中で、 コミュニケーションが活発になっている • 具体的なワークフローを社内 wiki に策定中 • それぞれの領域への理解の促進 • エンジニアとデザイナーの橋渡しになる用語集も作成中
24. 「エンジニアとデザイナーの密な連携」 でチームワーク最大化！ 24
25. 会社紹介 25 すべてのサービスとプロダクトに 「手ざわりのいいUI」を 新規事業やサービス開発⁄プロダクト開発に取り組 むチームのサポートが得意な会社です。 それぞれのチームの考える「手ざわりのよさ」を一緒 に捉え、事業の成⻑にコミットします。 フロントエンド開発 UIデザイン / 情報設計 チーム / プロセス支援
26. 26 私たち Gaji-Labo は、 事業を成長させる UI を作ります。 少しでも興味を持っていただけましたら、気軽にお問い合わせください。 お仕事のご依頼・ご相談 採用に関するお問い合わせ サービス案内ページ https://www.gaji.jp/services 採用情報ページ https://www.gaji.jp/recruit
27. 参考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/