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