🤖

Atomicデザインとは

2022/04/16に公開

Atomicデザインについて勉強したのでその備忘とメモ
画像やファイルは参照先の記事からお借りしています

Overview

アトミックデザインとは自然界の原子にその名前を由来している通り、まず小さな単位（Atom）を大量に作りそれらを組み合わせてページを作っていくデザインの方法
コンポーネントを細かく区切り要素を作っていくので保全や変更のコストが小さくなるのが特徴

フォームラベル（文字列のラベル）、インプット（文字を入力する場所）ボタン、カラーパレット、フォント、アニメーション等
ページを構成する最小単位である。

Atomを組み合わせて作る部品のこと。
例えばフォームラベルとインプット、ボタンを組み合わせることで分子単位である、入力ボタンとして機能する様になる。
分子自体は原子の単純な組み合わせで作れる。また一度作ってしまうと何度も再利用が可能。

自然界では、炭素、水素、酸素からなる分子のことである。
Organismsは原子や分子から作られる。今まで作成してきた、分子や原子から以下の様なコンテンツヘッダーを有機物として作成する。
例えばコンテンツヘッダーの様なもののイメージである。

テンプレートは有機物の集合体で作成される。

テンプレートに各種の要素を追加したものが完成形となるページとなります。
以下の様にテンプレートに写真や文字などを入力しています

デザイン変更を行う際には対処となるAtom,Molecules,Organisms等のどれかのコンポーネントのみ修正すれば良い為、デザイン変更の際にコードの修正が容易になる

作成した原子、分子、有機物を保存しておけばいつでもそれらを使い回すことができ、組み合わせることで新しいテンプレート、ページを作ることができます。

作ったテンプレートを保存しておくことで、似た様なコンテンツを表示するページを簡単に作ることができる様になります。