Atomic Designについて

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

Atomic Designについて

Atomic Designとは

Brad Frost氏が考案したデザインシステムで、画面要素を以下の五段階に分け、これらが組み合わさって画面が構成されているという考えに基づいています。

• Atoms
• Molecules
• Organisms
• Templates
• Pages

モダンJavaScriptのコンポーネント化ととても相性が良いです。

Atoms（原子）とは

それ以上分解することが出来ない要素のことです。具体例は以下の通りです。

• ボタン
• テキストボックス
• アイコン
  　　　　　　　　　等

Molecules（分子）とは

ATOMを組み合わせた何らかの意味のあるデザインパーツのことです。具体例は以下の通りです。

• アイコン　+　メニュー名
• プロフィール画像 + ユーザー名
• アイコンセット
  　　　　　　　　　　　　　　　等

Organisms（有機体）とは

AtomやMleculeを組み合わせてある程度の意味を持つようになった要素の集まりのことです。
具体例は以下の通りです。

• 入力フォーム
• サイドメニュー
  　　　　　　　等

Templatesとは

ページのレイアウトを表現する要素のことです。
Templeteはレイアウトのみで実際データは持たないことにご注意ください。
具体例は以下の通りです。

Pagesとは

最終的に表示される画面のことです。