Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Cookpad TechConf 2019 Komerco Service Dev
Search
kenshir0f
February 27, 2019
Design
14
9k
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
14
11k
How Cookpad use Figma
kenshir0f
3
770
Easy Semantic HTML Structure for Komerco Team
kenshir0f
5
5.8k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
1k
Introduce Atomic Design with small rework
kenshir0f
3
240
Basic css note for Komerco Team
kenshir0f
6
7.6k
Design for Behavior and Impact
kenshir0f
9
4.8k
tech-kitchen-#16-komerco-design
kenshir0f
4
5.4k
s-dev-talks#2-komerco-team-building
kenshir0f
4
800
Other Decks in Design
See All in Design
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2k
スタートアップ創業時の CXOのお仕事
tsuyoshika
0
1.4k
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
510
アイキャッチはFigmaで簡単に作れる!
kubosaya
0
800
ノベルティの勘所 / Communication DesignNight vol.01
transit_kix
0
720
デザイン組織成長における負債解消の取り組みを赤裸々に語る
sugiyama_sukedachi
1
770
Desarrollo de Carrera en Diseño y Producto
solmesz1
0
150
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
260
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
130
LT:11年前の「ここにいる」の話 #fukuoka_a11yconf_前夜祭
garyuten
0
110
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
1.9k
プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
120
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
8
8.2k
The Pragmatic Product Professional
lauravandoore
24
5.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
KATA
mclloyd
14
11k
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Designing the Hi-DPI Web
ddemaree
275
33k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.5k
The Brand Is Dead. Long Live the Brand.
mthomps
48
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
28
5.9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
240
1.2M
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Done Done
chrislema
178
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!