• HOME
  • デザイン
  • アトミックデザインとは?考え方やメリットデメリットを解説

アトミックデザインとは?考え方やメリットデメリットを解説

モジュラーデザインから派生したアトミックデザインが人気ですが、デザイナーからは「難しい」という声も聞かれます。基礎や理念を知り、実際にUIデザインに活かせる、五つのコンポーネントについて解説していきます。

副業で成長機会を増やしたい
エンジニア・デザイナーの方!

上場企業・スタートアップ・ベンチャーまで利用企業多数!副業するならOffers!

まずは60秒で副業を開始する!

アトミックデザインとは

パソコン・タブレット・スマートフォンなど、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デザインで、ページをチェックできます。

出典:アトミックデザイン | UX TIMES

アトミックデザインのメリット

アトミックデザインのメリットは、コミュニケーションの円滑化や、実装やメンテナンスが楽になるという作業性のほか、UIがブレなくなったり、Web ページの構造設計が見える化されたり、枚挙にいとまがありません。

その反面、デザイナーからは「難しい・使いづらい・難解である」という声も聞こえます。アトミックデザインの、代表的なメリットとデメリットを見ていきましょう。

デザインの変更がしやすくなる

アトミックデザインは、再利用性の高いコンポーネントを使うため、デザインの仕様変更が従来の方法に比べ、格段にスムーズになります。

特にデザイン面では、同じような外観や機能のページに、同じコンポーネントを使用できるため、作業が簡略化され、実装やメンテナンスが非常に楽になるでしょう。

サイト全体のデザインが整えられるため、ユーザーにとっても使いやすいデザインとなります。

出典:Atomic Designに向き合ってみてわかったことをまとめてみた

アトミックデザインが学べる本

アトミックデザインを本格的に学びたい場合、本による習得も有効です。とはいえ、まだまだアトミックデザインに関する書籍は数が限られています。

アトミックデザインを「使いにくい」と嘆くのではなく、なぜ使いにくいと感じるのか、その理由を理解できるようになると、仕事の進捗も劇的に変わるでしょう。

初歩からアトミックデザインを学べる本を紹介するので、参考にしてみてはいかがでしょうか?

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

デザイナー向けに書かれた本ですが、サンプルコードや開発理論も入ってくるため、開発上級者や、フロントエンドエンジニアの人にも、読み応えのある本です。

「なぜコンポーネントで考えるべきなのか」という基礎理念から始まり、普段から見慣れているボタンやフォームなど、分かりやすい例で説明されています。

この本1冊で、アトミックデザインのコンポーネント思考や実際の取り入れ方まで学べます。

  • 商品名:Atomic Design ~堅牢で使いやすいUIを効率良く設計する
  • 価格:3218円(税込)
  • Amazon:商品ページ

まとめ

アトミックデザインは、コンポーネント施行により、従来のデバイスごとのスクリーン制作が不要になるほか、デザインの仕様変更も格段に早くなります。

アトミックデザインの基礎や理念を知り、実際にUIデザインに生かせる五つのコンポーネントをマスターして、あなたの業務を円滑に進行させましょう。

この記事をシェア

関連記事


副業・フリーランス

プログラミング

インタビュー

Rubyエンジニア2名の爆速採用に成功!2ヶ月で30倍の事業拡大を支える農業ITスタートアップの複業活用法

野菜や米、果物などの生産者と消費者を繋ぐオンライン直販所『食べチョク』を運営するビビッドガーデン。在宅時間をより充実させたい消費者が集まり、事業が急成長している。そこで課題となったのがエンジニア...

オンライン面談のみでテックリードクラスを複数採用!注目ベンチャー企業のwithコロナ時代に向けた採用術とは

日本で唯一のeKYC対応のデジタル身分証アプリを提供するTRUSTDOCK。今後、身分証がデジタルに置き換わるであろう不可逆な未来を実現するためにもエンジニアが必要だった。同社にはコロナ禍にも関...

mrubyを採用したソフトウェアを広げた第一人者・松本亮介が、面倒を感じながらもC言語を愛する理由とは?

世の中にはさまざまなプログラミング言語が存在します。そして、人によってはただならぬ愛着を持つ人も。そこで本企画では、このプログラミング言語にフォーカス。お気に入りのプログラミング言語のことを中心...

エンジニアとして、社会に新しい価値を提供し続けたい。カンカク志甫氏が考える本業と副業のバランス術

本業と数々の副業を両立させてきた志甫氏。副業を受ける決め手や本業と副業を両立させるコツ、これからのエンジニアのチャンスの掴み方について伺った。

デザイン

お金

採用・組織

グルメ