アトミックデザインとは？その内容とメリットを解説します

TOP
コラム
アトミックデザインとは？その内容とメ

アトミックデザインとは

現在社会においてスマホやタブレットなど複数の端末を所有し、情報取得を行うことやサービスを利用することは日常的に行われており、技術の発展と共に今後もその傾向は強まりさらに多様化していくことは間違いありません。企業は自社のサービスやプロダクトをアピールするために最新の技術を駆使し、ユーザーに対して満足度の高いWEBサイトやアプリケーションの開発を行っております。ユーザーの満足度を上げるために最も重要なポイントの一つがUI/UXとなります。 UI（ユーザーインターフェイス）は、サービスとユーザーをつなぐ接点という意味になり UX（ユーザーエクスペリエンス）は、サービスを通して獲得する体験という意味を持ちます。 UI/UXについては様々なニュースなどで聞く機会が多く流行のキーワードですが、UI/UXを意識することは企業にとって他社との差別化を図ることや競争力を高めるという観点から非常に重要な役割を持っております。企業間の技術力による競争が激化する現在において、UI/UXの知識やデザインに関する知識はアンテナを高めておき、新しい情報を取得する必要があるでしょう。ここではデザインに関する知識としてアトミックデザインという言葉について説明させていただきます。アトミックデザインとはブラッド・フロスト氏が提唱するUIデザインの手法の一つで、小さいデザインから作成し全体のデザインを完成させるという手法となります。従来であればUIデザインは全体のデザインを設計し、それに従って部分的なデザインを作成しバランスをとり全体を完成させるという方法が選択されておりましたがアトミックデザインは従来とは全く真逆の方法となり業界においても注目が集まっております。アトミックデザインはデザイナー・ディレクター・コーダー・エンジニアなど様々な職種において関連性の高いキーワードとなりますので興味がある方は是非参考にしてみてください。

アトミックデザインの構成について

アトミックデザインの構成について説明させていただきます。アトミックデザインの大きな特徴としてUIの構造を5つ（原子、分子、有機体、テンプレート、ページ）に分類し、それぞれの工程において作業を実行し全体のデザインを構築するという点になります。なお、アトミックデザインはすでに触れたように小さいデザインから作成するというデザイン手法となります。原子、分子、有機体、テンプレート、ページと並べた順で小さいデザインとなりますので各工程において何を作成しているのかという点を確認しながら読んでいただけると全体を理解していただきやすい内容となっております。それでは詳しく解説させていただきます。

原子

アトミックデザインの構成の一点目が原子となります。原子の工程においてはUIを検討し配置するうえで最小のパーツとなる、ラベルやボタン、配色やフォントなどのコーポネントの作成を行います。アトミックデザインにおいてはこういったパーツや考え方を原子と呼び、これ以上分解ができないコーポネントとして扱います。アトミックデザインにおける原子の由来は、当然ながら科学における元素の最小単位であり分割不能な原子からきております。

分子

アトミックデザインの構成の二点目が分子となります。原子の工程で作成を行ったパーツを配置し分子を構成していきます。具体例をあげて説明させていただきますと、WEBサイト上で使われる検索フォームなどが分子の例としてあげることができます。検索フォームは原子の工程で作成したラベル・インプット・ボタンなどをデザインして完成されます。このように、分子の工程においては原子単体では機能が行われないコーポネントを組み合わせて完成させていただき、UIを構成する部品として作成していきます。

有機体

アトミックデザインの構成の三点目が有機体となります。有機体は原子と分子を組み合わせて構成されたものもので、ヘッダーなどが代表例となります。

テンプレート

アトミックデザインの構成の四点目がテンプレートとなります。原子・分子・有機体を組み合わせて構成し、WEBディレクターが作成するワイヤーフレームに類似した内容になります。テンプレートの工程で、UI全体の骨格を整えていきます。

ページ

アトミックデザインの構成の五点目がページとなります。テンプレートに対して文章や画像など必要な情報を加えてページが完成となります。

アトミックデザインのメリットについて

アトミックデザインのメリットについて説明させていただきます。ポイントを2つに絞り紹介させていただきますので、是非参考にしてみてください。

デザインの自由度が広がる

アトミックデザインのメリットの一点目がデザインの自由度が広がる点です。各工程で作成したコーポネントを自由に組み合わせてUIに設置することが可能であるため、デザインの自由度が広がります。従来のようにワイヤーフレームもしくは画面設計を作成し、それを基に各パーツに必要なコーポネントを作成するという手順と比較するとアトミックデザインの自由度は高いことは間違いありません。また、完成したコーポネントの配置を変更するだけでデザインの変更を実行することが可能となりますため、デザイン変更が容易であることもアトミックデザインのメリットと言えるでしょう。

効率的に作業を行うことができる

アトミックデザインのメリットの二点目が効率的に作業を行うことができる点です。一度作成したコーポネントはチームメンバーが誰でも再利用することが可能です。また、大規模プロジェクトで多くのメンバーが業務に携わっている場合や複数メンバーで同時に業務を遂行する場合においても便利なため、作業を効率的に行うことが可能となります。

まとめ

いかがでしたでしょうか？アトミックデザインについて詳しく説明させていただきましたので、参考にしていただけましたら幸いです。