画面を構成する要素を、原子（Atom）分子（molecule）有機体（organism）テンプレート（Templates）ページ（Pages）の5つの階層に分け、最終的なUIとUIの基礎となるデザインシステムを同時に作成する設計方法で、アメリカのWebデザイナーBrad Frost氏が考案・提唱した。
公開しているアトミックデザインの電子書籍では、アトミックデザインの実践プロセスが紹介されていて「アトミックデザインの本質はUIを構築するためのメンタルモデルに過ぎない」と述べている。
ブラッド・フロスト氏
(引用元: bradfrost.com)
アトミック・デザイン誕生の背景
紙というメディアにおけるページというメタファーの崩壊
1991年にWWWの誕生当時にはウェブの概念が斬新過ぎて理解できなかったため、ユーザーが直感的に理解できる「紙のページ」というメタファーが役に立っていた。しかし、時間が経った今では、紙の上でのページという概念のままではウェブデザインを行うには限界がきている。『ページという概念で捉えるのではなく、今後は機能とコンポーネントで捉えるべきである』と提唱者のフロスト氏は語っている。
デバイス・スクリーンサイズの多様化、動的なコンテンツへの対応
デバイスの増加により、何百にも及ぶ全てのスクリーンサイズに対応したデザインカンプ（UIデザインの完成見本画像）を作成し、クライアントに見せるのは現実的でない時代になった。UIの作成においてユーザーが見る環境は多種多様であり、すべての環境で同じ見た目と機能を用意することは難しい。そこで、PhotoshopやSketchなどで作成された静的なデザインカンプに変わって、デバイス・スクリーンサイズに応じたUIの変化や、動的なデータによって表示されるコンテンツの見え方を検証するために、デザインの中心はフロントエンドコードとすることを提唱者のフロスト氏は推奨している。
静的なデザインカンプは、完全にコードに取って代わられたわけではなく、ページの全体的なデザインの雰囲気を検証する用途においてはコードよりも利便性が高い。
モジュール性への注目の高まり
モジュールは、ウェブの誕生前から存在する概念で、部品をまず生産してから製品に応じて部品を組み立てる製造方法である。ウェブにおいてもモジュール性は設計原則としてエンジニアやデザイナーから重要だと認識されている。アトミックデザインは、モジュールの階層関係と粒度を化学をモチーフに直感的に理解できるように定義され注目を集めている。
関連用語: モジュール方式
フロスト氏の提唱した5つの段階
アトミックデザインでは、デザインの構成物を「化学」を要素をメタファーとして採用し５つに分類した。
アトミックデザインの5つの段階
アトミックデザインの5つの段階
- 原子（Atom）: 最も小さい粒度の要素
- 分子（molecule）: 2つ以上の原子を組み合わせたシンプルなUI要素
- 有機体（organism）: 切り離して単体でも機能する分子の集まり
- テンプレート（Templates）: いくつかの有機体・分子・原子から成り立っている骨組み
- ページ（Pages）: テンプレートに実際のコンテンツを適用したもの
原子や分子といった名称は、自然界と同様に「原子はそれ以上分割することはできず、分子は原子が集まってできたもの」といった性質を直感的に理解できる。
5つの段階を活用することで、再利用可能なデザインパターンを確立し、それらのパターンの中に入れる実際のコンテンツを正確に反映するシステムを作成する。デザインの構成物（コンポーネント）を機能的で使いやすく美しいものにするには、固有のコンポーネントをゼロにするとよい。
instagramのUIをアトミックデザインに適応したもの
(翻訳・引用元: Atomic Design Chapter2)
最も基本的な要素「原子（Atom）」
原子は最も基本的な要素で、これ以上分解することができないもの。 インプット・ラベル・ボタンのような基本的なHTMLタグや、カラーパターン、フォント、アニメーションなどの抽象的なものも原子として扱われる。
原子の例: ラベル / インプット / ボタン
(引用元: Atomic Design Chapter2 – Atom)
原子を組み合わせた「分子(Molecule)」
原子を組み合わせたもので、独自の性質・機能を持つもの。 例えばサーチフォームは分子に当たるが、ラベル・インプット・ボタンの原子が集まってできている。原子だけでは機能しないものが、分子として組み合わせられることで機能性が生まれる。
分子の例: サーチフォーム
(引用元: Atomic Design Chapter2 – Molecules)
原子・分子を組み合わせた比較的複雑な構造「有機体（organism）」
原子・分子を組み合わせた比較的複雑な構造。ヘッダー・投稿カードなど、構造物単体で成立するものが該当する。類似・または異なるパターンで繰り返される。
有機体の例: ヘッダー
(引用元: Atomic Design Chapter2 – Organisms)
インターフェースの骨格「テンプレート（Templates）」
インターフェースの骨格となる、原子・分子・有機体の集合体。異なる階層の要素を組み合わせている場合もある。
テンプレートでは、UIのコンテンツ構造に焦点を当てることが大切である。
テンプレートの例
(出典元: Atomic Design Chapter2 – Templates)
ページ(Pages)
テンプレートに実際のコンテンツを適用したもので、アトミックデザインの最も具体的な段階である。ページ段階の大きな目的は、実際のコンテンツで確認することで、テンプレートのバリエーションを明確にすることである。
ページは、ユーザーに表示される最終的なUIを示すことに加えて、基礎となるデザインシステムの有効性をテストするために不可欠な段階である。基本となるテンプレートは同じでも、ページでは、コンテンツの動的な性質を反映するようにUIが変更される。例として、管理者権限のユーザーとそうでないユーザーでは表示が異なる。これらの変化は、基礎となる分子、有機体、およびテンプレートがどのように構築されるかに直接影響する。
コンテンツのバリエーションを考慮したページを作成することで、より柔軟に対応できる堅牢で信頼性が高いデザインシステムを作成することができる。
テンプレートにコンテンツを適用したページの例
(出典元: Atomic Design Chapter2 – Pages)
アトミックデザインの本質は階層分類ではない
アトミックデザインでは、5つの分類に遵守することに意味がないため必ずしも遵守する必要はない。組織に合った分類の共通認識をチームで確立し、アトミックデザインの原則を適応することで効果的に作業を行うことができる。大切なのは、階層の分類がチームでUIデザインシステムを構築するための共通言語として機能することであり、効果的なコミュニケーションに役立つかどうかである。
組織で独自の階層分類を確立した例として、GEのデザインチームでは、「原則(Principles)」「基本(Basics)」「コンポーネント(Components)」「テンプレート(Templates)」「機能(Features)」および「アプリケーション(Applications)」と分類した。
(参考: GE’s Predix Design System)
アトミックデザインの利点
最終的なUIと基礎となるデザインシステムを同時に作成できる
アトミックデザインの実施には、いくつかの方法がある。例えば、「原子のボタンから順次作成する」ような線形プロセス「完成しているページからテンプレートを作成してコンテンツ構造を確認する」プロセス、「有機物・分子・原子を切り出して類似のものを統合する」プロセスなどであり、各階層を行ったり来たりする非線形プロセスで実施する。
作成過程で、抽象的なUI構造と具体的なUIの間を素早く行き来し、画面全体と個別のUIパーツの構造を階層ごとに見比べることで、UIとデザインシステムを同時に作成することができる。
あらゆるインターフェースで適用できる
Microsoft Word・ Photoshop・銀行のATMの操作画面・Webサイト・Instagramなどのモバイルアプリなど、あらゆるインターフェースで、アトミックデザインの考え方を用いてUIとデザインシステムを作成することができる。コードや特定の技術に紐づく手法ではない。
UI構造とコンテンツの関係の議論に役立つ
アトミックデザインでは、テンプレートとページの２階層によって、UIのパターンの構造とコンテンツが明確に分離されている。コンテンツとUIデザインは密接に関係しており、UIを構築する際は両方を考慮する必要がある。
例えば、「人物一覧を表示するテンプレートで、名前を表示するラベルの原子に長すぎる人物名が入力された場合にページ全体の見え方は崩壊しないか？」といった、構造とコンテンツについて議論するための共通認識として役立つ。
直感的に階層構造、性質が理解できる
原子、分子、および有機体という分類名称は、化学の基礎知識を持っている人なら誰でもイメージができ、階層の感覚や性質を推測することができる。
