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
340
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.4k
Cookpad Online Summer Internship 2020, サービス開発実践編講義
misaaa09
0
3.9k
Other Decks in Design
See All in Design
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
870
デザインに関わる全ての人たちでエベレスト登頂を目指すために取り組んでいること
amishiratori
0
600
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
240
1人歩きする営業資料作成
yutoshukuya
0
150
雑誌『広告』をサイズ展開する
takuro_nakajima
PRO
0
1.3k
ポートフォリオ思考を通じたデザイナーキャリアの形成と未来への展望
recruitengineers
PRO
3
2.3k
MiKS inc. Company PR en_202404
zakkerooni
0
170
もち的デザイナーのキャリアデザイン新提言:副業起業家のすゝめ
mochitaro
0
1.3k
Installing and Running decksh/pdfdeck
ajstarks
1
490
マルチプロダクトの価値と開発をスケールさせる、パターンレベルのデザインシステム
fkady
1
180
他人事じゃないWebアクセシビリティ入門
arihiro17
0
220
Data+Diversity: Celebrating W.E.B Du Bois through Data Visualization
ajstarks
0
310
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Adopting Sorbet at Scale
ufuk
68
8.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
241
1.2M
Reflections from 52 weeks, 52 projects
jeffersonlam
345
19k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
Designing the Hi-DPI Web
ddemaree
276
33k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
43k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
The Invisible Customer
myddelton
114
12k
Making the Leap to Tech Lead
cromwellryan
124
8.5k
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ͱݒ೦ग़͠ձ/ҰॹʹσβΠϯΛνϡʔχϯά - શମΛ௨ͯ͠ͷʔΦͳΒͰͷϙΠϯτ - ᶃ͕ࣗͨͪϢʔβʔͱಉ͡ۀΛߦ͏ѹతͳࣄऀҙࣝ - ᶄνʔϜͷ֞ࠜΛ͑ͯɺશһͰϓϩμΫτΛ࡞͍ͬͯ͘
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ