$30 off During Our Annual Pro Sale. View Details »

クックパッドクリエイティブワークフロー / cookpad creative workflow

tomoya-tsuji
February 10, 2018

クックパッドクリエイティブワークフロー / cookpad creative workflow

「Cookpad TechConf 2018」(2/10)で発表資料です。

tomoya-tsuji

February 10, 2018
Tweet

More Decks by tomoya-tsuji

Other Decks in Design

Transcript

  1. ⁋ே໵
    ձһࣄۀ෦ɹσβΠφʔ
    ΫοΫύου
    ΫϦΤΠςΟϒϫʔΫϑϩʔ

    View Slide

  2. ࣗݾ঺հ
    ɾΫοΫύου\J04 "OESPJE^ΞϓϦσβΠϯ
    ɾΫοΫύουΞϓϦϦϦʔεϚωʔδϟʔ
    ɾ\νʔϜ ϓϩδΣΫτ^σΟϨΫγϣϯ
    2
    ⁋ே໵
    σβΠφʔσΟϨΫλʔ
    !UPNPZB@UTVKJ@

    View Slide

  3. ࣗݾ঺հ
    ɾ೥݄ΫοΫύου৽ଔೖࣾ
    ɾ೥݄ٕज़෦69άϧʔϓ
    ɾ೥݄౤ߘ։ൃ෦
    ɾ೥݄αʔϏε։ൃ෦͖Ζ͘νʔϜ
    ɾ೥݄ձһࣄۀ෦
    3

    View Slide

  4. 4
    ྉཧ͖Ζ͘

    View Slide

  5. ࠓ೔ͷ͓࿩
    5

    View Slide

  6. ຊ೔ͷ͓࿩
    6
    νʔϜɾ૊৫શһͰϢʔβʔΛߟ͑
    ૉૣ͘Ձ஋Λಧ͚Δ
    ΫοΫύουͷαʔϏε։ൃͱ͸

    View Slide

  7. ΞδΣϯμ
    ɾΫοΫύουͷαʔϏε։ൃମ੍
    ɾνʔϜ։ൃͷࣄྫ঺հ
    ɾσβΠφʔͷऔΓ૊Έ
    ɾ·ͱΊ
    7

    View Slide

  8. ΫοΫύουͷ
    αʔϏε։ൃମ੍ʹ͍ͭͯ
    8

    View Slide

  9. ΫοΫύουΛ։ൃ͢Δϝϯόʔ
    9
    ໿ਓ
    ։ ൃ ऀ ਺

    View Slide

  10. νʔϜߏ੒
    10
    ౤ߘ ݕࡧ ͖Ζ͘ ༗ྉձһ
    νʔϜA
    νʔϜA νʔϜA νʔϜA
    νʔϜB
    νʔϜB νʔϜB
    νʔϜC

    View Slide

  11. νʔϜߏ੒
    11
    ñ
    ñ ò
    ñ ô ô
    ò ñ
    ò
    ò ò
    ñ
    νʔϜA νʔϜB νʔϜC

    View Slide

  12. νʔϜߏ੒
    12
    ñ
    ñ ò
    ñ ô ô
    ò ñ
    ò
    ò ò
    ñ
    νʔϜA νʔϜB νʔϜC
    Φʔφʔ
    σβΠφʔ
    ΤϯδχΞ
    σΟϨΫλʔ

    View Slide

  13. νʔϜ։ൃͷࣄྫ঺հ
    13

    View Slide

  14. 14
    ྉཧ͖Ζ͘

    View Slide

  15. νʔϜମ੍
    15
    ϛογϣϯΦʔφʔ σβΠφʔ݉ J04ΤϯδχΞ "OESPJEΤϯδχΞ
    σΟϨΫλʔ

    View Slide

  16. ͦΕͧΕͷ໾ׂ
    16
    ϛογϣϯΦʔφʔ σβΠφʔ݉ J04ΤϯδχΞ "OESPJEΤϯδχΞ
    σΟϨΫλʔ
    ໨ඪ੹೚ Ϣʔβʔମݧͷ੹೚ ΤϯδχΞϦϯάͷ੹೚

    View Slide

  17. ϝϯόʔಉ࢜ͷؔ܎
    17
    ΤϯδχΞͱσβΠφʔ͕͓ޓ͍Λิ׬͢Δ
    σβΠφʔσΟϨΫλʔ ΤϯδχΞ

    View Slide

  18. νʔϜ಺ϫʔΫϑϩʔ
    18
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    िؒdϲ݄
    ΞϓϦ։ൃ͸جຊతʹ

    View Slide

  19. νʔϜ಺ϫʔΫϑϩʔ
    19
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ͜ͷͭʹ͍ͭͯ
    ৄ͘͠঺հ

    View Slide

  20. 20
    νʔϜ಺ϫʔΫϑϩʔ
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ᶃࢪࡦɾମݧΛߟ͑Δ

    View Slide

  21. ࢪࡦɾମݧΛߟ͑Δ
    21
    ɾৗʹͳΜͷͨΊʹ΍͍ͬͯΔͷ͔Λҙࣝ͢Δ
    ɾશһ͕ಉ͡ํ޲Λ޲͍ͯ։ൃͰ͖ΔΑ͏ʹ
    ɾ໎ͬͨΒཱͪ໭ΕΔ
    ໨తͱԾઆΛ໌֬ʹ

    View Slide

  22. ࢪࡦɾମݧΛߟ͑Δ
    22
    ɾΈΜͳͰ෼ִ͚ͯͳ͘ΞΠσΞɾҙݟ͕ग़ͤΔΑ͏ʹ
    ɾൃࢄޙ͸ɺΈΜͳͰू·Γl໨తzʹԊͬͨ΋ͷͰ͋Δ͔ʁ
    ɹΛج४ʹܾఆ͍ͯ͘͠
    (JU)VCJTTVFͰΞΠσΞൃࢄ

    View Slide

  23. 23
    νʔϜ಺ϫʔΫϑϩʔ
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ᶄσβΠϯϨϏϡʔ

    View Slide

  24. σβΠϯϨϏϡʔ
    24
    l໨తɾഎܠɾσβΠϯͷҙਤzͳͲΛ໌֬ʹɻ
    (JU)VCJTTVF্ͰɺνʔϜ಺֎ͷ
    σβΠφʔɾΤϯδχΞ͔ΒϨϏϡʔ

    View Slide

  25. (JU)VCJTTVFʹΑΔσβΠϯϨϏϡʔ
    25
    ɾ৬छؔ܎ͳ͘ɺԣ۲ͰσβΠϯΛධՁ͢Δ
    ɾ඼࣭޲্ͱҡ࣋
    ɾσβΠϯมߋͷܦҢ͕୭Ͱ΋ࢀরͰ͖Δ
    ɾٞ࿦ʹΑΔ৽ͨͳؾ͖ͮ΋

    View Slide

  26. 26
    νʔϜ಺ϫʔΫϑϩʔ
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ᶅࢪࡦͷࢦඪͱϩά

    View Slide

  27. ࢪࡦͷࢦඪͱϩά
    27
    ɾϢʔβʔʹಧ͚͍ͨ͜ͱ͕ɺ͔ͬ͠Γಧ͍͍ͯΔ͔ΛਤΔͨΊʹ
    ɾͲ͜ʹࢦඪΛஔ͖ɺϩάΛ࢓ࠐΊ͹෼ੳͰ͖Δͷ͔νʔϜͰݕ౼
    ɾσΟϨΫλʔ΍σβΠφʔ΋ϩάʹରͯ͠ҙݟΛݴ͏
    ࢦඪɾϩάͷઃܭ΋νʔϜશһͰ

    View Slide

  28. ࢪࡦͷࢦඪͱϩά
    28
    ਺஋͸શһ͕͙͢ݟ͑Δ৔ॴʹ

    View Slide

  29. 29
    νʔϜ಺ϫʔΫϑϩʔ
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ᶆνʔϜ಺Ͱ
    खಈςετΛ࣮ߦ͢Δ

    View Slide

  30. νʔϜ಺ͰखಈςετΛ࣮ߦ͢Δ
    30
    ɾͰ͖Δ͚ͩνʔϜ಺ͰɻϦϦʔεޙͷʮ࢖͏ਓʯΛߟ͑ͯɻ
    ɾΤοδέʔε΋ؚΊͨςετέʔεΛ࡞੒͠ɺ਺໊ͰνΣοΫ
    खΛೖΕͨ෦෼ͷ඼࣭؅ཧΛ͔ͬ͠Γ͢Δ

    View Slide

  31. νʔϜ಺ͰखಈςετΛ࣮ߦ͢Δ
    31
    ɾ໰୊͕ग़ͨΒॻ͘εϨ͕͋Δ
    ɾରԠ͢΂͖༏ઌॱҐ΋͚ͭͯ
    ɹ໰୊ΛҰཡԽ
    खΛೖΕͨ෦෼ͷ඼࣭؅ཧΛ͔ͬ͠Γ͢Δ

    View Slide

  32. 32
    खಈςετΛͯ͠ؾͮ͘ɺࡉ͔͍ߟྀෆ଍ʜ
    Τϥʔͷͱ͖͸
    Ͳ͏ͳΔͷʁ
    ಡΈࠐΈத͸ʜ
    ήετʁϩάΠϯͯ͠Δ
    Ϣʔβʔʁ
    ଞͷ୺຤΋͋ΔΑ

    View Slide

  33. 33
    σβΠϯ্ͷࡉ͔͍ߟྀ࿙ΕΛ
    ࣄલʹ๷͙޻෉͕͋Γ·͢

    View Slide

  34. 34
    IUUQUSBOTJULJYIBUFOBCMPHKQFOUSZ

    View Slide

  35. ͭΑ͍6*
    35
    σβΠϯΛ࡞ͬͨޙʹɺߟྀ࿙Ε͕ͳ͍͔վΊͯݟฦ͢

    View Slide

  36. 36
    νʔϜ಺ϫʔΫϑϩʔ
    ࢪࡦܾΊ
    ϓϩτλΠϐϯά
    σβΠϯϨϏϡʔ
    ࢓༷֬ఆ
    ࢪࡦͷࢦඪˍϩάܾΊ
    ࣮૷
    ςετ
    ϦϦʔεޙɺ෼ੳ
    ᶇৼΓฦΓͱڞ༗

    View Slide

  37. ৼΓฦΓͱڞ༗
    37
    ࣅͨΑ͏ͳ͜ͱ୭͕͕ͯͨ͠ؾ͕͢Δɻ
    ͋ͷࢪࡦ͸Ͳ͏ͳͬͨΜͩΖ͏ʜ
    Ͳ͔͜ʹ·ͱΊͯ͋ͬͨؾ͕͢Δ͚Ͳ΋ʜ
    ͋ͷ࣌΍ͬͨʓʓ͸
    ͜͜ʹ·ͱ·͍ͬͯΔΑʂ
    ͜Ε·Ͱ͸ʜ ͜͏͍ͨ͠ʂ
    όϥ
    όϥʜ
    ৼΓฦΓ͕
    ͔̍ॴʹ

    View Slide

  38. ৼΓฦΓͱڞ༗
    38
    ࣅͨΑ͏ͳ͜ͱ୭͕͕ͯͨ͠ؾ͕͢Δɻ
    ͋ͷࢪࡦ͸Ͳ͏ͳͬͨΜͩΖ͏ʜ
    Ͳ͔͜ʹ·ͱΊͯ͋ͬͨؾ͕͢Δ͚Ͳ΋ʜ
    ͋ͷ࣌΍ͬͨʓʓ͸
    ͜͜ʹ·ͱ·͍ͬͯΔΑʂ
    ͜Ε·Ͱ͸ʜ ͜͏͍ͨ͠ʂ
    όϥ
    όϥʜ
    ৼΓฦΓ͕
    ͔̍ॴʹ
    3FQPSUNE

    View Slide

  39. 3FQPSUNE
    39
    ɾ(JU)VCͷSFQPTJUPSZͰ؅ཧɻݟ͍ͨ࣌ʹɺ͙͢ݟΕΔɻ

    View Slide

  40. 3FQPSUNE
    40
    ɾॻ͍ͨΒ1VMM3FRVFTUʹग़ͯ͠ɺνʔϜͰϨϏϡʔ͠߹͏
    ɾσβΠφʔσΟϨΫλʔ΋42-ॻ͖·͢

    View Slide

  41. ৼΓฦΓͱڞ༗
    41
    ར༻ऀͷ੠

    View Slide

  42. νʔϜߏ੒
    42
    ౤ߘ ݕࡧ ͖Ζ͘ ༗ྉձһ
    νʔϜA
    νʔϜA νʔϜA νʔϜA
    νʔϜB
    νʔϜB νʔϜB
    νʔϜC

    View Slide

  43. 43
    ñ
    ñ ò
    ñ ô ô
    ò ñ
    ò
    ò ò
    ñ
    νʔϜA νʔϜB νʔϜC
    Φʔφʔ
    σβΠφʔ
    ΤϯδχΞ
    σΟϨΫλʔ
    νʔϜ͸෼͔Ε͍ͯΔ͕ɺαʔϏεͱͯ͠͸Ұͭɻ
    શମͷετʔϦʔ͕ਖ਼͘͠ઃܭ͞Ε͍ͯΔ͔ʁ
    Ϣʔβʔ໨ઢʹཱͬͨ൑அɾऔΓ૊Έ͕ग़དྷ͍ͯΔ͔ʁ

    View Slide

  44. 44
    ñ
    ñ ò
    ñ ô ô
    ò ñ
    ò
    ò ò
    ñ
    νʔϜA νʔϜB νʔϜC
    Φʔφʔ
    σβΠφʔ
    ΤϯδχΞ
    σΟϨΫλʔ
    ΫοΫύουશମͷαʔϏεΛ
    ԣஅ၆ᛌతʹଊ͑Δ໾ׂͱऔΓ૊Έ͕ଘࡏ
    νʔϜ͸෼͔Ε͍ͯΔ͕ɺαʔϏεͱͯ͠͸Ұͭɻ
    શମͷετʔϦʔ͕ਖ਼͘͠ઃܭ͞Ε͍ͯΔ͔ʁ
    Ϣʔβʔ໨ઢʹཱͬͨ൑அɾऔΓ૊Έ͕ग़དྷ͍ͯΔ͔ʁ

    View Slide

  45. αʔϏεΛԣஅతʹݟΔ
    σβΠφʔͷऔΓ૊Έ
    45

    View Slide

  46. 46
    σβΠϯϦϦʔεϚωʔδϟͷઃஔ

    View Slide

  47. σβΠϯϦϦʔεϚωʔδϟͱ͸
    47
    ϦϦʔεόʔγϣϯ୯ҐͰɺϢʔβʔͷମݧ΍
    6*ʹมߋ͕͋ΔՕॴΛ೺Ѳ͠
    σβΠϯपΓΛҰ؏ͯ͠ݟΔ໾ׂ

    View Slide

  48. σβΠϯϦϦʔεϚωʔδϟ͕΍Δ͜ͱ
    48
    σβΠϯ֬ೝձ
    ։ൃ
    ։ൃ͕ऴΘΓɺϦϦʔε͢Δ·Ͱͷؒʹ
    ग़དྷ্͕ͬͨػೳͱશମͷମݧΛ
    ΞϓϦσβΠφʔશһͰ৮ͬͯ֬ೝ͢Δ
    ϦϦʔε

    View Slide

  49. 49
    σβΠϯձ

    View Slide

  50. σβΠϯձ
    50
    ɾिճɺ࣌ؒ
    ɾΫοΫύουɺଞϓϩμΫτʹؔΘΔσβΠφʔશһ͕ࢀՃ
    ɾ-5ʹΑΔ஌ݟڞ༗΍αʔϏεશମͷ՝୊ڞ༗ͳͲ

    View Slide

  51. ·ͱΊ
    51

    View Slide

  52. ·ͱΊ
    52
    ɾ໨త/Ձ஋ԾઆΛ໌֬ʹ͠ɺ࠷ޙ·ͰϒϨͳ͍Α͏ʹ
    ɾͭΑ͍UI΍report.mdΛ࢖ͬͨ୭΋͕ਅࣅ/ҙࣝͰ͖Δ޻෉
    ɾʮϢʔβʔʯΛओޠʹετʔϦʔΛԣஅతʹΈΔ
    ૉૣ͘ϢʔβʔʹՁ஋Λಧ͚ΔͨΊʹʜ

    View Slide

  53. ࠷ޙʹɺ
    53
    ҰਓͰσβΠϯΛ࡞͍ͬͯΔΘ͚Ͱ͸ͳ͍ɻ
    νʔϜ΍૊৫શһͰʮϢʔβʔʯΛ{ҙࣝɾߟ͑ΒΕΔ}࢓૊ΈΛ
    ࡞Δ͜ͱ΋σβΠφʔͷ໾ׂͰ͢ɻ

    View Slide

  54. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide