Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
VueFes.pdf
takanori sugawara
November 03, 2018
5
8.5k
VueFes.pdf
takanori sugawara
November 03, 2018
Tweet
Share
More Decks by takanori sugawara
See All by takanori sugawara
人によっては_明日から使えるFigmaテクニック
ts020
1
510
AtomicDesignの運用方法
ts020
0
110
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
229
9.4k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
Become a Pro
speakerdeck
PRO
3
910
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.3k
Building Adaptive Systems
keathley
25
1.2k
Scaling GitHub
holman
451
140k
Product Roadmaps are Hard
iamctodd
35
6.9k
What the flash - Photography Introduction
edds
62
10k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Agile that works and the tools we love
rasmusluckow
319
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
253
12k
Transcript
Atomic Design σβΠϯͱ࣮ͷڱؒ ੁݪ ଇ VueFesJapan 2018
None
17͘Β͍σβΠφʔͱΤϯδχΞΛ ߦͬͨΓདྷͨΓͯ͠·͢ɻ ΠϯλϥΫγϣϯͱ σʔλϏδϡΞϥΠζ ͕ಘҙͰ͢
Interaction Designer UX Design UI Design Design System Management
Technical advisor ख͕Γͳ͍ॴͷϑΥϩʔ
Έͳ͞Μ ίϯϙʔωϯτ ࡞ͬͯ·͢ΑͶɻ
Atomic Design σβΠφʔͱΤϯδχΞʹಉ͡ ઢΛ༩͑·ͨ͠
σβΠφʔͱ ΤϯδχΞ ͔Γ߹͑ͯ·͔͢ʁ
ίϯϙʔωϯτͷ ͚ํͳΜ͔ҧ͏ͳʔ ͱ͔ࢥ͍·ͤΜ͔ʁ
ͦΓΌҧ͏ΜͰ͢
ͱ͍͏Θ͚Ͱઌि ΞϯέʔτͱͬͯΈ·ͨ͠ɻ
24໊ͷํʹճ͍ͨͩ ͖·ͨ͠ɻ
৬छ ͷਓ
ίϯϙʔωϯτʹؔΘΔ ਓن
ྖҬ
ར༻͍ͯ͠ΔσβΠϯπʔϧ FigmaϢʔβʔάϧʔϓʹڠྗΛ͍ͨͷͰ ͪΐͬͱόΠΞε͔͔ͬͯΔ͔
σβΠϯϥϑ·Ͱ ίʔυ্Ͱ্͛Δ ελΠϦϯάͱԋग़ ʹؔΘΔίʔυ σβΠφʔ͕ॻ͘ σβΠϯ͕͔ྃͯ͠Β ΤϯδχΞ͕ίʔυΛॻ͘ σβΠϯ͔Βίʔυ·Ͱ ҰਓͰΔ
ີ σβΠφʔͱσΟϨΫλʔͰ ࣈΛݟͯͲ͜Λ վળ͢Δ͔ܾΊ͍ͯΔ ϓϩτλΠϓΛ࡞͔ͬͯΒ ΤϯδχΞʹڞ༗ ϓϩηε
ίϯϙʔωϯτϕʔεͷར σβΠϯઢ σβΠϯͷϧʔϧ͕໌֬Խ͠ ଐਓੑʹΑΒͳ͍σβΠϯ͕ՄೳʹͳΔ ΧϥʔελΠϧͳͲʹઆ໌จΛॻ͘ͱ ϧʔϧΛकΓͳ͕ΒσβΠϯ͍͢͠ ࠶ར༻͍ͨ͢͠ΊɺσβΠϯ͕ݮΒͤΔ ݟͨͷʮσβΠϯʯͰͳ͘ɺ ϧʔϧͱͯ͠ͷʮσβΠϯʯΛ ͭ͘Δͱ͍͏ҙ͕ࣝࣗવͱժੜ͑Δ
Ұ෦͢ͱͯ͢Δ ίϛϡχέʔγϣϯίετ͕ݮΔ ਖ਼͍͠σβΠϯʹ͍ͭͯͷڞ௨ཧղΛ࣋ͪ ͍͢ શମͷ౷ҰײɺҰ؏ੑΛҡ͍࣋͢͠ ΤϯδχΞઢ ΤϯδχΞͰ͍ܰσβΠϯͰ͖ΔΑ͏ʹͳΓ ͦ͏ XD, Sketchͷ࡞ΓࠐΈ࠷ऴՌʹ ͳΒͳ͍͜ͱ͕ٯઆతͳར scoped cssͰBEMֶशίετ͕աࢿʹͳͬͨ StorybookΛར༻ͯ͠ ݟͨͷ֬ೝ͕Ͱ͖Δ σβΠϯͷஈ֊͔Β࠶ར༻ੑΛߟ͑ͨUIઃܭΛ͢ Δ͜ͱͰɺ CSSͳͲ࣮ͷ߹͕ࣗવͱߟྀ͞ΕΔ ΧϓηϧԽʹΑΓɺεΩϧͷΤϯδχΞɾσβ ΠφʔίΞͷίʔυʹ৮Εͣʹ։ൃʹίϛοτ
ίϯϙʔωϯτϕʔεͷ σβΠϯઢ ϏδϡΞϧͷࣗ༝͕Լ͕Δ ֶशίετ͕͔͔Δ σβΠϯͷཻͱػೳͷཻΛἧ͑ͯίϯϙʔ ωϯτઃܭΛߦΘͳ͚Εɺ ίϯϙʔωϯτͷछྨ͕૿͍͖͑ͯɺιʔε ίʔυʹѱӨڹ͕ͰΔ ίϯϙʔωϯτԽ͢Δج४ʹෆ͕҆͋Δ (1Օॴ͔ͬͯ͠ͳ͍ͷʹίϯϙʔωϯτԽ
͢Δͷʁ) ΤϯδχΞઢ UIతͳίϯϙʔωϯτͱɺσʔλϑϩʔతͳ ίϯϙʔωϯτͷ͚ํ͕ҟͳΔ͜ͱ͕͋Δ σβΠφʔatomicdesignͷ֓೦Λͬͯ͏ ඞཁ͕͋Δ ֶशίετ͕͔͔Δ ࡉ͔͗͢Δͱཧ͠ਏ͍ σβΠφʔͱΤϯδχΞͰίϯϙʔωϯτͷ ཻͷ؍͕ҧ͏ ཻΛ͚Δ͜ͱͰίϯϙʔωϯτ͕૿͑ͯ ໘ σβΠϯͱ࣮ऀཻ͕ͷೝ͕ࣝҟͳ͍ͬͯ Δͱӡ༻Ͱ͖ͳ͍
ΤϯδχΞɾσβΠφʔͱͷ ΓऔΓͰͲΜͳࣄ͕ى͍ͬͯ͜Δ͔ʁ ίϯϙʔωϯτ͕ग़ἧͬͯ͘ΔͱɺίϯϙʔωϯτͷΑΓཧAPIͷઃܭɺ͍͢͞ʹ͍ͭͯͯ͠ ͍·͢ɻ ࣮ͱσβΠϯʹဃ͕͋Δ ίϯϙʔωϯτͷඞཁੑΛσβΠφʔ͕ཧղ͠ͳ͍ ݁ہσβΠϯΛݩʹΤϯδχΞ͕ίϯϙʔωϯτԽ͍ͯ͠Δ ΤϯδχΞ͕BEMΛอक͢Δ͜ͱʹർΕ͍ͯΔɻ ίϯϙʔωϯτΨΠυతͳ͕ͳ͍ͱίϯϙʔωϯτ͕ར༻͞Εͳ͍ ίϯϙʔωϯτΛར༻͢ΔΑ͏ʹͳΓɺσβΠφʔಉ࢜ͰͷΓऔΓ͕͘͠ͳ͕ͬͨɺΤϯδχΞͱͷΓͱ
Γָʹͳͬͨ ࣮ΛΒͳ͍σβΠφʔʹͱͬͯɺӢΛ͔ͭΉΑ͏ͳʹฉ͑͜Δ෦͕͋ΔΑ͏ͰɺͦΕΛཧղͤ͞Δʹ ۤ࿑͍ͯ͠Δɻ
ࣝͷஅ͕େ͖͍
େࣄʹ͍ͯ͠Δ ࣄฑ͕ҧ͏
·ͣɺσβΠφʔ͕ͬͯ ͍ΔࣄΛཧͯ͠Έ·͠ΐ͏ɻ
UXσβΠϯ ୭͕Ϣʔβʔ͔ΛఆΊΔ ͲΜͳͷΛ࡞ͬͨΒϢʔβʔ͕تͿ͔ߟ͑Δ ੳͯ͠ɺϓϩτλΠϓ࡞ͬͯɺ ϢʔβʔʹͿ͚ͭͨΓͱ͔ͯ͠ՁݕূΛߦ͏
UIσβΠϯ UXσβΠϯͰಋ͍ͨՁʹରͯ͠ܗΛ༩͑Δɻ ՁΛϢʔβʔʹಧ͖͍͢ܗʹ͢Δ͜ͱ͕
σβΠϯ৭ʑ CI(ίʔϙʔϨʔτΞΠσϯςΟςΟ) ࣄۀઓུΛͱʹίϯηϓτΛ࿅ͬͨΓɻ ͔ΒͷUIΛׂΓग़ͨ͠Γɺ PR༻ͷαΠτͷσβΠϯͨ͠Γ
ͬͱ ৭Μͳࣄ͕͋Δ
ޮԽ͍͕ͨ͠ ͬͱେࣄͳͷɺ ϢʔβʔͷԠ
៉ྷͳߏΛ࡞Δࣄ େࣄ͚ͩͲ̍൪͡Όͳ͍
͍͍ͩͨ͜Μͳײ͡
Atomic DesignͳΒ ͦ͜Μͱ͜Ͳ͏ʹ͔ͳΔΜ͡Όʹ ͷʁ
ͳΒͳ͍Ͱ͢ɻ
͔֬ʹUIͷ෦ͷઃܭ ڞ௨ԽͰ͖Δ
ίϯϙʔωϯτͦͦ ΤϯδχΞϦϯάͷ֓೦
σβΠφʔՁʹ ܗঢ়Λ༩͑ ΤϯδχΞܗঢ়Λ࣮ݱ͢Δ
σβΠφʔʹͱͬͯࠓ·Ͱͦ ͜·Ͱؔ৺ࣄͰͳ͔ͬͨ
ͱݴͬͯαʔϏε ӡ༻Λଓ͚Δ͜ͱ େࣄͳՁ
ͪΐͬͱม͑·͢
ඈΜͰ 20͘Β͍લ
Java
ΦϒδΣΫτࢦ vs ߏԽࢦ
ઃܭΛඪ४Խ͢Δख๏
ΤϯδχΞಉ࢜Ͱ ͬͯ·ͨ͠
͍ͱ͔͍͠ͱ͔ݴΘΕͯ ͍ͨJava͕ݱࡏͰͨΓલ ʹͳΓ·ͨ͠ɻ
ཧ༝
ΈΜͳ׳Εͨ
࣮ߦڥͷੑೳ্͕͕Γ ߽తϓϩάϥϛϯάͰ ͳ͘ͳͬͨ
σβΠϯπʔϧʹ ͦ͏͍͏ࣄ͕ ى͍ͬͯ͜Δ
લ·Ͱɺίϯϙʔωϯτࢥߟͷσβ Πϯπʔϧ͋·Γྲྀߦ͓ͬͯΒͣɺ ίϯϙʔωϯτػೳͷͳ͍PhotoShopͰ Ұੜݒ໋σβΠϯ͍ͯͨ͠ͷͰ͢ɻ
׳Εͯͳ͍ΜͰ͢
SketchσβΠφʔʹ ͱͬͯͷJava
Sketch vs PhotoShop
खஈ͕ਐԽͨ͠ͷͰ ख๏มΘΔ
खஈ͕ਐԽͨ͠ͷͰ ख๏มΘΔ
·ͩ·ͩ πʔϧͷαϙʔτ͕Γͳ͍
͕࣌ؒղܾ͢Δ͜ͱ ݁ߏ͋Γͦ͏Ͱ͋Δ
͞ΒʹAtomicDesign ͳΜͯݴͬͨΒ
C͔͠ॻ͍ͨ͜ͱͷͳ͍ਓʹ JavaͷSpringBootͰΞϓϦॻ͚ ͱཁٻ͍ͯ͠ΔΑ͏ͳͷͱ͝ཧղ͍ͩ͘͞ɻ
ͱݴ͑ͳΜͱ͔͍ͨ͠
ͿͬͪΌ͚ɺ׳Εͯͳ͍ίϯϙʔ ωϯτ࡞Γ·Ͱ಄ճΓ·ͤΜ
ΤϯδχΞͱ͍͏ ੜ͖ ߹ཧԽͷԽ
Ͳ͏ʹ͔ͯ͠ ߹ཧԽ͍ͨ͠
σβΠφʔ ΤϯδχΞͰͳ͍
σβΠφʔΫϦΤΠςΟϒʹूதͯ͠ ϢʔβʔʹΘ͒ͱݴΘ͍ͤͨ͠ ΤϯδχΞ៉ྷͳߏΛ ࡞ͬͯอकίετΛԼ͍͛ͨ
ͦͦ৬͕ҧ͏ ͦΜͳ͜ͱͯ͠ΔͳΒ ͬͱྑ͍ϓϩμΫτΛ σβΠϯͯ͠΄͍͠
ͱݴ͑ ϑϩϯτΤϯυͷۤ͠Έ্ྲྀ͔ Βม͍͔͑ͯͳ͚Εվળ͠ͳ͍
ΜͰͲ͏͢Εྑ͍ͷ͞
ӡ༻ͰΧόʔ
ͦ͜Ͱஸ͍͍ ֓೦͕͋Γ·͢
Design Ops
“https://www.designbetter.co/designops-handbook/introducing-designops"
σβΠφʔࣗͷ ৬ೳʹઐ೦͍͢͠ ঢ়گΛ࡞Δ
σβΠϯϓϩηεΛ αϙʔτ͢ΔΈ ৫Λ࡞Δ
ྫ͑
ΤϯδχΞ͕σβΠϯπʔϧΛ ֮͑ɺίϯϙʔωϯτԽͷखຊ Λࣔ͢
σβΠϯΛαϙʔτ͢ΔΤϯ δχΞϦϯάͰ͖·ͤΜ͔ʁ
Ktsn͞Μͷπʔϧͷख ͍͢Δͱ͔
σβΠϯπʔϧ͔Β ΞΠίϯΛࣗಈੜ Ͱ͖ΔΑ͏ʹ͢Δͱ͔
σβΠφʔͷԣʹ͍ͭͯ ίϯϙʔωϯτͷ ࣸܦ͠ଓ͚Δͱ͔
ϓϩηεΛ Ͳ͏ʹ͔͢Δͱ͔
None
None
ख๏ΈΜͳख୳Γ
σβΠφʔ͕Δ͖ࣄʹઐ ೦ͤͯ͋͛͞ΕΔঢ়گΛ࡞Γ· ͠ΐ͏
ΤϯδχΞϦϯάͰαϙʔτ Ͱ͖Δࣄ͍ͬͺ͍͋Δͣ
Vue.js͍ͷօ͞Μ ͋ͳͨʹྗ͕͋Δʂ
σβΠφʔΛٹ͓͏ʂ
͋Γ͕ͱ͏͍͟͝·ͨ͠