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

イベント・ソーシングを知る
イベント・ソーシングを知るイベント・ソーシングを知る
イベント・ソーシングを知る
Shuhei Fujita
 

What's hot (20)

2015/11/15 Javaでwebアプリケーション入門
2015/11/15 Javaでwebアプリケーション入門2015/11/15 Javaでwebアプリケーション入門
2015/11/15 Javaでwebアプリケーション入門
 
ドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したことドメイン駆動設計 失敗したことと成功したこと
ドメイン駆動設計 失敗したことと成功したこと
 
ドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったことドメイン駆動設計に15年取り組んでわかったこと
ドメイン駆動設計に15年取り組んでわかったこと
 
ドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみようドメイン駆動設計 ( DDD ) をやってみよう
ドメイン駆動設計 ( DDD ) をやってみよう
 
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とはがんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
がんばらなくても C# で Single Page Web アプリケーションが書けてしまう「Blazor」とは
 
オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門オブジェクト指向プログラミングのためのモデリング入門
オブジェクト指向プログラミングのためのモデリング入門
 
Dapr on Kubernetes
Dapr on KubernetesDapr on Kubernetes
Dapr on Kubernetes
 
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのかDDDのモデリングとは何なのか、 そしてどうコードに落とすのか
DDDのモデリングとは何なのか、 そしてどうコードに落とすのか
 
Java ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsugJava ORマッパー選定のポイント #jsug
Java ORマッパー選定のポイント #jsug
 
イベント・ソーシングを知る
イベント・ソーシングを知るイベント・ソーシングを知る
イベント・ソーシングを知る
 
ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門ドメイン駆動設計 本格入門
ドメイン駆動設計 本格入門
 
マイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチマイクロサービス 4つの分割アプローチ
マイクロサービス 4つの分割アプローチ
 
マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜マルチテナントのアプリケーション実装〜実践編〜
マルチテナントのアプリケーション実装〜実践編〜
 
シリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのかシリコンバレーの「何が」凄いのか
シリコンバレーの「何が」凄いのか
 
人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate人生がときめくAPIテスト自動化 with Karate
人生がときめくAPIテスト自動化 with Karate
 
ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説ドメイン駆動設計サンプルコードの徹底解説
ドメイン駆動設計サンプルコードの徹底解説
 
ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方ドメイン駆動設計の正しい歩き方
ドメイン駆動設計の正しい歩き方
 
世界一わかりやすいClean Architecture release-preview
世界一わかりやすいClean Architecture release-preview世界一わかりやすいClean Architecture release-preview
世界一わかりやすいClean Architecture release-preview
 
やはりお前らのMVCは間違っている
やはりお前らのMVCは間違っているやはりお前らのMVCは間違っている
やはりお前らのMVCは間違っている
 
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
jooqってなんて読むの? から始めるO/RマッパーとSpringBootの世界
 

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

Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 

Recently uploaded (20)

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
 
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
Strategies for Unlocking Knowledge Management in Microsoft 365 in the Copilot...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
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
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024Tata AIG General Insurance Company - Insurer Innovation Award 2024
Tata AIG General Insurance Company - Insurer Innovation Award 2024
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)Powerful Google developer tools for immediate impact! (2023-24 C)
Powerful Google developer tools for immediate impact! (2023-24 C)
 
HTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation StrategiesHTML Injection Attacks: Impact and Mitigation Strategies
HTML Injection Attacks: Impact and Mitigation Strategies
 
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
Bajaj Allianz Life Insurance Company - Insurer Innovation Award 2024
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 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
 
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
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
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, ...
 
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
 

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