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

Transcript

1. ਫ࢈ݱ৔ͷϢʔβʔʹدΓఴ͏ ΢ʔΦྲྀϓϩμΫτ։ൃ misaki kubosaka / UUUO, inc. 22-12-21 UDM#2
2. ࣗݾ঺հ ٱอࡔ ඒ࡙ Misaki Kubosaka UI/UX Designer 2016.4~ 2019.10~ 2022.1~ ΫοΫύουגࣜձࣾʹUI/UXσβΠφʔͱͯ͠৽ଔೖࣾɻ ࣗ෼ࣗ਎͕ϔϏʔϢʔβʔͩͬͨαʔϏεʮcookpadʯͷΞ ϓϦσβΠϯʹैࣄɻ ෭ۀͱͯ͠΢ʔΦͷϓϩμΫτσβΠϯʹؔΘΓ͸͡Ίɺ ਫ࢈ۀ×ITͷ೉͠͞ɺ΍Γ͕͍Λ஌Δ ࣗ෼͕Α͘஌Βͳ͍ྖҬͰ΋ɺ՝୊Λࣗ෼͝ͱʹཧղ͠ ղܾͰ͖ΔΑ͏ʹͳΓͨͯ͘ɺ΢ʔΦ΁స৬ɻ 1ਓ໨UI/UXσβΠφʔͱͯ͠ɺ೔ʑαʔϏεͷUI/UX΍ͦ ͷଞσβΠϯۀ຿ʹैࣄ @misaaa09 #כϲ࡚ͰϑϧϦϞʔτ #ڕॳ৺ऀ
3. ࠓ೔࿩͢͜ͱ BtoB Ͱ ݱ৔ͷϢʔβʔ ʹ دΓఴͬͨαʔϏε Λ࡞ΔͨΊʹ ΢ʔΦ͕औΓ૊ΜͰ͍Δ͜ͱ ʹ͍͓ͭͯ࿩͠·͢ʂ
4. ΢ʔΦʹ͓͚Δ”ݱ৔”ͬͯͲΜͳͱ͜Ζʁ
7. ·ͩ·ͩి࿩΍FAXɺखॻ͖͕ओྲྀͷۀք ೔ʑେྔͷڕɾ৘ใΛѻ͍ͬͯΔਓͨͪ ͦΜͳʮਫ࢈ݱ৔ʯʹدΓఴ͏ͨΊʹ…
8. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 
 ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
9. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 
 ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 ࠓ೔͸΢ʔΦͷಛ௃తͳऔΓ૊Έ͕٧·͍ͬͯΔ ̎ͱ̐ʹ͍ͭͯ͝঺հ͠·͢
10. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 
 ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
11. Ϣʔβʔ΍Ϣʔβʔ՝୊ͷ ղ૾౓Λѹ౗తʹ্͛Δ େ੾ʹ͍ͯ͠ΔϙΠϯτ 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
12. ࣗ෼͕ͨͪ ϓϨΠϠʔʹͳͬͯΈΔ ΢ʔΦϝϯόʔ͕ શһ௥ՃͰ͖Δ վળΞΠσΞϦετ 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
13. • 2018೥ࠒɺௗऔͷ஥ങਓͱͯ͠ࣄۀε λʔτ • ̍ͭͷڕ԰ͱͯ͠ɺ೔ʑڕΛചΓങ͍͠ɺ ച্Λཱ͍ͯͯ͘ • ·ͣ͸ࣗ෼͕ͨͪϢʔβʔͱಉ͡ۀ຿Λ ಉ͡໨ઢͰߦ͏͜ͱͰɺϢʔβʔཧղɾ՝ ୊ൃݟΛߦ͖ͬͯͨ ࣗ෼͕ͨͪ ϓϨΠϠʔʹͳͬͯΈΔ 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
14. ࣗ෼͕ͨͪ ϓϨΠϠʔʹͳͬͯΈΔ ಘΒΕͨ͜ͱ • ࣗ෼͕ͨͪ౰ࣄऀʹͳΔ͜ͱͰɺ֎͔Β؍ ࡯ͨ͠ΓώΞϦϯά͢ΔҎ্ͷղ૾౓Ͱ ՝୊ΛཧղͰ͖Δ • ʮΞϓϦΛ࡞ΔελʔτΞοϓاۀʯͱ͠ ͯͰ͸ͳ͘ʮௗऔͷڕ԰ʯͱͯ͠ɺۀքʹ ೖΓࠐΉ͜ͱͰɺ஥ؒҙࣝΛ࣋ͬͯ΋Β ͑ɺϢʔβʔͱͷڠྗؔ܎͕࡞ΕΔ • ࣾ಺ʹɺϢʔβʔ͕͍Δঢ়ଶͳͷͰɺؾܰ ʹώΞϦϯά͕Ͱ͖Δ 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
15. 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ վળΞΠσΞϦετ • ࣾ಺ͷnotionʹɺࣗ༝ʹ୭Ͱ΋ॻ͖ࠐΊ ΔɺϓϩμΫτͷվળΞΠσΞϦετΛઃ ஔ • ͲΜͳΞΠσΞͰ΋ؾܰʹॻ͍ͯ΋Β͑Δ ۭؒΛ໨ࢦͯ͠࡞ͬͨ • ॻ͖ํʹ໎Θͳ͍Α͏ςϯϓϨʔτΛ༻ ҙɻΞΠσΞΛॻ͘΋ͷͰ͸͋Δ͕ɺΞΠ σΞͷഎܠʹ͋ΔϢʔβʔͷ՝୊Λڞ༗Ͱ ͖ΔΑ͏ͳςϯϓϨʔτʹઃܭ 3 4
17. 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ վળΞΠσΞϦετ 3 4 ಘΒΕͨ͜ͱ • શһ͕ॻ͖ࠐΊΔۭؒʹͳͬͨͨΊɺ೔ʑ Ϣʔβʔͱ઀͍ͯ͠Δηʔϧε΍CSϝϯόʔ ͷ͔Βؾ͖ͮΛ΋Β͍΍͘͢ͳͬͨ • ͜ͷϦετ͔Β਺ଟ͘ͷࢪࡦ΋ੜ·ΕϦϦʔ ε͞Εͨ🎉 • ΞΠσΞͷཪʹӅΕΔϢʔβʔ՝୊ΛݴޠԽ ͯ͠΋Β͏͜ͱͰɺखஈ͕ઌߦͤͣɺϢʔ βʔՁ஋ϕʔεͰٞ࿦͕Ͱ͖ΔΑ͏ʹͳͬͨ
18. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 
 ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
19. ैདྷͷ঎श׳Λϒνյ͢ ѹ౗తͳ࢖͍ͪ͜͝ େ੾ʹ͍ͯ͠ΔϙΠϯτ 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2
20. 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 ઃܭͷॳظஈ֊͔Βɺ ηʔϧεɾCSΛר͖ࠐΈ ݒ೦ग़͠ձ࣮ࢪ Ϣʔβʔʹ͍ۙϝϯόʔ ͱҰॹʹࡉ͔͍දݱͷ νϡʔχϯά
21. • ࢪࡦͷΠϝʔδ͕͋Δఔ౓·ͱ·ͬͨΒɺ ૣ͍ஈ֊ͰηʔϧεɾCSϝϯόʔͱMTG Λߦ͍·͢ɻ • ࢪࡦ಺༰ͷڞ༗Λߦ͍ɺʮ΢ʔΦͷࢹ ఺ʯʮങ͍खͷࢹ఺ʯʮചΓखͷࢹ఺ʯ ͱ֤छཱ৔ͷݒ೦Λચ͍ग़͠ɺUI/UXͷվ ળʹ׆͔͍͖ͯ͠·͢ɻ ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2
22. ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 ಘΒΕͨ͜ͱ • Ϣʔβʔͱ೔ʑ઀͢ΔϝϯόʔʹૣΊʹҙݟ Λ΋Β͏͜ͱͰɺߟྀෆ଍͕ݮΔɻ • ࣮૷લʹෆཁͳػೳΛ࡟͗མͱ͢͜ͱ͕Մೳ • ΞϓϦػೳϦϦʔεޙͷηʔϧε΍CSͷಈ͖ Λࣄલʹ࡞ઓձٞͰ͖Δ
23. 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά • ػೳͷࡉ͔͍σβΠϯදݱ΍ϥΠςΟϯάͳͲ ͸ɺඞཁʹԠͯ͡Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹ ʹνϡʔχϯάΛ͠·͢ • ྫ͑͹ɺ઱౓Λද͢ධՁج४ɺͳͲ͸ڕʹΑͬ ͯɺϢʔβʔ͕஌Γ͍ͨ৘ใ͕ඍົʹҟͳΔͨ Ίɺ͜ͷධՁج४ͷύλʔϯΛɺUUUO Base(஥ങ ਓͱͯ͠ͷڌ఺)Ͱಇ͍͍ͯͨϝϯόʔͱҰॹʹݕ ౼ΛਐΊ·ͨ͠
24. ໿1000ڕछ෼ͷ ઱౓දݱΛݕ౼ ύλʔϯΛ άϧʔϐϯά ࠷௿ύλʔϯ਺ʹ੔ཧ ˍ 4ஈ֊ʹௐ੔ UIʹམͱ͢ 1 2 3 4
25. 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά ಘΒΕͨ͜ͱ • ͔ͳΓৄࡉͳཧղΛ࣋ͭϝϯόʔͱɺڕυૉ ਓϝϯόʔ͕ҰॹʹऔΓ૊Ή͜ͱͰɺۀքͷ ৽ࢀऀʙݰਓ·Ͱ·Μ΂Μͳ͘࢖͑Δམͱ͠ Ͳ͜ΖΛݟ͚ͭΔ͜ͱ͕Ͱ͖Δ • ࡉ͔͍දݱ·Ͱνϡʔχϯά͢Δ͜ͱʹΑͬ ͯɺϢʔβʔ͕ࠓ·Ͱͷۀ຿ͷதͰҧ࿨ײͳ ͘࢖͍͜ͳͤΔମݧ͕࡞ΕΔ
26. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 
 ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 શମΛ௨ͯ͠ɺ ݸਓతʹײͨ͡΢ʔΦͳΒͰ͸ॏཁͳϙΠϯτ͕2ͭ
27. ࢲ͕ݸਓతʹײ͡Δ΢ʔΦͳΒͰ͸ͷ؀ڥᶃ ηʔϧεɾCSͷ໾ׂ͕ಛघɻ ΞϓϦΛചΓࠐΉɾϑΥϩʔ͢Δ͚ͩͰͳ͘೔ʑϢʔβʔͱಉ͡ۀ຿Λ͜ͳ͢ ηʔϧεɾCS Ϣʔβʔ ΞϓϦΛ࢖ͬͯ΋Β͏ ηʔϧεɾCS Ϣʔβʔ ΞϓϦΛ࢖ͬͯ΋Β͏ ΞϓϦ֎ͰڕͷചΓങ͍ Ұൠత ΢ʔΦ
28. ࢲ͕ݸਓతʹײ͡Δ΢ʔΦͳΒͰ͸ͷ؀ڥᶄ ։ൃνʔϜʹดͣ͡ɺશһͰϓϩμΫτΛྑ͘͢Δ
29. ·ͱΊ - ݱ৔ʹدΓఴ͏ͨΊʹ4ͭͷ։ൃεςοϓ͕͋Δ - ۀքཧղ/Ϣʔβʔ՝୊ཧղ/ղܾͷ࢓૊Έ/ۀ຿ʹ༹͚ࠐΉUIUX - εςοϓ̎ʮϢʔβʔ՝୊ཧղʯ - Ϣʔβʔ΍Ϣʔβʔ՝୊ͷղ૾౓Λѹ౗తʹ্͛Δ͜ͱΛ໨ࢦͯ͠ - ϓϨΠϠʔʹͳΔ/શһ͕௥ՃͰ͖ΔΞΠσΞϦετ - εςοϓ̐ʮۀ຿ʹ༹͚ࠐΉUI/UXʯ - ैདྷͷ঎श׳Λϒνյ͢ѹ౗తͳ࢖͍ͪ͜͝Λ໨ࢦͯ͠ - ηʔϧεɾCSͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά - શମΛ௨ͯ͠ͷ΢ʔΦͳΒͰ͸ͷϙΠϯτ - ᶃࣗ෼͕ͨͪϢʔβʔͱಉ͡ۀ຿Λߦ͏ѹ౗తͳ౰ࣄऀҙࣝ - ᶄνʔϜͷ֞ࠜΛ௒͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘
30. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ