この記事では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（原子）は、UIを構成する基礎的な要素が該当します。
フォームでいうと、画像で示すようにラベル・入力部分・ボタンの各要素がAtomsとなります。 他の要素では、カラーパレットやフォント、アニメーションがAtomsに入ります。
Atomsへ振り分ける基準としては、対象の要素が機能的にそれ以上分割できない場合にAtomsへ振り分けます。 フォームの場合だと、ラベルはフォームの要素を示すものでそれ以上分割できません。また入力フォームやボタンもそれ以上機能的に分割できません。
Atoms単体だと抽象的でそれがどこで使われるかは分からないです。 （入力フォームだけ見ても、それがアカウント登録フォームで使われるのかコメント投稿フォームで使われるのかは読み取れません） ただ、Atomsを組み合わせてより大きなコンポーネントを構成するという点で、Atomsはコンポーネントの基礎部分になります。
またAtomsを俯瞰できるページを用意しておくことで、そのページがどのようにデザインされたかという雰囲気を感じ取ることができます。それによりページデザインに一貫性を持たせることができます。
Molecules（分子）は、Atoms（原子）を組み合わせて作る要素です。 このAtomsを組み合わせてMoleculesを作るというのは「単一責任の原則」やUNIX哲学の「1つのプログラムは1つのことをうまくやる」に基づいているようです。
Atomsだけだと意味をなさなかった要素を組み合わせることで、何かをおこなうことができます。 たとえば、ラベル・入力フォーム・登録ボタンという3つの部品（Atoms）があってもそれら単体では意味をなしません。 しかし、これらの要素が組み合わさることにより、「ラベルで示したことに応じて、入力フォームに何かを書いて、登録ボタンを押す」という目的を示せるようになります。
Moleculesはできるだけ単純にして、再利用性やUIの一貫性を高めます。
Organisms（有機体）は、Atoms（原子）やMolecules（分子）、また他のOrganismsを組み合わせて作る要素です。今までのAtomsやMoleculesとは違い複雑な要素になります。
たとえば画像で示すようなヘッダーは「タイトル」というAtoms、「ナビゲーション」「SNSのボタン群」というMoleculesが組み合わさって、ヘッダーというOrganismsになっています。
Organismsからそのページの特色が出やすくなります。
ここからAtoms（原子）・Molecules（分子）・Organisms（有機体）といった化学的なものに例えることをしなくなります。 それは今まで説明したAtoms・Molecules・Organismsの要素を組み合わせて、仕事の依頼元や上司・同僚に見せる物を作ることを明確にするためです。
ということでTemplatesの説明に移ると、Templatesはページの構造を説明するための物です。TemplatesはMoleculesやOrganismsを組み合わせて作ります。
Templatesの段階ではページの内容はまだ仮のものとなります。Templatesを言い換えるなら「ワイヤーフレーム」になると思います。
Pagesは、Template（テンプレート）にページの実際の内容が入ったものとなります。
それぞれ5つの要素をどのように考えたらいいかはAtomic design is for user interfaces内にある、Instagramで例えたものが分かりやすいと思います。
Atomic Designは機能的に最小単位の要素をAtoms（原子）と名付け、要素の単位が大きくなるにつれてMolecules（分子） => Organisms（有機体） => Templates => Pagesといった名前がついています。
このように名前がついていることにより、アイコンやラベルといった要素はAtomsに配置して、それらを組み合わせてMoleculesを作り、さらに組み合わせてOrganismsにしていくという階層構造で作りやすくなります。
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をデザイナーがページデザインをする段階で取り入れることに関しては、どうしたらいいのかまだ分かりません。
今回はコンポーネントリストを作りました。以下のjsfiddleではかなり簡略化したリストですが、以下のようにAtoms・Molecules・Organismsとコンポーネントを分けて見せるようにしました。
<script async src="//jsfiddle.net/bed3aj1k/2/embed/css,result/"></script>デザイナーには通常通り画面ごとにデザインカンプを作ってもらい、自分のほうでそのデザインカンプを見つつ、Atomic Designの各単位に要素を切り出し、コンポーネントを作っています。
作ったコンポーネントリストを企画やデザイナーに共有しておくことで、実機でどのように表示されるか分かりやすくなるとともに、開発者にも共有しておくことでコンポーネントを使うことを促し、結果としてコード量や実装の工数を減らすことを目論みました。
コンポーネントリストは作っておくと、どのようにコンポーネントを分割するか意識することができ、また実装を伴った形でコンポーネント一覧を見ることができるため、作っておくのをおすすめします。
今回初めてAtomic Designの考え方を適用してイベントページを作ってみましたが、思ったより良い感じにハマった感があります。 今後もAtomic Designの考え方に照らし合わせてコンポーネントを作り、良い感じに変更に強く分割されたコンポーネントを作っていきたいと思います。