Atomic Design【UI】
Atomic Designとは
要素を段階的に構造化し、その組み合わせによってWebページやインターフェースを構成する考え方。
We’re not designing pages, we’re designing systems of components.—Stephen Hay
コンポーネントが定義されて再利用性が高まるだけでなく、
エンジニアとデザイナー間のコミュニケーションが簡潔になる、
担当者が変わっても引き継ぎが楽になる、
機能追加の際の工数見積もりがより正確に早く出せるようになる
といったメリットが考えられます。
構成要素
5段階に分けられます。
Atoms（原子）
最小単位の要素です。
フォームを例にとると、inputやbuttonなどが該当します。 インターフェースだけに限らず、フォントやカラー、さらにはアニメーションも含まれます。Molecules（分子）
Atomsを組み合わせてできる、「1つのアクションが可能な塊」です。
フォームで言えば、input + buttonで入力が可能なパーツになります。Organisms（生物）
Moleculesを組み合わせてできる、 再利用性の高いコンポーネント要素。
ヘッダやリストなどが該当します。Templates
Organismsを組み合わせてできる、ページ全体の構造を指します。 あくまでワイヤーフレームであり、内容には焦点を当てません。Pages
Templatesにテキストや画像データが注入された、実際にユーザーが目にする構造です。 再利用性を意識して設計された構造が意図通りに動作するかどうかを入念にテストする必要があります。
メンバーの説得
AtomicDesignを導入するのはタフであるため、チーム、組織のメンバーを説得する必要があるかもしれません。
その際は次のように説明すると良いかもしれません。
・中長期的に考えれば、拡張やスリム化の際にかかる工数を抑える
・ユーザーに一貫したエクスペリエンスを提供でき、コンバージョン率が向上する
気をつけるべきこと
AtomicDesignはチーム内のコミュニケーションを簡潔にする意図があるように、
次の点には留意が必要です。
・チームや組織での作成、運用を念頭に置き、更新や所在などの情報を共有する
・誰が見てもわかるような構造定義をし、要素間の粒度を揃える
・運用の方法や作成意図が、人や時間に関係なく、明確に伝わる状態にする
