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
280
アトミックデザイン入門
Shintaro Kanno
September 14, 2022
Tweet
Share
More Decks by Shintaro Kanno
See All by Shintaro Kanno
gRPCミドルウェアを作ってみよう
shintaro8
1
540
Goの並行処理に入門しよう
shintaro8
0
140
Azure Functionsを使ってSlackに通知をしてみよう
shintaro8
0
500
Other Decks in Design
See All in Design
私とデザインの10年
iflection
0
160
PF_濵村ひろみ_202503
maru_design78
0
180
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
680
The Spectacular Lies of Maps
axbom
PRO
0
110
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
300
オープンデータを利用して色々なものを作った話
hjmkth
1
120
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
札幌の雪を観光資源に変える:デザインプログラムSESSAの挑戦
ittyann
0
260
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
Haley's adventure chase
ivettetwin
0
240
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
990
AI動画生成ガチャ紹介
piyo7
1
130
Featured
See All Featured
Agile that works and the tools we love
rasmusluckow
329
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
How STYLIGHT went responsive
nonsquared
100
5.6k
Producing Creativity
orderedlist
PRO
346
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
A better future with KSS
kneath
238
17k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Rails Girls Zürich Keynote
gr2m
95
14k
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