アトミックデザインとは

アトミックデザインとは、フロントエンドライブラリーであるAngular、Vue、Reactでコンポーネント単位で開発する際に、最も小さい単位からコンポーネントを設定し、コードの再利用を最大化する方法論です。

構成

(翻訳・引用元: Atomic Design Chapter2)

実際のコード例

今、意識的にできているか確認してみた

ATOMS（基本的な要素である原子）

最も小さくこれ以上分解できない要素。
例）ボタン、アイコン、テキストボックスなど。

inputタグに関しては、できていた
(タグ一個に対して、デザインだけのために切り分けるのはコストが高い)
MOLECULES（原子の組み合わせたグループである分子）

Atomを組み合わせて意味を持つデザインパーツ。
例）アイコンメニュー、プロフィール画像＋テキストボックスなど。

これも一部できていた（フォルダ構成はORGANISMSと混合していた）
ORGANISMS（原子と分子の組み合わせて構成されるやや複雑な有機体）

AtomやMoleculeの組み合わせで構成される単体である程度の意味を持つ要素群
例）サイドメニュー、ブログなどの一つの投稿、ヘッダーなど。

できていた（フォルダ構成はMOLECULESと混合していた）
TEMPLATES（UIの骨組となる上記をまとめたグループのテンプレート）

ページのレイアウトのみを表現する要素。
例）Webサイトのヘッダー、フッター、サイドバー、レイアウト情報など。

意識したことがなく、下記PAGESとあわせて書いていた
PAGES（実際の内容をテンプレートで組み込んだものであるページ(Pages)）

最終的に表示される一画面
例）ページ遷移毎に表示される各画面

TEMPLATESとPAGESを合わせていた

メリット・デメリット

メンテナンス性
再利用性
デザインの一貫性
可読性

人によって設計概念が違い、区別が難しい
ファイルが増加する

どういうところでみんな失敗するのか？

人によって設計概念が違い、区別が難しい

チームで認識を統一していないと分割粒度がバラバラになる。
構成を5段階を明確に正しく分けるのが難しい。

どのサイトを見ても、MOLECULES　と　ORGANISUMS の区別が難しいと書いてあった
※自分も同じ状態になっていた

回避案

違う方法（bulletproof-react）を取り入れる

境界線を明確にする

まとめ

基本チームで粒度を揃える(Devs × Des)

判断基準

ATOMS（基本的な要素である原子）

tag１つならデザイン流用のみのためCSSクラス対応でよさそう
機能的にこれ以上分割できないUI
- 文字だけあったも、画像だけあっても役に立たないなら意味なし
~~childrenを含む一つのタグのラッパー扱いのもの~~
- ~~<div> {children} </div>こんなやつ~~

MOLECULES（原子の組み合わせたグループである分子）

最小単位の機能ATOMSやタグを組み合わせてユーザーの具体的な動機に応える機能単位
- 何のために「ボタンを押させるのか」
- 何のために「入力させるのか」
タイトルと入力欄、カード一枚、ウィジェットなど
ORGANISMSから複数呼び出される機能

ORGANISMS（原子と分子の組み合わせて構成されるやや複雑な有機体）

ORGANISMS MOLECULES ATOMS で構成される要素
単体コンポーネントでユーザーに与える情報が完結する
カードリスト、入力フォーム、サイドバー、ヘッダーなど
childrenを含むページのレイアウトを担うもの（サイドバーやヘッダー、セクションタグとかも）

TEMPLATES（UIの骨組となる上記グループのテンプレート）

Reactの組み方次第で子要素のみレンダリングすればいらないかも
Reduxでは、効果を発揮するらしい

PAGES（実際の内容をテンプレートで組み込んだものであるページ）

最終的に表示される一画面

フォルダ構成

src
├─ component
│    ├─ atoms
│    ├─ molecules
│    ├─ organisms
│    ├─ templates
│    └─ pages
・・・

参考記事