はじめに

Atomic Designとは

Atoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の各コンポーネント同士を組み合わせて作成するデザイン手法
それぞれのコンポーネント詳細は下記

コンポーネント	詳細
Atoms(原子)	画面を構成する要素の最少単位ラベルやインプット項目など
Molecules(分子)	Atomsを組み合わせて作成された要素　検索フォームなど
Organisms（有機体）	複数のMoleculesやAtomsを組み合わせたもの、ヘッダーやフッターなど
Templates（テンプレート）	複数のOrganisms等を組み合わせたデータの入っていない画面　ワイヤーフレームとなるもの
Pages(ページ)	実際の文言や画像などが入ったもの、ほとんど最終的な画面と同じ