Atomic Design

Atoms（原子）

Componentの基礎の部分
Atomsを組み合わせることにより大きなComponentを構成することができる
対象要素を機能的にこれ以上分割することができないもの
入力フォームやボタンなどがあげられる
入力フォームだけみてもなんの入力フォームなのかの情報が入らない

Molecules(分子)

Moleculesは、Atomsを組み合わせて作る要素です
Moleculesになることで初めて意味をもつ要素となる
Atomsのラベル、入力フォーム、登録ボタンという三つのComponentが
あってもそれ単体では意味はなさないがそれらを組み合わせることで
「ラベルで示したことに応じて入力フォームに書き、登録ボタンを押す」という意味を持つ
Moleculeはできるだけ単純にして、再利用性やUIの一貫性を高める

Organisms(有機体)

OrganismsはAtomsやMolecules、また他のOrganismsを組み合わせて作る要素です
ヘッダーやフッターなどもこの要素に含まれる
下記の画像のようにヘッダーは「タイトル」というAtomsと、「ナビゲーション」「SNSのボタン」という
Moleculeが組み合わさってヘッダーというOrganismsになっています
Organismsからそのページの特色が出やすい

Templates(テンプレート)

OrganismsやAtomsやMoleculesみたいに化学的なものに例えなくなる
それは仕事の依頼主や上司に見せるものということを明確にするために一般的な言葉を使う
Templatesはページ構造を説明するもの
TemplatesはOrganismsやMoleculesを組み合わせて作ります
Templatesの段階ページ内容はまだ仮の段階
言い換えるとワイヤーフレーム

Pages(ページ)

Pagesは、Templates内へ実際に文章や画像を入力されたもの
完成形

Atomic Designの利点

名前がついている
Atomic Designにはコーポネントの大きさにそれぞれAtoms.Molecules
Organisms.Templatesなど名前がついているためAtomsであればこれ以上
分割することができない要素などの特徴が共有されやすくなります。

デザインの変更に対応しやすい
Atomic Designの考え方えコンポーネントを作ると、デザイン変更に対応しやすくなり再利用性も高くなります
特にAtomsやMoleculesへ振り分けられるような細かいコンポーネントはデザイン変更に強い

セレクタの詳細度が平坦に近づく
Atomic Designの考え方を使って作ったCSSの詳細度を示したグラフですが、割と平坦なグラフになっています
平坦であると開発がしやすいという利点がある
詳細度が高い方が

Atomic Designの欠点

デザイナーがどのようにデザインしていいかわからない
Atomic Designは「小さな単位でコーポネントを作り大きいコンポーネントにしていく」というデザイン手法
であるためフロントエンド実装では利点亜あります
しかしデザイナーからすると、Atomic Designの考え方でデザインするのは難しい