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

更新日: 2018年01月31日

グロースハック

Web設計とソフトウェア開発は、これまで真逆の考え方をしていました。
通常Webサイトにおける設計では、ページ単位でデザインカンプを作成しますが、ソフトウェア開発では、コンポーネント単位で設計することが多くあります。

ところが、最近ではAbemaTVをはじめとして、コンポーネント単位でデザインを行うWebサービスも増えてきました。
その中でも、今注目されているのが、「Atomic Design(アトミック・デザイン)」と呼ばれるデザインシステムです。

Atomic Designはデザイン仕様の変更に強く再利用性が高いと言われており、Webサービスの開発に向いていると言われています。

今回は、コンポーネントベースでWebデザインを行うことができるAtomic Designの考え方の基本をご紹介します。
コンポーネント単位のデザインとは果たしてどういうもので、メリットはどこにあるのでしょうか。

Atomic Designとは？

Atomic Designは、UIに関するデザインシステムに関する考え方で、ペンシルヴァニア州のWebデザイナーBrad Frost氏によって命名されました。
Atomic DesignのAtomとは*「原子」のことで、実際に最小の単位である「原子」(Atoms)からデザインし、最終的に最も大きな単位である「ページ」(Pages)*に仕上げていくという手法です。

実際に、パーツの単位は小さい順に下記のようになります。

Level1：原子 (Atoms)
Level2：分子 (Molecules)
Level3：有機体 (Organisms)
Level4：テンプレート (Templates)
Level5：ページ (Pages)

※ Atomic Designには化学的な用語が多いので、ここでは「Atomic Designを分かったつもりになる」を参考にLevel表現を併記して進めていきます。

Atomic Designを使うことで、デザイン仕様の変更が効きやすく、再利用性が高くなります。
当然ながら、粒度が小さく特定のコンテクストに依存しないAtomsやMoleculesなどのコンポーネントであれば、多少UIデザインに変更が加わったとしても、そのまま再利用することができます。

Atomic Designはデザイナーとエンジニアの架け橋

以上のように書くと、コンポーネントベースの開発はフロントエンドエンジニアにとってメリットが大きいように見えますが、Atomic Designはもともと名前の通りデザインに関する手法です。

初期段階では、AtomsやMoleculesをデザイナーが増やしていき、コンポーネント単位でデザインカンプをつくります。
デザイナーにとっては、ページ単位でデザインすることに慣れているので、コンポーネント単位でデザインすることに抵抗があるかもしれませんが、デザイナーが慣れてくればエンジニアにうまく橋渡しをすることができます。

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はできるだけ単純化して、再利用できる最小の単位にする必要があります。