SlideShare a Scribd company logo
Atomic Design
にまつわるエトセトラ
2015-05-30
Edward Fox
• Repro Inc.
• Front-end Developer
• Ruby on Rails, CSS, JavaScript, Git, AWS
今回話すこと
• Atomic Designという設計思想
• 銀の弾丸はない
今回話さないこと
• 完璧なデザイン・設計
• デザインのハウツーや技法
Atomic Designにまつわるエトセトラ
デザインを外注することに
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
ファイル)が対応する
Atomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
色々と問題もある
問題:
エラーメッセージは
Molecule? Organism? Template?
解決:
単体で意味をもって機能するから
Organismに集約
問題:
多言語対応とかどうすんの?
解決:
それぞれの言語を
1つのテンプレートとして考える
Atomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
Atomic Designにまつわるエトセトラ
ゼロからプロダクトやブログテーマなどを作っていく
には良さそう
• 既存のサービスから要素を抽出してAtomicな要素に
分割していくのは難しい
• PhotoshopとかSketchでできたデザインを実装してい
く場合にはAtomicな要素の漏れがありそう
• 単一ページにAtomic Designを使わない
結論
• Atomic Design良い。でもサービスの段階や開発にあっ
たデザイン哲学・設計を選択するの大事
• CSSはすぐ腐る
• 完全無欠な設計を目指すのではなく、壊れたとしても
復旧がすぐに出来る設計と心構えを
Sample:
https://github.com/edwardkenfox/atomic-sample
We’re hiring!
完

More Related Content

PDF
Railsチュートリアルの歩き方 (第4版)
PDF
Atomic design
PDF
Atomic Designを考える
PDF
Atomic Designと付き合うコツ♡
PDF
Atomic Design デザインと実装の狭間
PDF
Story-Assured Design で開発チーム全員でデザインする
PDF
成長するアプリケーションとjsフレームワーク
PDF
RSpec: Feature specs as checklist
Railsチュートリアルの歩き方 (第4版)
Atomic design
Atomic Designを考える
Atomic Designと付き合うコツ♡
Atomic Design デザインと実装の狭間
Story-Assured Design で開発チーム全員でデザインする
成長するアプリケーションとjsフレームワーク
RSpec: Feature specs as checklist
Ad

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