入門！アトミックデザイン / A beginner's guide to Atomic Design

# URL
勉強会情報: https://nrs-seminar.connpass.com/event/122208/
HomePage: https://nrslib.com
Twitter: https://twitter.com/nrslib

# 概要
アトミックデザインの実践に向けた入門の手引きです。

Transcript

1. Masanobu Naruse A beginner’s guide to Atomic Design
2. Nrs Seminar © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search
3. Developer Relations Team Fans Making Opportunity Interest Comprehension
4. Do you know Atomic Design?
5. Have you seen this?
6. ATOMS
7. ATOMS 最小要素
8. © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar
9. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG
10. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Logo
11. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG HeaderTitle Nrs Seminar
12. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar TOP Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG TextBox Search
13. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG PrimaryButton Search
14. Nrs Seminar ATOMS : Logo : HeaderTitle Search Search : TextBox : PrimaryButton
15. MOLECULES
16. MOLECULES ATOMを組み合わせたもの
17. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG
18. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG HeaderLink Nrs Seminar
19. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search SearchBox
20. MOLECULES Search Search Nrs Seminar : HeaderLink : SearchBox
21. ORGANISMS
22. ORGANISMS ATOM / MOLECULES を組み合わせたもの
23. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Nrs Seminar Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG
24. UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Job Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Header Nrs Seminar
25. Nrs Seminar © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME TOP > ABOUT ME BLOG Search Search https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name Table UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job
26. ORGANISM : Header : Table
27. TEMPLATES ページの基礎となるコンテンツ構造
28. © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter GMO Internet, Inc. Workplace Developer Evangelist Title Programmer Job Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar
29. © 2019 narusemi All rights reserved. XXX > YYY Search Search Nrs Seminar
30. PAGES テンプレートにデータを流し込んだ結果
31. © 2019 narusemi All rights reserved. XXX > YYY Search Search Nrs Seminar
32. © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name
33. Easy
34. Sure ?
35. Atoms TableCell Paging button TabButton TabContent
36. Molecules TableRow TableCell TableCell TableCell TableCell PagingMenu 2 1 3 > < TabMenu TabButton TabButton TabButton
37. Organisms Table Tab
38. Organisms Table Tab
39. Organisms Table Tab
40. Organisms Table Tab Organism + Organism = ？
41. Another side
42. Atoms Button Modal
43. Molecules OK Cancel ModalFooterYesNo Close ModalFooterClose
44. Organisms ModalYesNo Content
45. Organisms ModalYesNo Content
46. Organisms ModalYesNo Content Success !
47. Organisms ModalYesNo Content Success ! Good
48. ModalChangeUserName Success ! TableCell UserName
49. ModalChangeUserName Success ! TableCell UserName Organisms ?
50. More
51. Templates Footer
52. Templates Footer Pages Information Since 2018 Image
53. Templates Footer Pages Information Since 2018 Image OK
54. Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents
55. Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents Good
56. But
57. Templates Footer Contents Footer Contents SideMenu
58. Templates Footer Contents Breadcrumb Footer Contents SideMenu Breadcrumb
60. Good ?
61. NoMenuLayout Footer Footer SideMenu NormalLayout
62. NormalContent Contents BreadcrumbContent Contents Breadcrumb
68. Good
69. アトミックデザインは使えない？
70. アトミックデザインは使えない？ No
71. こんな経験はありませんか？
72. Designer Engineer
73. Designer Engineer Search SearchWord ここのページは このデザインで
74. Designer Engineer Search SearchWord
75. Designer Engineer Search SearchWord また見たことない ボタンが・・・
76. Designer Engineer Search SearchWord もっと再利用しやすい してくれない？
77. Designer Engineer Search SearchWord わかりました
78. Designer Engineer Search SearchWord どうすれば 再利用しやすいんだ？ 伝わったかなぁ
79. デザイナーとエンジニア
80. デザイナーとエンジニア 向いてる方向 同じ ＝
81. デザイナーとエンジニア 向いてる方向 同じ ＝ 勘所 ＝ 違う
82. Designer Engineer Search SearchWord 統一感 視線誘導 かっこよさ 共通化 保守性 難易度
83. Designer Engineer Search SearchWord 統一感 視線誘導 かっこよさ 共通化 保守性 難易度 これらの落としどころとして
84. Designer Engineer Search SearchWord デザインシステム デザインシステム
85. Designer Engineer Search SearchWord デザインシステム
86. 目的
87. 目的 アトミックデザインをすること
88. 目的 アトミックデザインをすること No
89. 目的 協業のための共通基盤作り
90. これに従って デザインするからね
91. これに従って デザインするからね やりやすい！
92. Learn more about Atomic Design
93. コンポーネント指向
94. Keyword
95. Web is behind.
96. コンポーネント指向
97. コンポーネント指向 すべてはコンポーネント
101. すべてはコンポーネント
102. Web では？
104. <image> <textbox> <button>
105. <image> <textbox> <button> <image> <textbox> <button>
106. <image> <textbox> <button> <image> <textbox> <button> <image> <textbox> <button> <table> <tr> <td>
107. <image> <textbox> <button> <image> <textbox> <button> <image> <textbox> <button> <table> <tr> <td> 組み合わせでいけちゃう HTML すごすぎ
108. Content Success !
109. Content Success ! Search
110. Content Success ! Search モーダルのボタン これに変えて もらえます？
111. Content Success ! Search 何箇所 変更することに なるんだ？ モーダルのボタン これに変えて もらえます？
112. CSS がある
113. Content Success !
114. Content Success !
115. Content Success ! モーダルの右上に 閉じるボタン つけてもらえます？
116. Content Success ! これは終わった モーダルの右上に 閉じるボタン つけてもらえます？
117. コンポーネントなら
118. <div class=“modal”> <button class=“close-button”/> <slot /> <footer /> </div> @Component export default class Modal
119. <div class=“modal”> <button class=“close-button”/> <slot /> <footer /> </div> @Component export default class Modal
120. <div class=“modal”> <button class=“close-button”/> <slot /> <footer /> </div> @Component export default class Modal お手軽
121. コンポーネント指向の利点
122. 変更に強くなる コンポーネント指向の利点
123. その上でこの図をもう一度
125. AtomicDesign じゃん
126. Atomic Design 粒度にルールを加えた コンポーネント指向
127. 実践
129. どこから手を付ける？
130. サンプルページを作る
131. © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Search Search Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name
132. まずは Atom を検討
133. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG Logo
134. https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION TOP ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG HeaderTitle Nrs Seminar
135. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name TOP Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG TextBox Search
136. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG PrimaryButton Search
137. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name TOP > ABOUT ME BLOG SideMenuButton TOP
138. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse Name BLOG TOP > ABOUT ME BreadCrumb
139. Nrs Seminar https://nrslib.com HP @nrslib Twitter UX UI / DevRel. Team GMO Internet, Inc. Company Programmer / Developer Evangelist Job Masanobu Naruse Name Search Search TOP © 2019 narusemi All rights reserved. INFORMATION ABOUT ME https://nrslib.com HP @nrslib Twitter Masanobu Naruse TOP > ABOUT ME BLOG TableCell Name
140. HomePageTitle Search Search SideMenuButton XXX > TableCell Atoms
141. Search
142. Button は Atom? Search
143. Button は Atom? Search Yes Atom = UI としての機能性を破壊しない最小要素
144. もしも Button と文字を分けると
145. もしも Button と文字を分けると Search
146. もしも Button と文字を分けると Search もはやボタンではない
147. Molecules
148. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell
149. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell
150. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle
151. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle
152. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button
153. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button
154. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell TableCell TableCell HomePageTitle Placeholder Button
155. Organism
156. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell
157. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell
158. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell
159. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell
160. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
161. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell
162. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG TableCell TableCell
163. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
164. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
165. というところまでを
166. こんなんでどうだろう こうした方が いいんじゃないかな Designer Engineer
167. こんなんでどうだろう こうした方が いいんじゃないかな Designer Engineer なるべく一緒に
168. ページの要素がある程度 出揃ったら各職種で実装
169. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG
170. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG どこから？
171. HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search TableCell TableCell TableCell TableCell TableCell TableCell BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG 下位要素の仮実装から どこから？
172. Placeholder Button Placeholder Button
173. Placeholder Button Placeholder Button
174. Placeholder Button Placeholder Button
175. Placeholder Button Placeholder Button イベントやプロパティを仮で定義
176. Placeholder Button Placeholder Button
177. Placeholder Button Placeholder Button 仮実装があれば上位の要素も作れる
178. 注意すべきは同じレイヤー
179. Placeholder 分担作業をすると Placeholder Button Button
180. Placeholder Button Button TextArea 分担作業をすると Placeholder Button Button Button Button
181. Placeholder Button Button TextArea 分担作業をすると 意図せず重複してしまうことがある Placeholder Button Button Button Button
182. Placeholder Button Button TextArea Placeholder Button Button Button 作業を分担するときは 最初に要素を洗い出すのは重要
183. Template は？
185. ページの構成パターン
186. ページの構成パターン コードで表現するのは 必ずしも必要ではない
187. 勿論用意してもよい
188. その場合は全体の Template と コンテンツの Template で 分けるのがお勧め 全体 コンテンツ
191. Organism の粒度について
192. Organisms Table Tab Organism + Organism = ？
193. 便利なものを作ろうとすると 実は三段階では足りない
194. 便利なものを作ろうとすると 実は三段階では足りない どうするか？
195. 便利なものを作ろうとすると 実は三段階では足りない Organism は Organism を コンポジションすることもある どうするか？
196. Organisms Table Tab Organism + Organism = ？
197. Organisms Table Tab Organism + Organism = ？ Organism
198. 忠実にすることが難しさに繋がるなら その本質を見極めて取捨選択をすべき
199. Atomic Design は デザインシステム 唯一無二の法律ではなく 開発に関わるすべての人たちの 指標として利用しよう
200. 最終目標は結局
201. これに従って デザインするからね やりやすい！
202. 今日のお話は実践しやすくした入門編
203. 今日のお話は実践しやすくした入門編 更なる飛躍のためには原典を http://atomicdesign.bradfrost.com
204. Auther nrs HomePage https://nrslib.com Twitter @nrslib