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

by nrs

Slide 1

Slide 1 text

Masanobu Naruse A beginner’s guide to Atomic Design

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Developer Relations Team Fans Making Opportunity Interest Comprehension

Slide 4

Slide 4 text

Do you know Atomic Design?

Slide 5

Slide 5 text

Have you seen this?

Slide 6

Slide 6 text

ATOMS

Slide 7

Slide 7 text

ATOMS 最小要素

Slide 8

Slide 8 text

© 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

Nrs Seminar ATOMS : Logo : HeaderTitle Search Search : TextBox : PrimaryButton

Slide 15

Slide 15 text

MOLECULES

Slide 16

Slide 16 text

MOLECULES ATOMを組み合わせたもの

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

MOLECULES Search Search Nrs Seminar : HeaderLink : SearchBox

Slide 21

Slide 21 text

ORGANISMS

Slide 22

Slide 22 text

ORGANISMS ATOM / MOLECULES を組み合わせたもの

Slide 23

Slide 23 text

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

ORGANISM : Header : Table

Slide 27

Slide 27 text

TEMPLATES ページの基礎となるコンテンツ構造

Slide 28

Slide 28 text

© 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

Slide 29

Slide 29 text

Slide 30

Slide 30 text

PAGES テンプレートにデータを流し込んだ結果

Slide 31

Slide 31 text

Slide 32

Slide 32 text

© 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

Slide 33

Slide 33 text

Easy

Slide 34

Slide 34 text

Sure ?

Slide 35

Slide 35 text

Atoms TableCell Paging button TabButton TabContent

Slide 36

Slide 36 text

Molecules TableRow TableCell TableCell TableCell TableCell PagingMenu 2 1 3 > < TabMenu TabButton TabButton TabButton

Slide 37

Slide 37 text

Organisms Table Tab

Slide 38

Slide 38 text

Organisms Table Tab

Slide 39

Slide 39 text

Organisms Table Tab

Slide 40

Slide 40 text

Organisms Table Tab Organism + Organism = ？

Slide 41

Slide 41 text

Another side

Slide 42

Slide 42 text

Atoms Button Modal

Slide 43

Slide 43 text

Molecules OK Cancel ModalFooterYesNo Close ModalFooterClose

Slide 44

Slide 44 text

Organisms ModalYesNo Content

Slide 45

Slide 45 text

Organisms ModalYesNo Content

Slide 46

Slide 46 text

Organisms ModalYesNo Content Success !

Slide 47

Slide 47 text

Organisms ModalYesNo Content Success ! Good

Slide 48

Slide 48 text

ModalChangeUserName Success ! TableCell UserName

Slide 49

Slide 49 text

ModalChangeUserName Success ! TableCell UserName Organisms ?

Slide 50

Slide 50 text

Slide 51 text

Templates Footer

Slide 52

Slide 52 text

Templates Footer Pages Information Since 2018 Image

Slide 53

Slide 53 text

Templates Footer Pages Information Since 2018 Image OK

Slide 54

Slide 54 text

Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents

Slide 55

Slide 55 text

Templates Footer Pages Since 2018 Contents SideMenu Top Information XXXX YYYY ZZZZZ Contents Good

Slide 56

Slide 56 text

But

Slide 57

Slide 57 text

Templates Footer Contents Footer Contents SideMenu

Slide 58

Slide 58 text

Templates Footer Contents Breadcrumb Footer Contents SideMenu Breadcrumb

Slide 59

Slide 59 text

No content

Slide 60

Slide 60 text

Good ?

Slide 61

Slide 61 text

NoMenuLayout Footer Footer SideMenu NormalLayout

Slide 62

Slide 62 text

NormalContent Contents BreadcrumbContent Contents Breadcrumb

Slide 63

Slide 63 text

No content

Slide 64

Slide 64 text

No content

Slide 65

Slide 65 text

No content

Slide 66

Slide 66 text

No content

Slide 67

Slide 67 text

No content

Slide 68

Slide 68 text

Good

Slide 69

Slide 69 text

アトミックデザインは使えない？

Slide 70

Slide 70 text

アトミックデザインは使えない？ No

Slide 71

Slide 71 text

こんな経験はありませんか？

Slide 72

Slide 72 text

Designer Engineer

Slide 73

Slide 73 text

Designer Engineer Search SearchWord ここのページはこのデザインで

Slide 74

Slide 74 text

Designer Engineer Search SearchWord

Slide 75

Slide 75 text

Designer Engineer Search SearchWord また見たことないボタンが・・・

Slide 76

Slide 76 text

Designer Engineer Search SearchWord もっと再利用しやすいしてくれない？

Slide 77

Slide 77 text

Designer Engineer Search SearchWord わかりました

Slide 78

Slide 78 text

Designer Engineer Search SearchWord どうすれば再利用しやすいんだ？伝わったかなぁ

Slide 79

Slide 79 text

デザイナーとエンジニア

Slide 80

Slide 80 text

デザイナーとエンジニア向いてる方向同じ＝

Slide 81

Slide 81 text

デザイナーとエンジニア向いてる方向同じ＝勘所＝違う

Slide 82

Slide 82 text

Designer Engineer Search SearchWord 統一感視線誘導かっこよさ共通化保守性難易度

Slide 83

Slide 83 text

Designer Engineer Search SearchWord 統一感視線誘導かっこよさ共通化保守性難易度これらの落としどころとして

Slide 84

Slide 84 text

Designer Engineer Search SearchWord デザインシステムデザインシステム

Slide 85

Slide 85 text

Designer Engineer Search SearchWord デザインシステム

Slide 86

Slide 86 text

目的

Slide 87

Slide 87 text

目的アトミックデザインをすること

Slide 88

Slide 88 text

目的アトミックデザインをすること No

Slide 89

Slide 89 text

目的協業のための共通基盤作り

Slide 90

Slide 90 text

これに従ってデザインするからね

Slide 91

Slide 91 text

これに従ってデザインするからねやりやすい！

Slide 92

Slide 92 text

Learn more about Atomic Design

Slide 93

Slide 93 text

コンポーネント指向

Slide 94

Slide 94 text

Keyword

Slide 95

Slide 95 text

Web is behind.

Slide 96

Slide 96 text

コンポーネント指向

Slide 97

Slide 97 text

コンポーネント指向すべてはコンポーネント

Slide 98

Slide 98 text

No content

Slide 99

Slide 99 text

No content

Slide 100

Slide 100 text

No content

Slide 101

Slide 101 text

すべてはコンポーネント

Slide 102

Slide 102 text

Web では？

Slide 103

Slide 103 text

No content

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Slide 106

Slide 106 text

Slide 107

Slide 107 text

組み合わせでいけちゃう HTML すごすぎ

Slide 108

Slide 108 text

Content Success !

Slide 109

Slide 109 text

Content Success ! Search

Slide 110

Slide 110 text

Content Success ! Search モーダルのボタンこれに変えてもらえます？

Slide 111

Slide 111 text

Content Success ! Search 何箇所変更することになるんだ？モーダルのボタンこれに変えてもらえます？

Slide 112

Slide 112 text

CSS がある

Slide 113

Slide 113 text

Content Success !

Slide 114

Slide 114 text

Content Success !

Slide 115

Slide 115 text

Content Success ! モーダルの右上に閉じるボタンつけてもらえます？

Slide 116

Slide 116 text

Content Success ! これは終わったモーダルの右上に閉じるボタンつけてもらえます？

Slide 117

Slide 117 text

コンポーネントなら

Slide 118

Slide 118 text

@Component export default class Modal

Slide 119

Slide 119 text

@Component export default class Modal

Slide 120

Slide 120 text

@Component export default class Modal お手軽

Slide 121

Slide 121 text

コンポーネント指向の利点

Slide 122

Slide 122 text

変更に強くなるコンポーネント指向の利点

Slide 123

Slide 123 text

その上でこの図をもう一度

Slide 124

Slide 124 text

No content

Slide 125

Slide 125 text

AtomicDesign じゃん

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

実践

Slide 128

Slide 128 text

No content

Slide 129

Slide 129 text

どこから手を付ける？

Slide 130

Slide 130 text

サンプルページを作る

Slide 131

Slide 131 text

Slide 132

Slide 132 text

まずは Atom を検討

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

Slide 140

Slide 140 text

HomePageTitle Search Search SideMenuButton XXX > TableCell Atoms

Slide 141

Slide 141 text

Slide 142

Slide 142 text

Button は Atom? Search

Slide 143

Slide 143 text

Button は Atom? Search Yes Atom = UI としての機能性を破壊しない最小要素

Slide 144

Slide 144 text

もしも Button と文字を分けると

Slide 145

Slide 145 text

もしも Button と文字を分けると Search

Slide 146

Slide 146 text

もしも Button と文字を分けると Search もはやボタンではない

Slide 147

Slide 147 text

Molecules

Slide 148

Slide 148 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

Slide 149

Slide 149 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell

Slide 150

Slide 150 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

Slide 151

Slide 151 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle

Slide 152

Slide 152 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

Slide 153

Slide 153 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Placeholder Button

Slide 154

Slide 154 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell TableCell TableCell HomePageTitle Placeholder Button

Slide 155

Slide 155 text

Organism

Slide 156

Slide 156 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell

Slide 157

Slide 157 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell

Slide 158

Slide 158 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell

Slide 159

Slide 159 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TableCell TableCell

Slide 160

Slide 160 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 161

Slide 161 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 162

Slide 162 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG TableCell TableCell

Slide 163

Slide 163 text

HomePageTitle Placeholder Button SideMenuButton BreadCrumb > TableCell HomePageTitle Button Placeholder TableCell TableCell HomePageTitle Search Search BreadCrumb > BreadCrumb TOP INFORMATION ABOUT ME BLOG

Slide 164

Slide 164 text

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

Slide 165

Slide 165 text

というところまでを

Slide 166

Slide 166 text

こんなんでどうだろうこうした方がいいんじゃないかな Designer Engineer

Slide 167

Slide 167 text

こんなんでどうだろうこうした方がいいんじゃないかな Designer Engineer なるべく一緒に

Slide 168

Slide 168 text

ページの要素がある程度出揃ったら各職種で実装

Slide 169

Slide 169 text

Slide 170

Slide 170 text

Slide 171

Slide 171 text

Slide 172

Slide 172 text

Placeholder Button Placeholder Button

Slide 173

Slide 173 text

Placeholder Button Placeholder Button

Slide 174

Slide 174 text

Placeholder Button Placeholder Button

Slide 175

Slide 175 text

Placeholder Button Placeholder Button イベントやプロパティを仮で定義

Slide 176

Slide 176 text

Placeholder Button Placeholder Button

Slide 177

Slide 177 text

Placeholder Button Placeholder Button 仮実装があれば上位の要素も作れる

Slide 178

Slide 178 text

注意すべきは同じレイヤー

Slide 179

Slide 179 text

Placeholder 分担作業をすると Placeholder Button Button

Slide 180

Slide 180 text

Placeholder Button Button TextArea 分担作業をすると Placeholder Button Button Button Button

Slide 181

Slide 181 text

Placeholder Button Button TextArea 分担作業をすると意図せず重複してしまうことがある Placeholder Button Button Button Button

Slide 182

Slide 182 text

Placeholder Button Button TextArea Placeholder Button Button Button 作業を分担するときは最初に要素を洗い出すのは重要

Slide 183

Slide 183 text

Template は？

Slide 184

Slide 184 text

No content

Slide 185

Slide 185 text

ページの構成パターン

Slide 186

Slide 186 text

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

Slide 187

Slide 187 text

勿論用意してもよい

Slide 188

Slide 188 text

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

Slide 189

Slide 189 text

No content

Slide 190

Slide 190 text

No content

Slide 191

Slide 191 text

Organism の粒度について

Slide 192

Slide 192 text

Organisms Table Tab Organism + Organism = ？

Slide 193

Slide 193 text

便利なものを作ろうとすると実は三段階では足りない

Slide 194

Slide 194 text

便利なものを作ろうとすると実は三段階では足りないどうするか？

Slide 195

Slide 195 text

便利なものを作ろうとすると実は三段階では足りない Organism は Organism をコンポジションすることもあるどうするか？

Slide 196

Slide 196 text

Organisms Table Tab Organism + Organism = ？

Slide 197

Slide 197 text

Organisms Table Tab Organism + Organism = ？ Organism

Slide 198

Slide 198 text

忠実にすることが難しさに繋がるならその本質を見極めて取捨選択をすべき

Slide 199

Slide 199 text

Atomic Design はデザインシステム唯一無二の法律ではなく開発に関わるすべての人たちの指標として利用しよう

Slide 200

Slide 200 text

最終目標は結局

Slide 201

Slide 201 text

これに従ってデザインするからねやりやすい！

Slide 202

Slide 202 text

今日のお話は実践しやすくした入門編

Slide 203

Slide 203 text

今日のお話は実践しやすくした入門編更なる飛躍のためには原典を http://atomicdesign.bradfrost.com

Slide 204

Slide 204 text

Auther nrs HomePage https://nrslib.com Twitter @nrslib