Atomic Design にまつわるエトセトラ

2015-05-30

Edward Fox

• Repro Inc. • Front-end Developer • Ruby on Rails, CSS, JavaScript, Git, AWS

今回話すこと

• Atomic Designという設計思想

•銀の弾丸はない

今回話さないこと

•完璧なデザイン・設計

•デザインのハウツーや技法

デザインを外注することに

Atomic Designというものがあるらしい

Brad Frost

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.

ようするに

•デザインシステムを作る方法論の1つ

•デザインの一貫性と拡張性

•多人数の作業においても、デザインシステムが1つ1つ組み上がって構築される

Atoms

Atoms

Molecules

Molecules

Organisms

Organisms

Templates

Templates

Pages

Pages

わかりやすい

•最小単位のコンポーネントを作り、それを組み合わせてより複雑なデザインを形作る

デザイナーとエンジニアが協調しやすそう

•デザインのコンポーネント（視覚的なまとまり）と実装の単位（HTMLタグ／CSSファイル）が対応する

色々と問題もある

問題:

エラーメッセージは Molecule? Organism? Template?

解決:

単体で意味をもって機能するから Organismに集約

問題:

多言語対応とかどうすんの?

解決:

それぞれの言語を 1つのテンプレートとして考える

ゼロからプロダクトやブログテーマなどを作っていくには良さそう

•既存のサービスから要素を抽出してAtomicな要素に分割していくのは難しい

• PhotoshopとかSketchでできたデザインを実装していく場合にはAtomicな要素の漏れがありそう

•単一ページにAtomic Designを使わない

結論

• Atomic Design良い。でもサービスの段階や開発にあったデザイン哲学・設計を選択するの大事

• CSSはすぐ腐る

•完全無欠な設計を目指すのではなく、壊れたとしても復旧がすぐに出来る設計と心構えを

Sample: https://github.com/edwardkenfox/atomic-sample

We’re hiring!

完