アトミックデザインについて①

はじめに

私のプロジェクトでは、Next.js を使ってアトミックデザインを活用した手法を採用しています。
解説や、メリットデメリットを複数回分けて、アウトプットしてゆきます。

今回の記事では、アトミックデザインとはから、
3つのレベルに限定した記事になります。

紹介するレベルのデザインは以下

1. Atoms 原子
2. Molecules 分子
3. Organisms 生体

アトミックデザインとは

パーツ単位または、コンポーネント単位でUIデザインを設計する手法のこと。
5つの構成から成り立っていて、以下のように5段階にわけられる。
アメリカのWebデザイナーのBrad Frost氏によって考案・提唱された。らしい

引用：https://spice-factory.co.jp/web/about-atmicdesign/

1. Atoms 原子
2. Molecules 分子
3. Organisms 生体
4. Templates　テンプレート
5. Pages ページ

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

Atoms 原子

一番小さなコンポーネントといえます。

1つのパーツのみで完結するような、Input や button などがその代表例と言えそうです。
私の携わっているプロジェクトでも、汎用的にかつ小さなコンポーネントは atom レベルのコンポーネントとして共通認識を持っています。

Molecules 分子

2番目に小さなコンポーネント。
公式のドキュメントからの引用で、以下のように記載がありました。

化学において、分子とは、異なる新しい特性を持つ原子のグループが結合したもので

引用：ドキュメント

このように、最初に説明した異なる性質を持つ原子と原子が結合したものが分子という位置づけになりそうです。

こんな感じで、さきほどの Input や button はかなり抽象的なコンポーネントでしたが、
分子になると、意味を持つコンポーネントになります。
この例でいうと、「Input に名前が入力されて、右のボタンが押される」と想像ができるようになります。

Organisms 生体

ここからやや話が複雑になってきますが、頑張っていきます。
生体とは、ですがドキュメントには以下のように記載がありました。

生物は、分子および/または原子および/または他の生物のグループで構成される比較的複雑な UI コンポーネントです。

引用：ドキュメント

先ほどまでに紹介した、分子や原子などあらゆるコンポーネントを組み合わせて作成されたものが、
「生体」と言えそうです。

以下は Mantine から引っ張り出してきたものになりますが、イメージとしてはこんな感じです。

各原子レベルのコンポーネントや、分子レベルのコンポーネントが集約されているものが生体として定義されます。
分子と、生体レベルのコンポーネント、そして次回以降紹介する、テンプレートレベルのコンポーネント。この3つが個人的にややこしいと感じます。

おわりに

次回以降は、Templates　テンプレート、Pages ページについてのお話と、
実際に使ってみたメリット、デメリット等合わせてお話しできればと思います！

ではでは、次回また！