INDEX
はじめに
Atomic Designについて書籍から学びました。
開発メンバーに共有するために執筆します。
言葉だけでは、理解が難しいと感じましたので、
デジタル庁のサイトのフッターをサンプルとしてお借りしております。
本記事で使用しているイラストはデジタル庁から提供されている画像ではありません。 個人でサイトを画像として保存しイラストを追加した自作画像となります。
Atomic Designとは
デザインシステムを構築するための方法論です。
【メリット】デザインを階層的に定義することで一貫性を保ち管理しやすい
| 階層名 | 説明 | 例 |
|---|---|---|
| Atoms | 最小の要素 これ以上分割できない | ボタン、アイコン、テキスト |
| Molecules | 複数のAtomsを組み合わせた要素 | テキストとアイコンを組み合わせたボタン |
| Organisms | Moleculesよりもより具体的な要素 | ヘッダー、フッター、検索フォーム、カード |
| Templates | ページ全体のレイアウト | ワイヤーフレーム |
| Pages | ページそのもの | ユーザーが見るページ |
それぞれの役割について
1. Atoms
- 基本的に状態や振る舞いを持たない
- 文章、色、大きさなどの描画に必要なパラメータは
propsから受け取る - CSSで親要素の大きさに依存させない
- 画像のAtomsならURLのみを渡して表示する
下記は、デジタル庁サイトのフッターのAtoms要素になります
2. Molecules
- 基本的に状態や振る舞いを持たない
- 汎用的に使うため必要なデータは親から受け取る
- 1つの役割を持ったUIにする
- 複数のAtomsを配置し、必要なデータを子コンポーネントに渡す
- それぞれの位置関係をCSSで指定する
下記は、デジタル庁サイトのフッターのMolecules要素になります
3. Organisms
- サインフォームなどのUIコンポーネント
- ドメイン知識に依存したデータを受け取る
- Contextの参照
- 見た目：Presentatational Componentで実装
- ロジック：Container Componentで実装
4. Templates
- 複数のOrganisms以下のコンポーネントを配置する
- コンポーネントをCSSでレイアウトする
5. Pages
- Templatesに状態管理、router関係の処理、APIコールなどの副作用の実行
- ontextに値を渡す
デジタル庁のサイトのAtomic Designはどうなっているか
加工前：デジタル庁のフッター
加工後：デジタル庁のフッター
