Atomic Designとは

こんにちは。

デザイナー間で話題にされだしてから結構時間も経ってきましたが、UIデザインにおいてAtomic Design（アトミックデザイン）という考え方があります。

Atomic Designの詳しい説明は別のブログに譲ろうと思いますが（逃げ）、ざっくりいうと、UIコンポーネントをAtoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の5つの単位に分けてデザインを構築していくという方法論です。

メリットとしては

・無駄なUIコンポーネントが増えなくなる
・一貫性のあるデザインをつくることができる
・UIコンポーネントが一覧化され、チームでコラボレーションしやすくなる

と言ったことが挙げられます。

とりあえず導入してみる

かなり前の話ですが、Sketchバージョン41でシンボルを入れ子にすることができるようになり、Atomic Designを比較的手軽に導入できるようになったので、会社で新規サービスをデザインするタイミングで導入を決め、やってみることにしました。

尚、本来Atomic Designは先にAtomsなど小さい単位のコンポーネントをデザインし、それらの組み合わせで全体のデザインを構築していくものとのことですが、僕は正直この考え方は賛同できませんでした。

なので、「使い回せるようにシンボル化しながら、シンボルを増やさないようにUIデザイン」をした上で、あとから単位に切り分けられるかを考える、という手法を取っています。

あと、この後ろのTemplatesとPagesに関しては、チームで運用する意義はちょっとわかりませんでした（普通にワイヤーフレームとSketchのページのことなのではと思ってしまった、ご意見あればください）。なので、Atoms、Molecules、Organismsのみをシンボル化し、整理していくことにしました。

こんな形でつまみ食いのAtomic Designを実践し、気分良くシンボルを入れ子にしながらSketchデータをグリグリ作っていたのですが、しばらくするといろいろと困ることが、、、

おまえはAtomsなのかMoleculesなのか

こういうリストのUIを作ったとします。

「これはそれぞれの要素が分解できないし、Atomsでしょ」とドヤりながらAtomsと定義したとします。

で、しばらくしてディレクターがこんなことをいいます。
「このリストUI上で、記事にいいねできたら良くない？」と。

で、こんなUIになったとする。

これは、、、

「Atomsの中にAtoms？が入ることになるから、こうなるとこれはひょっとしてMolecules、、、？」

「でもいままでAtomsに置いてたのに、ちょっと要素が入った途端Moleculesになるとかなんか変じゃね、、、？リストの使われ方は変わらないのに」

「しかもこのUI、リストとボタンそれぞれ単品では他のどの場所でも存在しないし、Moleculesとして捉えるのになんの意味が、、、」

あーもうわからん。

と、Atomic Designを真面目にやろうとすればするほど、こういうどツボにはまっていきます。

意見が分かれそうですが、僕の解釈を書いておくと、

・分解してもそれぞれの要素単品で使用しない場合は、分解する意味がないのでAtoms
・分解したらそれぞれの要素単品でも使用する可能性がある場合は、独立したAtomsの組み合わせなのでMolecules

となるのではと考えています。つまり、先ほどの例の記事リスト＋いいねボタンのUIコンポーネントは、Atomsかと。逆に、いいねボタン単品ではAtomsではないということになりそうです。どうなんだろう。（わからんのかい）

事業を進める上では決めの問題でしかない

と散々持論を展開したあとで身も蓋もない結論ですが、正直こんなこと（！）に悩んでいる暇があれば、事業を前に進めるためには一つでも多くデザインを作ったほうがいいので、納得のいくルールをチームでさっさと決める、これに尽きると思います。

Atomic Designも、使いこなせる範囲で導入すれば非常に整然としたSketchデータを作ることが可能ですし、導入自体はおすすめします。が、どれだけ便利なデザインパターンでも、策に溺れていては本質的にやるべき仕事に頭が回らなくなるので、ほどほどにしておくべきです。

ちなみに僕は、「なるべく理解しやすくシンプルなSketchデータになるような決断をする」と決め、ちょっと迷ってもその方針に基づいてどんどんシンボル化してしまっています。

こういう議論はやってて楽しいんですけどね、なので業務外でnoteにも書いてみるのですが。こうやって外に出すことで解決するかもと淡い期待をしながら、この記事を書いています。

今後もAtomic Designを導入する中でいろいろ迷ったら、Twitterなどで呟いていければと思いますので、ぜひご意見お待ちしております。

今日はこの辺で。