【あとみっくでざいん】
アトミックデザイン とは？
最終更新:
💡 UIの部品と画面全体を、5つの視点で行き来する
UIをAtoms（原子）・Molecules（分子）・Organisms（有機体）・Templates・Pagesの5つの視点で捉え、部品と画面全体を行き来して設計する方法論。
📌 このページのポイント
- Brad Frostが提唱したUI設計の方法論
- Atoms・Molecules・Organisms・Templates・Pagesの5つの視点
- 小さな部品の組み合わせと、画面全体での働きを合わせて考える
- 5段階を順番に終える工程ではなく、各視点を行き来して設計・確認する
ひよこ 最初の3つを具体的に教えて？
ペンギン先生 Atomsはボタンや入力欄などの基本要素。Moleculesは入力欄とボタンを組み合わせた検索フォームのような部品。Organismsはロゴや検索フォームなどを組み合わせたヘッダーのような、画面のまとまった部分だよ
ひよこ TemplatesとPagesは何が違うの？
ペンギン先生 Templatesは部品を配置して、画面の構造を示すもの。Pagesはそこに実際の内容を入れた画面だよ。長い見出しやデータが少ない場合なども試して、部品やレイアウトがうまく働くか確かめるんだ
ひよこ Atomsから順番に作ればいい？
ペンギン先生 順番が決まった手順ではないよ。ページ全体を見てボタンの形を直すなど、部品と全体を行き来する考え方なんだ。提唱者も、5段階を直線的な工程として扱わないよう説明しているよ
まとめ：ざっくりこれだけ覚えればOK！
「アトミックデザイン」って出てきたら「UIの部品と画面全体を5つの視点で考える方法」と思えばだいたいOK！
📖 おまけ：英語の意味
「Atomic Design」 ＝ 原子的デザイン
💬 原子・分子・有機体という名前で、基本要素からまとまったUIへの組み合わせをたとえているよ