---
title: アトミックデザインの使い辛さを改善する
tags:  #アトミックデザイン #デザイン #atomicdesign #フロントエンド  
author: [ampersand](https://convert.docswell.com/user/5923158024)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/G755X9RD74.jpg?width=480
description: アトミックデザインの使い辛さを改善する
published: March 13, 23
canonical: https://convert.docswell.com/s/5923158024/57VY72-2023-03-13-173955
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/G755X9RD74.jpg)

アトミックデザインの使い
辛さを改善する
ampersand
2023.03.14


# Page. 2

![Page Image](https://bcdn.docswell.com/page/9J2NX24MER.jpg)

自己紹介
はじめまして、新規事業に特化してエンジニアをしています
ampersandと申します。
よろしくお願いします。
twitter：https://twitter.com/ampersand000/
ブログ：https://blog.ampersand.today/


# Page. 3

![Page Image](https://bcdn.docswell.com/page/DEYP8YMPEM.jpg)

アトミックデザインって使い辛い・・・
・AtomsとMoleculesの違いが分かりづらい
・Templatesってどう使ったらいい？
・OrganismsとTemplatesってどう違うの？
・props drillingが大変


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VJN5QPWM78.jpg)

アトミックデザインを改造して運用を楽
にしたい！


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YE9YD3XWJ3.jpg)

アトミックデザインの復習(1)
AtomicDesignは小さいUIコンポーネントを組み合わせて大きなコンポーネントを作るためのデザイ
ンフレームワークです。


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GE863M2R7D.jpg)

アトミックデザインの復習(2)
AtomicDesignには以下の5つの粒度が存在します。
出典：https://bradfrost.com/blog/post/atomic-web-design/


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LEL9V322JR.jpg)

アトミックデザインの復習(3)
AtomicDesignは小さいコンポーネントを組み合わせて大きいコンポーネントを作ります。
よって依存の方向性が存在します。


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JMZGD89EW.jpg)

アトミックデザインの復習(4)
それぞれの層には関心ごとがあります。
層名
関心ごと
特徴
Pages
プロダクトそのもの
Templates
画面全体のレイアウト
Organisms
ユーザーの行動を促すコンテンツ
templatesを介してコンテンツやルーティング
をコンポーネントに接続する
ページの雛形、具体的なコンポーネントを持
たない
独立して存在できるスタンドアローンなコンテ
ンツを提供
Molecules
行動を阻害しない操作性
ユーザーの関心事を提供
Atoms
デザインの統一性
コンポーネントの最小単位


# Page. 9

![Page Image](https://bcdn.docswell.com/page/PJR6Z45979.jpg)

層が多い！分かりづらい！


# Page. 10

![Page Image](https://bcdn.docswell.com/page/PEXM92K37X.jpg)

観点を変えてみる
観点を変えてコンテナ/プレゼンテーションパターンからアプロー
チしてみます。


# Page. 11

![Page Image](https://bcdn.docswell.com/page/3EKGPM5NJD.jpg)

コンテナ/プレゼンテーションパターンとは
見た目(プレゼンテーション )とロジック(コンテナ)を分離することで、関心ごとの分離を強制するパターン
のこと
コンテナ
何のデータがユーザーに表示されるかを管理するコンポーネント
UIのロジックを担当する。
プレゼンテーション
データがユーザーにどのように表示されるかを管理するコンポーネントのこと
UIの表示を担当する
参考：https://www.patterns.dev/posts/presentational-container-pattern


# Page. 12

![Page Image](https://bcdn.docswell.com/page/L73NXYKZ75.jpg)

コンテナ/プレゼンテーションパターンとアト
ミックデザインを対応させる
層名
関心ごと
パターン
Pages
プロダクトそのもの
コンテナ
Templates
画面全体のレイアウト
プレゼンテーション
Organisms
ユーザーの行動を促すコンテンツ
プレゼンテーション
Molecules
行動を阻害しない操作性
プレゼンテーション
Atoms
デザインの統一性
プレゼンテーション


# Page. 13

![Page Image](https://bcdn.docswell.com/page/87DW2534JG.jpg)

あれ、2層で良くない???


# Page. 14

![Page Image](https://bcdn.docswell.com/page/VJP91G4VE8.jpg)

適切な層数を考える
アトミックデザインだと5層
コンテナ/プレゼンテーションパターンだと2層
2~5層の中で適正な層数を探っていきます


# Page. 15

![Page Image](https://bcdn.docswell.com/page/2EVMY6XREQ.jpg)

層数の私感
5層：多い
5層
4層
3層
2層
4層：良い
Pages
Pages
Pages
Pages
3層：良い
Templates
Templates
Templates
2層：少ない
Organisms
Organisms
Molecules
結論：4or3層が良い
Atoms
elements
elements
Presentation


# Page. 16

![Page Image](https://bcdn.docswell.com/page/57GG9NV67L.jpg)

結論
アトミックデザインの辛さはプレゼンテーション層をまとめることで解決できる
Organisms層を含むなら4層、含まないなら3層
Organisms層をどう捉えるのか？で違う
個人的にはOrganisms層はあったほうがいいので4層が好み


# Page. 17

![Page Image](https://bcdn.docswell.com/page/4EQXWQ627P.jpg)

参考
出典：
アトミックデザイン
https://bradfrost.com/blog/post/atomic-web-design/
コンテナ/プレゼンテーショナルパターン
https://www.patterns.dev/posts/presentational-container-pattern/
過去記事
https://zenn.dev/ampersand/articles/5cce75cfb1fdda/


