Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Misaki Kubosaka
December 23, 2022

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

Misaki Kubosaka

December 23, 2022
Tweet

More Decks by Misaki Kubosaka

Other Decks in Design

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