Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
takanorip
December 10, 2018
Programming
1
1.3k
Atomic Designとの 上手な付き合い方 / better-relationship-between-atomic-design
takanorip
December 10, 2018
Tweet
Share
More Decks by takanorip
See All by takanorip
ソフトウェアエンジニアの教養を養う本
takanorip
1
14k
共創するためのデザイン批評
takanorip
7
3.2k
Figmaプラグイン 開発のすゝめ
takanorip
0
180
Headless Components Design
takanorip
0
43
10分で理解する HTML Modules
takanorip
1
420
Polymer Project 2020
takanorip
1
130
技術とデザインの間
takanorip
0
1.4k
Color in Interface Experience
takanorip
1
92
ウェブフォント今昔物語
takanorip
5
3.6k
Other Decks in Programming
See All in Programming
io22 extended What's new in app performance
veronikapj
0
340
A Philosophy of Software Design 後半
yosuke_furukawa
PRO
10
2.8k
Swift Regex
usamik26
0
180
IE Graduation (IE の功績を讃える)
jxck
20
12k
Managing Error Messages with your Oracle Database REST APIs
thatjeffsmith
0
130
チームでカレーを作ろう!アジャイルカレークッキング
akitotsukahara
0
820
短納期でローンチした新サービスをJavaで開発した話/launched new service using Java
eichisanden
6
1.9k
BASE BANKチームの技術選定と歴史 / how to decide technology selection for startup
budougumi0617
0
1.1k
Oracle REST Data Service: APEX Office Hours
thatjeffsmith
0
760
Haskellでオブジェクト指向プログラミング
koheisakata
0
110
Amazon Aurora の v1 が EOL になるので 10 クラスタアップグレードして出てきたノウハウ
dekokun
0
860
Power Automateドリブンのチームマネジメント
hanaseleb
0
190
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
What’s in a name? Adding method to the madness
productmarketing
11
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Web Components: a chance to create the future
zenorocha
303
40k
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Building Your Own Lightsaber
phodgson
94
4.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Building Adaptive Systems
keathley
25
1.1k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Designing with Data
zakiwarfel
91
3.9k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
940
Transcript
Atomic Designとの 上手な付き合い方 Takanori Oki
自己紹介 • Takanori Oki(@takanorip) • フロントエンドエンジニア • React / Nuxt.js
/ Polymer ... • フォントが好き • 前職で1年くらいAtomicDesign運用経験あり
たぶん 前の人達と同じような 話をします
私的な感情論なので あまり真面目に捉えないで ください
最近思うこと
みんな Atomic Design に 真面目すぎるんじゃない?
真面目すぎる • コンポーネントの分け方の議論に時間を かけすぎて、実装が進まない • 設計の手助けをしてくれるはずのものが 設計を難しくしてる、本末転倒 • 全てに満足することはできない
「コンポーネントの設計しっかりしなきゃ…」 「これはMolecules? Organisms?」
つらい!!
つらくならないためには 「大雑把に」 付き合うことが大切
最小単位を意識する • コンポーネントを作る際は最小単位(Atom) だけ意識する • Molecules か Organisms かは大した問題じゃ ないし、早すぎる最適化を生む危険もある
• ある程度全体が見えてきてから考えたほうが 良い
「正解はない」 • Atomic Design は概念 • 正解はないので、チームやプロダクトに 合わせた階層構造を考える必要がある • 厳密になりすぎず、ゆとりを持つことが必要
• が、ルールは必要
ルールを整備することで 考えることを減らす
基本再利用しないものとして コンポーネントをつくる
重要なのは Templates/Pages と Organisms 以下の分離
責務を分離する
Template/Pagasは Storeに接続され、 アプリケーション全体の状態 を知っている
Organisms以下の コンポーネントは そのコンポーネントのこと しか知らない
デザイナーを巻き込むこと
デザイナー重要 • そもそも、エンジニアだけでこういう話を するのは良くない • デザイナーに Atomic Design の概念を デザインフローに組み込んでもらう
• コンポーネントの単位はデザイナーに決めて もらうのが良いかも
Atomic Designをちゃんと 機能させるには デザインと実装 両方の知識が必要!
僕の理想 • デザイナーがコンポーネントをデザインする 段階で、おおよその階層を決める(Atoms/ Molecules/Organizms) • 実装時に不都合がある場合は、エンジニア側 から相談し解決
コンポーネントのデザイン管理 • コンポーネントごとのデザイン管理は Figmaが優秀(ただし有料プランのみ) • コンポーネントを保存でき、同じチーム内の プロジェクトで使い回せる • エンジニアもコンポーネントの デザイン一覧を確認できるので便利
どっちが主導権を握るかで 使うツールを変えても良い
おわり!