1.Atomic Designのコンポーネント
Atomic Designで有名なのは、UIの構造を次の5段階で考える
- Atoms(原子)
- Molecules(分子)
- Organisms(有機体)
- Templates(テンプレート)
- Pages(ページ)
あらゆるものが原子の集まりでできているように、ページもAtoms(原子)の集まりであると考え、Atomsが組み合わさってMolecules(分子)になり、Molecules(分子)が組み合わさってOrganisms(有機体)となる。
Organisms(有機体)の集まりでページのフレームであるTemplates(テンプレート)を作るが、このTemplatesは具体的なコンテンツの入っていない空っぽのページの枠組み。そこに具体的なテキストや画像を入れ込んでPages(ページ)を作る……というふうに、UIを階層構造で考えます。
1.1.Atoms(原子)の例
Atomsの例は、検索フォームのパーツです。ここでは「ラベル」「テキスト入力欄」「ボタン」というように、これ以上分けられないような単位のUIをAtomとしています。
1.2.Molecules(分子)の例
「ラベル」「テキスト入力欄」「ボタン」といったAtomを組み合わせて作った「検索フォーム」がMoleculeです。
1.3.Organisms(有機体)の例
そして、この「検索フォーム」やその他「メニュー」や「サイトのロゴ」など、他のMoleculeらが集まってできている「ヘッダ」がOrganismです。
1.4.Templates(テンプレート)の例
Organismを組み合わせ、ページの枠組みを構成します。ただ中身はすべてダミーです。これがTemplate。
1.5.Pages(ページ)の例
Templateに具体的なコンテンツを入れ込んだのが、最終的なアウトプットとなるPageです。
このように、UIを分解して考え、他の画面でも共通で使えるAtom、Moleculeをどう設計するか、細部を作りながら全体を俯瞰し、また細部が適切かどうか、具体的にコンテンツを入れながら考えるというのが、Atomic DesignのUIデザイン方法論です。
このようにしてUIを考え、サイト全体として共通のUIライブラリを作り上げます。