atomic designにまつわるエトセトラ
TRANSCRIPT
![Page 1: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/1.jpg)
Atomic Design にまつわるエトセトラ
2015-05-30
![Page 2: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/2.jpg)
Edward Fox
• Repro Inc. • Front-end Developer • Ruby on Rails, CSS, JavaScript, Git, AWS
![Page 3: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/3.jpg)
今回話すこと
• Atomic Designという設計思想
•銀の弾丸はない
![Page 4: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/4.jpg)
今回話さないこと
•完璧なデザイン・設計
•デザインのハウツーや技法
![Page 5: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/5.jpg)
![Page 6: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/6.jpg)
デザインを外注することに
![Page 7: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/7.jpg)
Atomic Designというものがあるらしい
![Page 8: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/8.jpg)
![Page 9: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/9.jpg)
Brad Frost
![Page 10: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/10.jpg)
Atomic design provides a clear methodology for crafting design systems. It gives us the ability to traverse from abstract to concrete. Because of this, we can create systems that promote consistency and scalability while simultaneously showing things in their final context. And by assembling rather than deconstructing, we’re crafting a system right out of the gate instead of cherry picking patterns after the fact.
![Page 11: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/11.jpg)
ようするに
![Page 12: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/12.jpg)
•デザインシステムを作る方法論の1つ
•デザインの一貫性と拡張性
•多人数の作業においても、デザインシステムが1つ1つ組み上がって構築される
![Page 13: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/13.jpg)
Atoms
![Page 14: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/14.jpg)
Atoms
![Page 15: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/15.jpg)
Molecules
![Page 16: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/16.jpg)
Molecules
![Page 17: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/17.jpg)
Organisms
![Page 18: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/18.jpg)
Organisms
![Page 19: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/19.jpg)
Templates
![Page 20: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/20.jpg)
Templates
![Page 21: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/21.jpg)
Pages
![Page 22: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/22.jpg)
Pages
![Page 23: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/23.jpg)
わかりやすい
•最小単位のコンポーネントを作り、それを組み合わせてより複雑なデザインを形作る
![Page 24: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/24.jpg)
デザイナーとエンジニアが協調しやすそう
•デザインのコンポーネント(視覚的なまとまり)と実装の単位(HTMLタグ/CSSファイル)が対応する
![Page 25: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/25.jpg)
![Page 26: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/26.jpg)
![Page 27: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/27.jpg)
色々と問題もある
![Page 28: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/28.jpg)
問題:
エラーメッセージは Molecule? Organism? Template?
![Page 29: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/29.jpg)
解決:
単体で意味をもって機能するから Organismに集約
![Page 30: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/30.jpg)
問題:
多言語対応とかどうすんの?
![Page 31: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/31.jpg)
解決:
それぞれの言語を 1つのテンプレートとして考える
![Page 32: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/32.jpg)
![Page 33: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/33.jpg)
![Page 34: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/34.jpg)
![Page 35: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/35.jpg)
![Page 36: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/36.jpg)
![Page 37: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/37.jpg)
ゼロからプロダクトやブログテーマなどを作っていくには良さそう
•既存のサービスから要素を抽出してAtomicな要素に分割していくのは難しい
• PhotoshopとかSketchでできたデザインを実装していく場合にはAtomicな要素の漏れがありそう
![Page 38: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/38.jpg)
•単一ページにAtomic Designを使わない
![Page 39: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/39.jpg)
結論
• Atomic Design良い。でもサービスの段階や開発にあったデザイン哲学・設計を選択するの大事
• CSSはすぐ腐る
•完全無欠な設計を目指すのではなく、壊れたとしても復旧がすぐに出来る設計と心構えを
![Page 41: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/41.jpg)
We’re hiring!
![Page 42: Atomic Designにまつわるエトセトラ](https://reader030.vdocuments.net/reader030/viewer/2022032619/55c3f43fbb61eb89068b470c/html5/thumbnails/42.jpg)
完