Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

watsuyo_2
October 20, 2021
5.8k

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

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

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

watsuyo_2

October 20, 2021
Tweet

Transcript

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

    @watsuyo_2
    1

    View full-size slide

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

    View full-size slide

  3. @watsuyo_2
    株式会社iCARE

    フロントエンドエンジニア
    産業技術大学院大学(AIIT)

    情報アーキテクチャコース在学中
    4

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. デザイン

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  32. デザインシステム
    PJ

    Figma
    を試し

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

    View full-size slide

  33. デザインシステム
    PJ

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

    View full-size slide

  34. デザインシステム
    PJ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. それってもしかして、
    DesignOps
    が足りないってこ

    :pien:?
    #icare_meetup | iCARE
    ではエンジニアとデザイナーを募集中 「iCARE
    採用 herp
    」 39

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. お互いが近づくことを選択したので、壁を乗り越えよ

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  54. iCARE
    のデザイン、フロントエンド課題に挑みたいデ
    ザイナー、フロントエンドエンジニアを募集していま

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

    View full-size slide