アトミックデザインとは【意味/読み/英語表記】（あとみっくでざいん）

アトミックデザインの概要

アトミックデザインとは、アメリカのWebデザイナーであるブラッド・フロスト氏が考案した、UIデザインの手法のひとつです。

原子（＝アトム）が分子となり、分子同士が結合し物体を形作るように、アトムとなる最小単位のコンポーネント（構成要素）を組み合わせることにより、大きなプロダクトを完成させるのが、アトミックデザインです。

アトミックデザインには、原子（Atom）・分子（Molecule）・有機体（Organism）・テンプレート（Templates）・ページ（Pages）の5段階あります。

■原子（Atom）
原子は、最小単位のデザインパーツです。
テキストやアイコンなどが原子にあたります。

■分子（Molecule）
ふたつ以上の原子を組み合わせたものが原子です。
たとえば画面上のボタンなど、単体ではただの文字の入った図形ですが、複数の原子と組み合わせることで機能するものが分子です。

■有機体（Organism）
有機体は、原子と分子で構成されているものであり、それ単体でも機能を持つデザインパーツです。
たとえば、Webサイト内にあるメニューやヘッダーといったものです。

■テンプレート（Templates）
テンプレートは、原子、分子、有機体すべてが組み合わさったもので、サイトのフレームとなっていきます。テンプレートの段階では、中身のコンテンツはまだありません。

■ページ（Pages）
テンプレートの中に、コンテンツ内容入れ込んだ完成形のものです。

・UI/UX
・アプリデザイン
・ヘッダー
・フッター
・デザインシステム