Brad Frost(著)から解くAtomic Designのコンポーネント分割方法

はじめに

現在UIデザイナーとして所属している株式会社Brewusでも、デザインコンポーネントの考え方としてAtomic Designは基礎的な部分を担っています。

Atomic Designとは、最小限のパーツをコンポーネント化し、それを組み合わせたものをまたコンポーネント化し、、それを繰り返していく作り方のことで

Atomic Designを採用することで、例えば

1. 全てのコンポーネントに使っているボタンの形が変わった
2. 1つのボタンコンポーネントを修正すれば、その他で使われているコンポーネントを修正する必要がない

と入った利点があります。

逆にAtomic Designを採用していない場合は。、

1. 全てのコンポーネントに使っているボタンの形が変わった
2. ボタンコンポーネントが使われているコンポーネント全てを、一つずつ修正していく必要がある（100コンポーネントあれば、100回修正しないといけない）

という作業が必要になります。

この考え方のおかげで作業は格段にスピードアップしました。

Atomic Designのコンポーネントルールとは？

ただAtomic Designを使っていても、コンポーネントをどこで切り分けるべきかという判断が曖昧なため、作り手によってコンポーネントルールが違う、など、Desigh Systemの統一化が難しい一面もありました。

大手企業のようにきっちりしたDesign Systemを作るのは長い年月が必要になりますが、ざっくりとしたものでもルールが決まっていれば、新しいプロジェクトや複数人が作業する中でも作業が効率化します。

下記引用となりますが、Brad Frostさんが説明してくれているAtomic Designの概念がとてもわかりやすかったので内容を翻訳する意味も込め、Atomic Designのコンポーネント切り分けの概念を紹介させていただきます。

この記事の画像はすべて、Atomic Design by Brad Frostの記事から引用させていただいております。

※Dear Mr.Brad Frost, Thank you for sharing Atomic Design System blogs. I gonna show it to a Japanese UI designer as translation. I appreciate using your writing and images.

Atomic Design Methodology

01. 科学からヒントを得る

まずAtomic Design(アトミック デザイン)とは物事を分解して最小の単位(原子レベル)まで分解した一番小さなオブジェクトを初期値としよう、という考え方です。

科学でいうこんな配列。これは物質の最小単位を表したものですよね。

これをUIデザインでも同じように分解していくとこんな表ができあがります。

この表がとてもわかりやすく、私たちデザイナーの考え方にとても役立つと思います。

02. Atomic Designの5段階設計

では、Atomic Designに落とし込んだ時にコンポーネントの最小単位や、分子レベルになったときなどはどのような形になるでしょう。

この記事によると、Atomic Designは5つの要素に分けることができます。

1. 原子
2. 分子
3. 生物
4. テンプレート
5. ページ

これだけだと、原子と分子になにを入れて良いか分からないと思うので紐解いていきます。

03. 5段階に分解する〜Lv.1 原子〜

Lv.1では基本的なHTML要素が入るので、例えば下記のようなものが該当します

Button(Default,Primary,Secondary,Radio,,,etc)
Title(h1,h2,h3,Label,,,etc)
text(Paragraph,Description,Alert,,,etc)
Form
Icon
Image

04. 5段階に分解する〜Lv.2 分子〜

Lv.2では、Lv.1の原子で作成したコンポーネントを合体させたもの、つまり分子レベルのものが該当します。

Button + Form + Label
Icon + Title
Image + Text

05. 5段階に分解する〜Lv.3 生物〜

Lv.3になると、科学で言うと生物レベル。UIデザインでいうと、一つの塊として使い回しのできるものが成形されます。

この辺りから、UXをしっかり意識して組んでいく必要があります。
もちろんLv.1段階からUXを考える必要はありますが、ここの並びや「何を」「どれだけ」「どう見せるか」など操作性も含めた設計が必要になります。

Header
Footer
Card
List
Menu

06. 5段階に分解する〜Lv.4 テンプレート〜

Lv.4までくると、科学の概念からははずれ、UIデザインの概念のみで成形されます。テンプレートという考え方でLv.2~3を組み合わせてよく使うパターンをコンポーネント化します。

主にページの骨格になる部分なので、ここでこの設計画面の目的を考える必要があるでしょう。

何をどこに配置するか
この画面で何があれば何が伝わるか
この画面で何があれば何ができるか
目的にあったレイアウトや配置になっているか
気持ちの良い見た目、操作性になっているか

07. 5段階に分解する〜Lv.5 ページ〜

最後のLv.5の要素はページです。

実際の画面イメージやビジュアルを成形する部分で、ユーザーに与えるデザインの表層なので、全体のバランスやユーザーに与える印象、操作性などが重要となります。

ページ自体をコンポーネント化するというのは実作業ではあまり多くないかもしれませんが、ここの目的としては、ページのレイアウトバリエーションを明確化し流用できるレイアウトは、Lv.5のページパターンを利用してページを構成することにあります。

TOP
コンテンツページ
問い合わせフォーム
FAQ
イメージビュー

08. 5段階に分解する〜まとめ〜

これまで、Atomic Designの話をテキストで説明してきましたが、イメージを見ていただければ一目瞭然で分割方法がわかると思います。

2021年現在のUIデザインをされている方は、この考え方は基本であるかもしれませんが、Atomic Designが普及し出したのは2013年ごろということです。この記事と本ができたのは2016年。

数年のうちに様々な設計概念が出てきては消えていく中で、さらに効率化された設計方法が出てくるかもしれませんが、このAtomic Designの考え方はとても画期的で革新的だったと思います。

Desigh Systemを調べている時に、良記事に出会ったので忘却メモとして紹介させていただきました。

また、この記事にはコーディングの考え方も載っているので気になる方はぜひこちらのサイトに訪れてみてください。

引用
Atomic Design by Brad Frost