Atomic Designとは
Webサイトの見た目やアプリの見た目を作る時に使う考え方です。
この方法は小さいパーツから組み合わせて大きなパーツを作り、
全部のパーツを組み合わせて、アプリやサイトを作っていきます。
この記事の説明
開発の用語だけでなく、レゴで例えて説明していきます。
atoms(原子)
これはレゴで例えると一番小さなブロックです。
ex)
レゴの1つのポッチだけのブロック
ウェブサイトでは、ボタンや見出し（タイトル）などがこれにあたります。
atomsは、ボタン、入力フィールド、アイコン、ラベル、テキストなどが含まれ、これらの要素は非常にシンプルで、単一の機能があります。
Molecules（分子）
Atomsを組み合わせたものです。小さなブロックをいくつか組み合わせたものです。
ex)
2つのポッチがくっついたブロックや、レゴの人形の頭と体
ラベルと入力フィールドを組み合わせたフォームグループ、ウェブサイトでは、ボタンとテキストを組み合わせたナビゲーションバーなどです。
Organisms（有機体）
Moleculesをさらに組み合わせたもので、もっと大きなレゴの塊です。
ヘッダーやフッターなど、
ex)
ヘッダー、フッター、カードなどの複数の分子を組み合わせた部分
Templates（テンプレート）
組み立てるための設計図で、Organismsを配置したページのレイアウトの骨組みで具体的なデータは含まれていません。ウェブサイトでは、ページ全体のレイアウトや構造です。
Pages（ページ）
ウェブサイトでは、実際にユーザーが見るページ全体のことです。
ex)
完成したレゴの作品
レゴで例えると
Atomic Designは、レゴブロックを使って大きな作品を作るのと同じように、小さなパーツから始めて、だんだん大きなパーツを作っていく方法です。
イメージ図
最後に
Atomic Designで個人開発もするので、今後も情報を追記していきます。