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
440
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
The Golden Whitney
ohtristanart
PRO
0
410
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
230
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
7
1.1k
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.4k
Storyboard Honey
rocioparronrubio
0
240
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
200
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.4k
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
240
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
170
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
1.8k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
380
Bulletproof Design System with TypeScript
takanorip
6
3k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
53
11k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
6
660
Thoughts on Productivity
jonyablonski
69
4.7k
Music & Morning Musume
bryan
47
6.6k
The Language of Interfaces
destraynor
158
25k
What's in a price? How to price your products and services
michaelherold
245
12k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
Balancing Empowerment & Direction
lara
1
90
It's Worth the Effort
3n
184
28k
Code Reviewing Like a Champion
maltzj
523
40k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
15
890
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ͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά - શମΛ௨ͯ͠ͷʔΦͳΒͰͷϙΠϯτ - ᶃ͕ࣗͨͪϢʔβʔͱಉ͡ۀΛߦ͏ѹతͳࣄऀҙࣝ - ᶄνʔϜͷ֞ࠜΛ͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ