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
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
510
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
6
2.4k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
1.8k
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
170
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
transit_kix
1
1.1k
第4回関東Kaggler会LT HCD-Net人間中心設計スペシャリストが語るNotebookメダルの取り方
utm529f
0
1k
「UXとUIの違い」v2
shirasu3
0
230
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
450
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
130
Building Experiences: Design Systems, User Experience, and Full Site Editing
marktimemedia
0
250
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
Featured
See All Featured
Bash Introduction
62gerente
615
210k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Being A Developer After 40
akosma
90
590k
4 Signs Your Business is Dying
shpigford
184
22k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.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