アトミックデザインとは？概要・メリットやデメリットを解説
Webデザインの手法は日々変化していて、その中にアトミックデザインと呼ばれるものがあります。数年前から利用されている手法ではありますが、まだまだご存知ではない人も多いでしょう。
実はアトミックデザインを採用すれば、デザインを使いまわせたり効率よく仕上げたりできます。今回はWebデザインの手法として、アトミックデザインを解説します。
アトミックデザインの概要
最初にアトミックデザインの概要についてご説明します。基本が理解できていなければメリットやデメリットも理解できないため、必ず押さえるようにしてください。
アトミックデザインとは
アトミックデザインは英語で「Atomic Design」と表現し直訳すると「原子のデザイン」です。このままでは意味が分かりにくいですが、簡単に説明すると原子のように小さな単位でデザインを完成させる手法を指します。
具体的にはデザインをパーツやコンポーネント単位で定義していく手法で、UIの要素を5段階に分類します。デザインを完成させるにあたってはこれらの要素をそれぞれ組み合わせていくのです。
なお、アトミックデザインを詳しく理解するためには、Webデザインにおけるコンポーネントの考え方を理解しておくべきです。コンポーネントとは様々な部品の集合体を指していて、「見出し」「テーブル」「会話風デザイン」など複数の要素から構成されたものを指します。ここでは詳細を割愛しますが、アトミックデザインの理解を深めるために必要に応じて復習しておきましょう。
アトミックデザインを構成する5つの要素
アトミックデザインには5段階の構成要素があり、それぞれの意味を理解することが重要です。ただ、それぞれの意味合いは英語で定義されているため、日本語に直すとニュアンスが人によって異なります。今回は構成要素の解釈の一例を以下でご紹介します。
Atoms(原子)
アトミックデザインにおいてUIの最小単位を表すものです。明確な定義はありませんが、HTMLタグで表現できるものとほぼ同等だと考えてよいでしょう。例えば文字列やフォント、カラー定義やボタンなどが該当します。
最小の単位であるため、アトミックデザインでは原子を組み合わせるのが基本です。ただ、小さな単位であり利便性が悪い部分もあるため、さらに大きな単位へと繋げていきます。
Molecules(分子)
複数の原子から構成されているものが分子です。ひとつのHTMLタグだけではなく、複数のHTMLタグがひとまとまりになっているとイメージしましょう。例えばTABLEタグだけではなく、ラベルタグやボタンタグなどで特定の機能を持つテーブルを作成すると分子になります。
基本的に分子はそれだけで何かしらの機能を持ちます。そのため、分子を作成しておけば複数のWebデザインに流用が可能で作業効率を高めることにつながります。ただ、完成した分子が必ずしも思い描くWebデザインに適しているとは限らず、盲目的に利用するのではなく、検討してから利用しなければなりません。
Organisms(有機体)
複数の原子や分子から構成されているものが有機体です。文章よりも大きな構成体となっていて、機能とデザインの両方を兼ね備えているのが一般的です。状況にもよりますが、それ単体でWebサイトの構成要素となるものが一般的です。
また、特定の機能を持っているため、他の用途には再利用できない要素となってしまいます。原子や分子は再利用を前提としたものではありますが、有機体はそうではありません。まったく同じ要件が存在すればそのまま再利用できますが、原子や分子に手を加えないと再利用はしにくいと理解しておきましょう。
Templates(テンプレート)
原子・分子・有機体をまとめてWebサイトの基礎となるものがテンプレートです。一般的にイメージされるWebサイトのテンプレートと同様に、これを用意するだけで基本的なWebサイトの機能やデザインが完成しています。
最低限の機能は揃っているため、テンプレートさえあればWebサイトを公開できることが一般的です。ただ、複数ページではなく1ページ単位をテンプレートと呼ぶ場合もあるため、「テンプレートさえあればWebサイトが完成する」とは言い切れません。テンプレートには存在しないWebページを作成する場合は、個別に対応が必要です。
Pages(ページ)
ページはテンプレートに具体的なコンテンツを挿入したものです。テンプレートは汎用的なものですが、ページになるとそうではありません。特定のWebサイト固有のものとなります。
ページになった段階で、要素の再利用ができなくなります。文字列や画像が完全に固有のものとなるため、再利用できないイメージは持ってもらえるでしょう。何かしらの理由で再利用が必要な場合は、テンプレート以下の細かい要素に分解して修正します。
アトミックデザインを採用するメリット
アトミックデザインを採用すると多くのメリットを感じられます。その中でも特に注目してもらいたいものをご説明します。
デザインの修正コストを抑えられる
アトミックデザインでは小さな単位でデザインが構成されています。それぞれの単位でデザインが管理されているため、修正などが発生しても容易に対応できます。原子や分子レベルでの変更であれば対応が容易であるため、デザインの修正コストを大きく抑えられます。
もちろん、デザインの変更コストを抑えるためには、原子や分子レベルでのデザインが揃っていなければなりません。アトミックデザインは原子の入れ替えや分子の入れ替えでコストを抑える仕組みであるため、入れ替えるものが少なければ効果が薄れてしまいます。
ただ、原子や分子はデザインを繰り返していくことで蓄積されるものです。つまり、アトミックデザインは、チームで利用したり繰り返し利用したりして、デザインの選択肢を増やすことでメリットを生み出します。
なお、アトミックデザインは原子や分子で構成されているため「変更の影響範囲が少ない」という側面もあります。少しの部分だけ修正すれば思い通りのデザインを生み出せるため、そのような観点でもデザインコストが低く抑えられます。
情報連携が簡単になる
細かな単位でデザインや機能を設計していくため、それぞれが持つ役割が明確になります。全体を大雑把に示した設計書ではエンジニアとデザイナー間で適切な情報連携ができない場合がありますが、アトミックデザインならそのような状況にはなりません。
情報連携がスムーズに進めば、多人数でWebデザインの開発がしやすくなります。人数が増えれば増えるほど情報連携にかかるコストは増えてしまいますが、アトミックデザインならば心配ないでしょう。細かな単位で情報連携をする取り決めさえしておけば、エンジニアもデザイナーもお互いに相手の状況を把握しやすくなります。
ただ、言い換えると少人数の開発では、アトミックデザインのメリットが薄れてしまいます。そもそも情報連携のコストが高くないため、低減できるコストも少ないのです。「少人数の場合には適さない」というわけではないものの、メリットの感じ方は状況によって異なります。
パーツの再利用がしやすい
原子や分子など小さな単位でデザインを仕上げるため、再利用がしやすくなっています。仮にそのまま再利用できなくとも、少しのコード修正で新たな原子や分子を生み出すことが可能です。再利用のコストは非常に小さいと言えるでしょう。
再利用がしやすいことは、上記でご説明したデザインの修正コスト低減につながります。新規でWebデザインを作成する場合も修正する場合も、再利用のしやすさから低コストを実現できるのです。
アトミックデザインを採用するデメリット
アトミックデザインにはメリットだけではなくデメリットもあります。続いてはこちらについても理解しておきましょう。
方針が決まらないと使いづらい
アトミックデザインの詳細にてご説明したように、この考え方には明確な定義が存在しません。アトミックデザインを導入する企業やチームなどが独自に解釈をして、独自に要素の内容を定義しています。そのため、事前にそれぞれの要素について方針を決めておかなければ、アトミックデザインの効果を全く発揮できなくなります。
例えばアトミックデザインの分子と有機体は切り分けが難しい部分です。同じ要素でも人によって分子と理解することもあれば有機体と理解することもあります。このような認識齟齬を防ぐために、必ず方針を明確にしておかなければなりません。
また、あるチームでは分子に分類される要素でも、違うチームでは有機体に分類される可能性があります。経験してきた環境によって解釈が異なる可能性があるため、このような解釈の不一致によるトラブルも防げるようにすべきです。
ソースコードのルールを設ける必要がある
多くのデザインを作成して再利用するため、大量のソースコードを管理することになります。このような状況ではソースコードのルールが重要となり、ルールがないと理解しにくい状況を生み出しかねません。
例えば、ソースコードのインデントの付け方はルール化しておくべきです。人によって付け方の解釈に違いがあるため、異なったルールでインデントされると読みにくくなってしまいます。実装ミスがあっても気づかないなど大きなトラブルに発展する可能性があるため、ルールを徹底すべきです。
また、CSSのプロパティをどのような順番で並べるのか決めておきましょう。プロパティの順番は入れ替わっても基本的に影響はありませんが、バラバラでは視認しづらくなってしまいます。CSSプロパティの順番についてもルール化しておき、同じコードを扱う人であれば、同じように理解できるものに仕上げる必要があります。
アトミックデザインを導入したい場合の具体的なポイント
実際にアトミックデザインを導入する場合、どこに気をつければ良いのか気になるでしょう。続いては導入のポイントをご説明します。
アトミックデザイン導入の理由を検討する
アトミックデザインをうまく運用するためには、参加者が共通認識を持たなければなりません。導入されている理由を理解していない人がいると、運用の障壁となってしまいます。
可能な限りそのような人をなくすために、導入の理由をよく検討すべきです。理由を持って導入するようにし、加えてその理由を周知徹底しておきましょう。
要素の基準を決定する
5種類の要素について切り分けるための基準が存在しなければ運用できません。最初に切り分ける基準や観点を明確にし、理解してもらうようにしましょう。
基準の設け方については明確な決まりがありません。取り扱うWebサイトの傾向などを踏まえて、同意を得やすい部分で切り分けるようにしましょう。あとから変更すると大きなトラブルになりかねないため、最初のうちによく吟味しておくべきです。
コンポーネントの作り方を決める
それぞれのコンポーネントは、小さな要素を組み合わせて作成します。そのため、組み合わせのルールや新しいコンポーネントの作り方を明確にしておきましょう。
アトミックデザインは再利用のしやすさがメリットですが、各々が自由にコンポーネントを作成すると運用が崩壊する可能性があります。ある程度は制限をかけた中で運用してもらうとよいでしょう。
まとめ
Webデザイン業界で利用されるアトミックデザインについてご説明しました。アトミックデザインはWebページの要素を細かく分割した考え方で、適切に分割することで再利用がしやすくなります。Webデザインの効率を高める方法として幅広く利用されているのです。
ただ、アトミックデザインはある程度、要素が集まってから効果を発揮するものです。そのため、導入して初期の段階やデザインに関わるメンバーが少ない場合は、なかなか効果を感じられないかもしれません。
また、アトミックデザインのデメリットも考慮した運用が必要です。メリットだけに注目すると思わぬ落とし穴にはまる可能性があるため、よく検討して導入するようにしましょう。
