tech-kitchen-#16-komerco-design

6d74b5edd1571a5cf7ecfec9c694f26b?s=47 kenshir0f
July 19, 2018

 tech-kitchen-#16-komerco-design

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

6d74b5edd1571a5cf7ecfec9c694f26b?s=128

kenshir0f

July 19, 2018
Tweet

Transcript

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

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

    2017೥৽ଔೖࣾࣾձਓ2೥໨ KomercoͷσβΠϯશମΛ୲౰ ࠷ۙ͸Reactॻ͍ͨΓFigmaͰޮ཰Խͨ͠Γ ໌೔͔ΒσϯϚʔΫʹग़ு $**%4VNNFS8PSL4IPQ
  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νʔϜ͸݈͘͢͝શͰಇ͖΍͍͢ ɾଞʹ΋஻Γ͍ͨ͜ͱ͕ͨ͘͞Μʜ ໊ࢗ΍ϑΥτΨΠυͷ։ൃൿ࿩ͳͲ ɾΫοΫύου͸σβΠφʔΛืू͍ͯ͠·͢ʂʂʂ