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

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

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

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

Atomic Designとは？

1.png

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をデザイナーが増やしていき、コンポーネント単位でデザインカンプをつくります。
デザイナーにとっては、ページ単位でデザインすることに慣れているので、コンポーネント単位でデザインすることに抵抗があるかもしれませんが、デザイナーが慣れてくればエンジニアにうまく橋渡しをすることができます。