新しいデザインシステムの手法 Atomic Designとは

2016.04.22

rockd

技術ブログ

atomic_img

最近、社内の9階フロアではインフルエンザが蔓延してバタバタと感染者が増えています…。
次は我が身ではないかと内心ビクビクしながら過ごしていますrockdです。
そんな中、今回はAtomic Designについての話をします。

Atomic Designとは

簡単にいうと、デザインを設計するための手法の1つです。

2013年にBrad Frostという人がWebフロンドエンド用に開発しました。
UIの粒度を原子に置き換えて各ステージごとに管理し構築していきます。

Brad Frost: Atomic Design (Webdagene 2014) from Netlife Research on Vimeo.

では、実際にどのようなステージに分けられるのか紹介します。

5つのステージ

Atomic Designでは5つのステージに分けて管理します。

Atoms(アトム) - 原子
Molecules(モルキュール) - 分子
Organisms(オルガニズム) - 有機体
Templates(テンプレート) - テンプレート
Pages(ページ) - ページ

これらのステージは上から下に行くにつれて、粒度は大きくなり、抽象度は下がります。
抽象度の高いコンポーネント（たとえば原子）を合体させて、繰り返し可能なコンポーネント（分子）やテンプレートを構築できるようにデザインを考えていきます。
ページをデザインするのではなく、コンポーネントで構成するデザインシステムです。

各ステージを詳しく見ていきましょう。

Atoms - 原子

atoms_img

原子は分割することのできない最小のUIコンポーネント情報です。
ラベル、ボタン、カラー情報やサイズ情報、などのことを指します。
基本的に単体ではUIとして意味をなさないものばかりです。

Molecules - 分子

molecule_img

分子は2つ以上の原子から構成されるUIコンポーネントです。
例えば検索フォームやメニューリストなど。この分子をレゴブロックのように組み合わせて構築していくことが多そうです。
なのでコンポーネントとしての再利用性を意識しながらデザインしていく必要があります。

Organisms - 有機体

organism_img

分子を組み合わせて作る複雑なUIコンポーネントです。
ヘッダー、フッター、モーダルやテーブルなどの大きめなUIをさします。

Templates - テンプレート

template_img

テンプレートはコンテンツの入っていないレイアウト情報です。
ワイヤーフレームと同じですね。
複数の有機体を組み合わせることで、自分の作成しているものの全体像が具体的に見えるようになります。

Pages - ページ

テンプレートに画像やテキストなど具体的なコンテンツ情報が入っているものです。
よくあるデザインカンプと呼ばれるようなビジュアル的に完成されたデザインです。

Atomic Designのメリット

拡張性

再利用性を意識したコンポーネントは様々なデバイスでも柔軟に組み替えて表示できるので、同じコンポーネントから複数のデザインを構築できるといった拡張性を与えてくれます。

一貫性

同テイストのコンポーネントを組み合わることになるのでデザインに自然と一貫性が生まれます。
また、仕様変更があっても粒度が小さく特定のコンテキストに依存しないUIコンポーネントはデザイン変更の影響が少ないという利点もあります。

デザイナーとエンジニアのコミュニケーションが取りやすい

フロントエンドの開発者なら、コンポーネントの概念は割と理解しやすいと思います。
Bootstrapなどもそうですし、JSのフレームワークでもここ最近ではコンポーネント志向のものが増えてる気がします。
デザインのコンポーネントとそれに対応する実装（HTMLやCSSなど）の単位が分かりやすいというのもコミュニケーションの取りやすさの1つです。

サポートツール

patternlab.io_

Atomic Designをサポートするツールとして、Pattern Labというサイトがあります。
こちらは「粒度の小さいコンポーネントをインクルードしてより大きなコンポーネントを構成する機能」を Mastache を採用することにより実現し、「インクルードされる側の粒度が小さいコンポーネントがどこで使用されているかを把握できる機能」を Lineage という機能で実現しているようです。

apbcss.com_

他にもAtomic Designの思想を取り入れたCSS設計「APB CSS」というのもあります。

まとめ

プロジェクトやプロダクトの性質によりますが、新しいプロダクトのデザインなどを考える時などにAtomic Designのエッセンスはデザイン設計の良いアプローチになるのではないでしょうか。
これからはデザイナーもコンポーネント的な考え方を持ってデザインすることにより開発全体の効率を上げていくキッカケにもなると思います。