アトミックデザインとは何ですか？

UIを原子（Atoms）・分子（Molecules）・有機体（Organisms）・テンプレート・ページの5階層で設計する方法論。

アトミックデザインのポイントは？

Brad Frostが提唱したUI設計方法論。Atoms→Molecules→Organisms→Templates→Pagesの5階層。コンポーネントの粒度と再利用性を体系化。デザインシステム構築の理論的基盤として広く採用

【あとみっくでざいん】

アトミックデザインとは？

💡 UIを「原子」レベルから組み上げる

📌 このページのポイント

Brad Frostが提唱したUI設計方法論
Atoms→Molecules→Organisms→Templates→Pagesの5階層
コンポーネントの粒度と再利用性を体系化
デザインシステム構築の理論的基盤として広く採用

Atomic Designの5つの階層

ひよこ

5つの階層を具体的に教えて？

ペンギン先生

①Atoms（原子）：ボタン、入力フィールド、ラベルなど最小のUI要素。②Molecules（分子）：検索フォーム（入力＋ボタン）のようにAtomsの組み合わせ。③Organisms（有機体）：ヘッダー（ロゴ＋ナビ＋検索）のように独立した機能を持つセクション。④Templates：ページのレイアウト構造。⑤Pages：実データを入れた最終画面だよ

ひよこ

現場でそのまま5階層使うの？

ペンギン先生

厳密に5階層を守るチームもあれば、Atoms/Molecules/Organismsの3階層にしたり、common/feature/pageのように別の分類にカスタマイズするチームもある。大事なのは「粒度を意識してコンポーネントを設計する」という考え方であって、5階層に固執する必要はないよ

ひよこ

Reactのフォルダ構成はどうなる？

ペンギン先生

よくある構成はsrc/components/atoms/、src/components/molecules/、src/components/organisms/でディレクトリを分ける方法。ただしコンポーネントが増えると「これはMoleculesかOrganismsか」で迷うことが多い。最近はfeatureベースのフォルダ構成（src/features/auth/、src/features/cart/）の方が実用的だという意見も多いね

ひよこ

アトミックデザインの限界は？

ペンギン先生

①MoleculeとOrganismの境界が曖昧で議論になりやすい、②サーバーサイドのロジックやデータフェッチの責務が考慮されていない、③ページ単位の最適化（パフォーマンス）との相性が悪い場合がある。あくまで「UI構造の整理法」であって、アプリケーション全体のアーキテクチャではないことを理解して使おうね

まとめ：ざっくりこれだけ覚えればOK！

「アトミックデザイン」って出てきたら「UIを5つの粒度で分類して設計する方法論」と思えればだいたいOK！

📖 おまけ：英語の意味

「Atomic Design」＝原子的デザイン

💬 化学の原子（Atom）→分子（Molecule）→有機体（Organism）になぞらえた階層構造だよ

← 用語集にもどる

アトミックデザイン とは？

アトミックデザインとは？