tech-kitchen-#16-komerco-design

Transcript

1. 1.

   Cookpad Inc. θϩ͔Β͸͡ΊΔαʔϏεͷσβΠϯ ౻Ҫ
   ݠ࢜࿕ 2018.07.19 Tech Kitchen #16

2. 2.

   Cookpad Inc. All Rights Reserved. ࣗݾ঺հ ౻Ҫݠ࢜࿕ @kenshir0f ΫοΫύουגࣜձࣾ Komercoࣄۀ෦
   ϦʔυσβΠφʔ

   
   2017೥৽ଔೖࣾ
   ࣾձਓ2೥໨ 
   KomercoͷσβΠϯશମΛ୲౰ 
   ࠷ۙ͸Reactॻ͍ͨΓFigmaͰޮ཰Խͨ͠Γ 
   ໌೔͔ΒσϯϚʔΫʹग़ு $**%
   4VNNFS
   8PSL
   4IPQ
3. 3.

   ࠓ೔͸্ཱ͔ͪ͛ΒϦϦʔε·Ͱͷྺ࢙Λ͓࿩͠·͢ σβΠϯͷ؍఺͔Β

4. 4.

   Cookpad Inc. All Rights Reserved. ࠓ೔࿩͢͜ͱ ɾϒϥϯσΟϯάσβΠϯ ɾαʔϏε։ൃͷσβΠϯ

5. 5.

   KomercoͷϒϥϯσΟϯάσβΠϯ

6. 6.

   Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 2017೥10݄ 2018೥6݄ νʔϜൃ଍ ΞϓϦϦϦʔε

   ϒϥϯυணख αʔϏε։ൃ 2018೥1݄ 2017೥11݄
7. 7.

   Cookpad Inc. All Rights Reserved. ্ཱͪ͛࣌ʹσβΠφʔ͕࠷ॳʹ΍Δ͜ͱ ɾϓϩμΫτΦʔφʔͱώΞϦϯά ɾ࿩ͷதͰίϯηϓτΛগͣͭ͠ՄࢹԽ͍ͯ͘͠ ɾ౰ॳ͸ʮ$SFBUPST
   .BSLFU Ծ

   ʯͱ͍͏໊લͰਐߦ
8. 8.

   Cookpad Inc. All Rights Reserved. ΦʔφʔͱͷώΞϦϯά CMΛͲΜͳαʔϏεʹ͍ͨ͠Ͱ͔͢ʁ ࣭໰ ͳΔ΄ͲɺͰ͸τʔϯ͸͜ΜͳΠϝʔδͰ͔͢ʁ ఏҊ

   αʔϏε͸͜Μͳײ͡ʹʙʙίϯηϓτ͸ʙʙ ͦΜͳײ͡ɻͰ΋͜͜͸͜͏͍͏ͷ͡Όͳͯ͘ʙ Φʔφʔ
9. 9.

   Cookpad Inc. All Rights Reserved. ώΞϦϯάͰҙࣝ͢Δ͜ͱ ɾͦͷதͰॏཁͳϫʔυΛϝϞͯ͠ɺੵΈ্͍͛ͯ͘ ɾ࣭໰ͱఏҊΛ܁Γฦͯ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘

10. 10.

    Cookpad Inc. All Rights Reserved. ίϯηϓτώΞϦϯά࣌ͷࢿྉ ɾαʔϏεͷίϯηϓτ ॏཁͳϫʔυΛϝϞͯ͠ೝࣝΛ͢Γ߹ΘͤΔ

11. 11.

    Cookpad Inc. All Rights Reserved. τϯϚφώΞϦϯά࣌ͷࢿྉ ϜʔυϘʔυͰτʔϯͷΠϝʔδΛ͢Γ߹ΘͤΔ

12. 12.

    Cookpad Inc. All Rights Reserved. ώΞϦϯάͨ͠಺༰Λܗʹམͱ͠ࠐΉ ɾϒϥϯυΧϥʔͰαʔϏεͷੈք؍Λ੔͑Δ ɾϒϥϯυϓϩϛεͰαʔϏεͷࢦ਑ΛݻΊΔ

13. 13.

    Cookpad Inc. All Rights Reserved. ϒϥϯυϓϩϛε σβΠϯγεςϜͷ಺༰Λࡌ͍ͤͯΔͷͰ໊લ͕ܾ·ͬͨޙʹͳ͍ͬͯ·͢

14. 14.

    Cookpad Inc. All Rights Reserved. ϒϥϯυΧϥʔ ίϝϧίάϦʔϯ ίϝϧίϒϥ΢ϯ ϝΠϯΧϥʔ͸৯ੜ໋Λද͢྘ɻ
    DPPLQBEͷΦϨϯδͱ཭Ε͍ͯΔͨΊαʔϏεͷ۠ผΛ͚ͭ΍͍͢ɻ

    αϒΧϥʔ͸ੜ׆Λද͢஡ɻ
    ϝΠϯΧϥʔͱ૊Έ߹ΘͤͯKomercoͷੈքΛ࣮ݱ͢Δ
15. 15.

    Cookpad Inc. All Rights Reserved. ͦͷ࣌ظʹαʔϏεͷ໊শ͕ܾ·Δ ɾαʔϏε໊শ͸ʮKomercoʯʹܾఆ ɾ໊લ΋ܾ·ͬͨ͠ϩΰΛ࡞Ζ͏ ɾଞʹ΋ʮϦίϛμʯ΍ʮσϦϚϧʯͳͲ͕ީิʹ

16. 16.

    Cookpad Inc. All Rights Reserved. ϩΰϚʔΫ γϯϘϧϚʔΫ ϩΰλΠϓ

17. 17.

    Cookpad Inc. All Rights Reserved. ϩΰ੍࡞ͷϓϩηε ɾϩΰ΋ίϯηϓτͱಉ͘͡গͣͭ͠ೝࣝΛ͢Γ߹Θ͍ͤͯ͘ ɾ·ͣ͸ϩΰλΠϙ͔ΒܾΊ͍ͯͬͨ

18. 18.

    Cookpad Inc. All Rights Reserved. ڝ߹ௐࠪͱϚοϐϯά

19. 19.

    Cookpad Inc. All Rights Reserved. λΠϙάϥϑΟͷ΢ΣΠτݕূ

20. 20.

    Cookpad Inc. All Rights Reserved. Χʔχϯάͱࣼମͷݕূ

21. 21.

    Cookpad Inc. All Rights Reserved. ࠷ޙࡉ͔͍ௐ੔Λͯ͠ϩΰλΠϙ͸׬੒ ͊࣍͞͸γϯϘϧΛ࡞Δͧʂʂʂ

22. 22.

    Cookpad Inc. All Rights Reserved. γϯϘϧϚʔΫͷ࡞੒ ɾ௒೉ߤ͢ΔPS[ ɾ࣮͸ֆΛඳ͘ܦݧ͕΄ͱΜͲͳͯ͘ϥϑҊ͕શ͘ग़ͣ མॻ͖ͷϑγ̋μω ɾ͜ͷ࣌ظ͸݂໎ͬͯͯύοͱર͍ͨΞΠσΞΛܗʹ͍ͯͨ͠

23. 23.

    Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ

24. 24.

    Cookpad Inc. All Rights Reserved. γϯϘϧλΠϓͷॳظҊ ΞδΧϯ͔Α ͥΜͥΜҧ͏ ੾ΕͨφΠϑʁ Φʔφʔ

25. 25.

    ͸ʔɺͲ͏͢ΓΌ͑͑Μ΍ ؤுΕ

26. 26.

    Cookpad Inc. All Rights Reserved. ͍ͬͨΜৼΓฦΔ ɾڝ߹ௐࠪΛϕʔεʹ࣭໰ͱఏҊͰࠓ·Ͱ͏·͘΍͖ͬͯͨ ɾϩδοΫΛཱͯͯগͣͭ͠ਐΊͯΈΑ͏

27. 27.

    Cookpad Inc. All Rights Reserved. গͣͭ͠ݟ͑ͯ͘Δ ྉཧ΋͏ͭΘ΋
    ख࡞Γ͔ͩΒՁ஋͕͋Δ ϒϥϯυϓϩϛε

28. 28.

    Cookpad Inc. All Rights Reserved. ϥϑҊΛϒϥογϡΞοϓ

29. 29.

    Cookpad Inc. All Rights Reserved.

30. 30.

    Cookpad Inc. All Rights Reserved. ্ཱ͔ͪ͛ΒϒϥϯσΟϯάσβΠϯ·ͱΊ ɾௐࠪͱ࣭໰ͱఏҊ͕ϝΠϯ ɾࣗ෼ͷΞΠσΞ͸ૣ͍ஈ֊ͰݟͤͯೝࣝΛ͢Γ߹ΘͤΔ ɾΞΠσΞ͚ͩΛઌߦͤ͞Δͱݫ͍͠ɺ͔͚ͬͭͯ͜͢Έ·ͤΜͰͨ͠ ɾϒϥϯσΟϯά͸αʔϏεͷ͋ΒΏΔ઀఺Ͱ໨ʹೖΔͷͰ࠷ॳʹखΛ෇͚Δ

31. 31.

    αʔϏε։ൃͷσβΠϯ

32. 32.

    Cookpad Inc. All Rights Reserved. ϦϦʔε·ͰͷܦҢ 2017೥10݄ 2018೥6݄ νʔϜൃ଍ ΞϓϦϦϦʔε

    ϒϥϯυணख αʔϏε։ൃ 2018೥1݄ 2017೥11݄
33. 33.

    Cookpad Inc. All Rights Reserved. ։ൃॳظͷϝϯόʔ J04
    ΤϯδχΞ σβΠφʔ σΟϨΫλʔ $$$

    % & 5໊ͷνʔϜ ฏۉ೥ྸ25ࡀ
34. 34.

    Cookpad Inc. All Rights Reserved. ։ൃॳظͰେ੾ʹ͍ͯͨ͜͠ͱ ɾϢʔβʔͷମݧΛ࠷༏ઌʹߟ͑ΔɺUI͸͋ͱ ɾૉૣ͘ϓϩτλΠϓͰԾઆΛݕূ ΠϯλϏϡʔ ɾσβΠϯͷํ޲ੑΛϓϩτλΠϓͰνʔϜͰڞ༗

35. 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. 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. 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. 38.

    Cookpad Inc. All Rights Reserved. ϒϥογϡΞοϓޙ ϦϦʔεલ ޙͰΞΠίϯΛద༻ ৭΋ޙ͔Β

39. 39.

    Cookpad Inc. All Rights Reserved. αʔϏεͷσβΠϯશମ૾͕ݟ͖͑ͯͨΒ ɾʮϢʔβʔͷମݧʯͱʮ࣮૷ͷ޻਺ʯΛߟྀͯ͠։ൃ͢Δ ɾ։ൃ͠΍͍͢σβΠϯΛঃʑʹߟ͍͑ͯ͘ ɾUI͸͋͘·Ͱ෭࣍తɺͱʹ͔͘ମݧΛ࠷༏ઌ

40. 40.

    ։ൃ͠΍͍͢σβΠϯΛҙࣝ͢Δ

41. 41.

    Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯΛ࡞Δ ɾڞ௨Խ͍ͯ͠ΔΧϥʔ΍ίϯϙʔωϯτ͸ΨΠυϥΠϯʹ·ͱΊΔ ɾσβΠφʔ΋ϧʔϧΛৼΓସ͑ΕΔͷͰ౷ҰੑΛҙࣝ͠΍͍͢

42. 42.

    Cookpad Inc. All Rights Reserved. σβΠϯΨΠυϥΠϯ

43. 43.

    Cookpad Inc. All Rights Reserved. ΤϯδχΞͱڠྗͯ͠νʔϜͷ։ൃεϐʔυΛ্͛Δ ɾσβΠϯ׬੒౓10%͘Β͍Ͱ࢓༷ΛΤϯδχΞʹ֬ೝ͔ͯ͠ΒਐΊΔ ɾ؆୯ͳमਖ਼͸ר͖औΔࢫΛ఻͑Δ 6*ௐ੔ɺόάमਖ਼ɺը૾ͷࠩ͠ସ͑ͳͲ ɾେࣄͳ͜ͱ͸ɺνʔϜͱͯ͠ૉૣ͘Ձ஋Λఏڙ͢Δ͜ͱ

44. 44.

    Cookpad Inc. All Rights Reserved. ΦʔτϨΠΞ΢τΛमਖ਼ͨ͠ྫ ෆࣗવͳ༨ന ϨΠΞ΢τ่Ε

45. 45.

    Cookpad Inc. All Rights Reserved. ؆୯ͳ࡞ۀͦ͜ר͖औΔ

46. 46.

    Cookpad Inc. All Rights Reserved. ෼໺ʹΑͬͯಘҙྖҬΛΧόʔ͢Δ ɾiOSΤϯδχΞ͸ϝΠϯͷiOS։ൃʹूதͰ͖Δ ɾwebͷ։ൃ؀ڥ͸ΤϯδχΞʹ૬ஊͯ͠ม͍͑ͯͬͨ ɾKomercoͷςΟβʔαΠτ͸σβΠϯ͔Β࣮૷·Ͱશ෦୲౰

47. 47.

    Cookpad Inc. All Rights Reserved. ϦϦʔεલޙͷ։ൃ؀ڥͷมԽ ϦϦʔεલ ϦϦʔεޙ ίϯύΠϧޙͷHTMLΛhostingʹ৐͚ͬΔ Next.js

    + ReactͰfunctionΛ௨ͯ͠SSR ςΟβʔαΠτɺ؅ཧը໘ɺσβΠϯγεςϜͰڞ௨Խ
48. 48.

    Cookpad Inc. All Rights Reserved.

49. 49.

    Cookpad Inc. All Rights Reserved. αʔϏε։ൃͷσβΠϯ·ͱΊ ɾػೳΛ࡞ΔͷͰ͸ͳ͘ɺମݧΛ࡞Δɻࡉ͔͍UI͸ޙ͔Βվળ ɾσβΠφʔͷલʹαʔϏε։ൃऀͳΜ΍ͧʂʂʂʂ ɾνʔϜͱͯ͠ૉૣ͘Ձ஋Λఏڙ͢Δ͜ͱΛҙࣝͯ͠ಈ͘

50. 50.

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