Atomic Design における Atom, Molecule, Organism の見極め方

最近フロントエンド書いてて、コンポーネントの設計とかデザイナーとのコミュニケーションには Atomic Design を採用しているのだけど、まあよくある話として「この要素が atoms / molecules / organisms のどれにあたるかわからん！」となる（なった、特に molecules）ので、チーム内に雑にテキストで書いて共有した。で、せっかくならそれを公開して優秀なデザイナーおよびフロントエンドエンジニア諸氏に意見を募りたいと思ったのでブログ書いてみることにする。

ちなみに、現状は実装対象として Web アプリケーションを想定しているけど、ネイティブアプリも視野に入ってるので「HTML ではそうかもしれないけどネイティブアプリだと云々」みたいな意見も歓迎する。

チームに共有したテキストがこちら。

Atom, Molecule, Organismの見極め方

Atomic Design の公式の説明ではそれぞれの要素を以下のように定義している。TemplateとPageは自明なので省略。

  • Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
  • Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. These molecules take on their own properties and serve as the backbone of our design systems.
  • Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface.

Atomについては自明で atoms are our HTML tags と言っているので HTML タグがそのまま Atom になると考えてよい。Button Atom は <button> に対応するし、 Image Atom は <img> に対応する。また <span> に対応する Text Atom もきっと作られる。

Organism も比較的簡単で、UI設計、ビジュアルデザイン、HTMLコーディングを実際に行う場合に「〇〇エリア」「〇〇ボックス」「〇〇領域」と呼ばれるもので、それ自体が独立して意味を持ち、ユーザとのインタラクションを定義可能なものという位置付けになる。上記の公式説明は一部補足が必要で、Organism は groups of molecules と定義されているが、実際には直下に Atom を直接持ってもいいし、Organism の中に Organism を持つ、つまり Organism がネストされることもある。たとえば、一覧系のページにおけるリストは Organism であるが、そのリストの要素ひとつひとつも独立して意味を持ち再利用されるため Organism になる。

一番判断が難しいのは Molecule だが、これは「それ自体が独立して存在はできないが、Atom ほど無機質でなく、最低限の意味をそれ自体が帯びる要素」と言い換えると定義しやすい。たとえば「削除ボタン」は「ボタン」ほど汎用的ではないが、それが何かを削除するものであることをユーザに伝えることしかできず、それ単体では存在できない。つまり、最低限の意味を持った上での汎用化と言える。逆に言うと、Atom はそれ自体が意味を持つことを排除して、見た目のスタイルを自由に変えられることによって無限の汎用性を持たせている。これは便利でカスタマイズしやすいが、一方でサービス全体での UI の統一性という観点からはよい設計とは言えず、Molecule の設計に失敗した場合のある種の脱出ハッチと捉えるべきである。削除ボタンは「削除」という文言やゴミ箱のアイコンがその要素内に閉じていてそれを使う側からは意識する必要がないという意味で、最低限の意味を持っているが、一方、それが単独で存在することはありえず、それが一体何を削除するものなのかはそれを利用する Organism によって定義されるということになり、代表的な Molecule である。

Organism に悩むことはそんななにない気がしていて、問題は Atom か Molecule かみたいな話だと思うんだけど、atoms はセマンティクスを排除した見た目だけのみの汎用部品、molecules はセマンティクスをともなった汎用部品としたらわかりやすいんじゃないかなーと思っていて↑を書いたんだけどどうだろうか？

オブジェクト指向的な設計との対比

オブジェクト指向というかエリック・エヴァンスの設計に出てくる概念だけど、molecules をバリューオブジェクト、organisms をエンティティと捉えるとどうかと考えたりした。

意味を持ち自律的に動く単位として molecules があり、それを束ねる単位として organisms があるという感じの捉え方。バリューオブジェクトとエンティティとの違いは、Atomic Design においては molecules は atoms にのみ依存してよくて他の molecules には依存するべきではないっていう設計思想っぽい（バリューオブジェクトは別のバリューオブジェクトを内部に持つことができる）ところかなって気がしている。

これについても誰か思うところがあったら意見欲しい。

プログラマとデザイナーの思考の違い

数日前に mizchi さんからアドバイスをいただいた。

実践してる人の意見としてとても貴重ではあると思うんだけど、肌感覚としてこの違いがまだ掴めておらず、デザイナー諸氏たちの意見が欲しい気持ちがわりとある。

まとめ

なんとなく掴めてきてる気がするけど、まだまだ悩み中なのでみんな助けて！