こんにちは！

今回はアトミック・デザインについて、自分なりの知見をまとめてみました。

アトミック・デザインとは？

前回の記事「【AdobeXD】もっとイメージしやすく！ステートを使った動きの付け方」でも少し触れましたが、簡単に言うと、ボタンやテキストブロックなど、最小の要素からデザインを組み立てていく手法です。

この手法は、大きく分けて以下の５つのステップがあります。

1.Atom
2.Molecule
3.Organism
4.Templates
5.Pages

それでは一つずつ説明していきます。

1.Atom

直訳で原子という意味ですが、その名の通り、最小の要素を作るステップです。
例えば、ボタンやアイコン、タブなどのデザインがそうですね。
これらの最小の要素を準備してから、次のステップに進みます。

2.Molecule

このステップでは、「Atom」で作った要素を組み合わせていきます。
例えば、虫眼鏡のアイコンとタブを組み合わせて、検索という機能を持たせたパーツを作る、といったかんじです。

3.Organism

次にAtomとMoleculeを組み合わせていきます。
このステップで初めて単体でも機能するパーツができあがります。
例えば、一般的なWEBサイトのヘッダー部分やフォーム部分にあたります。

このステップで大事なのは、様々な機能を持たせないということです。

先ほども言ったように、このステップでは所謂ヘッダーのようなパーツを作る段階です。
ヘッダー部分に、他ページへの導線のほかに、コンタクトフォームなどの機能を持たせることはありません。
あくまで、一つ、最大でも二つ程度の機能でとどめておくことが重要です。

4.Templates

このステップでは、その名の通りテンプレートを作っていきます。
Organismで作ったパーツ、Moleculeや最小要素のAtomを使って全体のレイアウトを組んでいきます。

ここまでくるとやっと全体像が見えてきます。（この点に関しては後述します。）

5.Pages

このステップは特別なことをする必要はありません。
出来上がったテンプレートに、実際に使う文章や画像などを流し込み、表に出るデザインを完成させていきます。

以上がアトミック・デザインの５つのステップになります。

メリット・デメリット

この手法が実際に使いやすいか使いにくいかは、作業環境や目的によって変わってくるように思いました。

・チームで分担して作業をする
・機能がはっきり分かれている
・変更が予想される

など、効率的な作業が求められる場合には非常にマッチしているように思います。
まさに、冒頭で紹介したXDのステート機能を使う場合なんかも、この手法でパーツを組み合わせて大きなパーツを作ることを意識しないと難しいかもしれません。

逆にデメリットとしては、先ほども少し触れた、全体像が見えずらいということです。
効率化に全振りしているような（言い過ぎかもしれませんが）手法なので、少し独特なデザインを求められる場合はおススメできません。

以上、アトミック・デザインについて自分なりにまとめてみました！

感想としては、意外と自然に使ってる手法かなと思いました。
ただ、実際に工程を意識することで、使いどころの精査ができるのではと期待しています。

WEBデザインの現場では、こういった様々な手法、所謂ノウハウというものがあります。
目的によってデザイン手法を変えていくことはマストだと思っています。

そのためにも、引き出しを増やしつつ、お客様に合った提案を心掛けていきます！！