2021年8月24日火曜日

JS:Atomic Design

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ライブラリを作り上げます。