今流行のAtomic Dsignってなに?

2020/03/08

結論。パーツの最小単位からデザインしていくUIデザイン手法

Atomic Design(アトミックデザイン)は、原子(アトム)から始まる5段階に分類できます。
Lv1 原子
Lv2 分子
Lv3 生体
Lv4 テンプレート
Lv5 ページ
という内訳になってます。
詳しく観ていきましょう。

Atomic Designを詳しく見てみよう。

例えば、このページでいうとこういう内訳になります。

Lv1 原子

最小単位です。言い換えるとパーツ。

Lv2 分子

小さなひとかたまりの部品。言い換えるならコンテナのようなもの。

Lv3 生体

ヘッダーやフッター、記事一覧など、ある程度まとまったセクション単位。

Lv4 テンプレート

中身が入っていない状態のあらゆる集合体。ほぼページ。中身が入れば完成。

Lv5 ページ

ここが最終的な完成。
この記事を書いた人
ミワタ
UXデザイナー