Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
アトミックデザイン入門
Search
Shintaro Kanno
September 14, 2022
Design
0
290
アトミックデザイン入門
Shintaro Kanno
September 14, 2022
Tweet
Share
More Decks by Shintaro Kanno
See All by Shintaro Kanno
gRPCミドルウェアを作ってみよう
shintaro8
1
560
Goの並行処理に入門しよう
shintaro8
0
140
Azure Functionsを使ってSlackに通知をしてみよう
shintaro8
0
530
Other Decks in Design
See All in Design
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
170
portfolio.pdf
onof003
0
200
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
880
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
150
minpaku-community-scrum-patterns
norinity1103
1
470
Ana Cortes Visual Development Portfolio 2025
haruanleb
0
120
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
640
佐藤千晶|ポートフォリオ
chimi_chia
0
190
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
2.9k
「キャリア」のプロダクトをつくる私の「キャリア」への向き合い方 / JAM de NIGHT DESIGN SESSION Vol3
visional_engineering_and_design
1
730
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
130
Yumika Yamada Portfolio
yumii
0
1.9k
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
A Tale of Four Properties
chriscoyier
161
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Designing for Performance
lara
610
69k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Transcript
アトミックデザイン入門
都内のIT事業会社で勤務。 フロントエンド開発からバックエンド開発まで広く(浅く)担当 Name : 官野 慎太朗(かんの しんたろう) GitHub @shinshin8 Medium
@doctorkanno572
本日の内容 1. アトミックデザインとは 2. 実際に作ってみた 3. 終わりに
1. アトミックデザインとは?
アトミックデザインとは? • Webデザイナー・作家のBrad Frost氏によって提唱されたデザイン体系 • この世の物体は原子の組み合わせからできているという化学がヒント
• Atom ◦ デザインを構成する最小コンポーネント • Molecule ◦ 複数の原子を組み合わせたコンポーネント • Organism
◦ 複数の原子や分子が組み合わさったコンポーネント • Template ◦ 複数の生体を組み合わせたレイアウト • Page ◦ テンプレートに実際のコンテンツを埋め込んだもの アトミックデザインの構成要素
2. 実際に作ってみた
Nuxt.jsを使ったアプリ
Directory • src/componets配下に以下のコンポーネント ◦ atoms ◦ molecules ◦ organisms ◦
tempaltes • pagesはsrc配下に設置
Template
Organism
Molecules
Atoms
3. 終わりに
メリット 1. コンポーネントの再利用可能 2. 仕様の把握が比較的楽 デメリット 1. props&emitがややこしい 2. 設計が面倒
Thanks!! References - https://xd.adobe.com/ideas/process/ui-design/ato mic-design-principles-methodology-101/ - https://bradfrost.com/ - https://en.ryte.com/wiki/Atomic_Design