SlideShare a Scribd company logo
2018.6.29 DevLOVE Atomic Design UI
YUSUKE GOTO
https://ygoto3.com/
@ygoto3_










既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
Atomic Design

https://www.amazon.co.jp/dp/477419705X
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
Plan
Do
Check
Action
Plan
Check
Action Do
Plan
Check
Action Do
Do
Do
Do
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/
https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/


https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
https://devrant.com/rants/412300/code-formatting-is-important-when-its-not-too-long
https://pixabay.com/en/games-children-child-girl-toys-2801332/
https://pixabay.com/en/blocks-child-toy-education-game-503109/
https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/


Wikipedia

https://ja.wikipedia.org/wiki/
%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8
2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)


Wikipedia

https://ja.wikipedia.org/wiki/
%E3%83%AA%E3%83%95%E3%82%A1%E3%82%AF%E3%82%BF%E3%83%AA%E3%83%B3%E3%8
2%B0_(%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%9F%E3%83%B3%E3%82%B0)
https://dribbble.com/shots/1218034-Ui-Sketchhttps://www.pexels.com/photo/abstract-business-code-coder-270348/


https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.youtube.com/watch?v=Ai6PEagQpAs
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://www.psdvault.com/basics/essential-photoshop-shortcuts-beginners-learn-part/
https://pixabay.com/en/burden-heavy-man-overworked-people-1296754/
https://pixabay.com/en/freedom-silhouette-woman-back-light-2053281/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/
https://www.websitedesign.co.uk/ordering-layers-in-photoshop/




既存のフローからアップデートするアジャイル・デザインフロー




既存のフローからアップデートするアジャイル・デザインフロー


既存のフローからアップデートするアジャイル・デザインフロー






既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー




https://www.amazon.co.jp/dp/4763131206
http://bradfrost.com/blog/post/atomic-design-book/




Atomic Design
http://bradfrost.com/blog/post/atomic-web-design/
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




既存のフローからアップデートするアジャイル・デザインフロー
















既存のフローからアップデートするアジャイル・デザインフロー


既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー






既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
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
既存のフローからアップデートするアジャイル・デザインフロー


既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
Organism A
Organism B
Organism D
Organism E
Organism C
Template A
Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A Template B
Organism A
Organism B
Organism D
Organism E
Organism C
Organism A
Organism B
Organism C
Organism E
Organism D
Template A Template B
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
Organism A
Organism B
Organism E
Organism C
Template A
Organism A
Organism B
Organism E
Organism C


Template A
Organism A
Organism B
Organism E
Organism C
Template A
Organism A
Organism B
Organism E
Organism C
Template A
既存のフローからアップデートするアジャイル・デザインフロー






既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー


















既存のフローからアップデートするアジャイル・デザインフロー







 

 




 

 


 

 




 

 








 

 

既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー


https://www.amebaownd.com/


https://www.amebaownd.com/
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー




既存のフローからアップデートするアジャイル・デザインフロー


 






 









 









既存のフローからアップデートするアジャイル・デザインフロー


 






既存のフローからアップデートするアジャイル・デザインフロー


 






 








既存のフローからアップデートするアジャイル・デザインフロー




既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
既存のフローからアップデートするアジャイル・デザインフロー
https://sketchapp.com/docs/symbols/editing-symbols/
https://sketchapp.com/docs/symbols/editing-symbols/
https://sketchapp.com/docs/symbols/nested-symbols/
https://sketchapp.com/docs/symbols/nested-symbols/
https://sketchapp.com/docs/symbols/nested-symbols/
https://sketchapp.com/docs/symbols/nested-symbols/


https://sketchapp.com/docs/symbols/nested-symbols/




 






 



 




 

 


 

 
 

既存のフローからアップデートするアジャイル・デザインフロー
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

PDF
Bootiful Reactive Testing - Mario Gray
PDF
Experience at the edge of the network
PPTX
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
PDF
Make your website ux rock
PPTX
High Performance Web Components
PPTX
An Introduction to Web VR January 2015
PDF
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
PDF
Serviciosdegoogle01
Bootiful Reactive Testing - Mario Gray
Experience at the edge of the network
Fairfax Sydney #mojo #mojocon Feb 2017 Meetup - 360 video production basics
Make your website ux rock
High Performance Web Components
An Introduction to Web VR January 2015
Three part series: Designing for multiple devices - GA, London, 20 Jan 2014
Serviciosdegoogle01

Similar to 既存のフローからアップデートするアジャイル・デザインフロー (7)

PPT
18 Vital Tips for UI Designers
PPTX
Software Design
PDF
Writing for better user interfaces (GDS)
PDF
Quick Guide for Designing Usable Mobile UI
PDF
Writing for better user interfaces (Home Office)
PDF
AAU UX club presentation - April 23, 2015
PDF
Principles of visual consistency
18 Vital Tips for UI Designers
Software Design
Writing for better user interfaces (GDS)
Quick Guide for Designing Usable Mobile UI
Writing for better user interfaces (Home Office)
AAU UX club presentation - April 23, 2015
Principles of visual consistency
Ad

More from Yusuke Goto (20)

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

Recently uploaded (20)

DOCX
actividad 20% informatica microsoft project
PDF
The Advantages of Working With a Design-Build Studio
PPTX
6- Architecture design complete (1).pptx
PPTX
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
PPTX
CLASSIFICATION OF YARN- process, explanation
PDF
Phone away, tabs closed: No multitasking
PPT
pump pump is a mechanism that is used to transfer a liquid from one place to ...
PDF
Chalkpiece Annual Report from 2019 To 2025
PDF
YOW2022-BNE-MinimalViableArchitecture.pdf
PPTX
mahatma gandhi bus terminal in india Case Study.pptx
PDF
Urban Design Final Project-Context
PDF
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
PPTX
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
PDF
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
PPTX
Media And Information Literacy for Grade 12
PPTX
Entrepreneur intro, origin, process, method
PPTX
Tenders & Contracts Works _ Services Afzal.pptx
PDF
BRANDBOOK-Presidential Award Scheme-Kenya-2023
PDF
Urban Design Final Project-Site Analysis
PDF
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...
actividad 20% informatica microsoft project
The Advantages of Working With a Design-Build Studio
6- Architecture design complete (1).pptx
CLASS_11_BUSINESS_STUDIES_PPT_CHAPTER_1_Business_Trade_Commerce.pptx
CLASSIFICATION OF YARN- process, explanation
Phone away, tabs closed: No multitasking
pump pump is a mechanism that is used to transfer a liquid from one place to ...
Chalkpiece Annual Report from 2019 To 2025
YOW2022-BNE-MinimalViableArchitecture.pdf
mahatma gandhi bus terminal in india Case Study.pptx
Urban Design Final Project-Context
GREEN BUILDING MATERIALS FOR SUISTAINABLE ARCHITECTURE AND BUILDING STUDY
Complete Guide to Microsoft PowerPoint 2019 – Features, Tools, and Tips"
Skskkxiixijsjsnwkwkaksixindndndjdjdjsjjssk
Media And Information Literacy for Grade 12
Entrepreneur intro, origin, process, method
Tenders & Contracts Works _ Services Afzal.pptx
BRANDBOOK-Presidential Award Scheme-Kenya-2023
Urban Design Final Project-Site Analysis
Emailing DDDX-MBCaEiB.pdf DDD_Europe_2022_Intro_to_Context_Mapping_pdf-165590...

既存のフローからアップデートするアジャイル・デザインフロー