Blueberry
TOKYO, JAPAN Contact
← All termsGLOSSARY / Design

Atomic Design.

アトミックデザイン

UIを再利用可能な要素の階層として捉え、全体と部分を往復して設計する方法論。

Brad Frostが提唱したアトミックデザインは、UIをAtoms、Molecules、Organisms、Templates、Pagesという五つの階層で考える方法論。ボタンや入力欄などの基本要素から、検索フォームのような組み合わせ、画面全体へと視点を移しながら、一貫性と再利用性を確保する。五段階を順番に制作する工程表ではなく、構成要素と完成画面を行き来するための思考モデルである。
大規模なサービスでは、画面単位で似たUIを作り続けると保守が難しくなる。一方、部品の共通化だけを優先すると、固有の文脈やコンテンツを扱いきれない。アトミックデザインが有効なのは、どの粒度を共通にし、どこに例外を認めるかを議論できる点にある。デザインシステムを作る際も、実際のページに載る文章やデータの変化を見ずに部品だけを完成させないことが大切だ。