Atomic Designについて勉強してみた③ (Molecules)

今回はAtomic Designの要素の一つであるMoleculesについて学んだことを書いていきたいと思います。

概要

Moleculesは、Atomic Designの5つの粒度において２番目に小さなコンポーネントで、
Atomsを、ユーザーの動機に答える機能の単位で組み合わせたものです。

出典元：https://atomicdesign.bradfrost.com/chapter-2/　

例を挙げてみます。
・テキストボックス
・ボタン
・テキスト
上記三つのAtomsがあったとします。
これらは単体では、具体的にどのような目的で使用するのか示されていません。
しかし、Moleculesとして組み合わせることにより、「検索フォーム」であることがわかり、言い換えると検索がしたいというユーザーの動機に答えたUIということになります。

注意点

Moleculesの作成の際には、以下のことに注意が必要です。
・ユーザーの動機に応えるものではあるが、ページ依存の機能は持たない汎用的なものとする。(ビジネスロジック的なものも記述しないほうが良いかと思います。)
・1つmoleculesに複数の機能を持たせない。コンポーネントの入れ替えや削除等がやりづらくなる。
私たちのチームでも、以上の基準で開発を行っていました。

参考文献

• 五藤佑典, 「Atomic Design ～堅牢で使いやすいUIを効率良く設計する」, 技術評論社, 2018

• Atomic Design by Brad Frost https://atomicdesign.bradfrost.com/