Atomic Design について調べて見た

調べてみた経緯

Reactを勉強して３ヶ月くらい経つが本を読んで 「Atomic Design」というデザインシステムという概念が出てきて「なんじゃこれ！？」って思い調べてみました。

ReactとAtomic Designの相性がかなり良いらしいす。

Atomic Designとは

Atomic Desginとは、以下の5つの構造にページを分け、それぞれの役割を明確にし再利用可能なコンポーネントを作って行くことです。

• Atoms(原子)
• Molecules(分子)
• Organisms(有機体)
• Templates(テンプレート)
• Pages(ページ)

Atoms(原子)

Atoms(原子)とは、UIを構築する最小単位です。なのでそれ以上に細かく分割することはできません。

ToDoListのモックで例をあげると

このような構成のページをAtomに分けると以下のようになります。

• テキストフォーム
• 追加ボタン
• チェックボックス
• テキスト
• チェックボックス
• テキスト

のように分けることができます。

Atomsは、Atomic DesignかつWebサイトを構築する上で基本的なものであり重要な要素です。

Molecules(分子)

Molecules(分子)になると,UIがどんな意味を持ちどのように使われるかが具体性が出てきます。

先ほどのAtoms単体だけを見ると、何をしたらいいかがわかりませんよね？しかしMoleculesになると入力フォームがありボタンがあるので、「何か入力して送信するんだなー」とより具体的なインターフェイスになることがわかります。

Atomsを組み合わせて複雑なMoleculesになってしまうと、他の箇所で注意が必要。

Organisms(有機体)

Organisms(有機体)はAtomsやMoleculesが組み合わされて利用されます。AtomsやMoleculesとの大きな違いは再利用性があまり求められてないと言う点です。

Organismsの代表として ヘッダーが挙げられます。

Templates(テンプレート)

Templates(テンプレート)はワイヤフレームと同じで、ページに画像や実際のデータが反映される前の状態です。

Pages(ページ)

Pages(ページ)は、Templatesに対してページに画像や実際のデータを反映させたものです。

Atomic Designを使うメリット

• チームとしての共通概念が生まれる
• 構造的な考えが生まれる
• 開発スピードが早くなる
• トーン&マナーが生まれる

トーン&マナーはデザイン用語だそうです。こちらのサイトが詳しく載ってました

と言うメリットがあるそうです。デメリットとしては、ファイル量が多くなるそうです。

Reactのファイル構成

├── public // コンパイル済み各公開ファイル
│   └── assets
│   └── index.html
└── src
    ├── components // Reduxに依存しないReactのコンポーネントディレクトリ
    │   ├── atoms
    │   └── molecules
    ├── containers // Reduxとコネクトするコンポーネント
    │   ├── organisms
    │   └── pages
    ├── redux // ReduxのAction,Reducer,Storeを扱うディレクトリ
    │   ├── middlewares // 主にAPI処理をまとめたディレクトリ（ReduxでいうとAction発行時にReducerの前でインターセプトする処理）
    │   ├── modules
    │   └── records
    ├── styles // 基本的なスタイルを定義する
    │   ├── core
    │   ├── foundation
    │   └── utility
    └── utils // 汎用的な処理をするUtil用ディレクトリ

ichimaruni-design.com

調べてるとこんな感じに作っている方がいらっしゃいました。

気が向いたらAtomic Design+Redux+ReactでTodoListを作ってみようと思います。