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

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

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Ln-north Ln-north
December 02, 2019
Design
0
160

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

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
これからの「Webデザイン」の話をしよう～デザイナーの私が考えるブロックテーマへの対応で変わりゆくデザインの価値～
Avatar for ミヤケアツシ ds35mm
0
590
Diverse Design Team Deck
Avatar for Diverse diverse
0
950
Build for the Web, Build on the Web, Build With the Web
Avatar for Harry Roberts csswizardry
0
210
新卒2年目デザイナーが、UX検定基礎にチャレンジした話
Avatar for ぽん designer_no_pon
1
1.3k
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
170
CULTURE DECK／Marketing Director
Avatar for M-HAND,Inc. mhand01
0
950
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
280
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
200
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
410
デザインコンテキストのバトンをつなぐ—AI時代のプロダクトマネジメント
Avatar for kumano ayumi kumanoayumi
6
960
デザインするために「多様性」について考える
Avatar for なつ iflection
0
230
デザインを信じていますか
Avatar for sekig(ojiee) sekiguchiy
1
1k

Featured

See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
630
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon Słowik szymonslowik
1
240
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
150
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.3k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
460
The #1 spot is gone: here's how to win anyway
Avatar for Tamara Novitovic tamaranovitovic
2
980
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.4k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k

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

    （ ）