Atomic Design

小さなUIコンポーネントを組み合わせて大きな
コンポーネントを
作っていくための
デザインフレームワーク

UIコンポーネントの
粒度は５つある

• Atoms(原子)

• Molecules(分子)

• Organisms(有機体)

• Templates(テンプレート)

• Pages(ページ)

Atoms(原子)
UIを構築する最小単位
例:ボタン、テキストなど

Molecules(分子)
複数のAtomsを組み合わせたもの
例:入力フォーム＋ボタン

Organisms(有機体)
MoleculesやAtomsで構成される
コンポーネント
Moleculesとの違いとしては
独立して成立するコンポーネント
例:ヘッダーなど

Templates(テンプレート)
ワイヤーフレーム

Pages(ページ)
Templatesに対して実際のデータを反映させたもの

ページごとに若干デザインが違うものがあったり、、、

デザイナーも全てのページを把握できていないので、違いに気づけない、、、

ワイアーフレーム作成に時間がかかる、、、

フロントチームもできたばかりで責務の分割がうまくできない

Atomsをアセットとして入れておく

Cacoo,Zeplin,etc,,,

デザインがページごとに
若干違う、、、
みたいなことは
起きなくなった

ワイアーフレームの
作成の工数が
大きく削減

開発が進めやすくなった

コンポーネントの分け方とか
MoleculesとOrganisms

開発以外にAtomic Designを知ってもらうとか

注意

Atomic Designは
銀の弾丸ではない

たまたまうちのチーム(部署)にはあっていた

世の中の全ての課題を解決できるわけではないしあっていない環境もある