⚛️

アトミックデザイン（Atomic Design）のメリットとデメリット

2024/01/08に公開

アトミックデザインとは

パーツ単位または、コンポーネント単位でUIデザインを設計する手法のこと。
5つの構成から成り立っていて、以下のように5段階にわけられる。

1から順番に、5が一番大きなパーツ、コンポーネントとなる。

※それぞれの違いをしっかりと理解するのは難しいので、5段階に分けられているんだくらいの解釈で最初はいいと思います。

小さな部品ごとに修正や更新ができるため、変更が容易。

部品の使い回しができる。
ゼロからUIを開発し直す必要が無く、作業工数を減らることにもつながります。

前の工程で作成した部品をページ内で再利用するため、デザインに統一感が生まれる。

propsでのバケツリレーは必然的に起きてしまいますが、流れは読みやすいと思います。

データの流れは、下記のように親から子に向かっての一方向性になります。
pages → template → organism → Molecules → Atoms

チームで認識を統一していないと分割粒度がバラバラになる。
分子、原子、有機体、テンプレート、ページの5段階を明確に正しく分けるのが難しい。

アトミックデザインではUIを細かな要素ごとに分けて制作するため、ファイル数が増えやすい傾向。
どのパーツをどのフォルダに保存するかなど、ファイルの管理方法に注意が必要。
そうでないとどんどん複雑化していく。