$30 off During Our Annual Pro Sale. View Details »

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

semigura
September 08, 2023
880

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

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

semigura

September 08, 2023
Tweet

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