Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
February 27, 2019
Design
14
7.3k
Cookpad TechConf 2019 Komerco Service Dev
Cookpad TechConf 2019にて「新規サービス開発を加速させる技術とデザイン」というタイトルでお話したスライドです。
https://techconf.cookpad.com/2019/
kenshir0f
February 27, 2019
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
kenshir0f
2
310
kenshir0f
6
4.2k
kenshir0f
2
720
kenshir0f
3
150
kenshir0f
6
5.8k
kenshir0f
9
4.3k
kenshir0f
4
4.8k
kenshir0f
4
540
kenshir0f
10
6.4k
Other Decks in Design
See All in Design
jvmal
0
300
gillianhei
0
160
lily2251390
0
450
xai
0
590
danpark001
0
3.4k
lily2251390
0
290
kignato1
0
190
majimasachi
1
200
gagews
0
160
nrasoul
0
350
datavisualizationjapan
0
270
gagews
0
210
Featured
See All Featured
shlominoach
176
7.5k
hannesfritz
28
950
sferik
610
55k
malarkey
392
61k
eitanlees
112
10k
rasmusluckow
318
18k
malarkey
193
8.6k
3n
163
22k
keithpitt
401
20k
jakevdp
775
200k
carmenhchung
31
1.5k
dougneiner
55
5.4k
Transcript
౻Ҫ ݠ࢜࿕ Komercoࣄۀ෦ ৽نαʔϏε։ൃΛ Ճͤ͞Δٕज़ͱσβΠϯ
ࣗݾհ 2 ɾ౻Ҫ ݠ࢜࿕(;͚͡Μ) ɾKomercoࣄۀ෦ / σβΠφʔ ɾ2017৽ଔೖࣾ ɹ @kenshir0f
3
Komerco 4 ɾ20186݄ʹϦϦʔε ɾྉཧָ͕͘͠ͳΔ৯ࡐ͏ͭΘɺྉཧಓ۩͕ങ͑ΔαʔϏε ɾݱࡏiOSΞϓϦͷΈαʔϏεΛఏڙ
5
Komercoͱ͍͏৽نࣄۀͷ σβΠφʔͷऔΓΈ
ΞδΣϯμ 7 ্ཱͪ͛ ։ൃ ϦϦʔε ։ൃ࣌ͷऔΓΈΛ͠·͢
KomercoͷαʔϏε։ൃ 8
࣌ͷ։ൃମ੍ 9 ɾiOSΤϯδχΞ 4 ɾσβΠφʔ 1 ɾσΟϨΫλʔ 1 ɾόοΫΤϯυFirebase
ٻΊΒΕΔ͜ͱεϐʔυ 10 ɾ༷શମͷମݧ͔Βܾ·Δ͜ͱ͋Δ ɹɹɾσβΠϯ͕ͳ͍ͱ༷͕ܾΊΒΕͳ͍ ɹɹɾ͖Ε͍ͳUI͋ͱ ɹɹɾࠓ͋ΔϦιʔεͰ͘͢࡞Δ
11 100% 9%41 AM komerco Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ
จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ
12 100% 9%41 AM komerco Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ
จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ ΫοΫύουͷϝΠϯΧϥʔ طଘͷΞΠίϯ
13 ؆୯ͳશମͷಈઢͷਤ
UIσβΠϯͷ՝ 14 ɾUI࡞ޙͷΤϯδχΞͱͷڞ༗͕େม ɹɹɾσβΠϯͷཤྺΛͭͭ͠ɺ ɹɹɾϓϩτλΠϓߋ৽ͯ͠ɺ ɹɹɾมߋՕॴΛڞ༗͢Δඞཁ͕͋ͬͨ ɹɹɾσβΠϯ͢Δ͕࣌ؒͲΜͲΜݮΔ…
σβΠϯ͕࣮εϐʔυʹ ؒʹ߹͓ͬͯΒΜ…
࣮εϐʔυʹ͍ͭͨ͘Ίʹม͑ͨ͜ͱ 16 1. ͍ͬͯΔσβΠϯπʔϧΛม͑Δ 2. σβΠϯίϯϙʔωϯτΛମܥతʹཧ͢Δ
1. σβΠϯπʔϧΛม͑Δ 17 Sketch Abstract Zeplin Marvel ཧ ڞ༗ ϓϩτλΠϓ
18 σβΠϯπʔϧ Figma
Figma͕ศར͗͢Δ 19 ɾΦϯϥΠϯ্Ͱಉ࣌ฤू͕Ͱ͖Δ → ڞ༗ָ͕ ɾσβΠϯมߋͷཤྺḷΕΔ → ཧָ͕ ɾϓϩτλΠϓ࡞ΕΔ →
ߋ৽ָ͕ ɾ ศར ɾ ࠷ߴ
2. σβΠϯίϯϙʔωϯτΛମܥతʹཧ͢Δ 20 ɾAtomicDesignΛಋೖ
AtomicDesignͱʁ 21 ɾίϯϙʔωϯτΛ࠷খ୯Ґʹ۠ͬͯ࠶ར༻ੑΛ্͛ͨͭ ɾཧ͘͢͠ɺϝϯς͍͢͠ ɹɹ→҆৺͠ͳ͕ΒίϯϙʔωϯτΛ͍͡ΕΔ ɾFigmaʹҠߦͯ͠Γ͘͢ͳͬͨ
SketchͰऔΓΜͩͱ͖ 22 ɾϑΝΠϧ͕େ͖͍ ɾॏ͍
SketchͰऔΓΜͩͱ͖ 23 ɾϑΝΠϧ͕େ͖͍ ɾॏ͍ ɾશମͷϑΝΠϧཧ͕େม ɾөʹ͕͔͔࣌ؒΔ Atoms Molecules Organisms
FigmaͰऔΓΜͩͱ͖ 24 Atoms Molecules Organisms ɾλϒͰݟ͍͢ ɾͻͱͭͷΞϓϦͰ݁
25
26
࣮εϐʔυʹ͍ͭͨ͘Ίʹม͑ͨ͜ͱ·ͱΊ 27 1. ͍ͬͯΔσβΠϯπʔϧΛม͑Δ ɹɹ→։ൃεϐʔυ্͕͕ͬͨ 2. σβΠϯίϯϙʔωϯτΛମܥతʹཧ͢Δ ɹɹ→εϐʔυ্͕ͬͯਫ਼ਆతͳෛ୲ݮͬͨ ɹɹ→ߏஙʹ͕͔͔࣌ؒΔ
͔͜͜Βߋʹ։ൃεϐʔυΛ ্͛ΔͨΊʹऔΓΜͩ͜ͱ
UIΨΠυϥΠϯͷ࡞ 29
UIΨΠυϥΠϯ 30 ɾFigma্ʹશମͰڞ௨ͷϧʔϧΛ࡞ ɾ֬ೝͷίϛϡχέʔγϣϯΛݮΒ͓ͯ͠ޓ͍ͷ࡞ۀ࣌ؒΛ૿͢ ɾ݁Ռͱͯ͠։ൃεϐʔυ্͕͕Δ
31
32
ΞΠίϯϑΥϯτͷ࡞ 33
34
ΞΠίϯը૾ͷ 35 ɾiOS@2x, @3xͱը૾͕ෳඞཁ ɹɹɾόʔδϣϯ͝ͱʹը૾Λอଘ͢Δͷ༰ྔͱཧ͕ݫ͍͠ ɾཧը໘(Web)։ൃ͍ͯͨ͠ͷͰڞ௨Ϧιʔεʹ͍ͨ͠
36
ΞΠίϯϑΥϯτͷ࡞ 37 ɾϑΥϯτʹͯ͠Ϧιʔεͻͱͭʹ ɹɹ→WebͱiOSͰڞ௨Ͱָ͑ͯ ɾมߋཤྺGitHub EnterpriseͰཧ ɹɹ→GitHub PagesͰར༻ՄೳͳΞΠίϯ͕ݟΕΔ
38
Ξχϝʔγϣϯͷಋೖ 39
ϦονͳମݧΛٻ͢Δ 40 ɾؾ࣋ͪͷ͍͍ΠϯλϥΫγϣϯͱ ɹ։ൃτϨʔυΦϑ ɾͦͷͨΊʹ࣮ݱՄೳੑߟྀ ɾௐࠪΛؚΊͯͲ͜·Ͱ࣮ݱͰ͖Δ͔ ɹݕূ
Ξχϝʔγϣϯಋೖ·ͰͷྲྀΕ 41 1. Ξχϝʔγϣϯͷ࡞ίετ͕͍͔ʁ 2. ؆୯ʹಋೖͰ͖Δ͔ʁ 3. iOSɺwebͰಉҰͷΠϯλϥΫγϣϯΛ࠶ݱͰ͖Δ͔ʁ
Ξχϝʔγϣϯಋೖ·ͰͷྲྀΕ 42 1. Ξχϝʔγϣϯͷ࡞ίετ͕͍͔ʁ 2. ؆୯ʹಋೖͰ͖Δ͔ʁ 3. iOSɺwebͰಉҰͷΠϯλϥΫγϣϯΛ࠶ݱͰ͖Δ͔ʁ ɹɹ→ Lottieͷಋೖ
Lottieͷಋೖ 43 ɾjsonϑΝΠϧ͔ΒΞχϝʔγϣϯΛ࣮ߦͰ͖Δɻ ɹɹ→AfterEffects͔Β࡞Մೳ → 1. ࡞ίετ͍ ɾiOSͱwebͰ͍ճ͔ͤͯͭܰྔ → 3.ಉҰͷΠϯλϥΫγϣϯΛ࠶ݱՄೳ
ɾखݩͰ؆୯ͳϓϩδΣΫτΛ࡞ͬͯݕূͰ͖ͨΒಋೖ͍͚ͦ͏ʁ
iOS (Swift) 44 import Lottie private let likeAnimationView = LOTAnimationView(name:
"add_like.json") likeAnimationView.play { [weak self] finished in self?.update() }
Web (React, Typescript) 45 import Lottie from ‘react-lottie’ const option
= { loop: true, autoplay: true, animationData: require(‘./loading.json’) } <Lottie options={ option } width={ 100 } height={ 100 } />
ݕূͰ͖ͨͷͰ࣮͢Δ 46 ɾ͋ͱΤϯδχΞͱ૬ஊͯ͠ॲཧΛॻ͍͍͚ͯͩ͘ ɹɹ→ࠓޙΤϯδχΞίʔυϨϏϡʔͱ࣮ߦ݁Ռͷ֬ೝͷΈʹͳΔ ɹɹ→σβΠϯ͔Β࣮·ͰσβΠφʔͰ݁Ͱ͖ΔΈΛ༻ҙ
ίϯϙʔωϯτ 47
σβΠϯίϯϙʔωϯτΛίʔυʹม͑Δ 48 ɾσβΠϯσʔλΛReactComponentԽ ɹɹɾλοϓ࣌ͷڍಈͳͲΛ࣮ࡍʹweb্Ͱ֬ೝͰ͖Δ ɹɹɾσβΠϯίϯϙʔωϯτΛ͙͢ʹ࣮Ͱ͑Δ ɹɹɾࡉ͔͍༷ΛίʔυͰ֬ೝͰ͖Δ
49
ίϯϙʔωϯτ༷ॻͷ࡞ 50 ɾDoczΛར༻ ɾmdxϑΝΠϧΛͭ͘Δ͚ͩͭ͘ΕΔ ɹɹ→ϝϯςφϯείετ͕͍ ɹɹ→ͲͷpropsΛड͚औΕΔ͔ͳͲ༷֬ೝͰ͖Δ
Button.mdx 51 import Button from './../components/Button' import { Playground, PropsTable
} from ‘docz’ # Button <PropsTable of={ Button } /> <Playground> <Button color={ 'primary' }>Primary Button</Button> </Playground>
52
σβΠϯΛίʔυԽ͢Δཧ༝ 53 ɾ࣮ࡍʹΘΕΔڥͰಈ࡞֬ೝͰ͖Δ ɾσβΠϯมߋͷ࣮ΛͰ͖Δ͚ͩσβΠφʔ͕ෛ୲ ɹɹ→ΤϯδχΞػೳ։ൃମݧͷվળʹ࣌ؒΛׂ͚Δ ɾເ: ίϯϙʔωϯτΛͭͳ͙͚ͩͰ͍͍ײ͡ʹσβΠϯ͞ΕΔੈք
54
ٕज़Λศརʹ׆༻ͯ͠ ΤϯδχΞͷෛ୲ΛݮΒ͢
·ͱΊ 56 ɾKomercoͷ։ൃεϐʔυΛ্͛ΔऔΓΈʹ͍ͭͯͷ͓Ͱͨ͠ɻ ɹɹɾσβΠϯ͚ͩͰͳٕ͘ज़Λ׆༻ͯ͠ΤϯδχΞΛαϙʔτ͢Δ ɹɹɾ݁Ռͱͯ͠νʔϜશମͷ։ൃͷεϐʔυ্͕͕Δ ɾશͯϢʔβʔʹՁΛ͘͢ಧ͚ΔͨΊ
Thank you!