アトミックデザインとは？ コンポーネント単位で創るUIデザイン手法

パソコン、タブレット、スマートフォンなどのデジタル家電を複数台所有するのが当たり前になりつつある今日この頃。

あなたはまだページ・スクリーンごとにイチからデザインをしていますか？

アトミックデザインなら、デザイン要素をさまざまなページ、画面サイズ、デバイスに対応させることができ、開発が効率化されます。

アトミックデザイン（atomic design）とは

アトミックデザインはモジュラーデザインの考え方を元にブラッド・フロストさんが考案したUIデザイン手法。

モジュラーデザイン(Moduler design)とは、製品の各モジュールを作成した後、それらを繋げて完成品を作る手法。アトミックデザインにおけるコンポーネントがいくつも組み合わさったような製品のパーツをモジュールといいます。

インターフェイス作りは、常に最小の素材 = Atom(原子) の組み合わせであるべき”を基本理念に、原子が分子を作り、分子が有機体を作りと小さなパーツが積み重なって大きなプロダクトになっていくのがアトミックデザインのイメージです。

どんなプロジェクトにおすすめ？

アトミックデザインでは、各コンポーネントが簡単に再利用、編集、統合できるため、プロダクトの拡充が容易に行えます。

ここでのコンポーネントは、最小の素材=Atomの組み合わせで作られたパーツのことを指します。

従って、個人や少人数で行う小さなプロジェクトから、大規模のウェブプロジェクトまでさまざまな規模・レベルのプロジェクトで用いることができます。

特に大規模プロジェクトにおいては、共通のコンポーネント用いることにより、開発におけるビジョンをプロジェクトメンバーに共有し、プロダクトに一貫性をもたせることができます。

デザインの効率と自由度が上がる

アトミックデザインのなにが革新的かと問われれば、それはひとえにデザインシステムの自由度の向上や、作業の効率化ができるところでしょう。

従来のデザイン手法では、各スクリーンをデザインした後にそれらをコンポーネントに分解して仕様書やUIキット等を作っていました。

この手法の問題点は、分解された各コンポーネントがそれぞれ独自の役割や性格をもっていて、相互性が無いことです。そのため、各コンポーネントの再利用が難しくデザインシステムが制限的にならざるを得ず、必然的に作業量も増えていました。

反対に、アトミックデザインはプロジェクトにおけて共有できる最小の素材を最初にデザインし、それらのパーツを用いてプロジェクトを作り上げます。

これにより、各スクリーンや機能に一貫性をもたせつつ、デザインシステムを簡易化することができます。

Sketchとの相性がいい

Skechとアトミックデザインは相性が良い考え方です。詳しく後述しますが、各コンポーネント・全体のシステムを相互化することができるソフトにおいて、分子ないの特定の原子を固定して要素を量産できるoverlap（オーバーラップ）機能が便利です。

では、アトミックデザインが具体的にはどのような手法なのか見ていきましょう。

アトミックデザインの活用法：コンセプト・スタイルを確立させよう

アトミックデザインをするにあたって、最も大切なものはAtom（=デザイン時に用いる素材）ですが、Atomを作るために必要なものはなんでしょうか？

それはコンセプトやスタイルを確立することです。

そのためには、プロダクト特有のビジュアル・ランゲージのデザインが欠かせません。

ビジュアル・ランゲージは視覚を通して情報伝達をする要素です。それらはAtomのデザインに必要であると同時にブランドのアイデンティティをも形成し、代表的なものとして会社のロゴやテーマカラーがあります。

ビジュアル・ランゲージはシンプルかつユニークであるべきです。

また、異なる情報端末において同じように表示され、用いられることを想定して、特定の画面サイズや形に頼ったデザインは避けた方が無難です。

注目すべき例として、Gretel Agencyが手がけたNetflixのプロジェクトが挙げられます。

Netflixのビジュアル・ランゲージ: 一目でNetflixだとわかる汎用性のあるデザイン。

このように、特有の色、フォント、形、陰影、余白、リズム、アニメーション等を用いた強力なビジュアル・ランゲージがあって初めてAtomのデザインをすることができます。

そのため、しっかりと時間を割いてどのように自分の商品を差別化するかを考え、ブランドアイデンティティを確立することが大切です。

アトミックデザインをする際に心がけるべきこと

製品を構築するための素材ができたところで、各コンポーネントを作成していきましょう。

1. 製品のキーとなるコンポーネントから作成する

デザイナーが最も恐れるべきは、商品と関連性のないコンポーネントを作ってしまうことです。例えば、”購入・支払い”機能が無い製品に、”買い物かご”機能はつけませんよね？よって、最初にデザインするコンポーネントは製品、もしくはブランドに深く関わるものであるべきです。

アトミックデザインでは、ページごとにデザインをするという概念を払拭するために、スクリーンごとのデザインではなく、プロダクトの機能やユーザーフローに焦点を当てていきます。

製作者が製品を通して利用者にして欲しいこと、またそれを達成するために必要なコンポーネントに注力しましょう。

そのために、デバイスごとに必要なスクリーン数が変わってくる可能性があります。例えば、デスクトップPCでは画面の半分で動作する機能かもしれませんが、スマートフォンでは3つの連続したスクリーンが必要かもしれません。

2. コンポーネントの汎用性を重視する

アトミックデザインでは各コンポーネントが他の機能や場面で再利用される可能性があります。それを可能にするためには、各要素の構造とそのコンテンツ（内容）をはっきりと区別しなければなりません。

例えば、”連絡先リスト”というコンポーネントを作成したい場合、より汎用性のある”リスト”というコンポーネントのデザインを先に考えるべきです。

そして、作成されたコンポーネントの応用で、各機能やコンポーネントを作成します。

画像の挿入や文章の追加などの要素を追加したり、元々3行の文章が入っていたものの文章を2行にするなど要素の削減をしたりすると、どのような変化がコンポーネントに与えられるでしょうか？

このように、汎用性のあるコンポーネントを基に他のコンポーネントを作成することができます。

コンポーネントの汎用性を重視することにより、作成するシステムを充実させると共に、各コンポーネントが再利用をしやすくなります。

3. システム内の各コンポーネントを相互化する

コンポーネントの汎用性を重視した結果、システム内のすべてのコンポーネントは共通の素材から作られ、連動（相互化）します。そのため、ひとつの素材（もしくはコンポーネント）を編集した時に、その他のコンポーネントにどのような影響を与えるのかを簡単に確認できるようになります。

現在、少数ですがSketchやFigma等の素材と各コンポーネント・全体のシステムを相互化することができるプログラムがあり、これからますます増えていくことでしょう。

これらのプログラムを利用することにより、デザイナーはデベロッパーのように自分だけのスタイルガイドをもち、すべてのシステムをそのガイドに沿って開発することができるようになります。ひとつの素材に対する変更は即座にその素材を使うコンポーネントすべてに反映されるようになるのです。

これにより、各コンポーネントに対する修正と、システム全体に対する影響の確認が容易になります。

また、各コンポーネントを共通の素材を使って連結させることにより、新しくコンポーネントを追加する際に影響を受けるのが、単独のスクリーンではなくシステム全体であることを再確認することができます。

4. 流動的に考える

我々は、未だにレンスポンシブ・デザインを、特定のブレイクポイントを指定してそれらに対応するように各ブロックをデザインすることだと考えてしまう傾向にあります。

しかし実際には各コンポーネントがそれぞれブレイクポイントをもって流動的に動作し、各画面サイズに対応するべきなのです。

ありがたいことに、Sketchなどのソフトフェアを使えば各コンポーネントの動作に対するさまざまなレスポンスをテストし、どのコンポーネントを固定してどのコンポーネントをレスポンシブにするかを定義できるようになりました。

また、各コンポーネントがデバイスごとに異なるコンテクストをもつ可能性があること想定しなければなりません。

例えば、デスクトップPCでは角が丸いボタンとして表示されている要素が、smart watchではシンプルな丸いアイコンとして表示されるほうが適切な可能性があります。

5. Atom・コンポーネント間の往復でシステムを拡充していく

アトミックデザインではシステムを充実させていく際に既存のコンテンツや素材となるAtomを何度も顧みることになります。

最初に作られたコンポーネントは最初のスクリーンを作るのを手助けし、そのスクリーンは新しいコンポーネントの構築や、既存のコンポーネントの改善に役立ちます。この新機能とAtom・既存のコンポーネント間の往復が、プロダクトを洗練していくのです。

6. 各要素と全体像

前述したようにアトミックデザインでは、デザイナーが意識的に汎用性、互換性のある素材を作成し、各コンポーネトをデザインしています。

これにより、全体像の修正をする際には、それを構成する各要素を編集する必要が出てきます。　

よって、製作者は絶えず各要素と全体像を見比べることになり、各コンポーネントがシステム全体において正しく作動するかを確認するプロセスにもなります。

7. システムとビジョンを共有する

プロダクトに一貫性をもたせるために、デザインシステムを共有することは極めて重要です。

ひとりで作業をしていても、プロダクトのビジョンは容易に脱線します。

近年増えつつあるケースとして、他のデザイナーと共同で仕事をする際には、情報共有や意思疎通時のわずかな認識の違いなどにビジョンの維持がより一層困難になります。

ですが、技術の進歩と新しいツールの出現により、チームメンバー全員が共通のシステムの元で作業し、ビジョンを共有することが可能になりました。

例えば、SketchのCraftやAdobeの類似システムのような共有ライブラリがそうです。これらは常時アップデートされ、すべてのグループメンバーがアクセス可能な指標となる”信頼できる唯一の情報源”となります。

また、共有ライブラリの利用は仕事の効率化にもつながります。なぜならデザイナーたちは同じ素材を用いて作業をすることになるからです。共有ライブラリ内のコンポーネントがアップデートされたら、その変更がそのコンポーネントを利用しているすべてのデザイナーのすべてのファイルに即座に反映されます。

ですが、未だにアトミックデザインに完全に対応した共有ライブラリはありません。

コンポーネントと素材の関連性からなる、各要素と全体の相互依存が欠如しているものが大半です。

またもうひとつ問題点として、未だにデザイナーのライブラリと開発者のライブラリが別々になっていることが挙げられます。これにより、デザイナーと開発者は情報交換と作業を並行せねばならず、ミスコミュニケーションとそれに伴う仕事量の増加を誘発しかねません。

これらから導き出される完璧な共有ライブラリとは “デザイナーとデベロッパーが共同で使えるひとつのライブラリ”です。

コード化されたコンポーネントを直接Sketchファイルで利用できるようにするReact Sketch Appが現状では最も理想に近いのではないでしょうか。

そう遠くない未来にデザイナーとデベロッパー間の意思疎通はより容易になることでしょう。

まとめ

1. アトミックデザインは、最小のパーツ=Atomの組み合わせで各機能、ひいてはプロダクトをデザインする手法である。
2. アトミックデザインでは、各コンポーネントとプロダクト全体が連動しており、ひとつの要素に対する変更が即座に全体に反映されて、プロダクトの一貫性が保たれる。
3.  特に複数のデザイナーが絡むプロジェクトにおいて、共通の素材を用いてデザインするアトミックデザインは意思疎通の齟齬をなくし、仕事を能率化する。