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
mento Design Team Portfolio
mento0fficial
1
950
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
240
「UXとUIの違い」v2
shirasu3
0
260
数理的アプローチで挑むスマホUIのデザイン改善:タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
lycorptech_jp
PRO
1
880
kintone Style Book
kintone
4
4k
【最新】マズロー安達の弟子実績(1期-6期の37人分)
maslow_akkun
0
3.1k
Yumika Yamada Portfolio
yumii
0
2.1k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
350
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
570
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
culumu
1
440
Goodpatch Tour💙 / We are hiring!
goodpatch
31
900k
一次体験を起点にしたUX改善の取り組み / Direct Experience Driven UX Improvements
bitkey
PRO
0
260
Featured
See All Featured
Designing for Performance
lara
610
69k
Site-Speed That Sticks
csswizardry
13
930
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Bash Introduction
62gerente
615
210k
The Cult of Friendly URLs
andyhume
79
6.6k
Side Projects
sachag
455
43k
Optimizing for Happiness
mojombo
379
70k
BBQ
matthewcrist
89
9.9k
Unsuck your backbone
ammeep
671
58k
Why Our Code Smells
bkeepers
PRO
340
57k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
620
Building a Scalable Design System with Sketch
lauravandoore
463
33k
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