Atomicデザインを学ぶ

AtomicデザインとはUIを効率的に作るために作られたUI構成のパターン。
Atomicデザインでは画面上のにある部品をコンポーネントとして分割し、小さなコンポーネントを組み合わせてより大きなコンポーネントを作っていく。

Atomicデザインの概要

Atom(原子)

ボタンやアイコンなど、コンポーネントの最小単位。
ボタンを例に上げると、ボタンは押されたときに何らかの処理を実行するという機能を提供している。このとき、どのような処理を実行するのかという情報は定義しない。

Molecules(分子)

Atomのコンポーネントを複数組み合わせて作られるコンポーネント。
Moleculesではお気に入りボタンや、削除ボタンなどユーザーの動機に応える機能を提供する。具体的に何のお気に入りボタンなのかという情報は含まれない。

Organisms(有機体)

コンポーネントの中で機能が完結するようなコンポーネント。ユーザー登録のフォームなど、単体で意味を持つ動きをする。

Template

様々なコンポーネントを組み合わせてページのレイアウトを実装する。ここではレイアウトのみを担当し、実際にはデータは流し込まれない。

Pages

Templateに実際にデータを流し込んだもの。

終わりに

今回はざっくりとですがAtomicデザインについて解説してみました。
Atomicデザインのコンポーネントの分割については色々の議論があるようですが(Templateは必要ないのでは？など)、実際に使ってみて自分なりのデザインパターンを見つけてみたいと思います。