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
520
Other Decks in Design
See All in Design
#Dubois Challenge 2025: Economics
ajstarks
1
170
7 Core Values of Round-L
wired888
0
1.6k
アクセシビリティに取り組むメリット
magi1125
2
240
株式会社Muture_ソーシャル推進事業
muture
PRO
0
140
freee + Product Design FY25Q4
freee
4
16k
What makes a great Director?
_limex_
0
210
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
720
「批評」を習慣にするための仕組みと場のデザイン/uxdesign202507
nikkei_engineer_recruiting
6
800
mento Design Team Portfolio
mento0fficial
1
630
AIで加速するアクセシビリティのこれから
magi1125
3
670
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
800
Featured
See All Featured
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
GitHub's CSS Performance
jonrohan
1032
460k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Pragmatic Product Professional
lauravandoore
36
6.9k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Site-Speed That Sticks
csswizardry
10
810
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
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