Atomic Design（アトミックデザイン）は、ウェブサイトやアプリを構築する際に、要素を小さな「Atoms（原子）」に分解し、それらのAtomsを組み合わせてより大きな部品やページを作成する手法です。

5つの要素

Atoms：原子

ウェブサイトの中で最も小さな要素です。単純で再利用可能です。以下は一例です。

• ボタン
• テキスト入力フィールド
• アイコン
• 画像

Molecules：分子

分子はAtomsを組み合わせて、より大きな要素を作成するものです。以下は一例です。

• カード（アイコンとテキスト）
• フォーム（テキストボックスとボタン）

Organisms：有機体

AtomやMoleculesの組み合わせで、単体である程度の意味を持つ要素群です。以下は一例です。

• ヘッダーやフッター
• サイドメニュー

Templates：テンプレート

ページ全体の骨格を定義するもので、実際のデータは持ちません。コンテンツが配置される場所を指定します。

Pages：ページ

ウェブサイトの実際のページや画面です。

これらの要素を組み合わせることで、AtomsからPagesへと段階的に設計を進めることができ、効率的に管理できるようになります。