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

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

Avatar for Ln-north Ln-north
December 02, 2019
Design
0
150

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

Avatar for Ln-north

Ln-north

December 02, 2019
Tweet

More Decks by Ln-north

See All by Ln-north
文字を回したり裏返したりする話 / FRESH Lightning-Talks #01
Avatar for Ln-north lnnorth
0
42

Other Decks in Design

See All in Design
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
Avatar for 株式会社ルート root_recruit
0
260
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
260
Treasure_Hunting
Avatar for Sol Metts solmetts
0
180
root COMPANY DECK / We are hiring！
Avatar for 株式会社ルート root_recruit
1
26k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
PRO
0
200
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
170
アンエシカルデザインの枠組みの提案 -HCD-Netダークパターン研究会活動報告-
Avatar for Yu Morita securecat
0
180
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
0
150
「自分の仕事はどこまで？」と問い続けたら。デザイナーの「視座」を考える
Avatar for Takeru Mukai mukai_takeru
0
270
企業にデザインが融けたとき、デザイナーにできること。事業会社12年間の探究と葛藤 / Designship2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
1.3k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
Avatar for Woo seop Shin shin_2
0
180
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
430

Featured

See All Featured
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.8k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.1k
16th Malabo Montpellier Forum Presentation
Avatar for AKADEMIYA2063 akademiya2063
PRO
0
37
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
180
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.5k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
44
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
Avatar for Helen Beal helenjbeal
1
94
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
Avatar for Szymon szymonslowik
1
870
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
120

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

    （ ）