はじめに
- 所属しているプロジェクトにて、AtomicDesignを使うということで色々調べたりした内容のメモです。
Atomic Designとは
- Atoms（原子）、Molecules（分子）、Organisms（有機体）、Templates（テンプレート）、Pages（ページ）の各コンポーネント同士を組み合わせて作成するデザイン手法
- それぞれのコンポーネント詳細は下記
| コンポーネント | 詳細 |
|---|---|
| Atoms(原子) | 画面を構成する要素の最少単位 ラベルやインプット項目など |
| Molecules(分子) | Atomsを組み合わせて作成された要素 検索フォームなど |
| Organisms（有機体） | 複数のMoleculesやAtomsを組み合わせたもの、ヘッダーやフッターなど |
| Templates（テンプレート） | 複数のOrganisms等を組み合わせたデータの入っていない画面 ワイヤーフレームとなるもの |
| Pages(ページ) | 実際の文言や画像などが入ったもの、ほとんど最終的な画面と同じ |
- 実際にどんな感じにそれぞれを定義するかは参考にしたサイトを見ていただくと良いと思います。
参考にしたサイト
Atomic Design | Brad Frost
Atomic Designの考え方と利点・欠点 - I'm kubosho_
珍しいワークフロー：Atomic Designの原則とSketchでデザインからプログラミングまで | デザイン | POSTD