2023.09.08 UIT Meetup vol.20『これがぼくらのスタンダード』で発表したスライドです。 https://twitter.com/@semigura
semigura @ 株式会社Gaji-Labo2023/09/08 UIT Meetup vol.20OpenAPI, Storybook, Figma のワークフローを標準化してデザイナーとエンジニアのコラボレーションを促進する1
View Slide
自己紹介株式会社Gaji-LaboフロントエンドエンジニアReact + TypeScript + Next.js の案件で奮闘中猫と音楽が好き石垣祥太郎 @semigura2
「エンジニアとデザイナーが幸せになれるワークフロー」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 定義のコミュニケーション17Figma と Storybook が作業的に連結している状態になっている現在は……
Figma によるコンポーネントデザインとComponent properties 定義のコミュニケーション18Figma と 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
参考URL27● 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/