今回はAtomic Designの要素の一つであるOrganismsについて学んだことを書いていきたいと思います。
概要
Organismsとは、Atomic Designの中で3番目に小さいコンポーネントです。
Molecules, Atomsを組み合わせ、独立して存在できるコンポーネントとして定義します。
出典元：https://atomicdesign.bradfrost.com/chapter-2/
例を挙げてみます。
・ユーザー情報(名前・アイコン)
・本文
・いいね・リツイートボタン
・入力ボックス&送信ボタン
これらが集まると、「SNSの呟き表示」の機能を単体で提供するコンポーネントとなります。
このコンポーネントはどこにあろうと「SNSの呟き表示」の機能を失いません。つまり、独立して意味を持って存在できるコンポーネント(Organisms)になっているということです。
Moleculesとの違いは?
独立して存在しうるか、そうではないかと言う部分だと思っています。
自分が参考にした書籍にも
Molecules: 独立して存在できるコンポーネントではなく、他のコンポーネントのヘルパーとしての存在意義が強いコンポーネント
Organisims: 独立して存在できるスタンドアローンなコンポーネント
出典元: 「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」
とあります。多くの場合は、こちらを基準にすれば分類は可能かと思います。
しかし、実際に開発をしているとどちらに分類するか迷うタイミングが多くあるかので、MoleculesとOrganisimsについては、開発時の基準作りを特に綿密に行う必要があります。
参考までに、私が担当しているプロダクトでは、
・ビジネス的な意味合いを持つコンポーネントかどうか
・ページ依存であるかそうではないか
の基準で分類していました。
参考文献
-
五藤佑典, 「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」, 技術評論社, 2018
-
Atomic Design by Brad Frost https://atomicdesign.bradfrost.com/