Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

E37b4344ef4bfd0fc4826c04971e54fb?s=47 nrs
March 18, 2019

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

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

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

E37b4344ef4bfd0fc4826c04971e54fb?s=128

nrs

March 18, 2019
Tweet

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

  59. None
  60. Good ?

  61. NoMenuLayout Footer Footer SideMenu NormalLayout

  62. NormalContent Contents BreadcrumbContent Contents Breadcrumb

  63. None
  64. None
  65. None
  66. None
  67. None
  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. コンポーネント指向 すべてはコンポーネント

  98. None
  99. None
  100. None
  101. すべてはコンポーネント

  102. Web では?

  103. None
  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. その上でこの図をもう一度

  124. None
  125. AtomicDesign じゃん

  126. Atomic Design 粒度にルールを加えた コンポーネント指向

  127. 実践

  128. None
  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 は?

  184. None
  185. ページの構成パターン

  186. ページの構成パターン コードで表現するのは 必ずしも必要ではない

  187. 勿論用意してもよい

  188. その場合は全体の Template と コンテンツの Template で 分けるのがお勧め 全体 コンテンツ

  189. None
  190. None
  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