Atomic Design入門

Atomic DesignはWebデザインを構築するための方法論です。一度にページ上の要素をデザインするのではなく、一般的に使われる要素を異なるサイズのパターンにブレークダウンします。

Atoms

Atom(原子)はウェブサイトを構築する最も基礎的な要素であり、これ以上小さくできない要素となります。WebにおけるUIでは基本的な「HTMLタグ」に当てはめることができます。例えば<label><button>が該当します。更に色やフォント、アニメーションの定義もAtomとして扱うことができます。

Molecules

Atomが複数集まると、より複雑なものを表現できるようになります。複数のAtomから構成されるのがMolecules(分子)です。例えば、フォームのラベル、テキストボックス、ボタンといったAtomを組み合わせれば「検索フォーム」というMoleculesを構成できます。

AtomからMoleculusを構築する際には、UNIXの哲学でも言われるような「一つのことをうまくやる」ものを作るようにすることが推奨されています。

Organisms

更に複数のMoleculesから構成されるのが、UI上で独立したセクションとなるOrganism(有機体)です。例えばロゴ、ナビゲーション、検索フォームから成るヘッダーや、製品を表すカードのMoleculeから成るから製品リストのようなセクションが考えられます。

Organismsは独立し、再利用可能なコンポーネントになります。

Templates

Atoms(原子) - Molecules(分子) - Organisms(有機体)は、それぞれ自然界でのそれと同じような関係を持ちますが、更にこれらからなる複数のUI要素の組み合わせ、レイアウトでTemplates(テンプレート)を構築します。AtomsとMoleculesからなる人(Organisms)が集まって町ができるみたいな感じでしょうか。ただし、Templates自身はコンテンツの構造を表すことに集中したものなので、ワイヤーフレームのような状態のものと考えます。

Pages

Templates自体はあくまでもコンテンツのプレースホルダー、ワイヤーフレームの状態です。最後にTemplatesへ実際のテキストや画像などコンテンツを流し込み、実体化したもの(インスタンス)がPages(ページ)となります。実際にユーザが目にすることになるものです。

Pagesを構成するに至るまでに作ってきたデザインシステムをテストすることになります。ここで、実際のコンテンツを当てはめながらデザインを検証し、必要があればAtom - Molecules - Organisms - Templatesをそれぞれ修正していきます。


コンポーネントベースの「デザインシステム」ということで、ReactやAngular2のComponentでUIを構築する際の感覚に近そうです。

[TODO]

  • Pattern Lab : Atomic Designなシステムを構築するためのツールを使ってみる