WebデザイナーがUIをデザインする際によく使うツールとして、デザインシステムがあります。
中でも「アトミックデザイン」は、最小パーツからデザインを作り上げていく革新的なUIデザイン手法です。知っておくとデザイン制作の幅が広がるため、Webデザイナーであれば覚えておきたいでしょう。
本記事では、アトミックデザインの考え方を解説するとともに、メリットやデメリットについて紹介します。
アトミックデザインとは
アトミックデザインとは、小さな素材を組み合わせることでWebページを作っていくUIデザインシステムです。
通常UIデザインをする場合、ページの完成形をイメージし、全体のバランスを見ながら作業を進めていきます。しかしこの方法では、サイトイメージを確認するまでに時間がかかることに加え、他者が行った作業の修正が困難という問題が生じます。
それに対しアトミックデザインは、小さな素材を大量に作り、必要な場所に配置していく手法です。Webページをパズルのように組み立てるイメージを持つとよいでしょう。
「デザインの変更が簡単」「他人が行った作業の修正が容易」「スキルレベルが低くても高性能のWebサイトが作れる」などの特徴があることから、使うデザイナーも多い手法となっています。実際、近年では制作現場でも、効率や一貫性を重視したデザインは重要視されています。
アドミックデザインを構成する5つのコンポーネント
アトミックとは、英語の「Atom」から来ており、原子を意味します。原子は、化学元素の最小単位です。原子が分子を作り、分子が有機体を作り、最終的に世界中のあらゆるものを作り出します。
アトミックデザインでは、UIデザインにおいて必要になる非常に小さな要素（＝Atom）を大量に作り出し、それを組み合わせていくことで少しずつ大きな構成物を作り上げ、最終的には完成物である「ページ」を作り上げます。
アトミックデザインにおいては、「Atoms（原子）」「Molecules（分子）」「Organisms（有機体）」「Templates（テンプレート）」「Pages（ページ）」の5つのコンポーネントを作り上げることでWebサイトを完成させます。ここでは、それぞれのコンポーネントについて解説します。
Atoms（原子）
UIを構成するための最小単位となるのが「原子」です。ボタン・カラーパレット、フォント・アニメーション・ラベル・入力部分などが原子に当てはまります。UIデザインに必要となる原子を事前に作り、組み合わせていくことでページを作り上げていきます。
Molecules（分子）
複数のAtomsを組み合わせて作る構成物が「分子」です。たとえば、原子の「ラベル」「インプット」「ボタン」などを組み合わせることで、分子である「入力ボタン」として機能するようになります。
分子は一度作ってしまえばほかのページでも再利用が可能なため、使い勝手がよいのが特徴です。ただし、分子の作り方は担当者の個性がでる部分でもあるため、自社のサイトに最適な分子であるかどうかの確認が重要です。
Organisms（有機体）
原子や分子を組み合わせて作られるのが「有機体」です。有機体はヘッダーやフッターのような複雑な機能を備えたパーツで、サイト管理者の要望を組み込めることができる部分です。
有機体のレベルまでくると、機能性に加えてデザイン性が重要になってくるため、デザイナーのセンスも必要なります。
Templates（テンプレート）
原子や分子、有機体を組み合わせ、サイト全体の構成を作るのが「テンプレート」です。テンプレートは、ヘッダーやフッター、ホームページのテキスト配置、画像配置、検索機能などが組み込まれた構造物です。
テンプレートのレベルにまで完成されていれば、テンプレートを元に複数のサイトを作り上げたり、テンプレート自体を販売したりできるようになります。
Pages（ページ）
テンプレートに独自のコンテンツを入力したものがアトミックデザインの最終形である「ページ」です。文章や画像、さまざまな情報を入力し、Web上で公開できるように準備を進めていきます。
アトミックデザインのメリット
アトミックデザインには、ほかのUIデザイン手法にはないさまざまなメリットがあります。ここでは、それぞれのメリットについて紹介します。
デザインの変更が容易
アトミックデザインの大きなメリットは、デザインの変更が簡単なことです。WebサイトのUIを変更する際には、少しの機能の追加であってもコードに大幅な変更を加えなければならないこともあります。
その一方でアトミックデザインであれば、必要な機能を備えたコンポーネントを置き換えるだけで変更が完了します。
短時間かつ容易にデザインやUI変更ができるため、多くのデザイナーに使われています。
複数のサイトに適用可能
複数の類似サイトを作りたい場合は、アトミックデザインが非常に便利です。作成したコンポーネントであるテンプレートを利用することで、複数のサイトをすぐに運用できる形にまで仕上げることができます。
サイトごとに多少の変更が必要な場合も、対応するコンポーネントを変更することでサイトの目的に則したページが簡単に作れます。
作ったコンポーネントが財産になる
一度作ったコンポーネントを整理して保管しておけば、将来さまざまなWebサイトを作る際に役に立ちます>作れば作るだけ自分の財産になっていくのもアトミックデザインのメリットの1つです。
アトミックデザインのデメリット
アトミックデザインには多くのメリットがある一方でデメリットもあります。アトミックデザインを利用する際には、これらのデメリットについても事前に理解しておくとよいでしょう。
他者が作ったコンポーネントが使いにくい
自分が作ったものだけでなく、他の人が作ったコンポーネントも活用できるアトミックデザインですが、他者が作ったコンポーネントは使いづらいと感じる場合があります。
特にUIにとことんこだわりたいデザイナーからすると、他の人が作ったコンポーネントでは操作性に欠け、サイトにマッチしたデザインや操作性になっていないと感じることもあるようです。
ソースコードが多い
一度作ってしまえば置き換えが簡単になりますが、各コンポーネントを作るためにはコーディングを行う必要があります。また、ソースコードを多く利用するため、複雑になりやすい傾向があります。
そのため、初心者やさまざまなコードに慣れていない方は、アトミックデザインが難しいと感じる場合もあります。
まとめ
今回は、UIデザイン手法の1つとして注目を集めるアトミックデザインについて紹介しました。
アトミックデザインは小さなコンポーネントから順に作ることでサイトの構成をシンプル化できるため、デザインや機能の変更が容易にできるというメリットがあります。
その一方で慣れていないデザイナーからは操作が難しい、サイトの構成が複雑化しやすいなどの声も聞きます。
アトミックデザインに取り組む際には、自分に合っているかどうか、構築するサイトにふさわしいかどうかを考えつつ取り組むことが重要です。デザインの幅を広げるためにも、アトミックデザインの手法を知っておくといいでしょう。
合わせて読みたい！コンポーネント指向を採用したデザイン現場事例
プロジェクト規模が大きくなればなるほど重要になる、デザイン・開発の効率化や品質管理の問題。
株式会社メンバーズでは、Adobe XDのコンポーネント機能を活用することで、効率的かつ品質を落とさないデザインを実現したそうです。
制作・開発間でスムーズに連携するための進め方やポイントを、実際の事例を交えてご紹介します。
