入門！アトミックデザインに行ってきました

イベント

今日は@nrsさんのAtomicDesign入門に行ってきました！
振り返りと理解の確認のためにまとめを書かせて頂きます。

登壇資料はこちら。

speakerdeck.com

AtomicDesignとは

モジュール分割を基本としたデザインシステム(デザインの指針・デザインの共通言語)のこと。
モジュールは粒度によって下記の5つのステージに分けられる。

  • Atoms 原子: 最小のコンポーネント。ex. Logo, TextBox
  • Molecules 分子: ふたつ以上のAtomsを組み合わせたコンポーネント。
    ex. HeaderLink(Logo + HeaderTitle), SearchBox(TextBox + PrimaryButton)
  • Organisms 生物: AtomsとMoleculesを組み合わせたコンポーネント。
    ex. Header(HeaderLink + SearchBox)
  • Templates ページの基礎となるコンテンツ構造、ワイヤーフレームのこと。
    ex.Header + BreadCrampList + Contents
  • Pages テンプレートにデータを流し込んだもの

※ Templatesから「原子どこ行った？？」状態なのは、Atom〜Organismsまではエンジニア/デザイナー向け、Templates以上は上流のお歴々と話をする為の道具となるからじゃないでしょうか、とのこと。
※ Atomとは、「UIとしての機能性を破壊しない最小要素」。
もしButtonは矩形とラベルにわけると、ラベルは押せないのでButtonとしての機能を失う。
だから、Buttonが最小要素(Atom)。

なるほどわかりやすい！

けどやっぱり、そうシンプルな話でもない。
AtomicDesignは5階層に分けることでモジュールの乱立を防ぐことができることが重要なのだけど、いつでもAtom -> Molecules -> Organismsと分けられるわけではない。

たとえば、こんなページがあったとすると

Atoms: TableCell, PagingButton
Molecules: TableRow(TableCellの集まり), PagingMenu(PagingButtonの集まり)

Atoms: TabButton, TabContent
Molecules: TabMenu(TabButtonの集まり)

Organismはこうなる

Organisms: Table(TableRow + PagingMenu), Tab(TabMenu + TabContent)

でも、Organism同士であるTableとTabを足しても、これはTemplateとは言えない。
(HeaderとかFooterとかSideMenuとか足りない)
…おや？🤔

AtomicDesignは使えないのか？

わけではない。
AtomicDesignはデザインシステムである。

AtomicDesignの目的

  • ❌AtomicDesignに沿って作ること
  • ⭕デザイナーとエンジニアの協業のための共通基盤づくり
    -> 共通認識のもとで会話ができるようになること！

コンポーネント指向

すべてはコンポーネントであるという考え方

Webだと、image, textbox, buttonetc, ぜんぶ組み合わせで作れてしまう。
ゲームやネイティブアプリだと、全てコンポーネントを作る(必要がある)。

AtomicDesignとは粒度にルールを加えたコンポーネント指向のこと。

たとえばよくあるこんなケース

デザイナー💁「モーダルに『閉じる』ボタンをつけたい！」
コンポーネント化していないと
エンジニア「いくつあるのかわからないモーダル、全部修正してテストするのか😇」
コンポーネント化していると
エンジニア「Modalコンポーネントにつければいけるぜ😋」

AtomicDesignのメリット: 変更に強くなる

AtomicDesign実践入門

どこからつくる？🤔

  1. サンプルページを作る
    デザイナー💁「こんな感じにしよっか」
  2. Atomの切り出しの検討
  3. 組み合わせてMoleculesを作る
  4. 組みあわせてOrganismsを作る
    2〜4の工程をデザイナーとエンジニアを一緒にやれたらベスト！！
    (おすすめはホワイトボードだけど、Web上でやったりとかでもOK)
  5. 4まで共通認識が出揃ったら各デザイナー、エンジニアが実装
    ※ プロパティやイベントを持った最小要素(Atoms)を仮実装->Molecules->Organismsと進める
    (下位要素があれば上位要素もそれで作れるから)
    ※ 同じレイヤーの作業は別の人と重複することがあるので、作業分担は最初に要素を洗い出すことが大事
  6. Template
    Templateのコード化は必須ではないが、もしするなら全体のTemplateとコンテンツのTemplateで分けるのがおすすめ
  7. Organismsの粒度
    さっきの例のように、Atom -> Molecules -> Organismの三段階では足りなくなるパターンがある。
    → OrganismはOrganismをコンポジションする
    つまり、Organism + Organism = Organismもアリ

AtomicDesignは5階層であることに意味があるけれど、忠実にすることが難しさにつながるならその本質を見極めて取捨選択するべき。

AtomicDesignは守ることを目的とした不変の法律ではなく、開発に関わる全ての人達の指標。
目的はデザイナーとエンジニアの協業のための共通基盤づくり。
指標があるとお互いがお互いをリスペクトして仕事しやすくなる。

まとめ

  • AtomicDesignとは
    粒度にルールを加えたコンポーネント指向のこと
  • AtomicDesignのメリット
    変更に強くなる、保守性があがること
  • AtomicDesignの目的
    デザイナーとエンジニアが共通認識のもとで会話・協業ができるようになること

デザイナー💁「これに従ってデザインするね」
エンジニア😍「やりやすい！」

こんな会話が生まれるためのデザインシステム、それがAtomicDesign。

AtomicDesignとは、を学ばせて頂くと同時に、終始「よりよくするには？」を根底に感じる1時間でした。
ありがとうございました！！

参考: 原典AtomicDesign