Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
tech-kitchen-#16-komerco-design
kenshir0f
July 19, 2018
Design
4
5.1k
tech-kitchen-#16-komerco-design
2018/07/19で発表したTech Kitchen #16 の登壇資料です。
Komercoのサービス立ち上げで取り組んだデザインの話をしました。
kenshir0f
July 19, 2018
Tweet
Share
More Decks by kenshir0f
See All by kenshir0f
Figma with Cookpad
kenshir0f
11
6.2k
How Cookpad use Figma
kenshir0f
2
550
Easy Semantic HTML Structure for Komerco Team
kenshir0f
6
5.1k
Cookpad Spring Internship 2019 Service Development Course
kenshir0f
2
860
Cookpad TechConf 2019 Komerco Service Dev
kenshir0f
14
8.1k
Introduce Atomic Design with small rework
kenshir0f
3
210
Basic css note for Komerco Team
kenshir0f
6
6.8k
Design for Behavior and Impact
kenshir0f
9
4.5k
s-dev-talks#2-komerco-team-building
kenshir0f
4
660
Other Decks in Design
See All in Design
Talent Show-Down (2022)
gyroidz
1
200
"Friendship" - Personal Story Sequence
innsamity
1
320
Webサイトをつくってきた人々の進化 ― Era Web Architect の30人のインタビューから
bookslope
0
470
アクセシビリティに興味のあるデザイナーに向けて
cybozuinsideout
PRO
1
10k
tsunasapo_branch-concept202007
tsunasapo
0
180
ポートフォリオの作り方
yonekura907
0
640
Sponge Bob Exercise Sequence
diablicos_
0
220
Cat Seance
emmamsketches
0
160
Doll.pdf
yzhang0425
0
240
Misconceptions of Design Thinking
yosukeonishi
3
370
dnd board
emmamsketches
0
160
UI/UXデザイナーになるには 日常編
kimurakei
0
410
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
19
3k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
What the flash - Photography Introduction
edds
62
10k
GraphQLの誤解/rethinking-graphql
sonatard
28
6.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
10
3.4k
Web Components: a chance to create the future
zenorocha
303
40k
GitHub's CSS Performance
jonrohan
1020
420k
The Invisible Side of Design
smashingmag
290
48k
Typedesign – Prime Four
hannesfritz
34
1.4k
How to name files
jennybc
40
61k
Bash Introduction
62gerente
597
210k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
315
19k
Transcript
Cookpad Inc. θϩ͔Β͡ΊΔαʔϏεͷσβΠϯ ౻Ҫݠ࢜࿕ 2018.07.19 Tech Kitchen #16
Cookpad Inc. All Rights Reserved. ࣗݾհ ౻Ҫݠ࢜࿕ @kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦ϦʔυσβΠφʔ
2017৽ଔೖࣾࣾձਓ2 KomercoͷσβΠϯશମΛ୲ ࠷ۙReactॻ͍ͨΓFigmaͰޮԽͨ͠Γ ໌͔ΒσϯϚʔΫʹग़ு $**%4VNNFS8PSL4IPQ
ࠓ্ཱ͔ͪ͛ΒϦϦʔε·Ͱͷྺ࢙Λ͓͠·͢ σβΠϯͷ؍͔Β
Cookpad Inc. All Rights Reserved. ࠓ͢͜ͱ ɾϒϥϯσΟϯάσβΠϯ ɾαʔϏε։ൃͷσβΠϯ
KomercoͷϒϥϯσΟϯάσβΠϯ
Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 201710݄ 20186݄ νʔϜൃ ΞϓϦϦϦʔε
ϒϥϯυணख αʔϏε։ൃ 20181݄ 201711݄
Cookpad Inc. All Rights Reserved. ্ཱͪ͛࣌ʹσβΠφʔ͕࠷ॳʹΔ͜ͱ ɾϓϩμΫτΦʔφʔͱώΞϦϯά ɾͷதͰίϯηϓτΛগͣͭ͠ՄࢹԽ͍ͯ͘͠ ɾॳʮ$SFBUPST.BSLFU Ծ
ʯͱ͍͏໊લͰਐߦ
Cookpad Inc. All Rights Reserved. ΦʔφʔͱͷώΞϦϯά CMΛͲΜͳαʔϏεʹ͍ͨ͠Ͱ͔͢ʁ ࣭ ͳΔ΄ͲɺͰτʔϯ͜ΜͳΠϝʔδͰ͔͢ʁ ఏҊ
αʔϏε͜Μͳײ͡ʹʙʙίϯηϓτʙʙ ͦΜͳײ͡ɻͰ͜͜͜͏͍͏ͷ͡Όͳͯ͘ʙ Φʔφʔ
Cookpad Inc. All Rights Reserved. ώΞϦϯάͰҙࣝ͢Δ͜ͱ ɾͦͷதͰॏཁͳϫʔυΛϝϞͯ͠ɺੵΈ্͍͛ͯ͘ ɾ࣭ͱఏҊΛ܁Γฦͯ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘
Cookpad Inc. All Rights Reserved. ίϯηϓτώΞϦϯά࣌ͷࢿྉ ɾαʔϏεͷίϯηϓτ ॏཁͳϫʔυΛϝϞͯ͠ೝࣝΛ͢Γ߹ΘͤΔ
Cookpad Inc. All Rights Reserved. τϯϚφώΞϦϯά࣌ͷࢿྉ ϜʔυϘʔυͰτʔϯͷΠϝʔδΛ͢Γ߹ΘͤΔ
Cookpad Inc. All Rights Reserved. ώΞϦϯάͨ͠༰Λܗʹམͱ͠ࠐΉ ɾϒϥϯυΧϥʔͰαʔϏεͷੈք؍Λ͑Δ ɾϒϥϯυϓϩϛεͰαʔϏεͷࢦΛݻΊΔ
Cookpad Inc. All Rights Reserved. ϒϥϯυϓϩϛε σβΠϯγεςϜͷ༰Λࡌ͍ͤͯΔͷͰ໊લ͕ܾ·ͬͨޙʹͳ͍ͬͯ·͢
Cookpad Inc. All Rights Reserved. ϒϥϯυΧϥʔ ίϝϧίάϦʔϯ ίϝϧίϒϥϯ ϝΠϯΧϥʔ৯ੜ໋Λද͢ɻ DPPLQBEͷΦϨϯδͱΕ͍ͯΔͨΊαʔϏεͷ۠ผΛ͚͍ͭ͢ɻ
αϒΧϥʔੜ׆Λද͢ɻ ϝΠϯΧϥʔͱΈ߹ΘͤͯKomercoͷੈքΛ࣮ݱ͢Δ
Cookpad Inc. All Rights Reserved. ͦͷ࣌ظʹαʔϏεͷ໊শ͕ܾ·Δ ɾαʔϏε໊শʮKomercoʯʹܾఆ ɾ໊લܾ·ͬͨ͠ϩΰΛ࡞Ζ͏ ɾଞʹʮϦίϛμʯʮσϦϚϧʯͳͲ͕ީิʹ
Cookpad Inc. All Rights Reserved. ϩΰϚʔΫ γϯϘϧϚʔΫ ϩΰλΠϓ
Cookpad Inc. All Rights Reserved. ϩΰ੍࡞ͷϓϩηε ɾϩΰίϯηϓτͱಉ͘͡গͣͭ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘ ɾ·ͣϩΰλΠϙ͔ΒܾΊ͍ͯͬͨ
Cookpad Inc. All Rights Reserved. ڝ߹ௐࠪͱϚοϐϯά
Cookpad Inc. All Rights Reserved. λΠϙάϥϑΟͷΣΠτݕূ
Cookpad Inc. All Rights Reserved. Χʔχϯάͱࣼମͷݕূ
Cookpad Inc. All Rights Reserved. ࠷ޙࡉ͔͍ௐΛͯ͠ϩΰλΠϙ ͊࣍͞γϯϘϧΛ࡞Δͧʂʂʂ
Cookpad Inc. All Rights Reserved. γϯϘϧϚʔΫͷ࡞ ɾߤ͢ΔPS[ ɾ࣮ֆΛඳ͘ܦݧ͕΄ͱΜͲͳͯ͘ϥϑҊ͕શ͘ग़ͣ མॻ͖ͷϑγ̋μω ɾ͜ͷ࣌ظ݂໎ͬͯͯύοͱર͍ͨΞΠσΞΛܗʹ͍ͯͨ͠
Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ
Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ ΞδΧϯ͔Α ͥΜͥΜҧ͏ ΕͨφΠϑʁ Φʔφʔ
ʔɺͲ͏͢ΓΌ͑͑Μ ؤுΕ
Cookpad Inc. All Rights Reserved. ͍ͬͨΜৼΓฦΔ ɾڝ߹ௐࠪΛϕʔεʹ࣭ͱఏҊͰࠓ·Ͱ͏·͖ͬͯͨ͘ ɾϩδοΫΛཱͯͯগͣͭ͠ਐΊͯΈΑ͏
Cookpad Inc. All Rights Reserved. গͣͭ͠ݟ͑ͯ͘Δ ྉཧ͏ͭΘ ख࡞Γ͔ͩΒՁ͕͋Δ ϒϥϯυϓϩϛε
Cookpad Inc. All Rights Reserved. ϥϑҊΛϒϥογϡΞοϓ
Cookpad Inc. All Rights Reserved.
Cookpad Inc. All Rights Reserved. ্ཱ͔ͪ͛ΒϒϥϯσΟϯάσβΠϯ·ͱΊ ɾௐࠪͱ࣭ͱఏҊ͕ϝΠϯ ɾࣗͷΞΠσΞૣ͍ஈ֊ͰݟͤͯೝࣝΛ͢Γ߹ΘͤΔ ɾΞΠσΞ͚ͩΛઌߦͤ͞Δͱݫ͍͠ɺ͔͚ͬͭͯ͜͢Έ·ͤΜͰͨ͠ ɾϒϥϯσΟϯάαʔϏεͷ͋ΒΏΔͰʹೖΔͷͰ࠷ॳʹखΛ͚Δ
αʔϏε։ൃͷσβΠϯ
Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 201710݄ 20186݄ νʔϜൃ ΞϓϦϦϦʔε
ϒϥϯυணख αʔϏε։ൃ 20181݄ 201711݄
Cookpad Inc. All Rights Reserved. ։ൃॳظͷϝϯόʔ J04ΤϯδχΞ σβΠφʔ σΟϨΫλʔ $$$
% & 5໊ͷνʔϜ ฏۉྸ25ࡀ
Cookpad Inc. All Rights Reserved. ։ൃॳظͰେʹ͍ͯͨ͜͠ͱ ɾϢʔβʔͷମݧΛ࠷༏ઌʹߟ͑ΔɺUI͋ͱ ɾૉૣ͘ϓϩτλΠϓͰԾઆΛݕূ ΠϯλϏϡʔ ɾσβΠϯͷํੑΛϓϩτλΠϓͰνʔϜͰڞ༗
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ શମతʹແ࠼৭ cookpadͷΦϨϯδͰ༻ cookpadͷֆจࣈ
Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco
Λग़͢Δ γϣοϓཧ ϝοηʔδ ཧ จཧ ཧ ग़தͷ͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺणෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ શମతʹແ࠼৭ cookpadͷΦϨϯδͰ༻ cookpadͷֆจࣈ ࠓ͋ΔϦιʔεͰૉૣ͘.71Λ࡞Δ
Cookpad Inc. All Rights Reserved. ϒϥογϡΞοϓޙ ϦϦʔεલ ޙͰΞΠίϯΛద༻ ৭ޙ͔Β
Cookpad Inc. All Rights Reserved. αʔϏεͷσβΠϯશମ૾͕ݟ͖͑ͯͨΒ ɾʮϢʔβʔͷମݧʯͱʮ࣮ͷʯΛߟྀͯ͠։ൃ͢Δ ɾ։ൃ͍͢͠σβΠϯΛঃʑʹߟ͍͑ͯ͘ ɾUI͋͘·Ͱ෭࣍తɺͱʹ͔͘ମݧΛ࠷༏ઌ
։ൃ͍͢͠σβΠϯΛҙࣝ͢Δ
Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯΛ࡞Δ ɾڞ௨Խ͍ͯ͠ΔΧϥʔίϯϙʔωϯτΨΠυϥΠϯʹ·ͱΊΔ ɾσβΠφʔϧʔϧΛৼΓସ͑ΕΔͷͰ౷ҰੑΛҙ͍ࣝ͢͠
Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯ
Cookpad Inc. All Rights Reserved. ΤϯδχΞͱڠྗͯ͠νʔϜͷ։ൃεϐʔυΛ্͛Δ ɾσβΠϯ10%͘Β͍Ͱ༷ΛΤϯδχΞʹ֬ೝ͔ͯ͠ΒਐΊΔ ɾ؆୯ͳमਖ਼ר͖औΔࢫΛ͑Δ 6*ௐɺόάमਖ਼ɺը૾ͷࠩ͠ସ͑ͳͲ ɾେࣄͳ͜ͱɺνʔϜͱͯ͠ૉૣ͘ՁΛఏڙ͢Δ͜ͱ
Cookpad Inc. All Rights Reserved. ΦʔτϨΠΞτΛमਖ਼ͨ͠ྫ ෆࣗવͳ༨ന ϨΠΞτ่Ε
Cookpad Inc. All Rights Reserved. ؆୯ͳ࡞ۀͦ͜ר͖औΔ
Cookpad Inc. All Rights Reserved. ʹΑͬͯಘҙྖҬΛΧόʔ͢Δ ɾiOSΤϯδχΞϝΠϯͷiOS։ൃʹूதͰ͖Δ ɾwebͷ։ൃڥΤϯδχΞʹ૬ஊͯ͠ม͍͑ͯͬͨ ɾKomercoͷςΟβʔαΠτσβΠϯ͔Β࣮·Ͱશ෦୲
Cookpad Inc. All Rights Reserved. ϦϦʔεલޙͷ։ൃڥͷมԽ ϦϦʔεલ ϦϦʔεޙ ίϯύΠϧޙͷHTMLΛhostingʹ͚ͬΔ Next.js
+ ReactͰfunctionΛ௨ͯ͠SSR ςΟβʔαΠτɺཧը໘ɺσβΠϯγεςϜͰڞ௨Խ
Cookpad Inc. All Rights Reserved.
Cookpad Inc. All Rights Reserved. αʔϏε։ൃͷσβΠϯ·ͱΊ ɾػೳΛ࡞ΔͷͰͳ͘ɺମݧΛ࡞Δɻࡉ͔͍UIޙ͔Βվળ ɾσβΠφʔͷલʹαʔϏε։ൃऀͳΜͧʂʂʂʂ ɾνʔϜͱͯ͠ૉૣ͘ՁΛఏڙ͢Δ͜ͱΛҙࣝͯ͠ಈ͘
͍͞͝ʹ ɾKomercoνʔϜ݈͘͢͝શͰಇ͖͍͢ ɾଞʹΓ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ϑΥτΨΠυͷ։ൃൿͳͲ ɾΫοΫύουσβΠφʔΛืू͍ͯ͠·͢ʂʂʂ