UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発

Transcript

1. ਫ࢈ݱ৔ͷϢʔβʔʹدΓఴ͏
   
   
   ΢ʔΦྲྀϓϩμΫτ։ൃ
   misaki kubosaka / UUUO, inc.
   
   
   22-12-21 UDM#2
   

   View Slide

2. ࣗݾ঺հ
   ٱอࡔ ඒ࡙
   Misaki Kubosaka
   UI/UX Designer
   2016.4~
   2019.10~
   2022.1~
   ΫοΫύουגࣜձࣾʹUI/UXσβΠφʔͱͯ͠৽ଔೖࣾɻ
   
   
   ࣗ෼ࣗ਎͕ϔϏʔϢʔβʔͩͬͨαʔϏεʮcookpadʯͷΞ
   ϓϦσβΠϯʹैࣄɻ
   ෭ۀͱͯ͠΢ʔΦͷϓϩμΫτσβΠϯʹؔΘΓ͸͡Ίɺ
   ਫ࢈ۀ×ITͷ೉͠͞ɺ΍Γ͕͍Λ஌Δ
   ࣗ෼͕Α͘஌Βͳ͍ྖҬͰ΋ɺ՝୊Λࣗ෼͝ͱʹཧղ͠
   ղܾͰ͖ΔΑ͏ʹͳΓͨͯ͘ɺ΢ʔΦ΁స৬ɻ
   
   
   1ਓ໨UI/UXσβΠφʔͱͯ͠ɺ೔ʑαʔϏεͷUI/UX΍ͦ
   ͷଞσβΠϯۀ຿ʹैࣄ
   @misaaa09
   #כϲ࡚ͰϑϧϦϞʔτ #ڕॳ৺ऀ
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   BtoB Ͱ
   ݱ৔ͷϢʔβʔ ʹ
   
   
   دΓఴͬͨαʔϏε Λ࡞ΔͨΊʹ
   
   
   ΢ʔΦ͕औΓ૊ΜͰ͍Δ͜ͱ ʹ͍͓ͭͯ࿩͠·͢ʂ
   

   View Slide

4. ΢ʔΦʹ͓͚Δ”ݱ৔”ͬͯͲΜͳͱ͜Ζʁ
   

   View Slide

5. View Slide

6. View Slide

7. ·ͩ·ͩి࿩΍FAXɺखॻ͖͕ओྲྀͷۀք
   
   
   ೔ʑେྔͷڕɾ৘ใΛѻ͍ͬͯΔਓͨͪ
   
   
   ͦΜͳʮਫ࢈ݱ৔ʯʹدΓఴ͏ͨΊʹ…
   

   View Slide

8. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ
   

   ۀքͷߏ଄Λ
   
   
   ཧղ͢Δ
   1
   

   Ϣʔβʔ՝୊Λ
   
   
   ཧղ͢Δ
   2
   

   ՝୊Λղܾ͢Δ
   
   
   ࢓૊ΈΛߟ͑Δ
   3
   

   ۀ຿ʹ༹͚ࠐΉ
   
   
   UI/UXͷຏ͖ࠐΈ
   4
   

   View Slide

9. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ
   

   ۀքͷߏ଄Λ
   
   
   ཧղ͢Δ
   1
   

   Ϣʔβʔ՝୊Λ
   
   
   ཧղ͢Δ
   2
   

   ՝୊Λղܾ͢Δ
   
   
   ࢓૊ΈΛߟ͑Δ
   3
   

   ۀ຿ʹ༹͚ࠐΉ
   
   
   UI/UXͷຏ͖ࠐΈ
   4
   ࠓ೔͸΢ʔΦͷಛ௃తͳऔΓ૊Έ͕٧·͍ͬͯΔ
   
   
   ̎ͱ̐ʹ͍ͭͯ͝঺հ͠·͢
   

   View Slide

10. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ
    

    ۀքͷߏ଄Λ
    
    
    ཧղ͢Δ
    1
    

    Ϣʔβʔ՝୊Λ
    
    
    ཧղ͢Δ
    2
    

    ՝୊Λղܾ͢Δ
    
    
    ࢓૊ΈΛߟ͑Δ
    3
    

    ۀ຿ʹ༹͚ࠐΉ
    
    
    UI/UXͷຏ͖ࠐΈ
    4
    

    View Slide

11. Ϣʔβʔ΍Ϣʔβʔ՝୊ͷ
    
    
    ղ૾౓Λѹ౗తʹ্͛Δ
    େ੾ʹ͍ͯ͠ΔϙΠϯτ
    2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
    

    View Slide

12. ࣗ෼͕ͨͪ
    
    
    ϓϨΠϠʔʹͳͬͯΈΔ
    ΢ʔΦϝϯόʔ͕
    
    
    શһ௥ՃͰ͖Δ
    
    
    վળΞΠσΞϦετ
    2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
    

    View Slide

13. ● 2018೥ࠒɺௗऔͷ஥ങਓͱͯ͠ࣄۀε
    λʔτ
    
    
    ● ̍ͭͷڕ԰ͱͯ͠ɺ೔ʑڕΛചΓങ͍͠ɺ
    ച্Λཱ͍ͯͯ͘
    
    
    ● ·ͣ͸ࣗ෼͕ͨͪϢʔβʔͱಉ͡ۀ຿Λ
    ಉ͡໨ઢͰߦ͏͜ͱͰɺϢʔβʔཧղɾ՝
    ୊ൃݟΛߦ͖ͬͯͨ
    ࣗ෼͕ͨͪ
    
    
    ϓϨΠϠʔʹͳͬͯΈΔ
    2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
    

    View Slide

14. ࣗ෼͕ͨͪ
    
    
    ϓϨΠϠʔʹͳͬͯΈΔ
    ಘΒΕͨ͜ͱ
    
    
    ● ࣗ෼͕ͨͪ౰ࣄऀʹͳΔ͜ͱͰɺ֎͔Β؍
    ࡯ͨ͠ΓώΞϦϯά͢ΔҎ্ͷղ૾౓Ͱ
    ՝୊ΛཧղͰ͖Δ
    
    
    ● ʮΞϓϦΛ࡞ΔελʔτΞοϓاۀʯͱ͠
    ͯͰ͸ͳ͘ʮௗऔͷڕ԰ʯͱͯ͠ɺۀքʹ
    ೖΓࠐΉ͜ͱͰɺ஥ؒҙࣝΛ࣋ͬͯ΋Β
    ͑ɺϢʔβʔͱͷڠྗؔ܎͕࡞ΕΔ
    
    
    ● ࣾ಺ʹɺϢʔβʔ͕͍Δঢ়ଶͳͷͰɺؾܰ
    ʹώΞϦϯά͕Ͱ͖Δ
    2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
    

    View Slide

15. 2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ
    ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ
    վળΞΠσΞϦετ
    ● ࣾ಺ͷnotionʹɺࣗ༝ʹ୭Ͱ΋ॻ͖ࠐΊ
    ΔɺϓϩμΫτͷվળΞΠσΞϦετΛઃ
    ஔ
    
    
    ● ͲΜͳΞΠσΞͰ΋ؾܰʹॻ͍ͯ΋Β͑Δ
    ۭؒΛ໨ࢦͯ͠࡞ͬͨ
    
    
    ● ॻ͖ํʹ໎Θͳ͍Α͏ςϯϓϨʔτΛ༻
    ҙɻΞΠσΞΛॻ͘΋ͷͰ͸͋Δ͕ɺΞΠ
    σΞͷഎܠʹ͋ΔϢʔβʔͷ՝୊Λڞ༗Ͱ
    ͖ΔΑ͏ͳςϯϓϨʔτʹઃܭ
    3 4
    

    View Slide

16. View Slide

17. 2
    1 Ϣʔβʔ՝୊Λཧղ͢Δ
    ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ
    վળΞΠσΞϦετ
    3 4
    ಘΒΕͨ͜ͱ
    
    
    ● શһ͕ॻ͖ࠐΊΔۭؒʹͳͬͨͨΊɺ೔ʑ
    Ϣʔβʔͱ઀͍ͯ͠Δηʔϧε΍CSϝϯόʔ
    ͷ͔Βؾ͖ͮΛ΋Β͍΍͘͢ͳͬͨ
    
    
    ● ͜ͷϦετ͔Β਺ଟ͘ͷࢪࡦ΋ੜ·ΕϦϦʔ
    ε͞Εͨ🎉
    
    
    ● ΞΠσΞͷཪʹӅΕΔϢʔβʔ՝୊ΛݴޠԽ
    ͯ͠΋Β͏͜ͱͰɺखஈ͕ઌߦͤͣɺϢʔ
    βʔՁ஋ϕʔεͰٞ࿦͕Ͱ͖ΔΑ͏ʹͳͬͨ
    

    View Slide

18. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ
    

    ۀքͷߏ଄Λ
    
    
    ཧղ͢Δ
    1
    

    Ϣʔβʔ՝୊Λ
    
    
    ཧղ͢Δ
    2
    

    ՝୊Λղܾ͢Δ
    
    
    ࢓૊ΈΛߟ͑Δ
    3
    

    ۀ຿ʹ༹͚ࠐΉ
    
    
    UI/UXͷຏ͖ࠐΈ
    4
    

    View Slide

19. ैདྷͷ঎श׳Λϒνյ͢
    
    
    ѹ౗తͳ࢖͍ͪ͜͝
    େ੾ʹ͍ͯ͠ΔϙΠϯτ
    4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    

    View Slide

20. 4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    ઃܭͷॳظஈ֊͔Βɺ
    ηʔϧεɾCSΛר͖ࠐΈ
    ݒ೦ग़͠ձ࣮ࢪ
    Ϣʔβʔʹ͍ۙϝϯόʔ
    ͱҰॹʹࡉ͔͍දݱͷ
    νϡʔχϯά
    

    View Slide

21. ● ࢪࡦͷΠϝʔδ͕͋Δఔ౓·ͱ·ͬͨΒɺ
    ૣ͍ஈ֊ͰηʔϧεɾCSϝϯόʔͱMTG
    Λߦ͍·͢ɻ
    
    
    ● ࢪࡦ಺༰ͷڞ༗Λߦ͍ɺʮ΢ʔΦͷࢹ
    ఺ʯʮങ͍खͷࢹ఺ʯʮചΓखͷࢹ఺ʯ
    ͱ֤छཱ৔ͷݒ೦Λચ͍ग़͠ɺUI/UXͷվ
    ળʹ׆͔͍͖ͯ͠·͢ɻ
    ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ
    CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ
    4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    

    View Slide

22. ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ
    CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ
    4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    ಘΒΕͨ͜ͱ
    
    
    ● Ϣʔβʔͱ೔ʑ઀͢ΔϝϯόʔʹૣΊʹҙݟ
    Λ΋Β͏͜ͱͰɺߟྀෆ଍͕ݮΔɻ
    
    
    ● ࣮૷લʹෆཁͳػೳΛ࡟͗མͱ͢͜ͱ͕Մೳ
    
    
    ● ΞϓϦػೳϦϦʔεޙͷηʔϧε΍CSͷಈ͖
    Λࣄલʹ࡞ઓձٞͰ͖Δ
    

    View Slide

23. 4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ
    ࡉ͔͍දݱͷνϡʔχϯά
    ● ػೳͷࡉ͔͍σβΠϯදݱ΍ϥΠςΟϯάͳͲ
    ͸ɺඞཁʹԠͯ͡Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹ
    ʹνϡʔχϯάΛ͠·͢
    
    
    ● ྫ͑͹ɺ઱౓Λද͢ධՁج४ɺͳͲ͸ڕʹΑͬ
    ͯɺϢʔβʔ͕஌Γ͍ͨ৘ใ͕ඍົʹҟͳΔͨ
    Ίɺ͜ͷධՁج४ͷύλʔϯΛɺUUUO Base(஥ങ
    ਓͱͯ͠ͷڌ఺)Ͱಇ͍͍ͯͨϝϯόʔͱҰॹʹݕ
    ౼ΛਐΊ·ͨ͠
    

    View Slide

24. ໿1000ڕछ෼ͷ
    
    
    ઱౓දݱΛݕ౼
    ύλʔϯΛ
    
    
    άϧʔϐϯά
    ࠷௿ύλʔϯ਺ʹ੔ཧ
    
    
    ˍ
    
    
    4ஈ֊ʹௐ੔
    UIʹམͱ͢
    1
    2
    3
    4
    

    View Slide

25. 4
    1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ
    3
    2
    Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ
    ࡉ͔͍දݱͷνϡʔχϯά
    ಘΒΕͨ͜ͱ
    
    
    ● ͔ͳΓৄࡉͳཧղΛ࣋ͭϝϯόʔͱɺڕυૉ
    ਓϝϯόʔ͕ҰॹʹऔΓ૊Ή͜ͱͰɺۀքͷ
    ৽ࢀऀʙݰਓ·Ͱ·Μ΂Μͳ͘࢖͑Δམͱ͠
    Ͳ͜ΖΛݟ͚ͭΔ͜ͱ͕Ͱ͖Δ
    
    
    ● ࡉ͔͍දݱ·Ͱνϡʔχϯά͢Δ͜ͱʹΑͬ
    ͯɺϢʔβʔ͕ࠓ·Ͱͷۀ຿ͷதͰҧ࿨ײͳ
    ͘࢖͍͜ͳͤΔମݧ͕࡞ΕΔ
    

    View Slide

26. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ
    

    ۀքͷߏ଄Λ
    
    
    ཧղ͢Δ
    1
    

    Ϣʔβʔ՝୊Λ
    
    
    ཧղ͢Δ
    2
    

    ՝୊Λղܾ͢Δ
    
    
    ࢓૊ΈΛߟ͑Δ
    3
    

    ۀ຿ʹ༹͚ࠐΉ
    
    
    UI/UXͷຏ͖ࠐΈ
    4
    શମΛ௨ͯ͠ɺ
    
    
    ݸਓతʹײͨ͡΢ʔΦͳΒͰ͸ॏཁͳϙΠϯτ͕2ͭ
    

    View Slide

27. ࢲ͕ݸਓతʹײ͡Δ΢ʔΦͳΒͰ͸ͷ؀ڥᶃ
    ηʔϧεɾCSͷ໾ׂ͕ಛघɻ
    
    
    ΞϓϦΛചΓࠐΉɾϑΥϩʔ͢Δ͚ͩͰͳ͘೔ʑϢʔβʔͱಉ͡ۀ຿Λ͜ͳ͢
    ηʔϧεɾCS Ϣʔβʔ
    ΞϓϦΛ࢖ͬͯ΋Β͏
    ηʔϧεɾCS Ϣʔβʔ
    ΞϓϦΛ࢖ͬͯ΋Β͏
    ΞϓϦ֎ͰڕͷചΓങ͍
    Ұൠత
    ΢ʔΦ
    

    View Slide

28. ࢲ͕ݸਓతʹײ͡Δ΢ʔΦͳΒͰ͸ͷ؀ڥᶄ
    ։ൃνʔϜʹดͣ͡ɺશһͰϓϩμΫτΛྑ͘͢Δ
    

    View Slide

29. ·ͱΊ
    - ݱ৔ʹدΓఴ͏ͨΊʹ4ͭͷ։ൃεςοϓ͕͋Δ
    
    
    - ۀքཧղ/Ϣʔβʔ՝୊ཧղ/ղܾͷ࢓૊Έ/ۀ຿ʹ༹͚ࠐΉUIUX
    
    
    - εςοϓ̎ʮϢʔβʔ՝୊ཧղʯ
    
    
    - Ϣʔβʔ΍Ϣʔβʔ՝୊ͷղ૾౓Λѹ౗తʹ্͛Δ͜ͱΛ໨ࢦͯ͠
    
    
    - ϓϨΠϠʔʹͳΔ/શһ͕௥ՃͰ͖ΔΞΠσΞϦετ
    
    
    - εςοϓ̐ʮۀ຿ʹ༹͚ࠐΉUI/UXʯ
    
    
    - ैདྷͷ঎श׳Λϒνյ͢ѹ౗తͳ࢖͍ͪ͜͝Λ໨ࢦͯ͠
    
    
    - ηʔϧεɾCSͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά
    
    
    - શମΛ௨ͯ͠ͷ΢ʔΦͳΒͰ͸ͷϙΠϯτ
    
    
    - ᶃࣗ෼͕ͨͪϢʔβʔͱಉ͡ۀ຿Λߦ͏ѹ౗తͳ౰ࣄऀҙࣝ
    
    
    - ᶄνʔϜͷ֞ࠜΛ௒͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘
    

    View Slide

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

    View Slide