アトミックデザインとは
パソコン・タブレット・スマートフォンなど、1人で複数台のデジタル家電を所有する時代になりました。しかし、そのページスクリーンは、それぞれのデバイスによって異なります。
今まではデバイスごとにデザインしなければいけなかったWeb制作も、アトミックデザインなら、それぞれの画面サイズやデザイン要素を反映でき、開発を効率化できます。
アトミックデザインは、『インターフェースは、常に最小の素材（Atom＝原子） の組み合わせであるべき』という基本理念にのっとり、原子が分子を構成し、分子がそれぞれの大きな有機体を構築していくイメージです。
UIデザイン手法
『アトミックデザイン』を学ぶ上で、欠かせないのが『モジュラーデザイン』です。
モジュラーデザインは、製品の各モジュール（※）を作成後、それらを組み合わせて完成品を作ります。
このモジュラーデザインの考え方を元に、ブラッド・フロスト氏が考案したUIデザイン手法が『アトミックデザイン』です。
（※システムや他部品への接合部の仕様が標準化され、容易に追加や交換ができるような構成要素）
向いているプロジェクト
アトミックデザインが『革新的』といわれる理由は、デザインシステムの自由度を飛躍的に向上させると同時に、作業を効率化させた点です。
従来のWEBデザイン・システム構築・実装では、デバイスごとのスクリーンデザインが完了してから、それらをコンポーネントに分解して、仕様書やUIキットなどを作る必要がありました。
しかし、分解されたコンポーネントは独自の役割や性格を持つため、相互性がなくなるばかりか再利用が難しく、必然的にデザインが制限されてしまいます。
アトミックデザインは、スクリーンや機能に一貫性をもたせる前提で、共有可能な最小の素材を最初にデザインし、組み合わせることで、デザインシステムの簡易化に成功しました。
一貫性を保てるアトミックデザインは、個人や少人数で行う小さなプロジェクトから、大規模のプロジェクトまで、規模を問わず開発ビジョンを共通したいプロジェクトに最適です。
コンポーネントを五つに分ける
『コンポーネント』とは、機器やソフトウェアシステムを構成する『部品・成分・構成要素』です。アトミックデザインは、従来のページ単位の考え方と違い、『コンポーネント単位を組み合わせて、デザインを構築する』という手法を指します。
アトミックデザインを構成する『Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）』の、五つのコンポーネントについて解説していきます。
Atoms 原子
『Atoms（原子）』は、UIを構成するための最小単位のコンポーネント（基礎的な要素）です。フォーム的には『ラベル・入力部分・ボタン・カラーパレット・フォント・アニメーション』が、Atomsに分類されます。
Atomsの基準は、文字通り『原子』と同じように、『それ以上、機能的に分割できない最小単位のコンポーネント』ということです。
実際の作業では、Atomsを全体的に把握できるページがあると、完成までの過程がわかりやすく、デザインの一貫性も保たれます。
Molecules 分子
Atomsを組み合わせて作るコンポーネントが『Molecules（分子）』です。Moleculesを可能な限りシンプルにすることで、ほかのページで再利用できるため、UIデザインの一貫性がとれます。
Atomsでは単なる『存在』だったコンポーネントが、Moleculesになることで『意味を持つ要素』になります。
たとえば、『ラベル・インプット・ボタン』というAtomsの組み合わせは、Moleculesで『入力ボックス』になるのです。
Organisms 有機体
AtomsやMoleculesを組み合わせてできる『Organisms（有機体）』は、非常に複雑なデザインを可能にします。
Organismsの一例として、Atomsの『ロゴ』とMoleculesの『ナビゲーション・検索ボックス』を組み合わせた『ヘッダー』が代表的です。AtomsやMoleculesで構成された要素を組み合わせることで、より複雑な意味合いも実行可能です。
Organismsは、非常にデザインの特色が出やすいコンポーネントのため、デザイナーの腕が試される要素でもあります。
Templates テンプレート
『Templates（テンプレート）』は、MoleculesやOrganismsを組み合わせて作るコンポーネントで、『ページ構造の説明画面』で、絵画のラフ画やスケッチ画に相当します。ワイヤーフレーム（配置図・設計図）とほぼ同義と覚えておいてもよいでしょう。
このデザインが実際にどのように配置されるのか、それらをTemplatesで『見える化』していきます。特に、レイアウト部分や、MoleculesとOrganismsの組み合わせで不具合が生じている場合は、ここで修正していきます。
Pages ページ
『Pages（ページ）』は、Templateというサイトの設計図に、実際のテキストや画像などが挿入された画面です。
実際のコンテンツが流し込まれた、ユーザーが目にする『最終製品』が表示され、美しく機能的なUIデザインで、ページをチェックできます。
アトミックデザインのメリット
アトミックデザインのメリットは、コミュニケーションの円滑化や、実装やメンテナンスが楽になるという作業性のほか、UIがブレなくなったり、Web ページの構造設計が見える化されたり、枚挙にいとまがありません。
その反面、デザイナーからは「難しい・使いづらい・難解である」という声も聞こえます。アトミックデザインの、代表的なメリットとデメリットを見ていきましょう。
デザインの変更がしやすくなる
アトミックデザインは、再利用性の高いコンポーネントを使うため、デザインの仕様変更が従来の方法に比べ、格段にスムーズになります。
特にデザイン面では、同じような外観や機能のページに、同じコンポーネントを使用できるため、作業が簡略化され、実装やメンテナンスが非常に楽になるでしょう。
サイト全体のデザインが整えられるため、ユーザーにとっても使いやすいデザインとなります。
出典：Atomic Designに向き合ってみてわかったことをまとめてみた
アトミックデザインが学べる本
アトミックデザインを本格的に学びたい場合、本による習得も有効です。とはいえ、まだまだアトミックデザインに関する書籍は数が限られています。
アトミックデザインを「使いにくい」と嘆くのではなく、なぜ使いにくいと感じるのか、その理由を理解できるようになると、仕事の進捗も劇的に変わるでしょう。
初歩からアトミックデザインを学べる本を紹介するので、参考にしてみてはいかがでしょうか？
Atomic Design ~堅牢で使いやすいUIを効率良く設計する
デザイナー向けに書かれた本ですが、サンプルコードや開発理論も入ってくるため、開発上級者や、フロントエンドエンジニアの人にも、読み応えのある本です。
「なぜコンポーネントで考えるべきなのか」という基礎理念から始まり、普段から見慣れているボタンやフォームなど、分かりやすい例で説明されています。
この本1冊で、アトミックデザインのコンポーネント思考や実際の取り入れ方まで学べます。
- 商品名：Atomic Design ~堅牢で使いやすいUIを効率良く設計する
- 価格：3218円（税込）
- Amazon：商品ページ
まとめ
アトミックデザインは、コンポーネント施行により、従来のデバイスごとのスクリーン制作が不要になるほか、デザインの仕様変更も格段に早くなります。
アトミックデザインの基礎や理念を知り、実際にUIデザインに生かせる五つのコンポーネントをマスターして、あなたの業務を円滑に進行させましょう。