自己満アプリから脱却するためにした UI改善とは

https://findy.connpass.com/event/370680/

Transcript

1. ࣗݾຬΞϓϦ͔Β୤٫͢ΔͨΊʹͨ͠ UIվળͱ͸ 2025.10.20 @mcz9mm | Kaoru Matarai
2. ME גࣜձࣾShinonome(6೥໨ʣ ϞόΠϧΤϯδχΞ ɹʢ৽ଔ͸LIFULLͷiOSΤϯδχΞʣ iOS, Android྆ํΛ୲౰ɺ WebσβΠϯपΓ΋΍ͬͨΓͯ͠·͢ ɾझຯɿݸਓ։ൃɺήʔϜ ɾಛٕɿਫӭʢ2ࡀ͔Β20೥ʣ @mcz9mm (ຢདྷ ܆ʣ
3. ࡞͖ͬͯͨΞϓϦʹ͍ͭͯ
4. ະެ։/࡟আؚΊ15ݸ΄ͲΞϓϦΛ੍࡞
5. ຊ೔͸ஷۚϝϞʹ͍ͭͯ࿩͠·͢
6. 10ສϢʔβʔୡ੒ʹ͸ 3~4೥΄Ͳ͔͔Γ·ͨ͠ ʢAndroid/iOS߹ܭʣ
7. ϦϦʔε౰࣌͸ ࠓͱൺ΂Δͱผ෺ͷΞϓϦͰͨ͠
8. ॳظ͸ษڧͷ͍ͭͰʹϙʔτϑΥϦΦͳΕ͹ ͱ͍͍ͳͱ͍͏ײ֮Ͱ։ൃ͍ͯ͠·ͨ͠ɻ
9. ͦΕͰ΋ Ұఆ਺࢖ͬͯ͘ΕΔਓ͕͍ΔͳΒͱࢥ͍ɺ ʮຖ೔࢖ͬͯ΋Β͑Δ΋ͷʯʹҙࣝΛγϑτ UIվળલͷΞΫςΟϒϢʔβʔ਺
10. ࣮ࡍʹߦͬͨUIվળ
11. Ϣʔβʔͷ੠Λ൓өͭͭ͠ ̏౓ʹ౉Γେن໛ͳUIͷݟ௚͠Λ࣮ࢪ 1ճ໨ˠ2ճ໨ͷΈίϯηϓτΛม͑ɺ Ҏ߱͸ػೳपΓͷ੔ཧ
12. λʔήοτΛ࠶ઃఆ ɾஉੑతͳελΠϦογϡUI͔Β ɹঁੑ΋࢖͍΍͍͢നجௐγϯϓϧUI΁ ʮຖ೔࢖͏લఏͷUIʯ͸“໨ཱͨͤͳ͍ɾർΕͳ͍”
13. ໨ʹർΕͳ͍ͨΊͷΧϥʔͳͲ͸ ͜ͷลΛҙࣝ https://medium.com/design-bootcamp/alternative-colors-for-pure- white-in-ui-ux-design-f861ab5a33d7
14. ຖ೔࢖ͬͯ΋Β͑ΔUIʹ͢Δ޻෉ ɾϓϥΠϚϦʔΧϥʔ͸എܠશମʹ࢖Θͳ͍ ɾશମ͸നجௐʹ౷Ұ͠Ϙλϯ΍ΞΠίϯͳͲΞΫηϯτ෦෼͚ͩʹ → ओுΛ߇͑Ίʹ͢Δ͜ͱͰ“ຖ೔࢖ͬͯ΋ർΕͳ͍”ը໘Λҙࣝ
15. ౰࣌͸͜ͷΑ͏ͳϦχϡʔΞϧҊΛߟ͍͕͑ͯͨ ࣮ࡍʹखݩͰϞοΫΛ৮ͬͯΈΔͱ ʮγϯϓϧײ͕ͳ͍ʯʮ৭͕ओு͍͗ͯ͢͠ΔʯͳͲͷ ҹ৅͕ڧ͔ͬͨͷͰ٫Լ
16. ඪ४UIΛࢀߟʹ ɾόοΫΞοϓը໘͸iOSͷઃఆΞϓϦΛϕʔεʹઃܭ ɾFlutterͰ΋ՄೳͳൣғͰOS࠷దԽΛ࣮ࢪ
17. ຖ೔ͷه࿥Λߦ͏ը໘͸େ͖͘ߏ੒Λม͑ͣʹ ඍௐ੔ͷΈʹͱͲΊΔɻ Ϣʔβʔ͕ૢ࡞͢ΔϝΠϯ෦෼ͷମݧ͸ม͑ͳ͍ɻ ه࿥ը໘ΛϞʔμϧԽ → ϢʔβʔࠞཚˍϨϏϡʔߥΕ → ݩʹ໭ͨ͠
18. վળͷ݁Ռ ॳظ ̍ճ໨ϦχϡʔΞϧ ̎ճ໨ϦχϡʔΞϧ ̏ճ໨ϦχϡʔΞϧ
19. Ξοϓσʔτ௚ޙ͸੕1ධՁ΋෇͕͘ ҰఆظؒͰࢭ·Δ 2→3ճ໨ͷϦχϡʔΞϧ࣌ͷϨϏϡʔਪҠ
20. ·ͱΊɹʙվળͷώϯτʙ ࣗ෼ͷ৔߹ ɾ࠺΍༑ਓʹ࣮ࡍʹ࢖ͬͯ΋Β͍ɺখ͞ͳҧ࿨ײΛٵ্͍͛Δɻ ɾϦχϡʔΞϧޙͷϨϏϡʔ͸͙͢௚ͣ͞ɺ༷ࢠΛݟͯʮҰաੑ͔ຊ౰ʹ՝୊͔ʯΛ ൑அɻ ɾϨϏϡʔͰॻ͔Ε͍ͯΔ͜ͱ͕Ϣʔβʔͷ૯ҙͱ͸ݶΒͳ͍ɻ ɾίΞػೳ͸҆қʹม͑ͳ͍ɻ ɾେ͖͘ม͑ΔλΠϛϯά͸Ϣʔβʔ਺͕গͳ͍͏ͪʹɻঃʑʹಈ͖͕৻ॏʹͳΔɻ ɾେ௨ΓͷվળΛɻ࢖ΘΕͳ͍ը໘ɾػೳΑΓ΋νϡʔτϦΞϧ΍ϝΠϯͷը໘ͳͲ શһ͕৮ΕΔՕॴΛ༏ઌతʹɻ UIվળ͸੠Λरͬͯଈ൓ө͢ΔͷͰ͸ͳ͘ɺ Ϣʔβʔߦಈ × ੠ × ίϯηϓτͷόϥϯεͰܾΊΔ
21. Thank Youʂ
22. https://shinonome-inc.notion.site/Shinonome- FY2025-1c855fdfb78d80ddac86d67295616e0b ࠾༻ϖʔδ ITͱڭҭͰੈͷதΛྑ͘͢Δɺ ౦ژཧՊେֶൃͷςΫϊϩδʔΧϯύχʔ σβΠϯ੍࡞ɾHPվमɾγεςϜ։ൃ΍ݚڀ։ൃ·ͰɻҰ؏ͯ͠൐૸͍ͨ͠·͢ɻ