アトミックデザインの単位
Atoms（原子）
UI構成の最小単位。ボタン・ラベルなど。
Molecules（分子）
Atomsを組み合わせて作る構成物。
ラベル(Atom)+ボタン(Atom)+インプット(Atom)=入力フォーム(Molecules)
Organisms（有機体）
原子や分子を組み合わせて作る構成物。
ラベル複数(Atom)+入力フォーム(Molecules)=サイドバー(Organisms)
Templates（テンプレート）
原子や分子、有機体を組み合わせて作るサイト全体の構成。
ヘッダー(Organisms)+サイドバー(Organisms)+フッター(Organisms)=サイト構成（template）
Pages（ページ）
テンプレートに独自のコンテンツを入力したアトミックデザインの最終形。
サイト構成(template)+文章・画像などの情報=サイトの完成品(Pages)
自分のディレクトリ構成
|- screens：各画面単位で利用するComponentを格納する
|- component：複数の画面で利用する部品をまとめるフォルダ
| |- organisms：AtomicDesignでいうOrganismsでAtomsやMoleculesを組み合わせた小さめの部品。
| |- molecules：AtomicDesignでいうMoleculesでAtomsを組み合わせた小さめの部品。
| |- atoms：AtomicDesignでいうAtomsで最小の部品。
|
|- container：AtomicDesignでいうPagesで一番の親
|- template：AtomicDesignでいうTemplatesでcontainerの子
|- organisms：このページでしか使わない少し大きめの部品。AtomicDesignでいうOrganismsでcontainerの子