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
210
アトミックデザイン入門
Shintaro Kanno
September 14, 2022
Tweet
Share
More Decks by Shintaro Kanno
See All by Shintaro Kanno
gRPCミドルウェアを作ってみよう
shintaro8
1
320
Goの並行処理に入門しよう
shintaro8
0
110
Azure Functionsを使ってSlackに通知をしてみよう
shintaro8
0
390
Other Decks in Design
See All in Design
Sociotechnical design for software and human systems
xinyao
2
490
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
280
Portfolio 2023.07.28
helemarudesu
0
580
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
360
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
データ活用に強い、伴走型デザインパートナー「DeC」紹介資料
hopin
0
190
良いアプリケーションをデザインするための感覚の持ち方 / Cultivating a Sense for Designing Great Applications
usagimaru
23
7.8k
間違った「問い」を乗り越え ノベルティをプチバズりさせた話
takaikanako
0
1.2k
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
180
UX/UI改善に貢献するユーザーテストとは? 基礎知識から実施のプロセスまで解説
ncdc
0
320
JBUG東京#22登壇資料_日頃クライアントワークを行っているディレクターが自社コーポレートサイトリニューアルを担当して学んだこと
webnaut
0
190
デザイナーの帽子をかぶったわたしが、プロダクト開発するうえでスクラムチームに提供したいこと / what I want to provide to Scrum teams when developing products
hiromitsuuuuu
14
4.8k
Featured
See All Featured
How GitHub (no longer) Works
holman
304
140k
Building Applications with DynamoDB
mza
88
5.6k
Scaling GitHub
holman
457
140k
BBQ
matthewcrist
80
8.8k
Code Review Best Practice
trishagee
54
15k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
Typedesign – Prime Four
hannesfritz
36
2.1k
StorybookのUI Testing Handbookを読んだ
zakiyama
12
4.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
36
2.5k
Designing Experiences People Love
moore
136
23k
Six Lessons from altMBA
skipperchong
20
3k
A Tale of Four Properties
chriscoyier
150
22k
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