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

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

Level1:Atoms (原子)

2.png

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

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

Level2:Molecules (分子)

3.png

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

Level3:Organisms (有機体)

4.png

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

Level4:Templates (テンプレート)

5.png

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

Level5:Pages (ページ)

6.png

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