tech-kitchen-#16-komerco-design

2018/07/19で発表したTech Kitchen #16 の登壇資料です。
Komercoのサービス立ち上げで取り組んだデザインの話をしました。

Transcript

1. Cookpad Inc. θϩ͔Β͸͡ΊΔαʔϏεͷσβΠϯ ౻Ҫ
   ݠ࢜࿕ 2018.07.19 Tech Kitchen #16
2. Cookpad Inc. All Rights Reserved. ࣗݾ঺հ ౻Ҫݠ࢜࿕ @kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦
   ϦʔυσβΠφʔ 
   2017೥৽ଔೖࣾ
   ࣾձਓ2೥໨ 
   KomercoͷσβΠϯશମΛ୲౰ 
   ࠷ۙ͸Reactॻ͍ͨΓFigmaͰޮ཰Խͨ͠Γ 
   ໌೔͔ΒσϯϚʔΫʹग़ு $**%
   4VNNFS
   8PSL
   4IPQ
3. ࠓ೔͸্ཱ͔ͪ͛ΒϦϦʔε·Ͱͷྺ࢙Λ͓࿩͠·͢ σβΠϯͷ؍఺͔Β
4. Cookpad Inc. All Rights Reserved. ࠓ೔࿩͢͜ͱ ɾϒϥϯσΟϯάσβΠϯ ɾαʔϏε։ൃͷσβΠϯ
5. KomercoͷϒϥϯσΟϯάσβΠϯ
6. Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 2017೥10݄ 2018೥6݄ νʔϜൃ଍ ΞϓϦϦϦʔε ϒϥϯυணख αʔϏε։ൃ 2018೥1݄ 2017೥11݄
7. Cookpad Inc. All Rights Reserved. ্ཱͪ͛࣌ʹσβΠφʔ͕࠷ॳʹ΍Δ͜ͱ ɾϓϩμΫτΦʔφʔͱώΞϦϯά ɾ࿩ͷதͰίϯηϓτΛগͣͭ͠ՄࢹԽ͍ͯ͘͠ ɾ౰ॳ͸ʮ$SFBUPST
   .BSLFU Ծ ʯͱ͍͏໊લͰਐߦ
8. Cookpad Inc. All Rights Reserved. ΦʔφʔͱͷώΞϦϯά CMΛͲΜͳαʔϏεʹ͍ͨ͠Ͱ͔͢ʁ ࣭໰ ͳΔ΄ͲɺͰ͸τʔϯ͸͜ΜͳΠϝʔδͰ͔͢ʁ ఏҊ αʔϏε͸͜Μͳײ͡ʹʙʙίϯηϓτ͸ʙʙ ͦΜͳײ͡ɻͰ΋͜͜͸͜͏͍͏ͷ͡Όͳͯ͘ʙ Φʔφʔ
9. Cookpad Inc. All Rights Reserved. ώΞϦϯάͰҙࣝ͢Δ͜ͱ ɾͦͷதͰॏཁͳϫʔυΛϝϞͯ͠ɺੵΈ্͍͛ͯ͘ ɾ࣭໰ͱఏҊΛ܁Γฦͯ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘
10. Cookpad Inc. All Rights Reserved. ίϯηϓτώΞϦϯά࣌ͷࢿྉ ɾαʔϏεͷίϯηϓτ ॏཁͳϫʔυΛϝϞͯ͠ೝࣝΛ͢Γ߹ΘͤΔ
11. Cookpad Inc. All Rights Reserved. τϯϚφώΞϦϯά࣌ͷࢿྉ ϜʔυϘʔυͰτʔϯͷΠϝʔδΛ͢Γ߹ΘͤΔ
12. Cookpad Inc. All Rights Reserved. ώΞϦϯάͨ͠಺༰Λܗʹམͱ͠ࠐΉ ɾϒϥϯυΧϥʔͰαʔϏεͷੈք؍Λ੔͑Δ ɾϒϥϯυϓϩϛεͰαʔϏεͷࢦ਑ΛݻΊΔ
13. Cookpad Inc. All Rights Reserved. ϒϥϯυϓϩϛε σβΠϯγεςϜͷ಺༰Λࡌ͍ͤͯΔͷͰ໊લ͕ܾ·ͬͨޙʹͳ͍ͬͯ·͢
14. Cookpad Inc. All Rights Reserved. ϒϥϯυΧϥʔ ίϝϧίάϦʔϯ ίϝϧίϒϥ΢ϯ ϝΠϯΧϥʔ͸৯ੜ໋Λද͢྘ɻ
    DPPLQBEͷΦϨϯδͱ཭Ε͍ͯΔͨΊαʔϏεͷ۠ผΛ͚ͭ΍͍͢ɻ αϒΧϥʔ͸ੜ׆Λද͢஡ɻ
    ϝΠϯΧϥʔͱ૊Έ߹ΘͤͯKomercoͷੈքΛ࣮ݱ͢Δ
15. Cookpad Inc. All Rights Reserved. ͦͷ࣌ظʹαʔϏεͷ໊শ͕ܾ·Δ ɾαʔϏε໊শ͸ʮKomercoʯʹܾఆ ɾ໊લ΋ܾ·ͬͨ͠ϩΰΛ࡞Ζ͏ ɾଞʹ΋ʮϦίϛμʯ΍ʮσϦϚϧʯͳͲ͕ީิʹ
16. Cookpad Inc. All Rights Reserved. ϩΰϚʔΫ γϯϘϧϚʔΫ ϩΰλΠϓ
17. Cookpad Inc. All Rights Reserved. ϩΰ੍࡞ͷϓϩηε ɾϩΰ΋ίϯηϓτͱಉ͘͡গͣͭ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘ ɾ·ͣ͸ϩΰλΠϙ͔ΒܾΊ͍ͯͬͨ
18. Cookpad Inc. All Rights Reserved. ڝ߹ௐࠪͱϚοϐϯά
19. Cookpad Inc. All Rights Reserved. λΠϙάϥϑΟͷ΢ΣΠτݕূ
20. Cookpad Inc. All Rights Reserved. Χʔχϯάͱࣼମͷݕূ
21. Cookpad Inc. All Rights Reserved. ࠷ޙࡉ͔͍ௐ੔Λͯ͠ϩΰλΠϙ͸׬੒ ͊࣍͞͸γϯϘϧΛ࡞Δͧʂʂʂ
22. Cookpad Inc. All Rights Reserved. γϯϘϧϚʔΫͷ࡞੒ ɾ௒೉ߤ͢ΔPS[ ɾ࣮͸ֆΛඳ͘ܦݧ͕΄ͱΜͲͳͯ͘ϥϑҊ͕શ͘ग़ͣ མॻ͖ͷϑγ̋μω ɾ͜ͷ࣌ظ͸݂໎ͬͯͯύοͱર͍ͨΞΠσΞΛܗʹ͍ͯͨ͠
23. Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ
24. Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ ΞδΧϯ͔Α ͥΜͥΜҧ͏ ੾ΕͨφΠϑʁ Φʔφʔ
25. ͸ʔɺͲ͏͢ΓΌ͑͑Μ΍ ؤுΕ
26. Cookpad Inc. All Rights Reserved. ͍ͬͨΜৼΓฦΔ ɾڝ߹ௐࠪΛϕʔεʹ࣭໰ͱఏҊͰࠓ·Ͱ͏·͘΍͖ͬͯͨ ɾϩδοΫΛཱͯͯগͣͭ͠ਐΊͯΈΑ͏
27. Cookpad Inc. All Rights Reserved. গͣͭ͠ݟ͑ͯ͘Δ ྉཧ΋͏ͭΘ΋
    ख࡞Γ͔ͩΒՁ஋͕͋Δ ϒϥϯυϓϩϛε
28. Cookpad Inc. All Rights Reserved. ϥϑҊΛϒϥογϡΞοϓ
29. Cookpad Inc. All Rights Reserved.
30. Cookpad Inc. All Rights Reserved. ্ཱ͔ͪ͛ΒϒϥϯσΟϯάσβΠϯ·ͱΊ ɾௐࠪͱ࣭໰ͱఏҊ͕ϝΠϯ ɾࣗ෼ͷΞΠσΞ͸ૣ͍ஈ֊ͰݟͤͯೝࣝΛ͢Γ߹ΘͤΔ ɾΞΠσΞ͚ͩΛઌߦͤ͞Δͱݫ͍͠ɺ͔͚ͬͭͯ͜͢Έ·ͤΜͰͨ͠ ɾϒϥϯσΟϯά͸αʔϏεͷ͋ΒΏΔ઀఺Ͱ໨ʹೖΔͷͰ࠷ॳʹखΛ෇͚Δ
31. αʔϏε։ൃͷσβΠϯ
32. Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 2017೥10݄ 2018೥6݄ νʔϜൃ଍ ΞϓϦϦϦʔε ϒϥϯυணख αʔϏε։ൃ 2018೥1݄ 2017೥11݄
33. Cookpad Inc. All Rights Reserved. ։ൃॳظͷϝϯόʔ J04
    ΤϯδχΞ σβΠφʔ σΟϨΫλʔ $$$ % & 5໊ͷνʔϜ ฏۉ೥ྸ25ࡀ
34. Cookpad Inc. All Rights Reserved. ։ൃॳظͰେ੾ʹ͍ͯͨ͜͠ͱ ɾϢʔβʔͷମݧΛ࠷༏ઌʹߟ͑ΔɺUI͸͋ͱ ɾૉૣ͘ϓϩτλΠϓͰԾઆΛݕূ ΠϯλϏϡʔ ɾσβΠϯͷํ޲ੑΛϓϩτλΠϓͰνʔϜͰڞ༗
35. Cookpad Inc. All Rights Reserved. ։ൃॳظͷ6* 100% 9%41 AM komerco ঎඼Λग़඼͢Δ
    γϣοϓ؅ཧ ϝοηʔδ ঎඼؅ཧ ஫จ؅ཧ
        ঎඼؅ཧ ग़඼தͷ঎඼͕͋Γ·ͤΜ 100% 9%41 AM komerco 100% 9%41 AM komerco
     ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ʲ࣫ృΓʳ఼Ѫ༻ͷṟஔ͖ ܙൺण԰ෑ ࡏݿ͋Γ #͓ṟ #ແண৭ #αονʔω ঎඼ͷઆ໌ ˇ1,200 ΧʔτʹೖΕΔ 
36. 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ͷֆจࣈ
37. 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Λ࡞Δ
38. Cookpad Inc. All Rights Reserved. ϒϥογϡΞοϓޙ ϦϦʔεલ ޙͰΞΠίϯΛద༻ ৭΋ޙ͔Β
39. Cookpad Inc. All Rights Reserved. αʔϏεͷσβΠϯશମ૾͕ݟ͖͑ͯͨΒ ɾʮϢʔβʔͷମݧʯͱʮ࣮૷ͷ޻਺ʯΛߟྀͯ͠։ൃ͢Δ ɾ։ൃ͠΍͍͢σβΠϯΛঃʑʹߟ͍͑ͯ͘ ɾUI͸͋͘·Ͱ෭࣍తɺͱʹ͔͘ମݧΛ࠷༏ઌ
40. ։ൃ͠΍͍͢σβΠϯΛҙࣝ͢Δ
41. Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯΛ࡞Δ ɾڞ௨Խ͍ͯ͠ΔΧϥʔ΍ίϯϙʔωϯτ͸ΨΠυϥΠϯʹ·ͱΊΔ ɾσβΠφʔ΋ϧʔϧΛৼΓସ͑ΕΔͷͰ౷ҰੑΛҙࣝ͠΍͍͢
42. Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯ
43. Cookpad Inc. All Rights Reserved. ΤϯδχΞͱڠྗͯ͠νʔϜͷ։ൃεϐʔυΛ্͛Δ ɾσβΠϯ׬੒౓10%͘Β͍Ͱ࢓༷ΛΤϯδχΞʹ֬ೝ͔ͯ͠ΒਐΊΔ ɾ؆୯ͳमਖ਼͸ר͖औΔࢫΛ఻͑Δ 6*ௐ੔ɺόάमਖ਼ɺը૾ͷࠩ͠ସ͑ͳͲ ɾେࣄͳ͜ͱ͸ɺνʔϜͱͯ͠ૉૣ͘Ձ஋Λఏڙ͢Δ͜ͱ
44. Cookpad Inc. All Rights Reserved. ΦʔτϨΠΞ΢τΛमਖ਼ͨ͠ྫ ෆࣗવͳ༨ന ϨΠΞ΢τ่Ε
45. Cookpad Inc. All Rights Reserved. ؆୯ͳ࡞ۀͦ͜ר͖औΔ
46. Cookpad Inc. All Rights Reserved. ෼໺ʹΑͬͯಘҙྖҬΛΧόʔ͢Δ ɾiOSΤϯδχΞ͸ϝΠϯͷiOS։ൃʹूதͰ͖Δ ɾwebͷ։ൃ؀ڥ͸ΤϯδχΞʹ૬ஊͯ͠ม͍͑ͯͬͨ ɾKomercoͷςΟβʔαΠτ͸σβΠϯ͔Β࣮૷·Ͱશ෦୲౰
47. Cookpad Inc. All Rights Reserved. ϦϦʔεલޙͷ։ൃ؀ڥͷมԽ ϦϦʔεલ ϦϦʔεޙ ίϯύΠϧޙͷHTMLΛhostingʹ৐͚ͬΔ Next.js + ReactͰfunctionΛ௨ͯ͠SSR ςΟβʔαΠτɺ؅ཧը໘ɺσβΠϯγεςϜͰڞ௨Խ
48. Cookpad Inc. All Rights Reserved.
49. Cookpad Inc. All Rights Reserved. αʔϏε։ൃͷσβΠϯ·ͱΊ ɾػೳΛ࡞ΔͷͰ͸ͳ͘ɺମݧΛ࡞Δɻࡉ͔͍UI͸ޙ͔Βվળ ɾσβΠφʔͷલʹαʔϏε։ൃऀͳΜ΍ͧʂʂʂʂ ɾνʔϜͱͯ͠ૉૣ͘Ձ஋Λఏڙ͢Δ͜ͱΛҙࣝͯ͠ಈ͘
50. ͍͞͝ʹ ɾKomercoνʔϜ͸݈͘͢͝શͰಇ͖΍͍͢ ɾଞʹ΋஻Γ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ࢗ΍ϑΥτΨΠυͷ։ൃൿ࿩ͳͲ ɾΫοΫύου͸σβΠφʔΛืू͍ͯ͠·͢ʂʂʂ