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

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

Avatar for Misaki Kubosaka Misaki Kubosaka
December 23, 2022

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

Avatar for Misaki Kubosaka

Misaki Kubosaka

December 23, 2022
Tweet

More Decks by Misaki Kubosaka

Other Decks in Design

Transcript

  1. ࣗݾ঺հ ٱอࡔ ඒ࡙ Misaki Kubosaka UI/UX Designer 2016.4~ 2019.10~ 2022.1~

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


    ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
  3. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 


    ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 ࠓ೔͸΢ʔΦͷಛ௃తͳऔΓ૊Έ͕٧·͍ͬͯΔ ̎ͱ̐ʹ͍ͭͯ͝঺հ͠·͢
  4. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 


    ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
  5. ࣗ෼͕ͨͪ ϓϨΠϠʔʹͳͬͯΈΔ ಘΒΕͨ͜ͱ • ࣗ෼͕ͨͪ౰ࣄऀʹͳΔ͜ͱͰɺ֎͔Β؍ ࡯ͨ͠ΓώΞϦϯά͢ΔҎ্ͷղ૾౓Ͱ ՝୊ΛཧղͰ͖Δ • ʮΞϓϦΛ࡞ΔελʔτΞοϓاۀʯͱ͠ ͯͰ͸ͳ͘ʮௗऔͷڕ԰ʯͱͯ͠ɺۀքʹ

    ೖΓࠐΉ͜ͱͰɺ஥ؒҙࣝΛ࣋ͬͯ΋Β ͑ɺϢʔβʔͱͷڠྗؔ܎͕࡞ΕΔ • ࣾ಺ʹɺϢʔβʔ͕͍Δঢ়ଶͳͷͰɺؾܰ ʹώΞϦϯά͕Ͱ͖Δ 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ 3 4
  6. 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ վળΞΠσΞϦετ • ࣾ಺ͷnotionʹɺࣗ༝ʹ୭Ͱ΋ॻ͖ࠐΊ ΔɺϓϩμΫτͷվળΞΠσΞϦετΛઃ ஔ •

    ͲΜͳΞΠσΞͰ΋ؾܰʹॻ͍ͯ΋Β͑Δ ۭؒΛ໨ࢦͯ͠࡞ͬͨ • ॻ͖ํʹ໎Θͳ͍Α͏ςϯϓϨʔτΛ༻ ҙɻΞΠσΞΛॻ͘΋ͷͰ͸͋Δ͕ɺΞΠ σΞͷഎܠʹ͋ΔϢʔβʔͷ՝୊Λڞ༗Ͱ ͖ΔΑ͏ͳςϯϓϨʔτʹઃܭ 3 4
  7. 2 1 Ϣʔβʔ՝୊Λཧղ͢Δ ΢ʔΦϝϯόʔ͕શһ௥ՃͰ͖Δ վળΞΠσΞϦετ 3 4 ಘΒΕͨ͜ͱ • શһ͕ॻ͖ࠐΊΔۭؒʹͳͬͨͨΊɺ೔ʑ

    Ϣʔβʔͱ઀͍ͯ͠Δηʔϧε΍CSϝϯόʔ ͷ͔Βؾ͖ͮΛ΋Β͍΍͘͢ͳͬͨ • ͜ͷϦετ͔Β਺ଟ͘ͷࢪࡦ΋ੜ·ΕϦϦʔ ε͞Εͨ🎉 • ΞΠσΞͷཪʹӅΕΔϢʔβʔ՝୊ΛݴޠԽ ͯ͠΋Β͏͜ͱͰɺखஈ͕ઌߦͤͣɺϢʔ βʔՁ஋ϕʔεͰٞ࿦͕Ͱ͖ΔΑ͏ʹͳͬͨ
  8. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 


    ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
  9. ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 ಘΒΕͨ͜ͱ • Ϣʔβʔͱ೔ʑ઀͢ΔϝϯόʔʹૣΊʹҙݟ

    Λ΋Β͏͜ͱͰɺߟྀෆ଍͕ݮΔɻ • ࣮૷લʹෆཁͳػೳΛ࡟͗མͱ͢͜ͱ͕Մೳ • ΞϓϦػೳϦϦʔεޙͷηʔϧε΍CSͷಈ͖ Λࣄલʹ࡞ઓձٞͰ͖Δ
  10. 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά • ػೳͷࡉ͔͍σβΠϯදݱ΍ϥΠςΟϯάͳͲ ͸ɺඞཁʹԠͯ͡Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹ

    ʹνϡʔχϯάΛ͠·͢ • ྫ͑͹ɺ઱౓Λද͢ධՁج४ɺͳͲ͸ڕʹΑͬ ͯɺϢʔβʔ͕஌Γ͍ͨ৘ใ͕ඍົʹҟͳΔͨ Ίɺ͜ͷධՁج४ͷύλʔϯΛɺUUUO Base(஥ങ ਓͱͯ͠ͷڌ఺)Ͱಇ͍͍ͯͨϝϯόʔͱҰॹʹݕ ౼ΛਐΊ·ͨ͠
  11. 4 1 ۀ຿ʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά ಘΒΕͨ͜ͱ • ͔ͳΓৄࡉͳཧղΛ࣋ͭϝϯόʔͱɺڕυૉ

    ਓϝϯόʔ͕ҰॹʹऔΓ૊Ή͜ͱͰɺۀքͷ ৽ࢀऀʙݰਓ·Ͱ·Μ΂Μͳ͘࢖͑Δམͱ͠ Ͳ͜ΖΛݟ͚ͭΔ͜ͱ͕Ͱ͖Δ • ࡉ͔͍දݱ·Ͱνϡʔχϯά͢Δ͜ͱʹΑͬ ͯɺϢʔβʔ͕ࠓ·Ͱͷۀ຿ͷதͰҧ࿨ײͳ ͘࢖͍͜ͳͤΔମݧ͕࡞ΕΔ
  12. ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ 
 ۀքͷߏ଄Λ ཧղ͢Δ 1 
 Ϣʔβʔ՝୊Λ ཧղ͢Δ 2 


    ՝୊Λղܾ͢Δ ࢓૊ΈΛߟ͑Δ 3 
 ۀ຿ʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 શମΛ௨ͯ͠ɺ ݸਓతʹײͨ͡΢ʔΦͳΒͰ͸ॏཁͳϙΠϯτ͕2ͭ
  13. ·ͱΊ - ݱ৔ʹدΓఴ͏ͨΊʹ4ͭͷ։ൃεςοϓ͕͋Δ - ۀքཧղ/Ϣʔβʔ՝୊ཧղ/ղܾͷ࢓૊Έ/ۀ຿ʹ༹͚ࠐΉUIUX - εςοϓ̎ʮϢʔβʔ՝୊ཧղʯ - Ϣʔβʔ΍Ϣʔβʔ՝୊ͷղ૾౓Λѹ౗తʹ্͛Δ͜ͱΛ໨ࢦͯ͠ -

    ϓϨΠϠʔʹͳΔ/શһ͕௥ՃͰ͖ΔΞΠσΞϦετ - εςοϓ̐ʮۀ຿ʹ༹͚ࠐΉUI/UXʯ - ैདྷͷ঎श׳Λϒνյ͢ѹ౗తͳ࢖͍ͪ͜͝Λ໨ࢦͯ͠ - ηʔϧεɾCSͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά - શମΛ௨ͯ͠ͷ΢ʔΦͳΒͰ͸ͷϙΠϯτ - ᶃࣗ෼͕ͨͪϢʔβʔͱಉ͡ۀ຿Λߦ͏ѹ౗తͳ౰ࣄऀҙࣝ - ᶄνʔϜͷ֞ࠜΛ௒͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘