Slide 1

Slide 1 text

UXσβΠφʔ͕ݞॻ͖ͷࢲ͕ ͍·UXσβΠϯʹͦΜͳʹڵຯ͕ͳ͍ཧ༝ Takuya Goto SmartHR ϓϩμΫτσβΠφʔɾUXσβΠφʔ 2024.5.28 @ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ #uxd2024 1 ©︎ Takuya Goto / @versionfive ࣈນೖΓ ഑෍൛

Slide 2

Slide 2 text

2 ࿩͢ͻͱ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ 2020.5ʙ SmartHR ϓϩμΫτσβΠϯ౷ׅຊ෦ɹϓϩμΫτσβΠφʔɾUXσβΠφʔ 2010ʙ2020 ๭௨৴ࣄۀձࣾʢίϯγϡʔϚ޲͚αʔϏεاըŋӡ༻ɺࣾ಺/Ϗδωε޲͚ΞϓϦ։ൃʣ Takuya Goto - 2010 ΢ΣϒσβΠφʔ ʢֶੜ࣌୅ʣ 2020.5 - ϓϩμΫτσβΠϯ 2016 XσβΠϯֶߍ मྃ (1ظੜ) 2014 HCD-Netೝఆ ਓؒத৺ઃܭεϖγϟϦετ (ʙ2023) 2010 ࢈ۀٕज़େֶӃେֶʮਓؒத৺σβΠϯʯमྃ (2ظੜ) ΄͔ hcdvalue, UXRED versionfive 2010 - 2020 ίϯγϡʔϚ޲͚αʔϏεاըɾӡ༻ ࣾ಺/Ϗδωε޲͚ΞϓϦ։ൃ ๭௨৴ࣄۀձࣾ

Slide 3

Slide 3 text

3 UXσβΠφʔʁͳʹͯ͠Δͷਓͳͷʁ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ SmartHRͷϗʔϜը໘ʢτοϓϖʔδʣͷσβΠϯ SmartHRʢεϚʔτHRʣ

Slide 4

Slide 4 text

4 UXσβΠφʔʁͳʹͯ͠Δͷਓͳͷʁ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ SmartHR Design Systemͷ্ཱ͔ͪ͛Βࠓ·Ͱ SmartHR Design System

Slide 5

Slide 5 text

5 UXσβΠφʔʁͳʹͯ͠Δͷਓͳͷʁ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ֶੜʢߴઐੜͳͲʣ޲͚ʹUXͷجૅߨ࠲ ಇ͘ͷֶͼࣷʢ͸ͨΒ͘ͷ·ͳͼ΍ʣ | גࣜձࣾSmartHR

Slide 6

Slide 6 text

‣ UXσβΠϯͷఆٛʹࢥ͏͜ͱ ‣ UXσβΠϯͷର৅ʹࢥ͏͜ͱ ‣ UXσβΠϯͷΠϚʹࢥ͏͜ͱ ʙ ࢲͷؔ৺ 6 ͓࿩͢Δ͜ͱ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive ͜Μͳ3఺Ͱʮ͍·UXσβΠϯʹͦΜͳʹڵຯ͕ͳ͍ཧ༝ʯͱ͍͏੾ΓޱͰ͓࿩͍ͨ͠ͱࢥ͍·͢ɻ ࠓճ͸ɺಇ͘ͷֶͼࣷϓϩδΣΫτͰֶੜ͞Μ޲͚ʹ࿩͍ͯ͠Δجૅߨ࠲ͷ಺༰΋࢖͍͓ͭͭ࿩͍͖ͯ͠·͢ɻ

Slide 7

Slide 7 text

UXσβΠϯͷఆٛʹࢥ͏͜ͱ 7 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 8

Slide 8 text

UIʁUXʁҧ͍͸ʁ ϢʔβϏϦςΟͬͯʁ UXʁUXσβΠϯʁҧ͍͸ʁ 8 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ օ͞Μ͸ఆٛͷઆ໌Ͱ͖·͔͢ʁ

Slide 9

Slide 9 text

पล༻ޠΛؔ܎ਤͰଊ͑Δ 9 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UI / ϢʔβϏϦςΟ / UX / UXσβΠϯ ࢲͷ͸ͳ͠ͷલఏʹͳΔͷͰɺֶੜ͞Μ޲͚ʹ࿩͍ͯ͠Δؔ܎ਤΛ͔ͭͬͯɺपล༻ޠΛαΫοͱ೺Ѳ͓͖ͯ͠·͠ΐ͏

Slide 10

Slide 10 text

10 UIɺϢʔβϏϦςΟɺUXɺUXσβΠϯ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ?? ?? ͭ͘Δ ௐ΂Δ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε (ϓϩμΫτ) ?? ?? ར༻͢Δ 4ͭͷ੺ࣈͷ??ʹUIɺϢʔβϏϦςΟɺUXɺUXσβΠϯ͕ͦΕͧΕೖΔͷͰ͕͢ɺΘ͔Γ·͔͢ʁΘ͔Γ·͢ΑͶɻ

Slide 11

Slide 11 text

11 UIɺϢʔβϏϦςΟɺUXɺUXσβΠϯ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UI ϢʔβϏϦςΟ ͭ͘Δ ௐ΂Δ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε (ϓϩμΫτ) UXσβΠϯ UX ར༻͢Δ UI͸ϢʔβʔͱαʔϏεͱͷ઀৮໘ʢڥքʣɺϢʔβϏϦςΟ͸αʔϏε͕͋ΔϢʔβʔͷ͋Δ৔໘ͰͲͷ͘Β͍࢖͍΋ͷʹͳΔ͔ͷ౓߹ ͍ɺUX͸αʔϏεͷར༻Λ௨ͨ͠Ϣʔβʔʹى͜Δओ؍తͳײ֮΍൓ԠɺUXσβΠϯ͸ɺ

Slide 12

Slide 12 text

12 UXσβΠϯͷཧղ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UI ϢʔβϏϦςΟ ͭ͘Δ ௐ΂Δ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε (ϓϩμΫτ) UXσβΠϯ UX ར༻͢Δ UXʹ࠶ݱੑΛੜΉΑ͏ʹ ࡞Γख͕αʔϏεͳͲͷ࢓૊ΈΛͭ͘Δϓϩηεશମ

Slide 13

Slide 13 text

‣ ϢʔβϏϦςΟ͸αʔϏεͷੑೳ ‣ UX͸ϢʔβʔͷதͰى͜Δ͜ͱ ‣ UXσβΠϯ͸ɺΑ͍UXʹͳΔΑ͏ ʹ͢Δɺ࡞Γखͷ׆ಈ w w w w w w w w w w w 13 ͦΕͧΕओମ͕ҧ͏ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive UI ϢʔβϏϦςΟ ͭ͘Δ ௐ΂Δ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε UXσβΠϯ UX ར༻͢Δ ؔ܎ਤͰઆ໌͍ͯ͠Δͷ͸ɺࣅͨΑ͏ͳ༻ޠʹΈ͑ͯɺͦΕͧΕओମ͕ҧ͏ͱ͍͏͜ͱΛΘ͔Γ΍͘͢఻͑ΔͨΊͰ͢ɻ ͪͳΈʹ͜ͷεϥΠυͰ͕͢ɺSmartHRͷࣾ಺SlackͰʮUIʁUXʁʯͱ͍ΕΔͱΧελϜϨεϙϯεͰฦ͖ͬͯ·͢ɻ

Slide 14

Slide 14 text

14 ؔ܎Ͱଊ͑ΔͱͳΜͱͳ͘ཧղ͠΍͍͢ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ֶੜ͞Μ޲͚ʹఆٛΛ1ͭ1ͭઆ໌ͯ͠΋೉͍ͨ͠Ίɺؔ܎ੑͰશମΛ೺Ѳͯ͠΋Β͏ͨΊʹ͜ͷਤΛ࢖͍౗͍ͯ͠·͢ɻ

Slide 15

Slide 15 text

UXΛ࣌ؒ࣠Ͱଊ͑Δ 15 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 16

Slide 16 text

16 UXͷ֓೦ͱظؒ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UXനॻ ೔ຊޠ༁൛ UXͷ֓೦Λࣔͨ͠ਤͰ͸༗໊ͳ΋ͷͰ͢Ͷɻ ͨͩɺ͜Εͩͱֶੜ͞Μ޲͚ʹ͸೉͍͠ͷͰɺ

Slide 17

Slide 17 text

17 UXͷ֓೦ͱظؒʢ͋ΔαʔϏεͱͷ࣌ؒʣ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ར༻࣌ؒશମ (ྦྷੵతUX) ͋ΔαʔϏε ͱͷ࣌ؒ ར༻ޙ (ΤϐιʔυతUX) ωοτͰ ஌ͬͨ CMͰΈͨ ࢖͏ ࢖͏ ࢖͏ ࢖͏ ଞͷαʔϏε ͷܦݧ ར༻લ (༧ظతUX) ࢖͍ ऴΘͬͨ ར༻த (Ұ࣌తUX) खʹೖΕͯ ࢖ͬͯΈΔ ར༻த (Ұ࣌తUX) ࢖͏ ͢΂ͯUXͷ֓೦ αʔϏεͱʮग़ձ͏લʯ͔Βʮ௕͘࢖͏ʯ·ͰUXͷ֓೦ ͋ΔαʔϏεͱͷ࣌ؒɺͱ͍͏͜ͱͰ͜ΜͳਤͰઆ໌͍ͯ͠·͢ɻ

Slide 18

Slide 18 text

18 UX͸༷ʑͳ৬छ͕ؔΘΔ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ͋ΔαʔϏε ͱͷ࣌ؒ ωοτͰ ஌ͬͨ CMͰΈͨ ࢖͏ ࢖͏ ࢖͏ ࢖͏ ࢖͍ ऴΘͬͨ खʹೖΕͯ ࢖ͬͯΈΔ ࢖͏ ͋ΔαʔϏεͷUXʹɺ͋ΒΏΔ৬छ͕ؔΘ͍ͬͯΔɻ αʔϏεʹܞΘΔ͢΂ͯͷਓ͸ʮUXΛΑ͘͢Δʯ͜ͱʹؔΘΔ࡞Γख ͢΂ͯUXͷ֓೦ ։ൃ Ϣʔβʔαϙʔτ ϚʔέςΟϯάŋӦۀŋಋೖࢧԉ ࢲ͸ɺSmartHRͱ͍͏1ͭͷαʔϏεΛ࡞͍ͬͯΔࣄۀձࣾʹ͍ͯɺSmartHRࣾͷόϦϡʔͷ1ͭʹʮਓ͕΄͍͠ͱࢥ͏΋ͷΛͭ͘Ζ͏ʯͱ ͍͏ͷ΋͋ͬͨΓͯ͠ɺ͜Μͳ࣮ײΛ೔ʑ΋ͬͯಇ͍͍ͯ·͢ɻ

Slide 19

Slide 19 text

19 UX͸༷ʑͳ৬छ͕ؔΘΔ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ͋ΔαʔϏε ͱͷ࣌ؒ ωοτͰ ஌ͬͨ CMͰΈͨ ࢖͏ ࢖͏ ࢖͏ ࢖͏ ࢖͍ ऴΘͬͨ खʹೖΕͯ ࢖ͬͯΈΔ ࢖͏ શ෦UXσβΠϯͷൣᙝ UXͷ֓೦͕޿͍͔Βͦ͜ɺ͍ΖΜͳ෦ॺͰ͍ΖΜͳ৬छ͕ܞΘΔ ͢΂ͯUXͷ֓೦ ։ൃ Ϣʔβʔαϙʔτ ϚʔέςΟϯάŋӦۀŋಋೖࢧԉ ͜ΕΒ෦ॺԣஅͷʮσβΠϯͷೝࣝͮ͘ΓʯΛઐ໳ʹ͢Δਓ΋͍·͢ΑͶɻ

Slide 20

Slide 20 text

‣ ʮUXσβΠϯʯ͸ɺ࣮͸ߟ͑Δ΂͖෼໺͕ΊͪΌͪ͘Ό޿͍ (͸ͣ)ɻ ‣ ݸਓ໨ઢͰ͸ɺؔ৺ͷूதͮ͠Β͞Λײ͡Δɻ 20 UXσβΠϯͷఆٛʹࢥ͏͜ͱ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive ͥʔΜͿʹܞΘΕΔͻͱ͸΄ͱΜͲͳ͘ɺͲ͔͜ྖҬΛܾΊͯ΍͍ͬͯΔͷ͕ݱ࣮ͩͱࢥ͍·͢ɻ ͜ͷʮUXσβΠϯʯͱ͍͏ݴ༿ͷ;Θͬͱ͕͞ɺࢲ͕ʮUXσβΠϯʯࣗମʹڵຯ͕෸͔ͳ͍ཧ༝ͷ1ͭͰ͢ɻ

Slide 21

Slide 21 text

UXσβΠϯͷର৅ʹࢥ͏͜ͱ 21 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 22

Slide 22 text

UXք۾ʹ͋Δ௕೥ͷ࿦఺ 22 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 23

Slide 23 text

ʮUX͸σβΠϯͰ͖ΔʁͰ͖ͳ͍ʁʯ ʢUX͸σβΠϯߦҝͷର৅ͳͷ͔ʣ 23 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 24

Slide 24 text

24 Wikipediaʹ΋ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ϢʔβʔΤΫεϖϦΤϯε - Wikipedia

Slide 25

Slide 25 text

25 ʮUX͸σβΠϯͰ͖ΔʁͰ͖ͳ͍ʁʯ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ࢲ͸ɺϢʔβʔͷ “ମݧͦͷ΋ͷ” ͸σβΠϯͰ͖ͳ͍೿ 🙅

Slide 26

Slide 26 text

26 ؔ܎ਤΛ࢖ͬͯઆ໌ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UI ϢʔβϏϦςΟ ͭ͘Δ ௐ΂Δ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε (ϓϩμΫτ) UXσβΠϯ UX ར༻͢Δ ͍͚Δ͔?? ͖͞΄Ͳͷؔ܎ਤͰઆ໌͠·͢ɻ ͜ͷਤΛΈΔͱɺ࡞Γख͸Ϣʔβʔݸਓͷओ؍ʹ͋ΔUXʹखΛग़ͤΔͰ͠ΐ͏͔ʁࢲʹ͸Ͱ͖ΔΑ͏ʹ͸ݟ͑·ͤΜɻ

Slide 27

Slide 27 text

27 ؔ܎ਤΛ࢖ͬͯઆ໌ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UI ϢʔβϏϦςΟ ࢖͍खଆ ࡞Γखଆ ࡞Γख ͋ΔϢʔβʔ αʔϏε (ϓϩμΫτ) UXσβΠϯ UX ར༻͢Δ ௐ΂Δ ཧ૝ͷ UX ͭ͘Δ σβΠϯߦҝͷ੒Ռ෺ ݱ࣮ͱͯ͠΍͍ͬͯΔ͜ͱ͸ɺϢʔβʔΛௐࠪͨ͠Γͯ͠ɺϢʔβʔʹମݧͯ͠΄͍͠ʮ࡞Γखͷཧ૝ͷUXʯΛ໨ඪͱͯ͠ઃఆ͠ɺͦΕΛ ࣮ݱ͢ΔαʔϏε΍ϓϩμΫτΛ࡞͍ͬͯΔͷͩͱࢥ͍·͢ɻ ͭ·ΓɺUXσβΠϯʹ͓͚ΔσβΠϯߦҝͷ੒Ռ෺͸ʁͱ͍͑͹ʮαʔϏε΍ϓϩμΫτʯͩͱࢲ͸ߟ͍͑ͯ·͢ɻ

Slide 28

Slide 28 text

‣ UXσβΠϯͱ͸ ʮUX Λ σβΠϯ͢Δ͜ͱʯΑΓ΋ ʮUX ͷͨΊʹʢαʔϏεͳͲΛʣσβΠϯ͢Δ͜ͱʯͱཧղ ‣ ͭ·Γ “Designing for UX” ― UXݪ࿦ ‣ ࢲ͸ʮUXΛ͍ͭͬͯ͘ΔʯͷͰ͸ͳ͘ɺ Α͍UXͷͨΊʹʮσδλϧϓϩμΫτΛ͍ͭͬͯ͘Δʯ w w w w w 28 UXσβΠϯͷର৅ʹࢥ͏͜ͱ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive ͜Ε͕ڵຯ͕෸͔ͳ͍2ͭ໨ͷཧ༝Ͱ͢ɻ ࢲ͸ʮUXσβΠϯʯΑΓ΋ʮϓϩμΫτͷσβΠϯʯʹڵຯ͕͋Γ·͢ɻ

Slide 29

Slide 29 text

UXσβΠϯͷΠϚʹࢥ͏͜ͱ ʙ ࢲͷؔ৺ 29 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ΠϚɺUXσβΠϯʹେ੾ͳ͜ͱ͸ͳΜͰ͠ΐ͏͔

Slide 30

Slide 30 text

30 UXσβΠϯʹେ੾ͳ͜ͱ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ UX Ϣʔβʔ ࡞Γख ཧ૝ͷ UX ≠ ʮϢʔβʔ͸Ͳ͏࢖͏͔ʯ ʮϢʔβʔʹͲ͏࢖ͬͯ΋Β͏͔ʯ ↔ ਓʹΑͬͯҧ͏ͱ͸ࢥ͍·͢ɻࢲʹͱͬͯ͸ɺʮϢʔβʔͷUX͸ɺ࡞Γखͷཧ૝ͷUXͱ͸ҧ͏ɺͱ͍͏͜ͱΛೝࣝͯ͠΋ͷͮ͘ΓΛ͢Δ ͜ͱʯͰ͢ɻࠨ͸ʮϢʔβʔ͸Ͳ͏࢖͏͔ʯͰӈ͸ʮϢʔβʔʹͲ͏࢖ͬͯ΋Β͏͔ʯͰ͢Ͷɻ͜Ε͸ͲͪΒ͔Ͱ͸ͳ͘ߦ͖དྷ͠ͳ͕Βߟ ͑Δ͜ͱ͕େ੾Ͱ͢ɻ

Slide 31

Slide 31 text

1. ʮϢʔβʔ͸Ͳ͏࢖͏͔ʯͰৗʹߟ͑Δ͜ͱ - ݱ৔Ͱ͸ ňϢʔβʔʹͲ͏࢖ͬͯ΋Β͏͔ʼnňཧ૝ͷUXʼn ʹनΘΕ͕ͪ 2. ʮϢʔβʔ͸Ͳ͏࢖͏͔ʯΛŊ αʔϏεʹܞΘΔΈΜͳ͕૝૾Ͱ͖Δ͜ͱ - ݱ୅ͷ΋ͷͮ͘Γ͸νʔϜϫʔΫͳͷͰɺࣗ෼͚ͩͷཧղͰ͸ෆे෼ w w w 31 ֶੜ޲͚ʹ࿩͍ͯ͠ΔʮUXσβΠϯͰେ੾ͳ͜ͱʯ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive ֶੜ͞Μ͸͜Ε͔Β੍࡞׆ಈΛ࢝ΊΔஈ֊ͩͬͨΓɺ੍࡞͸ݸਓϫʔΫ͕ଟ͍ɺͱ͍͏എܠ΋͋ͬͯɺ͜͏͍͏આ໌Λ͍ͯ͠·͢ɻ UXͷجૅߨ࠲ͳͷͰɺ͑Βͦ͏ʹ͍ͬͯڪॖͳΜͰ͕͢ɺ

Slide 32

Slide 32 text

ࡢࠓͷϓϩμΫτσβΠϯʹ͓͍ͯ͸ ͋ͨΓ·͑ͷߟ͑ํ 32 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ʮUI/UXσβΠϯʯදه͕ᷓΕ͍ͯΔ͜ͱ΋ɺ UX·Ͱߟྀͯ͠౰વͱ͍͏ΠϚͷ͋ΒΘΕʁ

Slide 33

Slide 33 text

‣ UXͷ֓೦ͷීٴʹΑΓɺࠓ΍౰ͨΓલͷ؍఺ɿ - ʮϢʔβʔ͕࢖͍ͬͯΔ͔Βਖ਼ղʯ - ʮϢʔβʔ͕ຬ଍ͯ͠Δ͔Βਖ਼ղʯ - ʮϢʔβʔ͕Ձ஋Λײ͍ͯ͡Δ͔Βਖ਼ղʯ ‣ ྑ͍͜ͱ͚ͩͲ… ‣ ʮϓϩμΫτσβΠφʔͱͯ͠ŊϢʔβʔ͕Α͚Ε͹ඞཁे෼ͳͷ͔ʁʯ ͱ͍͏ؾ͕࣋ͪ… 33 UX·Ͱߟྀͯ͠౰વͳΠϚ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive

Slide 34

Slide 34 text

ࢲ͕ͨͪͭ͘ΔσδλϧϓϩμΫτ͸ ͦ΋ͦ΋࢖͍΍͘͢ઃܭͰ͖͍ͯΔͷ͔ w w w w w w w w w w w w w w 34 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 35

Slide 35 text

ʮϓϩμΫτ͕࢖͍΋ͷʹͳ͍ͬͯΔ͔ʯ Λ͋Β͔͡Ί୲อͰ͖Δͷ͸ ϓϩμΫτΛσβΠϯ͢Δࣗ෼ࣗ਎ 35 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 36

Slide 36 text

ϓϩμΫτ͕औΓѻ͏৘ใ͸ Ͳ͏͋Δ΂͖Ͱɺ Ͳ͏͍͏ܗΛ੒͠ɺ ϢʔβʔʹͲ͏ৼΔ෣͏΂͖͔ ʹվΊͯͪΌΜͱ޲͖߹͍͍ͨɻ 36 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 37

Slide 37 text

‣ ʮϢʔβʔ͕ϓϩμΫτΛͲͷ͘Β͍࢖͑Δ ͔ͷ඼࣭ʯΛ୲อ͢ΔͨΊͷɺ UIσβΠϯ࣌఺Ͱߟྀ͢΂͖21ͷ؍఺Λ SmartHR Design Systemʹެ։ ‣ ೔ຊ࢈ۀن֨ʢJIS X 25010: 2013ʣͰنఆ͞ Ε͍ͯΔ੡඼ͷ඼࣭ʮ࢖༻ੑʯΛࢀߟʹ։ൃ 37 ࠷ۙͷ׆ಈɿUIσβΠϯ࢖༻ੑνΣοΫϦετͷ։ൃ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive UIσβΠϯ࢖༻ੑνΣοΫϦετ | ϢʔβϏϦςΟʢ࢖༻ੑʣ | SmartHR Design System

Slide 38

Slide 38 text

38 νΣοΫϦετͷ಺༰ʢ21߲໨ʣ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ৄ͘͠͸ʮUIσβΠϯ࢖༻ੑνΣοΫϦετʯͰάά͍ͬͯͩ͘͞ɻ

Slide 39

Slide 39 text

վΊͯ ϢʔβϏϦςΟʹΨνͰ޲͖߹ͬͯΈΔ 39 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ

Slide 40

Slide 40 text

վΊͯ ϢʔβϏϦςΟʹΨνͰ޲͖߹ͬͯΈΔ 40 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ SmartHRͷϓϩμΫτσβΠϯγεςϜ্࢙࠷େͷΞοϓσʔτ͕͸͡·Γ·͢ɻ ʔ SmartHR Design Systemͷݱࡏ஍ʢ2024೥4݄൛ʣʛिץϓϩσβ by SmartHR ৄࡉ͸ʮिؒϓϩσβʯʹॻ͍͍ͯΔͷͰڵຯ͕෸͍ͨਓ͸ಡΜͰΈ͍ͯͩ͘͞ɻ

Slide 41

Slide 41 text

‣ UXΛߟྀͯ͠౰વͳΠϚ͔ͩΒͦ͜ɺ ʮϢʔβʔʹͱͬͯϓϩμΫτ͕Ͳͷ͘Β͍࢖͍΋ͷʹͳΔ͔ʯ ʹͪΌΜͱ޲͖߹͍͍ͨɻ ‣ ଥ౰ͳ৘ใઃܭɾଥ౰ͳUIઃܭΛ୲อͨ͠ ʮϢʔβϏϦςΟ͕ߴ͍ϓϩμΫτΛͭ͘Δ࢓૊Έʯʹ վΊͯΨνͰऔΓ૊Έ͍ͨɻ 41 ࢲͷؔ৺ UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ ©︎ Takuya Goto / @versionfive

Slide 42

Slide 42 text

UXσβΠϯͱ͍͏޿͍֓೦ʹŊ Ͱ͸ͳ͘ɺ ͔͠͠Ŋ UXͷͨΊʹɺ ʮϓϩμΫτʯʹਅ伨ʹ޲͖߹͍͍ͨɻ w w w w w w 42 ࢲ͕͍·UXσβΠϯʹͦΜͳʹڵຯ͕ͳ͍ཧ༝ ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ Έͳ͞Μ͸Ͳ͏Ͱ͔͢ɻ ࠓ೔͸ࢲͷ࿩͕த৺Ͱ͕ͨ͠ɺͳʹ͔࿩ͷͭ·Έʹ΋ͳΕ͹͍͍ͳͱ͓΋͍ͬͯ·͢ɻ

Slide 43

Slide 43 text

43 ©︎ Takuya Goto / @versionfive UXσβΠϯ ʙσδλϧϓϩμΫτσβΠϯͷࠓͱະདྷʙ SmartHR͸͜Μͳࢥ૝Λ΋ͬͨ ϓϩμΫτσβΠφʔΛืू͍ͯ͠·͢ʂ ͋Γ͕ͱ͏͍͟͝·ͨ͠