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
8.1k
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
Figma with Cookpad
kenshir0f
11
6.1k
How Cookpad use Figma
kenshir0f
2
550
Easy Semantic HTML Structure for Komerco Team
kenshir0f
6
5k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
860
Introduce Atomic Design with small rework
kenshir0f
3
200
Basic css note for Komerco Team
kenshir0f
6
6.7k
Design for Behavior and Impact
kenshir0f
9
4.5k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.1k
s-dev-talks#2-komerco-team-building
kenshir0f
4
650
Other Decks in Design
See All in Design
Детский парк Фили
zapoimu
0
540
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
visional_design
2
3k
Nel: A Limbo Odessy
educe_art
0
160
クラスメソッドアプリデザインドリルver1
cmdesignteam
1
1.7k
Untitled (Baseball)
heewon
2
310
My Yahoo Refresh Overview
xuechunwu
0
260
今から始めるFigma超入門
448jp
0
540
リサーチ文化を組織に埋め込むために実践したこと
hiranotomoki
4
1.9k
なみなみかみっ
naminamikami2021
1
240
The Frog Bandit
senamiyazaki
0
130
ダークモード対応に困ったときの便利な処方箋 / Color scheme for dark mode
featherplain
3
560
Rakuma Developers
nojirakuten
0
1.3k
Featured
See All Featured
Web development in the modern age
philhawksworth
197
9.3k
Building Applications with DynamoDB
mza
83
4.7k
Debugging Ruby Performance
tmm1
65
10k
Teambox: Starting and Learning
jrom
123
7.7k
Code Review Best Practice
trishagee
43
8.9k
Building a Scalable Design System with Sketch
lauravandoore
447
30k
GitHub's CSS Performance
jonrohan
1020
420k
Unsuck your backbone
ammeep
659
55k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
4
500
Fontdeck: Realign not Redesign
paulrobertlloyd
73
4.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
19
1.2k
A better future with KSS
kneath
225
15k
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!