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
Liquid Iron
mcduckyart
1
110
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
430
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
290
私とデザインの10年
iflection
0
150
Haley's adventure chase
ivettetwin
0
230
freee + Product Design FY25Q4
freee
4
14k
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
750
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
Storyboard Honey
rocioparronrubio
0
280
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Typedesign – Prime Four
hannesfritz
42
2.7k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
A Tale of Four Properties
chriscoyier
160
23k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
The Invisible Side of Design
smashingmag
301
51k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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