Atomic Design とは（解釈）
- 部品の組み合わせでUIを作れるようにするもの
- ５つのグループに分類し、それらの依存を一方向にして管理
- グループやその役割は自由にカスタマイズしていい
ポイント
- 各グループの役割をしっかり決める、認識する
- グループの依存方向を守る
５つのグループの役割
| グループ名 | 組合せ可 | 関わる人 | 担保するもの | 特徴 |
|---|---|---|---|---|
| atoms | x | dev | トンマナ、基本デザイン | ・UIパーツの最小構成部品 ・他のコンポーネントには依存しない ・配置パターンもatomsに含まれる |
| molecules | o | dev | 操作性 | ・atomsを組み合わせて作る部品 ・atomsの原始的行動に意味を付加する ・eg.文字を入れる+クリックする=検索する |
| organisms | o | dev | 機能、価値、サービス | ・atoms,molecules,organismsを組み合わせて作る部品 ・独立して機能し、他のページでも同じ意図で使える |
| templates | o | dev+biz | レイアウト | ・atoms,molecules,organismsを配置する ・プレイスホルダーだけのスケルトンの状態 |
| pages | o | dev+biz | 流し込むデータ | ・templatesにデータを流し込みページを動かす |
境界
- atoms vs molecules
- 単独コンポーネントか(atoms)複数組合せコンポーネントか(moelcules)
- molecules vs organisms
- 組み合わせによって意味/意図が変わるか(molecules)否か(organisms）
- organisms vs templates
- 配置を自由に変えられる（templates）か否か（organisms)
- templates vs pages
- 実際のデータに依存するか（pages)否か(templates)
依存の方向について
(本家ブログより)
- 自分自身から図中左側のレイヤーのみに依存する
- 修正したレイヤーより図中左側のレイヤーには影響が出ない状態
グループのカスタマイズ
- スマホ用のコンシューマー向けサイトと、PC用の業務向けサイトで同じグルーピングが通用するか？
- -> NO
うちのチームの場合
- 対象プロダクトの特徴
- 多機能な巨大UI部品がある（一覧テーブル、オプション選択リストなど）
- 1ページ内に複数の目的を持たせたダッシュボードの様なページはほぼない
- 上記とAtomicDesignの差
- 複雑な部品が多く、ほとんどorganismsになりかねないので、moleculesを組み合わせたmoleculesを許容する
- 本来global stateと繋ぐのはpagesだけだが、バケツリレーがひどくなるためorganismsでも許容する
- ただし、そのorganisms固有とツール全体の汎用データのみ
- 使いまわせるtemplatesが少なく、レイアウトを変える機会も少ないいため、templatesは必須としない
- pagesである程度レイアウトしてしまう
- 場合によってはmoleculesとorganismsの間にもう1階層追加する必要がでるかもしれない
まとめ
- 本来はUI設計手法なのでもっといろんな要素があるが、まずは役割、分類、依存方向だけ意識してやっていき