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

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

Transcript

1. semigura @ 株式会社Gaji-Labo
   2023/09/08 UIT Meetup vol.20
   OpenAPI, Storybook, Figma のワークフローを標準化して
   デザイナーとエンジニアのコラボレーションを促進する
   1
   

   View Slide

2. 自己紹介
   株式会社Gaji-Labo
   フロントエンドエンジニア
   React + TypeScript + Next.js の案件で奮闘中
   猫と音楽が好き
   石垣祥太郎 ＠semigura
   2
   

   View Slide

3. 「エンジニアとデザイナーが幸せになれるワークフロー」
   3
   チームワークを発揮できるワークフローを作りたい！
   

   View Slide

4. かつての Web アプリケーション制作は……
   4
   ● バックエンドエンジニアが API を設計
   ● フロントエンドエンジニアがコンポーネントの State を設計
   ● デザイナーがデザインパターンを展開
   デザインとエンジニアリングの
   領域は分断している
   

   View Slide

5. 各工程で完全分業
   でも、よく考えると設計や命名は似たようなことをしている
   もっと洗練できるのでは？
   5
   

   View Slide

6. 各工程が一気通貫するようなワークフローを作りたい！
   6
   …というわけで
   

   View Slide

7. ● OpenAPI による API 定義のコミュニケーション
   ● Storybook による React コンポーネントの可視化とState 定義のコミュニケーション
   ● Figma によるコンポーネントデザインと Properties 定義のコミュニケーション
   7
   具体的には
   

   View Slide

8. OpenAPI による API 定義のコミュニケーション
   ● バックエンドエンジニアで完結している
   ● APIとフロントエンドの実装にズレがあり、
   ある程度固まった時点で手戻りが発生する
   8
   かつては……
   

   View Slide

9. OpenAPI による API 定義のコミュニケーション
   バックエンドとフロントエンドで
   コミュニケーションを取りながらAPI定義をしている
   9
   現在は……
   

   View Slide

10. OpenAPI による API 定義のコミュニケーション
    10
    バックエンドとフロントエンドで
    コミュニケーションを取りながらAPI定義をしている
    現在は……
    ● 共同でAPI定義を行うことで、早期にフィードバックを受けやすく改善が回る
    ● API定義をコンポーネントの仕様として、 TypeScript の型生成を可能にする
    

    View Slide

11. OpenAPI による API 定義のコミュニケーション
    11
    ➔ ドキュメントオーナー
    - バックエンドエンジニア
    ➔ 主に編集する人
    - バックエンドエンジニア
    - フロントエンドエンジニア
    ➔ 参照する人
    - バックエンドエンジニア
    - フロントエンドエンジニア
    - UIデザイナー
    ※UIデザイナーもデータセットの確認や名前の確
    認に使えると◎
    

    View Slide

12. Storybook による React コンポーネントの可視化と
    State 定義のコミュニケーション
    12
    ● Storybook が React コンポーネントのドキュメントとし
    て整備されていない
    ● フロントエンドエンジニアしか Storybook を見られない
    かつては……
    

    View Slide

13. Storybook による React コンポーネントの可視化と
    State 定義のコミュニケーション
    13
    デザイナーやフロントエンド以外のエンジニアが
    Storybookを参照できるようにしている
    現在は……
    

    View Slide

14. Storybook による React コンポーネントの可視化と
    State 定義のコミュニケーション
    14
    デザイナーやフロントエンド以外のエンジニアが
    Storybookを参照できるようにしている
    現在は……
    ● コンポーネントを可視化することで早期にフィードバックを受けやすく改善が回
    る
    

    View Slide

15. Storybook による React コンポーネントの可視化と
    State 定義のコミュニケーション
    15
    ➔ ドキュメントオーナー
    - フロントエンドエンジニア
    ➔ 主に編集する人
    - フロントエンドエンジニア
    ➔ 参照する人
    - フロントエンドエンジニア
    - UIデザイナー
    - バックエンドエンジニア
    

    View Slide

16. Figma によるコンポーネントデザインと
    Component properties 定義のコミュニケーション
    16
    ● エンジニアが Figma の機能を理解していない
    ● Figma と Storybook で命名などに差異がある
    かつては……
    

    View Slide

17. Figma によるコンポーネントデザインと
    Component properties 定義のコミュニケーション
    17
    Figma と Storybook が作業的に連結している状態になっている
    現在は……
    

    View Slide

18. Figma によるコンポーネントデザインと
    Component properties 定義のコミュニケーション
    18
    Figma と Storybook が作業的に連結している状態になっている
    現在は……
    ● Figma と Storybook を同期させることでズレが見つけやすくなる
    ● 早期にフィードバックを受けやすく改善が回る
    

    View Slide

19. Figma によるコンポーネントデザインと
    Component properties 定義のコミュニケーション
    19
    ➔ ドキュメントオーナー
    ⚪ UIデザイナー
    ➔ 主に編集する人
    ⚪ UIデザイナー
    ➔ 参照する人
    ⚪ UIデザイナー
    ⚪ フロントエンドエンジニア
    ⚪ バックエンドエンジニア
    

    View Slide

20. ポイント
    20
    ● 各工程・各職種で共通のコミュニケーションの土
    台があることが大事
    ● 各領域は尊重する
    

    View Slide

21. 全てが繋がった状態！
    21
    その結果……
    

    View Slide

22. すべてが繋がった結果……
    22
    ● 不要な手戻りやコミュニケーションロスを減らす
    ● エンジニアとデザイナーが密に連携できる
    ● 全体の設計が洗練される
    ● 浮いた時間でプロダクトの改善につなげられる
    ● ズレを見つけやすくなるので事前にコミュニケーションを取れる
    ● ワークフローが分離せず標準化されているので同様の工程を効率化できる
    

    View Slide

23. 標準を定着するために
    23
    ワークフローを定着していく中で、
    コミュニケーションが活発になっている
    ● 具体的なワークフローを社内 wiki に策定中
    ● それぞれの領域への理解の促進
    ● エンジニアとデザイナーの橋渡しになる用語集も作成中
    

    View Slide

24. 「エンジニアとデザイナーの密な連携」
    でチームワーク最大化！
    24
    

    View Slide

25. 会社紹介
    25
    すべてのサービスとプロダクトに
    「手ざわりのいいUI」を
    新規事業やサービス開発⁄プロダクト開発に取り組
    むチームのサポートが得意な会社です。
    それぞれのチームの考える「手ざわりのよさ」を一緒
    に捉え、事業の成⻑にコミットします。
    フロントエンド開発
    UIデザイン / 情報設計 チーム / プロセス支援
    

    View Slide

26. 26
    私たち Gaji-Labo は、
    事業を成長させる UI を作ります。
    少しでも興味を持っていただけましたら、気軽にお問い合わせください。
    お仕事のご依頼・ご相談 採用に関するお問い合わせ
    サービス案内ページ
    https://www.gaji.jp/services
    採用情報ページ
    https://www.gaji.jp/recruit
    

    View Slide

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/
    

    View Slide