🏋️‍♀️

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

2023/08/24に公開

はじめに

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

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

Atomic Design とは

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

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

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

それぞれの役割について

1. Atoms

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

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

2. Molecules

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

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

3. Organisms

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

4. Templates

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

5. Pages

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

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

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

Atomic-Design-step00

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

Atomic-Design-step01

おわりに

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

GitHubで編集を提案

Discussion