🏋️♀️
[デザイン] 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 の概念に触れてしっかり使いこなせたら便利だなと思いました。
チーム全体で使うには、チーム力がそこそこいるなと感じました。
Discussion