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

【iCARE Dev Meetup #26】 デザイナーとフロントエンドエンジニアを繋ぐ技術
https://icare.connpass.com/event/224693/

Twitter: https://twitter.com/watsuyo_2
iCAREの採用情報: https://herp.careers/v1/icare

Transcript

1. iCARE におけるデザイナーと フロントエンドエンジニアのコラボレーション 2021/10/20 @watsuyo_2 1
2. Q. デザイナーとフロントエンドエンジニアを繋ぐ技術 とは ？ 2
3. A. ??? 3
4. @watsuyo_2 株式会社iCARE フロントエンドエンジニア 産業技術大学院大学(AIIT) 情報アーキテクチャコース在学中 4
5. Carely の説明 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 5
6. Carely の説明 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 6
7. iCARE の技術スタック #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 7
8. iCARE の フロントエンド 技術 変遷 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 8
9. フロントエンド専属の技術顧問が在籍 @ozu_syo @kahirokunn #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 9
10. 現状の iCARE が抱えているデザインフロー課題 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 10
11. 現状の iCARE が抱えているデザインフロー課題 XD の数値(px 等) がアバウトなままフロントエンドに渡ってくる フロントエンドはお気持ちを汲んで実装している デザインファイルはGoogle Drive でフォルダー管理している バージョンによってURL が変わるため見ているバージョンが人によって 異なる場合がある フロントエンドエンジニアとデザイナーの両方を統括するリーダーがいない #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 11
12. 人それぞれやりやすいやり方もあるし、難しい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 12
13. デザイン → フロントエンド実装フローを、なめらかに したいお気持ちはある #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 13
14. プロダクトとフロントエンド組織が大きくなったから 変更に強いデザインが求められるようになってきた #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 14
15. 変更に強いデザインとは ？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 15
16. 変更に強いデザインとは ？ 仕様変更やデザイン変更に対して柔軟に対応できる設計 コンポーネントのルール化 パターン化、パターンの命名 Color Token 、Typography やコンポーネントをまとめたドキュメント整備 再利用可能なコンポーネント設計 UI ライブラリをラップして使う #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 16
17. コンポーネントやパターンの命名に関して、つい最近 も会議で話題に上がりました #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 17
18. 技術顧問 otani さん「デザインシステムの命名は DB のスキーマ並に重要で後から変更が難しいものと心得 ましょう。」 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 18
19. コンポーネント、パターンの命名規則 後から変更しないように、最初にちゃんと決める デザイナー発信で命名 エンジニア側もOK なら採用 基本は、PO やデザイナーの意図を汲み取りたい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 19
20. Storybook へのコンポーネントドキュメントの充実と デザインシステム #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 20
21. Storybook へのコンポーネントドキュメントの充実と デザインシステム iCARE では独自のデザインシステムを構築している 技術顧問のotani さんがStorybook のドキュメンテーションを進めてくれた watsuyo も追ってコンポーネントドキュメントを書いている #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 21
22. 何を Storybook に登録しているか ？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 22
23. 何を Storybook に登録しているか ？ Color Token 、Typography 各共通コンポーネントのカタログ、ドキュメント 各デザインルール、規定 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 23
24. Storybook の理想と現実 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 24
25. Storybook の理想と現実 理想 フロントエンドエンジニアはStorybook のドキュメントを見て実装する デザイナーはStorybook のコンポーネントを確認してデザイン実装する 現実 一部のフロントエンドエンジニアだけが、Storybook のドキュメントを整備 し、参考にして実装をする 一部のデザイナーがStorybook の規定をしたり、参考にデザインを実装をする #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 25
26. 一部のフロントエンドエンジニアだけがメンテナンス している #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 26
27. これだとあんまり意味がない ... #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 27
28. メンバーへの Storybook 普及に何をしたら良いだろう か ？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 28
29. メンバーへの Storybook 普及に何をしたら良いだろう か ？ フロントエンド側からメリットを伝えていく必要がある 基本的には整備しているのは、フロントエンドエンジニアなのでデザイ ナーも触れるようにオンボーディングする 毎週のデザインシステム定例でドキュメント更新の報告 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 29
30. メンバーへの Storybook 普及に何をしたら良いだろう か ？ 実際にStorybook 上ででコンポーネントを試しに使える機能がある Storybook Docs Addon: https://storybook.js.org/docs/react/writing- docs/introduction #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 30
31. メンバーへの Storybook 普及に何をしたら良いだろう か ？ 取り組んでいる現状のデザインフローが良いか悪いかを自分で気づくことは 難しい なんだかんだで今やっているやり方に不都合があっても、慣れているや り方に落ち着くので改善に向かいづらい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 31
32. デザイン課題が大きくなってきたので、デザインフロ ーを見直すタイミングになってきた 取り組んでいる現状のデザインフローが良いか悪いかを自分で気づくことは 難しい なんだかんだで今やっているやり方に不都合があっても、慣れているや り方に落ち着くので改善に向かいづらい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 32
33. デザインシステム PJ で Figma を試し た #icare_meetup | iCARE ではエンジニアとデザイナーを募集 中 「iCARE 採用 herp 」 33
34. デザインシステム PJ で Figma を試した コンポーネント設計をフロントエンドエンジニアとデザイナーで行い、ホワ イトボードに書いた設計図を簡素化してFigma に転記 転記は2 度手間になるので直接、Figma 上で完結できるのが理想ではある Figma 内のコンポーネントからあコピペで設計できる環境が理想 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 34
35. デザインシステム PJ で Figma を試した フロントエンドエンジニアがデザインツールを触ることによって、他のフロ ントエンドメンバーに設計を伝えやすくなった master のデザインファイルではないので、誰でも編集ができてURL も固定な ので嬉しい デザインをレイヤーごとに管理できる コンポーネント管理ができるのでデザインの一貫性が保てる バージョン管理できる #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 35
36. フロントエンドエンジニア、デザイナーの双方を知る フロントエンドエンジニアがどうやってコンポーネント設計をしているのか ホワイトボードやFigma を使ったコンポーネント設計ミーティングにデザ イナーを呼んで、一緒に設計する フロントエンドエンジニア用語で分からない用語があればリストアップ する フロントエンドエンジニアがどのようにCSS を書いているのか？ PR のレビュワーにデザイナーをアサインする PR の状態でテスト環境にデプロイして確認してもらう #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 36
37. フロントエンドエンジニア、デザイナーの双方を知る フロントエンドエンジニアが、デザイナーが一般教養として呼んでいる書籍 を読む 「誰のためのデザイン」 ノーマン関係の本は特に 「今日から始める情報設計」 情報設計関連の本 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 37
38. フロントエンドエンジニアとデザイナーを両面を理解 している人がいない ? #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 38
39. それってもしかして、 DesignOps が足りないってこ と :pien:? #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 39
40. エンジニアサイドの DevOps 開発、運用、QA が協力するプロセスと方法を推進 DevOps の定義 「高い品質を確保しつつ、システムへの変更をコミットしてから通常の 運用に移るまでの時間を短縮することを目的とした一連のプラクティ ス」 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 40
41. DesignOps とは？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 41
42. DesignOps とは？ 出典: https://forbesjapan.com/articles/detail/ 29569/3/1/1 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 42
43. DesignOps とは？ 品質と一貫性を保ったアウトプットを効率的に作るための運用プロセス design-ops.jp DesignOps の基礎 クックパッドさんの事例 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 43
44. リサーチ、調査、ヒアリング、組織理解については、 今の僕に話せません #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 44
45. フロントエンドエンジニアとデザイナーが離れていれ ばそれはそれで楽 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 45
46. お互いが近づくことを選択したので、壁を乗り越えよ う #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 46
47. 誰も言わなかっただけで、 DesignOps は自然な流れだ った #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 47
48. DesignOps に関して、今やりたくないこと px 単位の論争 設計段階では後からの変更を避けるために大事だが、実装レベルでは不 毛な争い デザインフローやツールに対する固執 柔軟に。コラボレーションとメンバー間の相互理解 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 48
49. 今、 DesignOps についてできること #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 49
50. 今、 DesignOps についてできること DesignOps を導入している事例をキャッチアップする デザイナーはフロントエンドエンジニアをデザインツールでデザインに巻き 込み、フロントエンドエンジニアはStorybook で開発にデザイナーを巻き込む ツールを使ってデザインとエンジニアリングを引き寄せる デザインシステム、Storybook を使ったデザインの一貫性向上 スピードと一貫性の両立 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 50
51. デザインシステム PJ は、ドメインに直接結びつかない ので DesingOps を試しやすい #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 51
52. iCARE にとってデザインシステムはどんな役割を果た すべきか ？ #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 52
53. iCARE にとってデザインシステムはどんな役割を果た すべきか ？ デザインルールの共有 デザイン概念、原則を共有する デザインの唯一の情報源にする #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 53
54. やりたいことがある。一つずつクリアしていきたい。 #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 54
55. iCARE のデザイン、フロントエンド課題に挑みたいデ ザイナー、フロントエンドエンジニアを募集していま す #icare_meetup | iCARE ではエンジニアとデザイナーを募集中 「iCARE 採用 herp 」 55