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

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

Level3：Organisms (有機体)

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

Level4：Templates (テンプレート)

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

Level5：Pages ( ページ )

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

Atomic Designを使うメリット

前述したものと一部被りますが、Atomic Designを使うことで下記のようなメリットを享受することができます。

1. コンポーネントに名前がついている

Atoms・Molecules・Organisms・Templates・Pagesそれぞれのレイヤーに名前がついており、粒度が定められていることで、開発時におけるコミュニケーションが取りやすくなります。

2. デザインの変更に強い

Atomic Designの考え方でコンポーネントを作成することで、デザイン変更に対応しやすくなり、再利用性も高まります。
特にAtomsやMoleculesなどの粒度の細かいコンポーネントはデザイン変更にも強くなります。

3. デザインルールが徹底できる

Atomic Designでデザインルールを作ると、デザイナーとエンジニアの共通言語が出来上がるので、デザイナーあるいはエンジニアによる一人プレーを防止することができます。
チームメンバーのパワーバランスが平坦になり、あるメンバーにだけ依存するというような状況が大幅に減ります。

まとめ

Webデザインや UI デザインの中にはエディトリアルやグラフィックデザインから生まれたものも多くありますが、Atomic Designはマークアップやコーディング、システムデザインの視点から産まれた手法で、エンジニアにとっても親しみやすい手法です。

昨今、デザイナーもエンジニア視点を持ったほうがいいと言われますが、Atomic Designを習得することはデザイナーがエンジニア視点を持つ一助にもなります。
コンポーネントベースのWeb制作手法を取り入れたいときには、ぜひAtomic Designに挑戦してみてください。