Tweet
Tweet

Slide 1

Slide 1 text

εʔύʔϚϦΦRPGͷ ϦϝΠΫ൛ͷมߋ఺͔ΒΈΔUX εʔύʔϚϦΦRPGͷ ϦϝΠΫ൛ͷมߋ఺͔ΒΈΔUX DIST.45 ʮήʔϜ͔ΒֶͿ UXʯ

Slide 2

Slide 2 text

੢ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari

Slide 3

Slide 3 text

਺஋΍೔෇Λ͞·͟·ͳܗࣜͷจࣈྻʹʂ toLocaleString()Λ࢖ͬͯεϚʔτʹม׵͠Α͏ has() ٙࣅΫϥεͰίʔσΟϯά͕มΘΔʂ CSS ࠷৽ελΠϦϯά https://ics.media/entry/240808/ https://ics.media/entry/240529/ ICS MEDIAͰهࣄΛॻ͍͍ͯ·͢ NEW !

Slide 4

Slide 4 text

ɾεʔύʔϚϦΦRPGʹ͍ͭͯ ɾൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ ɾϦϝΠΫ൛ͰมԽͨ͠఺͔ΒΈΔUXߟ࡯ ɾWebʹ΋Ԡ༻Ͱ͖Δ఺ ࠓ೔͓࿩͢Δ͜ͱ

Slide 5

Slide 5 text

εʔύʔϚϦΦ RPG ʹ͍ͭͯ

Slide 6

Slide 6 text

εʔύʔϚϦΦ RPG 1996೥ൃചͷεʔύʔ ϑΝϛίϯ༻ιϑτ ޙͷϚϦΦετʔϦʔ΍ϖʔύʔϚϦΦγϦʔζ΁ͱଓ͘ ϚϦΦγϦʔζͰ͸ॳͱͳΔRPG ೚ఱಊͱεΫ΢ΣΞʢݱɿεΫ΢ΣΞɾΤχοΫεʣ͕ λοάΛ૊ΜͰ౰࣌࿩୊ΛݺΜͩ BGM ΋ߴ͘ධՁ͞Ε͍ͯΔ ͜ͷϦϝΠΫ൛͕ 2023೥ʹൃച͞Εͨ

Slide 7

Slide 7 text

ετʔϦʔ ͞ΒΘΕͨϐʔνඣΛॿ͚ΔͨΊɺ͍ͭ΋ͷΑ͏ʹΫού৓΁ͱ޲͔͍ઓ͏ϚϦΦ ΫούΛ౗͠ϐʔνͱͷ࠶։΋ଋͷؒɺڊେͳ݋͕ಥવΫού৓ʹಥ͖ࢗ͞Γɺ ̏ਓ͸ͪΓͫΓʹඈ͹͞Εͯ͠·͏ʜ ͓͓͖ͳ݋ͷ਌ۄͷʮΧδΦʔʯ͸ਓʑͷئ͍ࣄΛ׎͑ΔʮελʔϩʔυʯΛഁյ͠ɺ ෢ثʹΑΔࢧ഑Λͨ͘ΒΜͰ͍ͨ ٽ͖஬ͷࣗশΧΤϧͷϚϩɺελʔϩʔυ͔Βͷ࢖ऀδʔϊɺ॓ແ͠ͱͳͬͨΫούɺ ͓ͦͯ͠೜ͼͰ๯ݥʹͰΔϐʔνͱͱ΋ʹੈքΛٹ͏ͨΊʹϚϦΦ্ཱ͕͕ͪΔ

Slide 8

Slide 8 text

ൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ

Slide 9

Slide 9 text

ൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ খֶੜ࣌୅Λࢥ͍ग़͠ͳ͕ΒϓϨΠ͍ͯ͠Δͱ ৽͘͠௥Ճ͞ΕͨཁૉҎ֎ʹ΋มΘ͍ͬͯΔ఺ʹؾ͍ͮͨ چ࡞Λ΄΅౿ऻ͍ͯ͠Δࠓ࡞ͰมΘͬͨ఺͕͋Δͱ͢Ε͹ ͦ͜͸ࠓ͔ͩΒͰ͖ΔΑ͏ʹͳͬͨվળ఺ͳͷͰ͸ͳ͍͔ͱࢥͬͨ ˞౰વͳ͕Βɺ΍Ζ͏ʹ΋౰࣌ͷٕज़΍ϦιʔεͰ͸ෆՄೳͩͬͨ͜ͱ΋͋Δͱࢥ͍·͢

Slide 10

Slide 10 text

ϦϝΠΫ൛ʹ͓͚ΔUI/UXͷมԽ

Slide 11

Slide 11 text

ήʔϜγεςϜมߋʹ൐͏෦෼͸ࠓճର৅֎ͱ͠·ͨ͠ ˞͢Ͱʹ๚Εͨ͜ͱͷ͋Δ৔ॴʹϫʔϓͰ͖Δػೳ ɾઓಆίϚϯυૢ࡞ͷҰ؏ੑ ɾઓಆΞΫγϣϯͷλΠϛϯάɺఢͷऑ఺ͷ໌ࣔతදࣔ ɾϝχϡʔը໘ͷมԽ ɾऔΓฦ͠ͷ͔ͭͳ͍ཁૉ΁ͷରԠ ɾΦʔτηʔϒͱϑΝ εττϥϕϧ˞ ϦϝΠΫ൛ͰมԽͨ͠఺

Slide 12

Slide 12 text

ઓಆίϚϯυૢ࡞ͷҰ؏ੑ

Slide 13

Slide 13 text

ઓಆίϚϯυૢ࡞ͷҰ؏ੑ ઓಆ࣌͸ A B X Y ͔ΒίϚϯυΛબ୒͠ɺ ͦͷத͔Β͞ΒʹίϚϯυΛબͿ͜ͱͰ λʔϯͷߦಈΛ࣮ߦ͢Δ چ࡞Ͱ͸ AͰ߈ܸΛબΜͩΒAϘλϯ͕ܾఆɺ XͰΞΠςϜΛબΜͩΒXϘλϯ͕ܾఆͩͬͨ ϦϝΠΫ൛Ͱ͸ܾఆϘλϯ͸Ұ؏ͯ͠A Ϙλϯͱͳͬͨ ʢઃఆ͔Βچ࡞࢓༷ʹมߋͰ͖Δʣ

Slide 14

Slide 14 text

ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺϓϨΠϠʔͷࠞཚΛ๷͙ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞࢓༷ʹมߋͰ͖Δ ʢ׳Ε਌͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ૢ࡞ͷҰ؏ੑͷϙΠϯτ

Slide 15

Slide 15 text

ઓಆΞΫγϣϯλΠϛϯάͷ໌ࣔతදࣔ

Slide 16

Slide 16 text

ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ઓಆ࣌ʹλΠϛϯάΑ͘ϘλϯΛԡ͢ͱ ߈ܸμϝʔδΛ૿Ճͤͨ͞ΓɺඃμϝʔδΛݮΒͤΔ νϡʔτϦΞϧͰͦͷػೳΛڭ͑ͯ͘ΕΔ͕ɺ چ࡞Ͱ͸ͦͷλΠϛϯά͸໌ࣔ͞Εͳ͍ ͔͠΋ͦͷλΠϛϯά͸෢ث΍૬खͷ߈ܸʹΑΔ ϦϝΠΫ൛Ͱ͸ͦͷλΠϛϯά͕໌ࣔతʹදࣔ͞ΕΔ

Slide 17

Slide 17 text

ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ઓಆ࣌ʹλΠϛϯάΑ͘ϘλϯΛԡ͢ͱ ߈ܸμϝʔδΛ૿Ճͤͨ͞ΓɺඃμϝʔδΛݮΒͤΔ νϡʔτϦΞϧͰͦͷػೳΛڭ͑ͯ͘ΕΔ͕ɺ چ࡞Ͱ͸ͦͷλΠϛϯά͸໌ࣔ͞Εͳ͍ ͔͠΋ͦͷλΠϛϯά͸෢ث΍૬खͷ߈ܸʹΑΔ ϦϝΠΫ൛Ͱ͸ͦͷλΠϛϯά͕໌ࣔతʹදࣔ͞ΕΔ

Slide 18

Slide 18 text

ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ׳ΕͯλΠϛϯάΑ͘ԡͤΔΑ͏ʹͳΔͱ දࣔ͠ͳ͘ͳΔ ͦͷޙɺԿ౓͕ࣦഊ͍ͯ͠Δͱ·ͨग़ͯ͘ΔΑ͏ʹͳΔ ΄͔ʹ΋๷ޚෆՄͷ߈ܸ΋໌ࣔ͢ΔΑ͏ʹͳͬͨ ఢͷ໊ٕ͕දࣔ͞ΕΔ΋ͷ͸֓Ͷ๷ޚෆՄ͕ͩɺ ྫ֎΋νϥϗϥ͋ΔͷͰ೉͔ͬͨ͠

Slide 19

Slide 19 text

ऑ఺ͷ໌ࣔతදࣔ

Slide 20

Slide 20 text

ऑ఺ͷ໌ࣔతදࣔ ऑ఺ଐੑͷ߈ܸΛ༩͑Δͱʮ͡Όͯ͘Μʯͱ දࣔ͞ΕΔΑ͏ʹͳͬͨ چ࡞Ͱ͸͜ͷද͕ࣔͳ͍ͨΊɺ ऑ఺͔Ͳ͏͔෼͔Βͳ͔ͬͨ Ұ෦ͷϘεڃͷఢ͸൓Ԡ͕͋Δ͜ͱ΋͋Δ͕ ਪͯ͠ਤΔ͔͠ͳ͍

Slide 21

Slide 21 text

ऑ఺ͷ໌ࣔతදࣔ ऑ఺ଐੑͷ߈ܸΛ༩͑Δͱʮ͡Όͯ͘Μʯͱ දࣔ͞ΕΔΑ͏ʹͳͬͨ چ࡞Ͱ͸͜ͷද͕ࣔͳ͍ͨΊɺ ऑ఺͔Ͳ͏͔෼͔Βͳ͔ͬͨ Ұ෦ͷϘεڃͷఢ͸൓Ԡ͕͋Δ͜ͱ΋͋Δ͕ ਪͯ͠ਤΔ͔͠ͳ͔ͬͨ

Slide 22

Slide 22 text

ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝ஌ෛՙΛԼ͛Δ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠͸ద౓ͳλΠϛϯάͰ߇͑Δ ໌ࣔతදࣔͷϙΠϯτ

Slide 23

Slide 23 text

ϝχϡʔͷը໘มԽ

Slide 24

Slide 24 text

ϝχϡʔը໘ͷมԽ ϦϝΠΫͰେ͖͘UI͕มΘͬͨͷ͸ϝχϡʔը໘ چ࡞͸ϝχϡʔ͕߲໨Λબ୒͔ͯ͠Β ৄࡉը໘ʹ͸͍͍͕ͬͯͨɺ ϦϝΠΫ൛͸ UI ͕ೋ෼ׂ͞Ε ը໘੾Γସ͑ͳ͠ʹϝχϡʔͷৄࡉը໘͕දࣔ͞ΕΔ εϜʔζͳૢ࡞ମݧ͕࣮ݱͰ͖ΔΑ͏ʹͳͬͨ

Slide 25

Slide 25 text

ϝχϡʔը໘ͷมԽ ϦϝΠΫͰେ͖͘UI͕มΘͬͨͷ͸ϝχϡʔը໘ چ࡞͸ϝχϡʔ͕߲໨Λબ୒͔ͯ͠Β ৄࡉը໘ʹ͸͍͍͕ͬͯͨɺ ϦϝΠΫ൛͸ UI ͕ೋ෼ׂ͞Ε ը໘੾Γସ͑ͳ͠ʹϝχϡʔͷৄࡉը໘͕දࣔ͞ΕΔ εϜʔζͳૢ࡞ମݧ͕࣮ݱͰ͖ΔΑ͏ʹͳͬͨ

Slide 26

Slide 26 text

ɾը໘੾Γସ͑Λ͸͞·ͳ͍ͷͰεϜʔζͳભҠମݧ͕Մೳʹͳͬͨ ɾ࣮ݱʹ͸ٕज़޲্΋େ͖͍ ϝχϡʔը໘ͷมԽͷϙΠϯτ

Slide 27

Slide 27 text

औΓฦ͠ͷ͔ͭͳ͍ཁૉ΁ͷରԠ

Slide 28

Slide 28 text

औΓฦ͠ͷ͔ͭͳ͍ ཁૉ΁ͷରԠ Ӆ͠ๅശͱ͍͏Ӆ͞Εͨๅശ͕֤஍ʹ͋Δ ʢ΍Γ͜Έཁૉͷ̍ͭʣ چ࡞͸Ωϊί৓ʹ͋Δ͜ͷๅശ͸৓ʹॳΊͯ๚Εͨͱ͖ Ҋ಺͢ΔΩϊϐΦͷ಄ʹ৐͍͔ͬͯͳ͍ͱऔΕͳ͍ ϦϝΠΫ൛Ͱ͸ॳճ๚໰࣌Ҏ֎ʹ΋औΕΔΑ͏ʹͳͬͨ ˞ͦͷ΄͔ɺ ʮߦ͚Δײʯͷ͋ΔσβΠϯʹมߋ͞Εͨ

Slide 29

Slide 29 text

ɾ೉қ౓͕ߴ͍͜ͱͱཧෆਚͰ͋Δ͜ͱͷ෼཭ ɾࣄલʹ஌͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍΍Γ͜Έཁૉ͸ ཧෆਚʹͳΔՄೳੑʢʹήʔϜϦηο τ͔͠ͳ͍ʣ औΓฦ͠ͷ͔ͭͳ͍ཁૉ΁ͷରԠͷϙΠϯτ

Slide 30

Slide 30 text

ΦʔτηʔϒͱϑΝετ τϥϕϧ

Slide 31

Slide 31 text

Φʔτηʔϒͱ ϑΝ εττϥϕϧ ϦϝΠΫ൛Ͱ͸ΦʔτηʔϒͱϑΝ εττϥϕϧ͕ ར༻Ͱ͖ΔΑ͏ʹͳͬͨ ैདྷͷηʔϒϒϩοΫʹΑΔ೚ҙλΠϛϯάͷ ηʔϒ΋Մೳ ϑΝ εττϥϕϧػೳ΋௥Ճ͞ΕͨͷͰɺ μϯδϣϯ಺Ͱ΋͙͢ʹϫʔϧυϚοϓ΁ҠಈͰ͖Δ

Slide 32

Slide 32 text

Φʔτηʔϒͱ ϑΝ εττϥϕϧ ϦϝΠΫ൛Ͱ͸ΦʔτηʔϒͱϑΝ εττϥϕϧ͕ ར༻Ͱ͖ΔΑ͏ʹͳͬͨ ैདྷͷηʔϒϒϩοΫʹΑΔ೚ҙλΠϛϯάͷ ηʔϒ΋Մೳ ϑΝ εττϥϕϧػೳ΋௥Ճ͞ΕͨͷͰɺ μϯδϣϯ಺Ͱ΋͙͢ʹϫʔϧυϚοϓ΁ҠಈͰ͖Δ

Slide 33

Slide 33 text

ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ʮૣ͘ ΍Ίͳ͍͞ʯ ʮηʔϒϙΠϯτ·Ͱ ʂʯͱ͍͏΍ΓͱΓ΋ݮΔ ʢʁʣ ॆి੾Εͱ͍ͬͨಥൃతͳήʔϜதஅʹ΋ରԠͰ͖Δ ɾΦʔτηʔϒ͸औΓฦ͠ͷ͔ͭͳ͍ཁૉʹରͯ͠΋γϏΞʹͳΔ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛ໭ΔແବͳҠಈΛݮΒͤΔ ΦʔτηʔϒͱϑΝ εττϥϕϧͷϙΠϯτ

Slide 34

Slide 34 text

Webʹ΋Ԡ༻Ͱ͖Δͱ͜Ζ

Slide 35

Slide 35 text

ɾࣄલʹ஌͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ɾը໘੾Γସ͑Λ͸͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟ΋தஅ͠ͳ͍ ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝ஌ෛՙΛԼ͛Δ ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺ ϢʔβʔͷෛՙΛݮΒ͢ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞࢓༷ʹมߋͰ͖Δ ʢ׳Ε਌͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛ໭ΔແବͳҠಈΛݮΒͤΔ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠͸ద౓ͳλΠϛϯάͰ߇͑Δ

Slide 36

Slide 36 text

ɾࣄલʹ஌͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ɾը໘੾Γସ͑Λ͸͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟ΋தஅ͠ͳ͍ ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝ஌ෛՙΛԼ͛Δ ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺ ϢʔβʔͷෛՙΛݮΒ͢ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞࢓༷ʹมߋͰ͖Δ ʢ׳Ε਌͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛ໭ΔແବͳҠಈΛݮΒͤΔ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠͸ద౓ͳλΠϛϯάͰ߇͑Δ WebͰ΋େࣄ

Slide 37

Slide 37 text

ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺϢʔβʔͷෛՙΛݮΒ͢ ˠઃఆͷมߋ͕ଈ࠲ʹ൓ө͞ΕΔͷ͔อଘϘλϯΛԡ͢ͱ൓ө͞ΕΔͷ͔ɺαʔϏε಺Ͱ౷Ұ͢Δ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞࢓༷ʹมߋͰ͖Δ ˠΞοϓσʔτͰૢ࡞͕มߋʹͳͬͯ΋چ࢓༷Ͱૢ࡞Ͱ͖Δ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰϓϨΠϠʔͷೝ஌ෛՙΛԼ͛Δ ˠૢ࡞ՄೳɾෆՄೳͳ΋ͷΛݟͨ໨ + ࢧԉٕज़ʹରͯ͠΋໌ࣔ͢Δ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠͸ద౓ͳλΠϛϯάͰ߇͑Δ ˠ׳ΕͨϢʔβʔʹରͯ͠͸ա৒ͳ͓஌ΒͤΛݮΒ͢

Slide 38

Slide 38 text

ɾը໘੾Γସ͑Λ͸͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟ΋தஅ͠ͳ͍ ˠඇಉظॲཧͳͲΛ׆༻ͯ͠εϜʔζͳॲཧભҠΛ৺͕͚Δ ɾࣄલʹ஌͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ˠࣄલʹ৘ใʹΞΫηεͰ͖Δ࢓૊Έ΍όοΫΞοϓͷ֬อ ɾλΠϛϯάؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ˠ௕͍ϑΥʔϜͳͲ͸೚ҙͷλΠϛϯάͰอଘͰ͖ɺҙਤ͠ͳ͍௨৴੾அ࣌ʹ΋ରԠͰ͖Δ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛ໭ΔແବͳҠಈΛݮΒͤΔ ˠखؒͳ͘ر๬ͷϖʔδʹҠಈͰ͖ΔΑ͏ͳಈઢܭը

Slide 39

Slide 39 text

·ͱΊ

Slide 40

Slide 40 text

ɾϦϝΠΫ΍ଓฤͰมߋʹͳͬͨՕॴ͸UI/UXͷมߋ఺Ͱ΋͋Δ ͦ͜ʹண໨͢Δͱ໘ന͍ൃݟ͕͋Δ͔΋͠Εͳ͍ ɾϓϨΠϠʔͷମݧ͕ϝΠϯͰ͋ΔήʔϜ͸Ұ೔ͷ௕͕͋Δ WebσβΠϯʹ΋Ԡ༻Ͱ͖ΔϙΠϯτ͕ͨ͘͞Μ͋Δ ·ͱΊ

Slide 41

Slide 41 text

͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS Ͱ͸ϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/