iCAREにおけるデザイナーとフロントエンドエンジニアのコラボレーション

by watsuyo_2

Slide 1

Slide 1 text

iCARE におけるデザイナーとフロントエンドエンジニアのコラボレーション 2021/10/20 @watsuyo_2 1

Slide 2

Slide 2 text

Q. デザイナーとフロントエンドエンジニアを繋ぐ技術とは？ 2

Slide 3

Slide 3 text

A. ??? 3

Slide 4

Slide 4 text

@watsuyo_2 株式会社iCARE フロントエンドエンジニア産業技術大学院大学(AIIT) 情報アーキテクチャコース在学中 4

Slide 5

Slide 5 text

Carely の説明 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 5

Slide 6

Slide 6 text

Carely の説明 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 6

Slide 7

Slide 7 text

iCARE の技術スタック #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 7

Slide 8

Slide 8 text

iCARE のフロントエンド技術変遷 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 8

Slide 9

Slide 9 text

フロントエンド専属の技術顧問が在籍 @ozu_syo @kahirokunn #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 9

Slide 10

Slide 10 text

現状の iCARE が抱えているデザインフロー課題 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 10

Slide 11

Slide 11 text

現状の iCARE が抱えているデザインフロー課題 XD の数値(px 等) がアバウトなままフロントエンドに渡ってくるフロントエンドはお気持ちを汲んで実装しているデザインファイルはGoogle Drive でフォルダー管理しているバージョンによってURL が変わるため見ているバージョンが人によって異なる場合があるフロントエンドエンジニアとデザイナーの両方を統括するリーダーがいない #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 11

Slide 12

Slide 12 text

人それぞれやりやすいやり方もあるし、難しい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 12

Slide 13

Slide 13 text

デザイン → フロントエンド実装フローを、なめらかにしたいお気持ちはある #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 13

Slide 14

Slide 14 text

プロダクトとフロントエンド組織が大きくなったから変更に強いデザインが求められるようになってきた #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 14

Slide 15

Slide 15 text

変更に強いデザインとは？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 15

Slide 16

Slide 16 text

変更に強いデザインとは？仕様変更やデザイン変更に対して柔軟に対応できる設計コンポーネントのルール化パターン化、パターンの命名 Color Token 、Typography やコンポーネントをまとめたドキュメント整備再利用可能なコンポーネント設計 UI ライブラリをラップして使う #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 16

Slide 17

Slide 17 text

コンポーネントやパターンの命名に関して、つい最近も会議で話題に上がりました #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 17

Slide 18

Slide 18 text

技術顧問 otani さん「デザインシステムの命名は DB のスキーマ並に重要で後から変更が難しいものと心得ましょう。」 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 18

Slide 19

Slide 19 text

コンポーネント、パターンの命名規則後から変更しないように、最初にちゃんと決めるデザイナー発信で命名エンジニア側もOK なら採用基本は、PO やデザイナーの意図を汲み取りたい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 19

Slide 20

Slide 20 text

Storybook へのコンポーネントドキュメントの充実とデザインシステム #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 20

Slide 21

Slide 21 text

Storybook へのコンポーネントドキュメントの充実とデザインシステム iCARE では独自のデザインシステムを構築している技術顧問のotani さんがStorybook のドキュメンテーションを進めてくれた watsuyo も追ってコンポーネントドキュメントを書いている #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 21

Slide 22

Slide 22 text

何を Storybook に登録しているか？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 22

Slide 23

Slide 23 text

何を Storybook に登録しているか？ Color Token 、Typography 各共通コンポーネントのカタログ、ドキュメント各デザインルール、規定 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 23

Slide 24

Slide 24 text

Storybook の理想と現実 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 24

Slide 25

Slide 25 text

Storybook の理想と現実理想フロントエンドエンジニアはStorybook のドキュメントを見て実装するデザイナーはStorybook のコンポーネントを確認してデザイン実装する現実一部のフロントエンドエンジニアだけが、Storybook のドキュメントを整備し、参考にして実装をする一部のデザイナーがStorybook の規定をしたり、参考にデザインを実装をする #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 25

Slide 26

Slide 26 text

一部のフロントエンドエンジニアだけがメンテナンスしている #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 26

Slide 27

Slide 27 text

これだとあんまり意味がない ... #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 27

Slide 28

Slide 28 text

メンバーへの Storybook 普及に何をしたら良いだろうか？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 28

Slide 29

Slide 29 text

メンバーへの Storybook 普及に何をしたら良いだろうか？フロントエンド側からメリットを伝えていく必要がある基本的には整備しているのは、フロントエンドエンジニアなのでデザイナーも触れるようにオンボーディングする毎週のデザインシステム定例でドキュメント更新の報告 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 29

Slide 30

Slide 30 text

メンバーへの Storybook 普及に何をしたら良いだろうか？実際にStorybook 上ででコンポーネントを試しに使える機能がある Storybook Docs Addon: https://storybook.js.org/docs/react/writing- docs/introduction #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 30

Slide 31

Slide 31 text

メンバーへの Storybook 普及に何をしたら良いだろうか？取り組んでいる現状のデザインフローが良いか悪いかを自分で気づくことは難しいなんだかんだで今やっているやり方に不都合があっても、慣れているやり方に落ち着くので改善に向かいづらい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 31

Slide 32

Slide 32 text

デザイン課題が大きくなってきたので、デザインフローを見直すタイミングになってきた取り組んでいる現状のデザインフローが良いか悪いかを自分で気づくことは難しいなんだかんだで今やっているやり方に不都合があっても、慣れているやり方に落ち着くので改善に向かいづらい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 32

Slide 33

Slide 33 text

デザインシステム PJ で Figma を試した #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 33

Slide 34

Slide 34 text

デザインシステム PJ で Figma を試したコンポーネント設計をフロントエンドエンジニアとデザイナーで行い、ホワイトボードに書いた設計図を簡素化してFigma に転記転記は2 度手間になるので直接、Figma 上で完結できるのが理想ではある Figma 内のコンポーネントからあコピペで設計できる環境が理想 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 34

Slide 35

Slide 35 text

デザインシステム PJ で Figma を試したフロントエンドエンジニアがデザインツールを触ることによって、他のフロントエンドメンバーに設計を伝えやすくなった master のデザインファイルではないので、誰でも編集ができてURL も固定なので嬉しいデザインをレイヤーごとに管理できるコンポーネント管理ができるのでデザインの一貫性が保てるバージョン管理できる #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 35

Slide 36

Slide 36 text

フロントエンドエンジニア、デザイナーの双方を知るフロントエンドエンジニアがどうやってコンポーネント設計をしているのかホワイトボードやFigma を使ったコンポーネント設計ミーティングにデザイナーを呼んで、一緒に設計するフロントエンドエンジニア用語で分からない用語があればリストアップするフロントエンドエンジニアがどのようにCSS を書いているのか？ PR のレビュワーにデザイナーをアサインする PR の状態でテスト環境にデプロイして確認してもらう #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 36

Slide 37

Slide 37 text

フロントエンドエンジニア、デザイナーの双方を知るフロントエンドエンジニアが、デザイナーが一般教養として呼んでいる書籍を読む「誰のためのデザイン」ノーマン関係の本は特に「今日から始める情報設計」情報設計関連の本 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 37

Slide 38

Slide 38 text

フロントエンドエンジニアとデザイナーを両面を理解している人がいない ? #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 38

Slide 39

Slide 39 text

それってもしかして、 DesignOps が足りないってこと :pien:? #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 39

Slide 40

Slide 40 text

エンジニアサイドの DevOps 開発、運用、QA が協力するプロセスと方法を推進 DevOps の定義「高い品質を確保しつつ、システムへの変更をコミットしてから通常の運用に移るまでの時間を短縮することを目的とした一連のプラクティス」 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 40

Slide 41

Slide 41 text

DesignOps とは？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 41

Slide 42

Slide 42 text

DesignOps とは？出典: https://forbesjapan.com/articles/detail/ 29569/3/1/1 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 42

Slide 43

Slide 43 text

DesignOps とは？品質と一貫性を保ったアウトプットを効率的に作るための運用プロセス design-ops.jp DesignOps の基礎クックパッドさんの事例 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 43

Slide 44

Slide 44 text

リサーチ、調査、ヒアリング、組織理解については、今の僕に話せません #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 44

Slide 45

Slide 45 text

フロントエンドエンジニアとデザイナーが離れていればそれはそれで楽 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 45

Slide 46

Slide 46 text

お互いが近づくことを選択したので、壁を乗り越えよう #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 46

Slide 47

Slide 47 text

誰も言わなかっただけで、 DesignOps は自然な流れだった #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 47

Slide 48

Slide 48 text

DesignOps に関して、今やりたくないこと px 単位の論争設計段階では後からの変更を避けるために大事だが、実装レベルでは不毛な争いデザインフローやツールに対する固執柔軟に。コラボレーションとメンバー間の相互理解 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 48

Slide 49

Slide 49 text

今、 DesignOps についてできること #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 49

Slide 50

Slide 50 text

今、 DesignOps についてできること DesignOps を導入している事例をキャッチアップするデザイナーはフロントエンドエンジニアをデザインツールでデザインに巻き込み、フロントエンドエンジニアはStorybook で開発にデザイナーを巻き込むツールを使ってデザインとエンジニアリングを引き寄せるデザインシステム、Storybook を使ったデザインの一貫性向上スピードと一貫性の両立 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 50

Slide 51

Slide 51 text

デザインシステム PJ は、ドメインに直接結びつかないので DesingOps を試しやすい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 51

Slide 52

Slide 52 text

iCARE にとってデザインシステムはどんな役割を果たすべきか？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 52

Slide 53

Slide 53 text

iCARE にとってデザインシステムはどんな役割を果たすべきか？デザインルールの共有デザイン概念、原則を共有するデザインの唯一の情報源にする #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 53

Slide 54

Slide 54 text

やりたいことがある。一つずつクリアしていきたい。 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 54

Slide 55

Slide 55 text

iCARE のデザイン、フロントエンド課題に挑みたいデザイナー、フロントエンドエンジニアを募集しています #icare_meetup | iCARE ではエンジニアとデザイナーを募集中「iCARE 採用 herp 」 55