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
220
アトミックデザイン入門
Shintaro Kanno
September 14, 2022
Tweet
Share
More Decks by Shintaro Kanno
See All by Shintaro Kanno
gRPCミドルウェアを作ってみよう
shintaro8
1
400
Goの並行処理に入門しよう
shintaro8
0
110
Azure Functionsを使ってSlackに通知をしてみよう
shintaro8
0
430
Other Decks in Design
See All in Design
MiKS inc. Company PR en_202404
zakkerooni
1
770
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
800
Sensitive Texter Storyboard
ctagulao98
0
160
興味関心と組織とリサーチ #ResearchConf / 20240419
minamitary
1
130
Designing and Automating Component Specifications
nathanacurtis
3
310
デザインプリンシプルのつくりかた(freee技術の日)
magi1125
3
2.7k
プロジェクトを成功に導く、デザイナーの仕事
akaneyoshikawa
1
290
デザインレビューをできていなかったコムデチームが、 自分たちが続けられるレビューの仕組みをつくった話
tanasho
0
190
Webアプリケーションアクセシビリティ解説ウェビナー「8章 アクセシブルなUI設計の原理を導く」
magi1125
1
220
Fooocus(Stable DiffusionXL)で アニメ画像生成の仕方
otanet
0
1.4k
ウェブディレクターを救うBacklog
wattlaa
0
400
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
330
Featured
See All Featured
Six Lessons from altMBA
skipperchong
24
3.2k
A Tale of Four Properties
chriscoyier
155
22k
What's in a price? How to price your products and services
michaelherold
239
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
12
3.8k
Designing for Performance
lara
604
67k
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Rebuilding a faster, lazier Slack
samanthasiow
78
8.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
129
32k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
24
1.8k
Code Reviewing Like a Champion
maltzj
517
39k
Visualization
eitanlees
139
14k
Automating Front-end Workflow
addyosmani
1362
200k
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