[デザイン] Atomic Designをデジタル庁のサイトで理解する

はじめに

Atomic Design について下記の書籍から学びました。
開発メンバーに共有するために執筆します。

言葉だけでは、理解が難しいと感じましたので、
デジタル庁のサイトのフッターをサンプルとしてお借りしております。

本記事で使用しているイラストはデジタル庁から提供されている画像ではありません。
個人でサイトを画像として保存しイラストを追加した自作画像となります。

Atomic Design とは

デザインシステムを構築するための方法論です。

【メリット】デザインを階層的に定義することで一貫性を保ち管理しやすい

5 つの階層で構成される(最小順)

階層名	説明	例
Atoms	最小の要素 これ以上分割できない	ボタン、アイコン、テキスト
Molecules	複数の Atomsを組み合わせた要素	テキストとアイコンを組み合わせたボタン
Organisms	Molecules よりもより具体的な要素	ヘッダー、フッター、検索フォーム、カード
Templates	ページ全体のレイアウト	ワイヤーフレーム
Pages	ページそのもの	ユーザーが見るページ

それぞれの役割について

1. Atoms

• 基本的に状態や振る舞いを持たない
• 文章、色、大きさなどの描画に必要なパラメータはpropsから受け取る
• CSS で親要素の大きさに依存させない
• 画像の Atoms ならURL のみを渡して表示する

下記は、デジタル庁サイトのフッターの Atoms 要素になります

デジタル庁サイトのフッターの Atoms

2. Molecules

• 基本的に状態や振る舞いを持たない
• 汎用的に使うため必要なデータは親から受け取る
• 1 つの役割を持った UI にする
• 複数の Atoms を配置し、必要なデータを子コンポーネントに渡す
• それぞれの位置関係を CSS で指定する

下記は、デジタル庁サイトのフッターの Molecules 要素になります

デジタル庁サイトのフッターの Molecules

3. Organisms

• サインフォームなどのUI コンポーネント
• ドメイン知識に依存したデータを受け取る
• Context の参照
• 見た目：Presentatational Component で実装
• ロジック：Container Component で実装
  
  デジタル庁サイトのフッターの Organisms

4. Templates

• 複数の Organisms 以下のコンポーネントを配置する
• コンポーネントを CSS でレイアウトする

5. Pages

• Templates に状態管理、router 関係の処理、API コールなどの副作用の実行
• Context に値を渡す

デジタル庁のサイトの Atomic Design はどうなっているか

加工前：デジタル庁のフッター

加工後：デジタル庁のフッター

おわりに

Atomic-Design の概念に触れてしっかり使いこなせたら便利だなと思いました。
チーム全体で使うには、チーム力がそこそこいるなと感じました。