知っておきたい！アトミックデザインとは？

こんにちは、LiSMOtechの小谷です。

React.jsやVue.jsで開発を進めていくと、コンポーネントのファイルが増えすぎて、どう整理をしたらいいか分からないといった状況になったことはないでしょうか？
開発初期でまだコンポーネントが少ないうちはいいですが、開発が進んでさらにコンポーネントが増えてくるのを想像すると、
コンポーネントがごちゃごちゃしてきて大変になってくるのが目に見えてますよね。。。

これを解決する一つの手法がアトミックデザインです！
絶対この手法を取るべきではとかではないのですが、どんな手法を取るにせよ、アトミックデザインの考え(=組み合わせ、再利用性)に似た点はあると思います。

また、UIデザインの設計などにも役立てられたり、個人的にはデザイン原則の”反復”に貢献出来ててよいと思っています。

アトミックデザインとは？

アトミックデザインとは、コンポーネントを作成する上での考えや手法の一つで、組み合わせや再利用性を意識した考えです。

そもそも、アトミック(atomic)のatomは原子のことです。
化学的には原子が集まって分子(Molecule)になり、分子が集まって有機体(Organisms)になります。
この成り立ちからも分かるように有機体はいくつもの原子や分子が組み合わさって出来ています。

この原子、分子、有機体の関係のようにコンポーネントを組み立ていくのがアトミックデザインです。
また、アトミックデザインでは、有機体のさらなる上位のレベルとして、テンプレートとページが存在します。

このテンプレートとページについて後程説明します。

各要素についての定義

では、各レベルについての定義を確認しておきましょう。

原子(Atoms)

最小のコンポーネント単位。これ以上の分割は出来ないもの。ひとつのDOM(一つのタグ)。

例：input、label、buttonなど

分子(Molecules)

原子コンポーネントが組み合わさって出来たコンポーネント。小さな部品の一つに過ぎず、機能は持っていない。

例：inputとlabelが組み合わさって出来た一つのコンポーネント

有機体(Organisms)

原子や分子が組み合わさって出来たコンポーネント。機能や役割を持っている。
ここで持たせた機能や役割は、特定の役割にしか使用されず、他の役割での再利用は行われない。
例えば、input+labelの分子コンポーネントはコンタクトフォームやログインフォームなど様々な箇所で入力部品として使用可能です。

一方、有機体であるヘッダーはヘッダーの役割でしか使用することが出来ません。

例：ヘッダー

テンプレート(Templates)

原子、分子、有機体が組み合わさって出来たサイト全体と構成するコンポーネント。

例：ヘッダー + コンテンツ +フッター

ページ(page)

テンプレートに独自のコンテンツ(そのページのタイトル文字や画像など)を入れ込み画面を完成形までもっていくコンポーネント。

慣れないうちは、どれが原子・分子・有機体・テンプレートなのかの線引きは難しいと思います。

なので、各レベルの定義をしっかりと持っておきましょう。

メリット

• 再利用性が高まり、見た目全体の統一性が出る
• 各部品が組み合わせで出来ているので、デザインの変更に対応しやすい(一つ直せば、それを使っているものはすべて変更される)
• 画面全体が出来る前に個々の部品のイメージを掴める
• 各部品で分かれているので、作業の分担がしやすい

ただ、その分一つ一つのコンポーネントの設計や各レベルの定義をきちんと決めておくことが重要となってきますね。

まとめ

アトミックデザインというコンポーネントを作成する上での手法があります。
この手法は各部品を組み合わせて再利用する手法で、様々なメリットを受けられます。
この手法を取り入れるなら、各レベルの定義や線引きを決めて、迷わないようにしておきましょう！