この記事はAtomic Designの概要やAtomic Designを実際に適用して気づいた利点・欠点について書きます。
Atomic Designとは
Atomic Designはデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。
日本だとAbemaTV（アベマTV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより）
Atomic Designは今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。
Atomic Designはコンポーネントの単位を5つに分けています。 その5つの単位はAtoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。
Atoms（原子）
Atoms（原子）は、UIを構成する基礎的な要素が該当します。
フォームでいうと、画像で示すようにラベル・入力部分・ボタンの各要素がAtomsとなります。 他の要素では、カラーパレットやフォント、アニメーションがAtomsに入ります。
Atomsに振り分ける基準としては、対象の要素が機能的にそれ以上分割できない 場合、Atomsへ振り分けます。 フォームで例えると、ラベルはそれ以上機能的に分割できません。 また入力フォームやボタンもそれ以上機能的に分割できません。
Atoms単体だと抽象的でどういう意味を持つかは分からないです。 入力フォームだけ見ても、それがアカウント登録フォームもしくはコメント入力フォームという情報は読み取れません。
Atomsはコンポーネントの基礎部分になります。 それは、Atomsを組み合わせてより大きなコンポーネントを構成するという点から言えることです。
またAtomsを俯瞰できるページを用意しておくことで、そのページがどのようにデザインされたかという雰囲気を感じ取ることができます。 それによりページデザインに一貫性を持たせることができます。
Molecules（分子）
Molecules（分子）は、Atomsを組み合わせて作る要素です。 このAtomsを組み合わせてMoleculesを作るというのは「単一責任の原則」やUNIX哲学の「1つのプログラムは1つのことをうまくやる」に基づいているようです。
Atoms単体では抽象的で意味を持たなかった要素でした。 しかし、Moleculesになることで意味を持つ要素となります。 たとえば、ラベル・入力フォーム・登録ボタンという3つの部品（Atoms）があってもそれら単体では意味をなしません。 しかし、これらの要素を組み合わせることにより「ラベルで示したことに応じて、入力フォームに何かを書いて、登録ボタンを押す」という意味が示せるようになります。
Moleculesはできるだけ単純にして、再利用性やUIの一貫性を高めます。
Organisms（有機体）
Organisms（有機体）は、AtomsやMolecules、また他のOrganismsを組み合わせて作る要素です。今までのAtomsやMoleculesとは違い複雑な要素になります。 ヘッダーやフッターと呼ばれる要素はこのOrganismsになります。
たとえば画像で示すようなヘッダーは「タイトル」というAtomsと、「ナビゲーション」「SNSのボタン群」というMoleculesが組み合わさって、ヘッダーというOrganismsになっています。
Organismsからそのページの特色が出やすくなります。
Templates（テンプレート）
ここからAtoms（原子）・Molecules（分子）・Organisms（有機体）といった化学的なものに例えることをしなくなります。 これは仕事の依頼元や上司・同僚に見せるものということを明確にするため、より一般的な言葉を使います。
Templates（テンプレート）の説明に移ると、Templatesはページ構造を説明するものです。 TemplatesはMoleculesやOrganismsを組み合わせて作ります。
Templatesの段階ではページ内容がまだ仮となります。Templatesを言い換えるなら「ワイヤーフレーム」になります。
Pages（ページ）
Pages（ページ）は、Template内へ実際の文章や画像などが入ったものとなります。
ここまで5つの要素について概要を書きました。 要素の振り分けかたについて、どのように考えたらいいかはAtomic design is for user interfaces内のInstagramで例えたものが分かりやすいと思います。
Atomic Designの利点
さて、Atomic Designを実際に適用した結果、次に挙げる3つの利点があると感じました。
名前がついている
Atomic Designはコンポーネントの大きさによって、それぞれAtoms・Molecules・Organisms・Templates・Pagesという名前がついています。 この名前がついていることで、Atomsは「それ以上分割できないコンポーネント」ということや、Moleculesの「Atomsを組み合わせた意味があるコンポーネント」という特徴が共有されやすくなると思います。
デザインの変更に対応しやすくなる
Atomic Designの考え方でコンポーネントを作ると、デザイン変更に対応しやすくなり再利用性も高くなります。 特にAtomsやMoleculesへ振り分けられるような細かいコンポーネントはデザイン変更にも強いです。
今回適用したページはそこまでデザイン変更が起こりませんでした。 それでもデザイン変更があったときはいつもと比べて他コンポーネントへの影響を考えずに対応できました。
セレクタの詳細度が平坦に近づく
Atomic Designを適用するとセレクタの詳細度が平坦になるようです。
次の画像は今回Atomic Designの考え方を使って作ったCSSの詳細度を示したグラフですが、割と平坦なグラフになっています。
また、Atomic Designを採用しているAbemaTVのCSSも、突然詳細度が上がることなく平坦なグラフです。
Atomic Designの欠点
利点ばかりではなく、Atomic Designの欠点も見えました。
デザイナーがどのようにデザインしていけば分からない
Atomic Designは「小さい単位でコンポーネントを作り大きいコンポーネントにしていく」というデザイン手法です。そのため、フロントエンド実装では利点があります。
しかしデザイナーからすると、Atomic Designの考え方でデザインすることは難しいかもしれません。 実際、今回デザイナーへAtomic Designについて説明しました。 ただ、デザインしてもらうときはコンポーネント単位ではなくページ単位でデザインしてもらう従来の方法をとりました。
デザイナーによるページデザインの段階でAtomic Designを取り入れることに関しては、どうしたらいいのかまだ分かりません。
欠点に対しての対応
今回はコンポーネントリストを作りました。以下のjsfiddleではかなり簡略化したリストですが、以下のようにAtoms・Molecules・Organismsとコンポーネントを分けて見せるようにしました。
デザイナーには通常通りページ単位でデザインカンプを作ってもらいました。 そして、自分のほうでそのデザインカンプを見つつ、Atomic Designの各単位に要素を切り出し、コンポーネントを作りました。
作ったコンポーネントリストをプランナーやデザイナーに共有しておくことで、実機でどのように表示されるか分かりやすくなることと、開発者にも共有しておくことでコンポーネントを使うことを促し、結果としてコード量や実装の工数を減らすことを目論みました。 また、コンポーネントリストは作っておくと、どのようにコンポーネントを分割するか意識することができます。
まとめ
今回初めてAtomic Designの考え方でページを作ってみました。 結果としては、思ったより良い感じにハマった感があります。 今後もAtomic Designの考え方に照らし合わせてコンポーネントを作り、良い感じに変更に強く分割されたコンポーネントを作っていきたいと思います。