アトミックデザインとは
アトミックデザインとは、フロントエンドライブラリーである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（原子と分子の組み合わせて構成されるやや複雑な有機体）
-
ORGANISMSMOLECULESATOMSで構成される要素 - 単体コンポーネントでユーザーに与える情報が完結する
- カードリスト、入力フォーム、サイドバー、ヘッダーなど
-
childrenを含むページのレイアウトを担うもの（サイドバーやヘッダー、セクションタグとかも）
TEMPLATES（UIの骨組となる上記グループのテンプレート）
- Reactの組み方次第で子要素のみレンダリングすればいらないかも
- Reduxでは、効果を発揮するらしい
PAGES（実際の内容をテンプレートで組み込んだものであるページ）
- 最終的に表示される一画面
フォルダ構成
src
├─ component
│ ├─ atoms
│ ├─ molecules
│ ├─ organisms
│ ├─ templates
│ └─ pages
・・・
参考記事