コンポーネント指向開発とデザイナー×エンジニアの協業

Transcript

1. Designer × Engineer Development #01 コンポーネント指向開発と デザイナー×エンジニアの協業 喜多 峻 @Ln_north （ ）
2. 喜多 峻 株式会社ドワンゴ デザインコミュニケーション室 friends.nico / Twitter: @Ln_north Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
3. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 https://qiita.com/ln-north/items/53c23beb3f82abf64a4c コンポーネント指向フロントエンド開発 におけるデザイナーの参画について ‑ Qiita ドワンゴ Advent Calendar 2017 17日目
4. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
5. React / Atomic Design Storybook SCSS / CSS Modules Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
6. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネント指向のフロントエンド環境での開発で デザイナーとして2年近くコミットしてきました
7. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
8. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
9. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネントにスタイルを含めると コンポーネントの再利用性が下がる
10. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネントとスタイルを分離し スタイルはコンポーネントに利用されるものと定義 <Button style={ }> Label <Button /> Label require
11. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 スタイルが決定される時点で注入する <Button /> Label <CommentForm> <Input /> <Button /> </CommentForm> Atom Molecule require ◀ 文脈がない時点でスタイルを入れると崩壊する
12. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
13. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS Modules
14. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS Modules ある程度ビジュアルデザインに理解がないと 「意図通り」に書くことが難しい コーナーケースの判断はデザイナーがやりやすい デザイナーのほうが関心が高い(調整/編集したい)
15. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS Modules Designer
16. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネント設計の対象として CSSで利用するUI要素として データの写像の対象として HTML React CSS CSS Modules Designer
17. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Engineer Designer HTML React CSS CSS Modules Designer この境界上のコミュニケーションは大事 (詳しくは記事参照)
18. アニメーション Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 現在の責務分担で良かった例
19. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 少し複雑なアニメーション 実装コストが高く見えて敬遠されがち
20. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 状態を拾ってCSSの animation/transition で実装する Designer aria, data属性で 動的な値や状態だけ 渡すようにする Engineer 動きはデザイナーでやりますという話であれば 心理的障壁が減って取り組みやすい
21. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 デザイナー/エンジニア CSSのanimation/transitonの基本的な表現方法 デザイナー エンジニア CSSのanimation/transition単体でできない動きを理解しておく CSSOMでのanimation/transition周りの操作
22. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
23. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Reactでのコンポーネントと スタイルのコンポーネントは一部合致しなさそう
24. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Atomic Designと抽象度の高さ 汎用 具象 Button Label TextArea Input Atom Molecule Organism Template RegisterForm Input Dialog Dialog Button Text SiteHeader SearchForm Image Top / Watch
25. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 復習：スタイルが決定される時点で注入する <Button /> Button <CommentForm> <Input /> <Button /> </CommentForm> Atom Molecule require ◀ 文脈がない時点でスタイルを入れると崩壊する
26. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Atomic Designの抽象度とスタイルの注入 汎用 具象 Button Label TextArea Input Atom Molecule Organism Template RegisterForm Input Dialog Dialog Button Text SiteHeader SearchForm Image Top / Watch コンテキストがあるところで注入 汎用な部分で具象を意識した スタイルを当てると再利用性が低くなる
27. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Atomic Designの抽象度とスタイルの注入 汎用 具象 Button / Label … Atom Molecule Organism Template RegisterForm Dialog SiteHeader Top / Watch ここで当たるスタイルも 実際は手前にスタイル文脈での構造化がある
28. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 スタイル文脈での方向のAtomic Design 汎用 具象 Button / Label … RegisterForm Dialog SiteHeader Top / Watch 汎用 具象 TextAlign / BoxAlign / ObjectPosition Color / Font / Grid ColeredButton / IconButton Backdrop / CheckBox スタイルにも ライブラリ層が 存在しそう
29. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 設計難しいですが スタイルの抽象化にも取り組んでいく所存です
30. Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Designer × Engineer 協業する上で領域の境界は必ずある なくても良い境界を減らしていくこと 必要な境界はコミュニケーションを怠らないこと
31. Designer × Engineer Development #01 コンポーネント指向開発と デザイナー×エンジニアの協業 喜多 峻 @Ln_north （ ）