はじめに

Webページやレイアウトを作成するために、デザインシステムを使用することがあります。デザイナーにとって、デザインシステムは馴染みのツールです。

Atomic Designは、Webページやレイアウトを作成するために、デザイナーの間で有名なデザインシステムの一つです。

ここでは、Atomic Designの基本的な使い方やメリットなどについて紹介します。


Atomic Designとは

Atomic DesignはWebデザインツールのUIデザインシステムです。デザインを作る際、システムを構築してデザインを組み立てていきます。

Atomic Designの基本は、5種類の要素に分割してデザインをすることです。それぞれで作成したパーツを組み立ててデザインを作り上げていきます。


Atomic Designの特徴

Atomic Designは、コンポーネントで構成されています。コンポーネントはレベル1～5で、原子、分子、有機体、テンプレートとページです。

Atomic Designは、イメージするならパズルのような感覚でデザインを作り上げていきます。

Atomic Designのデザイン作成のサポートをしてくれるシステムが、Sketchです。

Sketchは、デザインシステムツールで、Atomic Designを使う際、原子や分子などを作成するためのキャンパスです。


Atomic Designの使い方

Atomic Designでデザインを作成する際に、レベルが5つに分類されているため、順を追って部品を作り上げていきます。

Atomic Designでデザインを作る際、レベル1のAtomicからスタートです。 ここでは、Atomic Designを使ったデザイン作成の流れを紹介します。


Sketchを使用

Sketchは、Atomic Designを使って、原子や分子、コンポーネントを作るためのキャンバスになります。

Atomic Designではありませんが、Sketchは、デザインシステムを開発する際に必要です。


Atomの作成

Atomicが一番細かいパーツです。細かいパーツを組み立ててレベル2の分子へつなげていきます。

原子パーツは、デザインシステムのベースとなるパーツです。

テキスト、アイコンボタン、タグなどが原子になります。


Moleculesの作成

Moleculesは、原子を組み合わせた分子のことです。複数の原子をパズルのように組み合わせることで分子の機能が成り立ちます。

分子は、色々な原子を組み上げてデザインのベースを作る原子のグループです。

ラベルやリード文などは原子になりますが、原子だけでは意味も機能もありません。

複数の原子を組み合わせて、分子にすることで初めて機能が生成できます。


Organismsの作成

Organismsは、単体でも機能し、原子の組み合わせや分子を組み合わせて構成したパーツとしても成り立つデザインパーツです。

Organismsだけだとイメージしにくいですが、例えばWebページでタイトル＋メニューボタン＋サーチの組み合わせを見ます。

この組み合わせはまさにOrganismsです。


Templatesの作成

Templatesは今までの要素である原子や分子、有機体を組み合わせてフレームを作ることです。

テンプレートは、文書のテンプレートやWebサイトのテンプレートなど、身近なところに色々溢れています。

近年、テンプレートは、Web上にたくさんあるのでテンプレートを作成するダウンロードして使う方が早くWebサイトなどの作成が可能です。

Atomic Designは、原子や分子、有機体を組み合わせて独自のテンプレートの作成ができます。


Pagesの作成

Pageは、最後の過程になります。トップページやそれぞれのコンテンツを含むページなど最終的に表に出るものです。

ページは、デザインパーツを変えてレイアウトを変えることもできます。


UIのベース作成

Atomic DesignはAtom、Molecules、Organisms、TemplatesとPagesのそれぞれがUIパーツになります。

それぞれのパーツを作って組み立ててUIのベースが出来上がり、それがAtomic Designの UIベースです。


Atomic Designのメリット

Atomic Designを使っているユーザーがメリットに感じるポイントをまとめました。

ユーザーがメリットに感じていることは、大まかに分けると4つです。

「デザインが変えやすい」 「デザインの統一性が保ちやすい」「コンポーネントが設計しやすい」と「データ管理がしやすい」になります。

ここからは、それぞれのメリットについての解説です。


デザイン変えやすい

Atomic Designは、デザインのバリエーションが豊富です。小さなデザインの変更からレイアウトの変更までフレキシブルに変更できます。

Atomic Designは、デザインの変更しやすいシステムが強みであり、メリットです。


デザインの統一性を保ちやすい

Atomic Designは、コンポーネントをシンボル化することができます。シンボル化すると統一性を保つことが早いタイミングから可能です。

コンポーネントのシンボル化を後にしてしまうと統一性を保つために逐一、確認しなければなりません。

早めにシンボル化することで統一性が保ちやすく、コンポーネントの管理もしやすいところがAtomic Designのメリットです。


コンポーネント設計しやすい

Atomic Designは、一つ一つコンポーネントを作り上げるため、コンポーネントの設計がしやすくなっています。

原子や分子単位で作って組み上げることでコンポーネントのカスタマイズが可能です。


データ管理しやすい

Atomic Designは、コンポーネント単位で分割が可能です。コンポーネント単位に分割することでデータ管理がしやすくなります。

また、パーツを細分化することでパーツをストックや再利用しやすくすることが可能です。


デザインの取り外しが自由自在

Atomic Designは、デザインを最小パーツから作成するため、作成したデザインパーツをストックすることが可能です。

ストックしたデザインパーツは、他のデザインへ再利用することができます。

再利用できることで再度同じようなパーツを一から作る手間を省くことが可能です。


Atomic Designのデメリット

Atomic Designを使っているユーザーがデメリットに感じるポイントがあります。

ユーザーがデメリットに感じていることは、大まかに分類すると3つです。

「ソースコードが多い」 「分割基準があいまい」と「デザインが難しい」になります。ここからは、それぞれのメリットについての解説です。


ソースコードが多い

Atomic Designは、Reactを使います。Reactとは、JavaScriptライブラリの中にあるフレームワークです。

コンポーネントの部品を作る上で用いられる場面が多く、HTMLのデザインにも用いられます。

Atomic Designは、このReactを使うのですが、デザイナーは、Reactに馴染みのないことがほとんどです。

デザイナーで、初めてReactを扱うならソースコードに圧倒されてしまいます。

Reactの知識があることやReactに抵抗なければ問題ありません。

Reactを知らないとソースコードを覚えないといけないことも手間と時間がかかるリスクです。


分割基準があいまい

Atomic Designは、コンポーネント単位で分割や管理が容易に行えます。これは、細かく管理したいデザイナーにとってこれはメリットです。

しかし、一方で、デザイナーやチームによって個性が分かれてくる可能性があります。

個性や好みが分かれてくると、コンポーネント毎に統一性が難しくなることは懸念事項です。

統一性がなくなると、コンポーネントの境目が曖昧になり、管理がしにくくなります。


デザインが難しい

Atomic Designは、ソースコードに慣れているデザイナーやテーマがはっきりしている場合は、使いやすいシステムです。

ただ、ソースコードに馴染みがないデザイナーやデザインがはっきりとまだ決まってない場合、Atomic Designを使うのは難易度が高くなります。

また、デザインをする場合、コンポーネント単位の細分化されたものではなく、レイアウト毎が通常です。

コンポーネント単位は、細かすぎてデザインしづらいと感じてしまうデザイナーも少なくありません。


Atomic Designのワークフロー

Atomic Designの概要などについて説明しました。ここからは、Atomic Designのワークフローについて説明です。

Atomic Designのワークフローは、「デザイン」「コンポーネント設計・構築」と「HTML仕上げ」になります。


デザイン

デザインは、ディレクターが大まかなデッサンでイメージ作成をして土台作りをします。

次にデザイナーがカラーやフォントなどWebのベースとなる部分を構成です。


コンポーネント設計・構築

デザインが決まったら次は、コンポーネント設計です。見出しやリンクなど各コンポーネントを作成します。

各コンポーネントを作成したら、一覧にしてコンポーネントページを作り上げてまとめていきます。


HTML仕上げ

最後に作ったコンポーネントを組み上げてHTMLページを仕上げていきます。

仕上げたHTMLが、きちんと見えるかどうか画像のサイズや文字の大きさ、レイアウトなどのチェックを確認して問題なければ完成です。


Atomic Designの注意点

Atomic Designを使用する際の注意点は、デザイン構成が曖昧なままで使用しないということです。

Atomic Designは、デザインが発揮していると作りやすく、使用しやすいデザインシステムになります。

原子や分子などを組み合わせてコンポーネント化することでデータ管理しやすく、デザインの変更も容易です。

しかし、デザインが定まっていない、構成するページが少ない時は、Atomic Designの作成や管理が難しくなるため、注意が必要になります。


Atomic Designにおすすめの参考本

Atomic Designを学習するための参考本が色々出版されています。ここでは、Atomic Designを学習するためのおすすめを2冊の紹介です。


UIデザイナーのための Sketch入門＆実践ガイド

UIデザイナーのためのSketch入門&実践ガイドは、Atomic Designのみの教本ではありません。

しかし、Sketchの基本操作やSketchをAtomic Designと融合させた作成方法などについて説明しています。

Atomic DesignでSketchはキャンバスとして利用するため、Sketchの使い方とAtomic Designのデザイン作成方法を学ぶことが可能です。



Atomic Design ~堅牢で使いやすいUIを効率良く設計する

Atomic Designを使ってUIを設計する上で、UI設計の問題点や本質だけでなく、UI設計の手順やポイントについてまとめた1冊です。

Atomic Designの考え方やReactを使用した実装などについてまとめてあります。



Pattern Labとは

Pattern Labは、Atomic Designを実装するためのオープンソースです。Atomic Designのデザインを実現するために必要なリソースになります。

Atomic Designでは、Pattern Labを使わずに、実現化することは不可能ではありませんが、Pattern Labを使うことでより効率的に作業が可能です。


まとめ

Atomic Designを導入してデザインを構築することは、コンポーネント設計を介してパズルを組み立てるようにできるため、統一性があります。

反面、構成が少ないと時間と手間がかかることがリスクです。

Atomic Designの導入は、構成要素、目的や作業効率などを考慮した上で導入することがAtomic Designを活用する上でのキーになります。