Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
Search
Misaki Kubosaka
December 23, 2022
Design
0
390
UDM#2 水産現場のユーザーに寄り添う ウーオ流プロダクト開発
Misaki Kubosaka
December 23, 2022
Tweet
Share
More Decks by Misaki Kubosaka
See All by Misaki Kubosaka
Cookpad Online Summer Internship 2020, サービス開発基礎講義
misaaa09
2
4.5k
Cookpad Online Summer Internship 2020, サービス開発実践編講義
misaaa09
0
4k
Other Decks in Design
See All in Design
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
Dreamia
elsh
0
170
ZOZO CDO Office Design
zozodevelopers
PRO
1
450
Credence
lratmansunu
0
460
みんなに知って欲しい 視覚過敏のアクセシビリティ
0opacity_
4
830
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
200
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
210
なぜデフォルトが青色!? Tint Colorの理由に迫る
akidon0000
0
460
超・ファシリテーション 無理ゲー課題を軽やかに超える MIMIGURI流チームデザイン|TOKYO CREATIVE COLLECTION
madue
1
1.2k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
ふわっとはじめるSSOT – SSOT for Communication Design
sekiguchiy
0
1.1k
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
32
1.5k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
96
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Side Projects
sachag
452
42k
The Cult of Friendly URLs
andyhume
78
6k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Agile that works and the tools we love
rasmusluckow
327
21k
A Tale of Four Properties
chriscoyier
156
23k
Fireside Chat
paigeccino
34
3k
Being A Developer After 40
akosma
86
590k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Transcript
ਫ࢈ݱͷϢʔβʔʹدΓఴ͏ ʔΦྲྀϓϩμΫτ։ൃ misaki kubosaka / UUUO, inc. 22-12-21 UDM#2
ࣗݾհ ٱอࡔ ඒ࡙ Misaki Kubosaka UI/UX Designer 2016.4~ 2019.10~ 2022.1~
ΫοΫύουגࣜձࣾʹUI/UXσβΠφʔͱͯ͠৽ଔೖࣾɻ ͕ࣗࣗϔϏʔϢʔβʔͩͬͨαʔϏεʮcookpadʯͷΞ ϓϦσβΠϯʹैࣄɻ ෭ۀͱͯ͠ʔΦͷϓϩμΫτσβΠϯʹؔΘΓ͡Ίɺ ਫ࢈ۀ×ITͷ͠͞ɺΓ͕͍ΛΔ ͕ࣗΑ͘Βͳ͍ྖҬͰɺ՝Λࣗ͝ͱʹཧղ͠ ղܾͰ͖ΔΑ͏ʹͳΓͨͯ͘ɺʔΦస৬ɻ 1ਓUI/UXσβΠφʔͱͯ͠ɺʑαʔϏεͷUI/UXͦ ͷଞσβΠϯۀʹैࣄ @misaaa09 #כϲ࡚ͰϑϧϦϞʔτ #ڕॳ৺ऀ
ࠓ͢͜ͱ BtoB Ͱ ݱͷϢʔβʔ ʹ دΓఴͬͨαʔϏε Λ࡞ΔͨΊʹ ʔΦ͕औΓΜͰ͍Δ͜ͱ ʹ͍͓ͭͯ͠·͢ʂ
ʔΦʹ͓͚Δ”ݱ”ͬͯͲΜͳͱ͜Ζʁ
None
None
·ͩ·ͩిFAXɺखॻ͖͕ओྲྀͷۀք ʑେྔͷڕɾใΛѻ͍ͬͯΔਓͨͪ ͦΜͳʮਫ࢈ݱʯʹدΓఴ͏ͨΊʹ…
ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ ۀքͷߏΛ ཧղ͢Δ 1 Ϣʔβʔ՝Λ ཧղ͢Δ 2
՝Λղܾ͢Δ ΈΛߟ͑Δ 3 ۀʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ ۀքͷߏΛ ཧղ͢Δ 1 Ϣʔβʔ՝Λ ཧղ͢Δ 2
՝Λղܾ͢Δ ΈΛߟ͑Δ 3 ۀʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 ࠓʔΦͷಛతͳऔΓΈ͕٧·͍ͬͯΔ ̎ͱ̐ʹ͍ͭͯ͝հ͠·͢
ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ ۀքͷߏΛ ཧղ͢Δ 1 Ϣʔβʔ՝Λ ཧղ͢Δ 2
՝Λղܾ͢Δ ΈΛߟ͑Δ 3 ۀʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
ϢʔβʔϢʔβʔ՝ͷ ղ૾Λѹతʹ্͛Δ େʹ͍ͯ͠ΔϙΠϯτ 2 1 Ϣʔβʔ՝Λཧղ͢Δ 3 4
͕ࣗͨͪ ϓϨΠϠʔʹͳͬͯΈΔ ʔΦϝϯόʔ͕ શһՃͰ͖Δ վળΞΠσΞϦετ 2 1 Ϣʔβʔ՝Λཧղ͢Δ 3 4
• 2018ࠒɺௗऔͷങਓͱͯ͠ࣄۀε λʔτ • ̍ͭͷڕͱͯ͠ɺʑڕΛചΓങ͍͠ɺ ച্Λཱ͍ͯͯ͘ • ·͕ͣࣗͨͪϢʔβʔͱಉ͡ۀΛ ಉ͡ઢͰߦ͏͜ͱͰɺϢʔβʔཧղɾ՝ ൃݟΛߦ͖ͬͯͨ
͕ࣗͨͪ ϓϨΠϠʔʹͳͬͯΈΔ 2 1 Ϣʔβʔ՝Λཧղ͢Δ 3 4
͕ࣗͨͪ ϓϨΠϠʔʹͳͬͯΈΔ ಘΒΕͨ͜ͱ • ͕ࣗͨͪࣄऀʹͳΔ͜ͱͰɺ֎͔Β؍ ͨ͠ΓώΞϦϯά͢ΔҎ্ͷղ૾Ͱ ՝ΛཧղͰ͖Δ • ʮΞϓϦΛ࡞ΔελʔτΞοϓاۀʯͱ͠ ͯͰͳ͘ʮௗऔͷڕʯͱͯ͠ɺۀքʹ
ೖΓࠐΉ͜ͱͰɺؒҙࣝΛ࣋ͬͯΒ ͑ɺϢʔβʔͱͷڠྗ͕ؔ࡞ΕΔ • ࣾʹɺϢʔβʔ͕͍Δঢ়ଶͳͷͰɺؾܰ ʹώΞϦϯά͕Ͱ͖Δ 2 1 Ϣʔβʔ՝Λཧղ͢Δ 3 4
2 1 Ϣʔβʔ՝Λཧղ͢Δ ʔΦϝϯόʔ͕શһՃͰ͖Δ վળΞΠσΞϦετ • ࣾͷnotionʹɺࣗ༝ʹ୭Ͱॻ͖ࠐΊ ΔɺϓϩμΫτͷվળΞΠσΞϦετΛઃ ஔ •
ͲΜͳΞΠσΞͰؾܰʹॻ͍ͯΒ͑Δ ۭؒΛࢦͯ͠࡞ͬͨ • ॻ͖ํʹ໎Θͳ͍Α͏ςϯϓϨʔτΛ༻ ҙɻΞΠσΞΛॻ͘ͷͰ͋Δ͕ɺΞΠ σΞͷഎܠʹ͋ΔϢʔβʔͷ՝Λڞ༗Ͱ ͖ΔΑ͏ͳςϯϓϨʔτʹઃܭ 3 4
None
2 1 Ϣʔβʔ՝Λཧղ͢Δ ʔΦϝϯόʔ͕શһՃͰ͖Δ վળΞΠσΞϦετ 3 4 ಘΒΕͨ͜ͱ • શһ͕ॻ͖ࠐΊΔۭؒʹͳͬͨͨΊɺʑ
Ϣʔβʔͱ͍ͯ͠ΔηʔϧεCSϝϯόʔ ͷ͔Βؾ͖ͮΛΒ͍͘͢ͳͬͨ • ͜ͷϦετ͔Βଟ͘ͷࢪࡦੜ·ΕϦϦʔ ε͞Εͨ🎉 • ΞΠσΞͷཪʹӅΕΔϢʔβʔ՝ΛݴޠԽ ͯ͠Β͏͜ͱͰɺखஈ͕ઌߦͤͣɺϢʔ βʔՁϕʔεͰ͕ٞͰ͖ΔΑ͏ʹͳͬͨ
ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ ۀքͷߏΛ ཧղ͢Δ 1 Ϣʔβʔ՝Λ ཧղ͢Δ 2
՝Λղܾ͢Δ ΈΛߟ͑Δ 3 ۀʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4
ैདྷͷश׳Λϒνյ͢ ѹతͳ͍ͪ͜͝ େʹ͍ͯ͠ΔϙΠϯτ 4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2
4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 ઃܭͷॳظஈ֊͔Βɺ ηʔϧεɾCSΛר͖ࠐΈ ݒ೦ग़͠ձ࣮ࢪ Ϣʔβʔʹ͍ۙϝϯόʔ ͱҰॹʹࡉ͔͍දݱͷ
νϡʔχϯά
• ࢪࡦͷΠϝʔδ͕͋Δఔ·ͱ·ͬͨΒɺ ૣ͍ஈ֊ͰηʔϧεɾCSϝϯόʔͱMTG Λߦ͍·͢ɻ • ࢪࡦ༰ͷڞ༗Λߦ͍ɺʮʔΦͷࢹ ʯʮങ͍खͷࢹʯʮചΓखͷࢹʯ ͱ֤छཱͷݒ೦Λચ͍ग़͠ɺUI/UXͷվ ળʹ׆͔͍͖ͯ͠·͢ɻ ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ
CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ 4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2
ઃܭͷॳظஈ֊͔Βɺηʔϧεɾ CSΛר͖ࠐΈݒ೦ग़͠ձ࣮ࢪ 4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 ಘΒΕͨ͜ͱ • Ϣʔβʔͱʑ͢ΔϝϯόʔʹૣΊʹҙݟ
ΛΒ͏͜ͱͰɺߟྀෆ͕ݮΔɻ • ࣮લʹෆཁͳػೳΛ͗མͱ͢͜ͱ͕Մೳ • ΞϓϦػೳϦϦʔεޙͷηʔϧεCSͷಈ͖ Λࣄલʹ࡞ઓձٞͰ͖Δ
4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά • ػೳͷࡉ͔͍σβΠϯදݱϥΠςΟϯάͳͲ ɺඞཁʹԠͯ͡Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹ
ʹνϡʔχϯάΛ͠·͢ • ྫ͑ɺΛද͢ධՁج४ɺͳͲڕʹΑͬ ͯɺϢʔβʔ͕Γ͍ͨใ͕ඍົʹҟͳΔͨ Ίɺ͜ͷධՁج४ͷύλʔϯΛɺUUUO Base(ങ ਓͱͯ͠ͷڌ)Ͱಇ͍͍ͯͨϝϯόʔͱҰॹʹݕ ౼ΛਐΊ·ͨ͠
1000ڕछͷ දݱΛݕ౼ ύλʔϯΛ άϧʔϐϯά ࠷ύλʔϯʹཧ ˍ 4ஈ֊ʹௐ UIʹམͱ͢ 1 2
3 4
4 1 ۀʹ༹͚ࠐΉUI/UXͷຏ͖ࠐΈ 3 2 Ϣʔβʔʹ͍ۙϝϯόʔͱҰॹʹ ࡉ͔͍දݱͷνϡʔχϯά ಘΒΕͨ͜ͱ • ͔ͳΓৄࡉͳཧղΛ࣋ͭϝϯόʔͱɺڕυૉ
ਓϝϯόʔ͕ҰॹʹऔΓΉ͜ͱͰɺۀքͷ ৽ࢀऀʙݰਓ·Ͱ·ΜΜͳ͑͘Δམͱ͠ Ͳ͜ΖΛݟ͚ͭΔ͜ͱ͕Ͱ͖Δ • ࡉ͔͍දݱ·Ͱνϡʔχϯά͢Δ͜ͱʹΑͬ ͯɺϢʔβʔ͕ࠓ·ͰͷۀͷதͰҧײͳ ͍͘͜ͳͤΔମݧ͕࡞ΕΔ
ϢʔβʔʹدΓఴ͏ͨΊͷϓϩμΫτ։ൃεςοϓ ۀքͷߏΛ ཧղ͢Δ 1 Ϣʔβʔ՝Λ ཧղ͢Δ 2
՝Λղܾ͢Δ ΈΛߟ͑Δ 3 ۀʹ༹͚ࠐΉ UI/UXͷຏ͖ࠐΈ 4 શମΛ௨ͯ͠ɺ ݸਓతʹײͨ͡ʔΦͳΒͰॏཁͳϙΠϯτ͕2ͭ
ࢲ͕ݸਓతʹײ͡ΔʔΦͳΒͰͷڥᶃ ηʔϧεɾCSͷׂ͕ಛघɻ ΞϓϦΛചΓࠐΉɾϑΥϩʔ͢Δ͚ͩͰͳ͘ʑϢʔβʔͱಉ͡ۀΛ͜ͳ͢ ηʔϧεɾCS Ϣʔβʔ ΞϓϦΛͬͯΒ͏ ηʔϧεɾCS Ϣʔβʔ ΞϓϦΛͬͯΒ͏ ΞϓϦ֎ͰڕͷചΓങ͍
Ұൠత ʔΦ
ࢲ͕ݸਓతʹײ͡ΔʔΦͳΒͰͷڥᶄ ։ൃνʔϜʹดͣ͡ɺશһͰϓϩμΫτΛྑ͘͢Δ
·ͱΊ - ݱʹدΓఴ͏ͨΊʹ4ͭͷ։ൃεςοϓ͕͋Δ - ۀքཧղ/Ϣʔβʔ՝ཧղ/ղܾͷΈ/ۀʹ༹͚ࠐΉUIUX - εςοϓ̎ʮϢʔβʔ՝ཧղʯ - ϢʔβʔϢʔβʔ՝ͷղ૾Λѹతʹ্͛Δ͜ͱΛࢦͯ͠ -
ϓϨΠϠʔʹͳΔ/શһ͕ՃͰ͖ΔΞΠσΞϦετ - εςοϓ̐ʮۀʹ༹͚ࠐΉUI/UXʯ - ैདྷͷश׳Λϒνյ͢ѹతͳ͍ͪ͜͝Λࢦͯ͠ - ηʔϧεɾCSͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά - શମΛ௨ͯ͠ͷʔΦͳΒͰͷϙΠϯτ - ᶃ͕ࣗͨͪϢʔβʔͱಉ͡ۀΛߦ͏ѹతͳࣄऀҙࣝ - ᶄνʔϜͷ֞ࠜΛ͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ