Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Ln-north Ln-north
December 02, 2019
Design
170
0

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

Avatar for Ln-north

Ln-north

December 02, 2019

More Decks by Ln-north

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

Other Decks in Design

See All in Design
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
2.8k
ClaudeCodeでマーケターの課題を解決する
Avatar for 太田賢一 kenichiota0711
11
14k
いいUIとは？初心者向けに事例をもとにUIデザインを分解
Avatar for 原 佑一｜クリエイティブディレクター yuichi_hara7
11
5.9k
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
Avatar for kazuhiro hara karad
0
190
富山デザイン勉強会_デザイン思考.pdf
Avatar for keita keita_yoshikawa
3
160
エンジニアでも捗る デザイナー的思考入門(bitA Edit 新ver)
Avatar for Tsubasa SEKIGUCHI tinykitten
1
470
AIスライド生成を進化させるMDファイル
Avatar for 太田賢一 kenichiota0711
1
1.7k
デザインとフロントエンドの境界が融ける Claude Code × Figma
Avatar for littlebusters littlebusters
2
3.5k
「惜しいデザイン」 を生み出さないための AIレビューループ
Avatar for Kazuhiro Tobita 0b1tk
3
4.3k
(2026 FlowCon Keynote) Sociotechnical Architecture Finding Flow
Avatar for xinyao xinyao
0
120
(2026 AmA Keynote) Sociotechnical Architecture - Having your Agile and agility too.pdf
Avatar for xinyao xinyao
2
130
Where Imagination Ends AI Begins
Avatar for R-524 r5ni4
0
370

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
659
62k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k
Impact Scores and Hybrid Strategies: The future of link building
Avatar for Tamara Novitovic tamaranovitovic
0
430
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Music & Morning Musume
Avatar for Bryan Veloso bryan
47
7.4k
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
600
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Primal Persuasion: How to Engage the Brain for Learning That Lasts
Avatar for Mike Taylor tmiket
0
450
The Anti-SEO Checklist Checklist. Pubcon Cyber Week
Avatar for Ryan Jones ryanjones
0
230
Kristin Tynski - Automating Marketing Tasks With AI
Avatar for Tech SEO Connect techseoconnect
PRO
0
510

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

    （ ）