Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
コンポーネント指向開発とデザイナー×エンジニアの協業
Search
Ln-north
December 02, 2019
Design
0
150
コンポーネント指向開発とデザイナー×エンジニアの協業
Ln-north
December 02, 2019
Tweet
Share
More Decks by Ln-north
See All by Ln-north
文字を回したり裏返したりする話 / FRESH Lightning-Talks #01
lnnorth
0
41
Other Decks in Design
See All in Design
組織で取り組むアクセシビリティのはじめ方
masakiohsumi
0
180
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
harutaka Vision Deck
zenkigenforrecruit
0
220
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1k
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
250
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
480
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
550
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.9k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
Cyber Heart Online Book
hjnasby
0
180
Featured
See All Featured
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Fireside Chat
paigeccino
39
3.6k
What's in a price? How to price your products and services
michaelherold
246
12k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Navigating Team Friction
lara
189
15k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
62k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Building Applications with DynamoDB
mza
96
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Embracing the Ebb and Flow
colly
87
4.8k
Transcript
Designer × Engineer Development #01 コンポーネント指向開発と デザイナー×エンジニアの協業 喜多 峻 @Ln_north
( )
喜多 峻 株式会社ドワンゴ デザインコミュニケーション室 friends.nico / Twitter: @Ln_north Designer ×
Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 https://qiita.com/ln-north/items/53c23beb3f82abf64a4c コンポーネント指向フロントエンド開発 におけるデザイナーの参画について ‑
Qiita ドワンゴ Advent Calendar 2017 17日目
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
React / Atomic Design Storybook SCSS / CSS Modules Designer
× Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネント指向のフロントエンド環境での開発で デザイナーとして2年近くコミットしてきました
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネントにスタイルを含めると コンポーネントの再利用性が下がる
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネントとスタイルを分離し スタイルはコンポーネントに利用されるものと定義 <Button style={
}> Label <Button /> Label require
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 スタイルが決定される時点で注入する <Button /> Label
<CommentForm> <Input /> <Button /> </CommentForm> Atom Molecule require ◀ 文脈がない時点でスタイルを入れると崩壊する
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS
Modules
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS
Modules ある程度ビジュアルデザインに理解がないと 「意図通り」に書くことが難しい コーナーケースの判断はデザイナーがやりやすい デザイナーのほうが関心が高い(調整/編集したい)
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 HTML React CSS CSS
Modules Designer
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 コンポーネント設計の対象として CSSで利用するUI要素として データの写像の対象として HTML
React CSS CSS Modules Designer
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Engineer Designer HTML React
CSS CSS Modules Designer この境界上のコミュニケーションは大事 (詳しくは記事参照)
アニメーション Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 現在の責務分担で良かった例
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 少し複雑なアニメーション 実装コストが高く見えて敬遠されがち
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 状態を拾ってCSSの animation/transition で実装する Designer
aria, data属性で 動的な値や状態だけ 渡すようにする Engineer 動きはデザイナーでやりますという話であれば 心理的障壁が減って取り組みやすい
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 デザイナー/エンジニア CSSのanimation/transitonの基本的な表現方法 デザイナー エンジニア
CSSのanimation/transition単体でできない動きを理解しておく CSSOMでのanimation/transition周りの操作
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 難所 未来 責務
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Reactでのコンポーネントと スタイルのコンポーネントは一部合致しなさそう
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
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 復習:スタイルが決定される時点で注入する <Button /> Button
<CommentForm> <Input /> <Button /> </CommentForm> Atom Molecule require ◀ 文脈がない時点でスタイルを入れると崩壊する
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 コンテキストがあるところで注入 汎用な部分で具象を意識した スタイルを当てると再利用性が低くなる
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Atomic Designの抽象度とスタイルの注入 汎用 具象
Button / Label … Atom Molecule Organism Template RegisterForm Dialog SiteHeader Top / Watch ここで当たるスタイルも 実際は手前にスタイル文脈での構造化がある
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 スタイル文脈での方向のAtomic Design 汎用 具象
Button / Label … RegisterForm Dialog SiteHeader Top / Watch 汎用 具象 TextAlign / BoxAlign / ObjectPosition Color / Font / Grid ColeredButton / IconButton Backdrop / CheckBox スタイルにも ライブラリ層が 存在しそう
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 設計難しいですが スタイルの抽象化にも取り組んでいく所存です
Designer × Engineer Development #01 コンポーネント指向開発とデザイナー×エンジニアの協業 Designer × Engineer 協業する上で領域の境界は必ずある
なくても良い境界を減らしていくこと 必要な境界はコミュニケーションを怠らないこと
Designer × Engineer Development #01 コンポーネント指向開発と デザイナー×エンジニアの協業 喜多 峻 @Ln_north
( )