LINE
MAIL
モジュール方式から派生したアトミックデザインは、UIデザイン手法の1つです。
UIコンポーネントは直感的に理解できるように定義され、コンテンツと構造が明確で、イメージを共有できる利点があります。
コンポーネント単位に分割するため管理がしやすく、効率的な変更修正や統一感のある設計デザインが実装できます。
ここでは、アメリカのウェブデザイナーBrad Frost氏が考案した、アトミックデザインについて、詳しく見ていきましょう。
アトミックデザインとは
アトミックデザインとは、UIコンポーネントを定義して分割し、それぞれで作成したパーツを組立てるデザイン・フレームワークです。 この手法は、従来のページごとにデザインするという概念ではありません。 多様化するデバイス・スクリーンサイズ、動的なコンテンツに対応するため、機能とコンポーネントで捉え設計するという考え方です。 UIコンポーネントは単位ごとにパーツを細分化するため、データ管理・パーツのストック・再利用ができます。 分割した要素は共通認識として機能するため、コミュニケーションの円滑化や、デザインシステムの統一が図れ、効率の良い設計を実現することができます。アトミックデザインの構成
アトミックデザインは、直感的にイメージしやすい名称で構成されています。 UIコンポーネントは、Atom（原子）・molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）の5つに分けます。Atom
Atomは、機能としてこれ以上分解できない、最小単位の基本的な要素です。 具体的には、インプット・ラベル・ボタンのような基本的なHTMLタグや、配色パターン・フォント・アニメーションなど抽象的なものです。 作成されたAtomが把握しやすいように整理しておくと、完成までの過程や全体のイメージがわかりやすく、デザインの一貫性も保たれます。 Atomは、デザインの統一感を支え、細かいパーツを組立てて、次のmoleculesへつなげます。Molecules
Moleculesは複数のAtomを組立てて、独自の性質や機能を持った要素です。 UIが意味を持つ要素になり、どのように使われるか表現されます。 例えば、「ラベル・インプット・ボタン」というAtomの組合せは、「入力ボックス」として扱えるMoleculesになるのです。 Atomは単なる存在で意味も機能もありませんが、Moleculesになることで一連の流れが想像でき、具体的なインターフェースになります。 Moleculesを可能な限りシンプルにすると、再利用性やUIデザインの一貫性を高められます。Organisms
Organismsは、AtomやMoleculesを組合せてつくられ、複雑なデザインや機能も実現可能となる要素です。 代表的な例として、Atomのロゴ・Moleculesのナビゲーション・検索ボックスを組合せたヘッダーが挙げられます。 Organismsは、必ずしもAtomから順に始める必要はありません。 そのため、Organismsが直接Atomを参照することや、単体で機能するものがあります。 プロジェクトやチームで捉え方は様々ですが、複数のパターンやデザインの特色が出やすい要素と言えます。Templates
Templatesは、Atom・Molecules・Organismsを組立てた、ページ全体の構造が把握できる要素です。 ワイヤーフレーム（配置図・設計図）と同様で、ページ構造やレイアウト構成などを確認するためのレイヤーです。 Templatesでは、画像や詳細なテキストが取り除かれているため、UIのコンテンツ構造に焦点を当て確認します。 ここでは情報や機能面の不足のほか、配置やレイアウト表示、Molecules・Organismsの組合せで生じる不具合を修正します。Pages
Pagesは、Templatesにトップページや、それぞれのコンテンツを含むページが反映した状態です。 実際のコンテンツで基礎になるデザインシステムの有効性や、Templatesのバリエーションの過不足をテストするために、必要不可欠な要素です。 Pagesでは基本のTemplatesが同じでも、コンテンツの動的な性質を反映してUIを変更します。 要素の粒度を揃えコンテンツの性質を考慮したデザインは、柔軟な対応ができ、信頼性が高いデザインシステムにつながります。UIベース
アトミックデザインは、Atom・molecules・Organisms・Templates・Pages、5つの要素を使って組立てることで、UIのベースができます。 開発する際に使用されることの多いSketchは、デザインシステムの核を定義するキャンバスを提供するデザインツールです。 Sketchを使うことでワークフローを向上させ、効果的にそれぞれの要素を使って組立てることが可能となります。
アトミックデザインのメリットとデメリット
アトミックデザインは、デザインやエンジニアリングにとって、メリットとデメリットがあります。 それぞれのポイントを知っておきましょう。メリット
アトミックデザインは、最小パーツから作成するため設計がしやすく、デザインの種類が豊富です。 パーツを細分化してデータ管理すると、パーツのストックや再利用がしやすく、改めてつくる手間を省くことが可能です。 作成過程において、構造と階層ごとに見比べ、UIとデザインシステムを同時に作成できます。 また、確認変更が容易なため、統一性が保ちやすいというメリットがあります。デメリット
アトミックデザインはReactを使うため、初めて扱う場合はソースコードを覚える必要があります。 ソースコードに不慣れな方や、明確なテーマが決まらない場合は、難易度が高くなるでしょう。 デザイナーやチームによって個性が分かれると、分割基準があいまいになり、統一性が損なわれ管理が難しくなります。 また、要素が細分化されたものはデザインが難しいと感じる方も少なくありません。まとめ
アトミックデザインは、体系的な手法が好まれる一方で、管理が難しいと懸念される場合もあります。 UIコンポーネントの分割やデータ管理を行うことで、コンテンツと構造が明確になります。 それらは議論するための共通認識として機能するため、コミュニケーションが円滑になり、効率良く作業を進められるでしょう。 
電話によるお問い合わせ
メールによるお問い合わせ
LINEでお問い合わせ