Atomic Design とは
Atomic Design とは、デザインシステムを構築する際に、パーツ単位でUIデザインを設計する手法です。
アメリカのWebデザイナーであるBrad Frost氏によって考案・提唱されました。
特徴は、UI の構成要素を5段階に分けて考えるという点であり、それぞれの要素ごとに UI を作成し、それを組み合わせて最終的な UI を設計していきます。
Brad Frost氏のアトミックデザイン概要に関するドキュメントは、以下のリンク先からご覧いただけます。
『Atomic Design by Brad Frost』
Atomic Design の構成要素
Lv.1 原子 / Atoms
原子は、最小かつ最も基本的なデザイン要素です。例えば、フォント、色、スペースなどです。
Lv.2 分子 / Molecules
分子は、複数の原子から構成されるデザイン要素です、例えば、フォーム、ボタン、ラベルなどです。
Lv.3 生体 / Organisms
生体は、複数の分子または、複数の分子と複数の原子から構成されるデザイン要素です。例えば、ヘッダー、フッターナビゲーションバーなどです。
Lv.4 テンプレート / Templates
テンプレートとは、画面のレイアウトです。原子と分子、生体を組み合わせて作成します。この段階では、まだ具体的なテキストや画像は挿入しません。例えば、モーダルやカードデザインなどです。
Lv.5 ページ / Pages
ページとは、ユーザーが実際に見ることができる最終的な画面のことです。テンプレートに本物のテキストや画像を挿入することで、実際のサービスイメージを明確にできます。また、生体やテンプレートの段階では発見できなかった抜け漏れに気づくことができます。
メリット
Atomic Design は、デザインシステムを構築するために使用され、各要素のスケール、パターン、構造を統一させることができます。また、デザインの変更や保守性の向上も容易になります。
この方法論は、同じデザイン要素を複数の異なるページやアプリケーションに適用する事ができるように、コンポーネントベースのアプローチを採用しています。これにより、再利用性が高くなり、開発のスピードも上がります。
また、ユーザインターフェースデザインに限らず、Webデザイン、モバイルアプリデザイン、グラフィックデザインなど、幅広い分野で活用することができます。
コメント