tech-kitchen-#16-komerco-design

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νʔϜ͸݈͘͢͝શͰಇ͖΍͍͢ ɾଞʹ΋஻Γ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ࢗ΍ϑΥτΨΠυͷ։ൃൿ࿩ͳͲ ɾΫοΫύου͸σβΠφʔΛืू͍ͯ͠·͢ʂʂʂ