SlideShare a Scribd company logo
1 of 229
Download to read offline


Atomic Design
2018.6.6 IT STAFFING
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_
















Plan
Do
Check
Action
Plan
Check
Action Do
Plan
Check
Action Do
Do
Do
Do
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels




Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms




Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms




Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms




Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms




Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms




Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms


Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels


Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels






http://bradfrost.com/blog/post/atomic-web-design/
We’re not designing pages, we’re designing systems of
components.—Stephen Hay






?








































https://www.dropbox.com/branding/
http://ux.mailchimp.com/patterns
http://ui-patterns.com/


1
2
3
4






Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/




Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels
Pages
Templates
Organisms
Molecules
Atoms
Photo by Dhyamis Kleber from Pexels














A Project Suitable for Agile Development
The Dependency Inversion Principle
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/


Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
http://bradfrost.com/blog/post/atomic-web-design/
Templates
Organisms
Organisms
Elements Inside
Atoms
Molecules
Atoms Inside the Molecule
Atoms: Balloon
Atoms: Balloon
Atoms: Balloon




Atoms: Balloon
Atoms: Balloon




Atoms: Balloon
Atoms: TrashCanIcon
Atoms: TrashCanIcon
Atoms: TrashCanIcon






















Atoms: TrashCanIcon
Molecules: DeleteButton
Molecules: DeleteButton




















Atoms: TrashCanIcon
Organisms: Notification
Organisms: Notification








Organisms: Notification
















Organisms: NotificationList
Organisms: NotificationList














Templates: NotificationListTemplate
Templates: NotificationListTemplate




























Flux
Templates
Flux
Pages
😁
https://storybook.js.org/




https://blog.nagisa-inc.jp/archives/3459








Interface Inventory
https://www.wantedly.com/companies/abema/post_articles/53312


























😁








Atomic Design





https://www.amazon.co.jp/dp/477419705X
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_

More Related Content

What's hot

What's hot (20)

ドメイン駆動で開発する ラフスケッチから実装まで
ドメイン駆動で開発する ラフスケッチから実装までドメイン駆動で開発する ラフスケッチから実装まで
ドメイン駆動で開発する ラフスケッチから実装まで
 
ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方ドメイン駆動設計のための Spring の上手な使い方
ドメイン駆動設計のための Spring の上手な使い方
 
実践的な設計って、なんだろう?
実践的な設計って、なんだろう?実践的な設計って、なんだろう?
実践的な設計って、なんだろう?
 
世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計世界でいちばんわかりやすいドメイン駆動設計
世界でいちばんわかりやすいドメイン駆動設計
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
 
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったことドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
 
「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」「GebとSpockではじめるシステムテスト自動化」
「GebとSpockではじめるシステムテスト自動化」
 
ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善ソフトウェア開発のやり方の改善
ソフトウェア開発のやり方の改善
 
ドメインオブジェクトの設計ガイドライン
ドメインオブジェクトの設計ガイドラインドメインオブジェクトの設計ガイドライン
ドメインオブジェクトの設計ガイドライン
 
ドメイン駆動設計入門
ドメイン駆動設計入門ドメイン駆動設計入門
ドメイン駆動設計入門
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話DDD x CQRS   更新系と参照系で異なるORMを併用して上手くいった話
DDD x CQRS 更新系と参照系で異なるORMを併用して上手くいった話
 
アジャイルにモデリングは必要か
アジャイルにモデリングは必要かアジャイルにモデリングは必要か
アジャイルにモデリングは必要か
 
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くかDDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
DDDはオブジェクト指向を利用してどのようにメンテナブルなコードを書くか
 
ビジネスルールの複雑さに立ち向かう
ビジネスルールの複雑さに立ち向かうビジネスルールの複雑さに立ち向かう
ビジネスルールの複雑さに立ち向かう
 
DDD sample code explained in Java
DDD sample code explained in JavaDDD sample code explained in Java
DDD sample code explained in Java
 
全文検索でRedmineをさらに活用!
全文検索でRedmineをさらに活用!全文検索でRedmineをさらに活用!
全文検索でRedmineをさらに活用!
 
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したことドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
 
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのかDDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
 
ワタシはSingletonがキライだ
ワタシはSingletonがキライだワタシはSingletonがキライだ
ワタシはSingletonがキライだ
 

More from Yusuke Goto

More from Yusuke Goto (20)

RUM と STM で実現する動画視聴における信頼性エンジニアリング
RUM と STM で実現する動画視聴における信頼性エンジニアリングRUM と STM で実現する動画視聴における信頼性エンジニアリング
RUM と STM で実現する動画視聴における信頼性エンジニアリング
 
Streaming Reliability Engineering
Streaming Reliability EngineeringStreaming Reliability Engineering
Streaming Reliability Engineering
 
2021 年春 ABEMA が Internet Explorer 11 の サポートを終了
2021 年春 ABEMA が Internet Explorer 11 の サポートを終了2021 年春 ABEMA が Internet Explorer 11 の サポートを終了
2021 年春 ABEMA が Internet Explorer 11 の サポートを終了
 
より高品質なメディアサービスを目指す ABEMA の技術進化
より高品質なメディアサービスを目指す ABEMA の技術進化より高品質なメディアサービスを目指す ABEMA の技術進化
より高品質なメディアサービスを目指す ABEMA の技術進化
 
conte - ABEMA's Design System
conte - ABEMA's Design Systemconte - ABEMA's Design System
conte - ABEMA's Design System
 
ABEMA を次のフェーズへ進化させる技術への取り組み
ABEMA を次のフェーズへ進化させる技術への取り組みABEMA を次のフェーズへ進化させる技術への取り組み
ABEMA を次のフェーズへ進化させる技術への取り組み
 
ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術ABEMA の視聴品質向上戦術
ABEMA の視聴品質向上戦術
 
Taipei Video Tech #5 talk : A Japanese Way to Maintain Constant Quality on St...
Taipei Video Tech #5 talk : A Japanese Way to Maintain Constant Quality on St...Taipei Video Tech #5 talk : A Japanese Way to Maintain Constant Quality on St...
Taipei Video Tech #5 talk : A Japanese Way to Maintain Constant Quality on St...
 
2019 年後半 海外動画技術動向
2019 年後半 海外動画技術動向2019 年後半 海外動画技術動向
2019 年後半 海外動画技術動向
 
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
A Japanese Way to Maintain Constant Quality on Streaming Chaotically Supplied...
 
AbemaTV の課題と Demuxed 2019
AbemaTV の課題と Demuxed 2019AbemaTV の課題と Demuxed 2019
AbemaTV の課題と Demuxed 2019
 
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
Clarity 2019 で デザインシステムの課題は人なんだと痛感した話
 
AbemaTV が対峙する技術的課題と開発の現場
AbemaTV が対峙する技術的課題と開発の現場AbemaTV が対峙する技術的課題と開発の現場
AbemaTV が対峙する技術的課題と開発の現場
 
Nab Show 2019 報告会 - ATSC 3.0 / MOS / Machine Learning / 映像合成技術 編
Nab Show 2019 報告会 - ATSC 3.0 / MOS / Machine Learning / 映像合成技術 編Nab Show 2019 報告会 - ATSC 3.0 / MOS / Machine Learning / 映像合成技術 編
Nab Show 2019 報告会 - ATSC 3.0 / MOS / Machine Learning / 映像合成技術 編
 
AbemaTV プロダクトデザイン 2.0
AbemaTV プロダクトデザイン 2.0AbemaTV プロダクトデザイン 2.0
AbemaTV プロダクトデザイン 2.0
 
Story-Assured Design で開発チーム全員でデザインする
Story-Assured Design で開発チーム全員でデザインするStory-Assured Design で開発チーム全員でデザインする
Story-Assured Design で開発チーム全員でデザインする
 
KPI から生まれるアクセシビリティ
KPI から生まれるアクセシビリティKPI から生まれるアクセシビリティ
KPI から生まれるアクセシビリティ
 
Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術Atomic Design という名のデザイン整理術
Atomic Design という名のデザイン整理術
 
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
 
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/y...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/y...(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/y...
(穴あり版) UI 開発をアジャイルに行うための Atomic Design (穴埋め解答版 → https://www.slideshare.net/y...
 

Recently uploaded

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data DiscoveryTrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
 
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor PresentationDBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Cyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdfCyberprint. Dark Pink Apt Group [EN].pdf
Cyberprint. Dark Pink Apt Group [EN].pdf
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Boost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdfBoost Fertility New Invention Ups Success Rates.pdf
Boost Fertility New Invention Ups Success Rates.pdf
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ..."I see eyes in my soup": How Delivery Hero implemented the safety system for ...
"I see eyes in my soup": How Delivery Hero implemented the safety system for ...
 
CNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In PakistanCNIC Information System with Pakdata Cf In Pakistan
CNIC Information System with Pakdata Cf In Pakistan
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024AXA XL - Insurer Innovation Award Americas 2024
AXA XL - Insurer Innovation Award Americas 2024
 

UI 開発をアジャイルに行うための Atomic Design