仕様変更に強く再利用しやすい！AbemaTVでも採用されている「Atomic Design」の基本を徹底解説

Atomic Designでデザインを始めよう

Atomic Designは先述したようにAtoms(原子)・Molecules(分子)・Organisms(有機体)・Templates(テンプレート)・Pages(ページ)の5つのコンポーネント単位でデザインを行なっていきます。
それでは、Atomic Designで行うデザインプロセスを確認していきましょう。

Level1：Atoms (原子)

*Atoms(原子)は、フォームでいうところのラベルや入力フィールド、ボタンなどの各UI要素をそれぞれ指します。
Atomsは最小の単位で、「要素が機能的にそれ以上分割することができない」*ものと定義されます。
例えば、フィールドやボタンは、それ以上機能的に分割することができません。

「登録する」と書かれたボタンだけを見てもユーザー登録用のボタンなのかコメント登録用のボタンなのかが分からないように、Atoms自体にはコンテクストを持ちません。
Atomsを組み合わせることで、はじめて意味を成すものの集合体となることができます。

Level2：Molecules (分子)

Atomsを組み合わせて作る要素がMolecules(分子)です。
例えば、ラベル・入力フィールド・ボタンは、それら単体では意味を持ちませんが、3つのAtomsを組み合わせてはじめてコンテクストが生まれます。
Moleculesはできるだけ単純化して、再利用できる最小の単位にする必要があります。

Level3：Organisms (有機体)

Organisms(有機体)は、AtomsやMoleculesを組み合わせて、さらに大きな意味のコンテクストに仕立て上げていきます。
例えばヘッダーやサイドウィジェットのようなパーツは、Organismという扱いにします。

Level4：Templates (テンプレート)

Templates(テンプレート)は、Organismsを組み合わせてワイヤーフレームを作っていく段階です。
この時点ではまだページ内容は仮となります。
テキストや画像は、Lorem Ipsumやサンプル画像を流し込んでいるような状態となります。

Level5：Pages (ページ)

Pages(ページ)の段階で、Template内に実際の文章や画像が流し込まれていきます。
ここで大切なのは、ただコンテンツが流し込まれたWebページではなく、綿密に作り込まれたコンポーネントが設計どうりに作動するかどうかしっかりとテストを行うことです。