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
スーパーマリオRPGのリメイク版の変更点からみるUX
Search
にしはら
September 06, 2024
Technology
1
740
スーパーマリオRPGのリメイク版の変更点からみるUX
スーパーマリオRPGの新旧を比較し、UXの変化を考察します
にしはら
September 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
速くて安いWebサイトを作る
nishiharatsubasa
17
16k
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.4k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
650
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.1k
Other Decks in Technology
See All in Technology
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
なぜAWSを活かしきれないのか?技術と組織への処方箋
nrinetcom
PRO
5
930
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
8
1.1k
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.6k
データ戦略部門 紹介資料
sansan33
PRO
1
3.8k
速習AGENTS.md:5分で精度を上げる "3ブロック" テンプレ
ismk
6
1.6k
2025-10-09_プロジェクトマネージャーAIチャンス
taukami
0
150
「れきちず」のこれまでとこれから - 誰にでもわかりやすい歴史地図を目指して / FOSS4G 2025 Japan
hjmkth
1
310
Digitization部 紹介資料
sansan33
PRO
1
5.5k
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
220
スタートアップにおけるこれからの「データ整備」
shomaekawa
2
480
AI Agent Dojo #2 watsonx Orchestrateフローの作成
oniak3ibm
PRO
0
120
Featured
See All Featured
Side Projects
sachag
455
43k
Faster Mobile Websites
deanohume
310
31k
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Done Done
chrislema
185
16k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
How to Think Like a Performance Engineer
csswizardry
27
2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
620
Transcript
εʔύʔϚϦΦRPGͷ ϦϝΠΫ൛ͷมߋ͔ΒΈΔUX εʔύʔϚϦΦRPGͷ ϦϝΠΫ൛ͷมߋ͔ΒΈΔUX DIST.45 ʮήʔϜ͔ΒֶͿ UXʯ
ݪ ཌྷ גࣜձࣾ ICS ϑϩϯτΤϯυΤϯδχΞ @crayfisher_zari
Λ͞·͟·ͳܗࣜͷจࣈྻʹʂ toLocaleString()ΛͬͯεϚʔτʹม͠Α͏ has() ٙࣅΫϥεͰίʔσΟϯά͕มΘΔʂ CSS ࠷৽ελΠϦϯά https://ics.media/entry/240808/ https://ics.media/entry/240529/ ICS MEDIAͰهࣄΛॻ͍͍ͯ·͢
NEW !
ɾεʔύʔϚϦΦRPGʹ͍ͭͯ ɾൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ ɾϦϝΠΫ൛ͰมԽ͔ͨ͠ΒΈΔUXߟ ɾWebʹԠ༻Ͱ͖Δ ࠓ͓͢Δ͜ͱ
εʔύʔϚϦΦ RPG ʹ͍ͭͯ
εʔύʔϚϦΦ RPG 1996ൃചͷεʔύʔ ϑΝϛίϯ༻ιϑτ ޙͷϚϦΦετʔϦʔϖʔύʔϚϦΦγϦʔζͱଓ͘ ϚϦΦγϦʔζͰॳͱͳΔRPG ఱಊͱεΫΣΞʢݱɿεΫΣΞɾΤχοΫεʣ͕ λοάΛΜͰ࣌ΛݺΜͩ BGM ߴ͘ධՁ͞Ε͍ͯΔ
͜ͷϦϝΠΫ൛͕ 2023ʹൃച͞Εͨ
ετʔϦʔ ͞ΒΘΕͨϐʔνඣΛॿ͚ΔͨΊɺ͍ͭͷΑ͏ʹΫούͱ͔͍ઓ͏ϚϦΦ ΫούΛ͠ϐʔνͱͷ࠶։ଋͷؒɺڊେͳ͕ಥવΫούʹಥ͖͞Γɺ ̏ਓͪΓͫΓʹඈ͞Εͯ͠·͏ʜ ͓͓͖ͳͷۄͷʮΧδΦʔʯਓʑͷئ͍ࣄΛ͑ΔʮελʔϩʔυʯΛഁյ͠ɺ ثʹΑΔࢧΛͨ͘ΒΜͰ͍ͨ ٽ͖ͷࣗশΧΤϧͷϚϩɺελʔϩʔυ͔Βͷऀδʔϊɺ॓ແ͠ͱͳͬͨΫούɺ ͓ͦͯ͠ͼͰݥʹͰΔϐʔνͱͱʹੈքΛٹ͏ͨΊʹϚϦΦ্ཱ͕͕ͪΔ
ൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ
ൺֱ͠Α͏ͱࢥ͖͔͚ͬͨͬ খֶੜ࣌Λࢥ͍ग़͠ͳ͕ΒϓϨΠ͍ͯ͠Δͱ ৽͘͠Ճ͞ΕͨཁૉҎ֎ʹมΘ͍ͬͯΔʹؾ͍ͮͨ چ࡞Λ΄΅౿ऻ͍ͯ͠Δࠓ࡞ͰมΘ͕ͬͨ͋Δͱ͢Ε ͦ͜ࠓ͔ͩΒͰ͖ΔΑ͏ʹͳͬͨվળͳͷͰͳ͍͔ͱࢥͬͨ ˞વͳ͕ΒɺΖ͏ʹ࣌ͷٕज़ϦιʔεͰෆՄೳͩͬͨ͜ͱ͋Δͱࢥ͍·͢
ϦϝΠΫ൛ʹ͓͚ΔUI/UXͷมԽ
ήʔϜγεςϜมߋʹ͏෦ࠓճର֎ͱ͠·ͨ͠ ˞͢Ͱʹ๚Εͨ͜ͱͷ͋ΔॴʹϫʔϓͰ͖Δػೳ ɾઓಆίϚϯυૢ࡞ͷҰ؏ੑ ɾઓಆΞΫγϣϯͷλΠϛϯάɺఢͷऑͷ໌ࣔతදࣔ ɾϝχϡʔը໘ͷมԽ ɾऔΓฦ͠ͷ͔ͭͳ͍ཁૉͷରԠ ɾΦʔτηʔϒͱϑΝ εττϥϕϧ˞ ϦϝΠΫ൛ͰมԽͨ͠
ઓಆίϚϯυૢ࡞ͷҰ؏ੑ
ઓಆίϚϯυૢ࡞ͷҰ؏ੑ ઓಆ࣌ A B X Y ͔ΒίϚϯυΛબ͠ɺ ͦͷத͔Β͞ΒʹίϚϯυΛબͿ͜ͱͰ λʔϯͷߦಈΛ࣮ߦ͢Δ چ࡞Ͱ
AͰ߈ܸΛબΜͩΒAϘλϯ͕ܾఆɺ XͰΞΠςϜΛબΜͩΒXϘλϯ͕ܾఆͩͬͨ ϦϝΠΫ൛ͰܾఆϘλϯҰ؏ͯ͠A Ϙλϯͱͳͬͨ ʢઃఆ͔Βچ࡞༷ʹมߋͰ͖Δʣ
ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺϓϨΠϠʔͷࠞཚΛ͙ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞༷ʹมߋͰ͖Δ ʢ׳Ε͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ૢ࡞ͷҰ؏ੑͷϙΠϯτ
ઓಆΞΫγϣϯλΠϛϯάͷ໌ࣔతදࣔ
ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ઓಆ࣌ʹλΠϛϯάΑ͘ϘλϯΛԡ͢ͱ ߈ܸμϝʔδΛ૿Ճͤͨ͞ΓɺඃμϝʔδΛݮΒͤΔ νϡʔτϦΞϧͰͦͷػೳΛڭ͑ͯ͘ΕΔ͕ɺ چ࡞ͰͦͷλΠϛϯά໌ࣔ͞Εͳ͍ ͔ͦ͠ͷλΠϛϯάث૬खͷ߈ܸʹΑΔ ϦϝΠΫ൛ͰͦͷλΠϛϯά͕໌ࣔతʹදࣔ͞ΕΔ
ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ઓಆ࣌ʹλΠϛϯάΑ͘ϘλϯΛԡ͢ͱ ߈ܸμϝʔδΛ૿Ճͤͨ͞ΓɺඃμϝʔδΛݮΒͤΔ νϡʔτϦΞϧͰͦͷػೳΛڭ͑ͯ͘ΕΔ͕ɺ چ࡞ͰͦͷλΠϛϯά໌ࣔ͞Εͳ͍ ͔ͦ͠ͷλΠϛϯάث૬खͷ߈ܸʹΑΔ ϦϝΠΫ൛ͰͦͷλΠϛϯά͕໌ࣔతʹදࣔ͞ΕΔ
ઓಆΞΫγϣϯλΠϛϯάͷ ໌ࣔతදࣔ ׳ΕͯλΠϛϯάΑ͘ԡͤΔΑ͏ʹͳΔͱ දࣔ͠ͳ͘ͳΔ ͦͷޙɺԿ͕ࣦഊ͍ͯ͠Δͱ·ͨग़ͯ͘ΔΑ͏ʹͳΔ ΄͔ʹޚෆՄͷ߈ܸ໌ࣔ͢ΔΑ͏ʹͳͬͨ ఢͷ໊ٕ͕දࣔ͞ΕΔͷ֓ͶޚෆՄ͕ͩɺ ྫ֎νϥϗϥ͋ΔͷͰ͔ͬͨ͠
ऑͷ໌ࣔతදࣔ
ऑͷ໌ࣔతදࣔ ऑଐੑͷ߈ܸΛ༩͑Δͱʮ͡Όͯ͘Μʯͱ දࣔ͞ΕΔΑ͏ʹͳͬͨ چ࡞Ͱ͜ͷද͕ࣔͳ͍ͨΊɺ ऑ͔Ͳ͏͔͔Βͳ͔ͬͨ Ұ෦ͷϘεڃͷఢԠ͕͋Δ͜ͱ͋Δ͕ ਪͯ͠ਤΔ͔͠ͳ͍
ऑͷ໌ࣔతදࣔ ऑଐੑͷ߈ܸΛ༩͑Δͱʮ͡Όͯ͘Μʯͱ දࣔ͞ΕΔΑ͏ʹͳͬͨ چ࡞Ͱ͜ͷද͕ࣔͳ͍ͨΊɺ ऑ͔Ͳ͏͔͔Βͳ͔ͬͨ Ұ෦ͷϘεڃͷఢԠ͕͋Δ͜ͱ͋Δ͕ ਪͯ͠ਤΔ͔͠ͳ͔ͬͨ
ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝෛՙΛԼ͛Δ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠దͳλΠϛϯάͰ߇͑Δ ໌ࣔతදࣔͷϙΠϯτ
ϝχϡʔͷը໘มԽ
ϝχϡʔը໘ͷมԽ ϦϝΠΫͰେ͖͘UI͕มΘͬͨͷϝχϡʔը໘ چ࡞ϝχϡʔ͕߲Λબ͔ͯ͠Β ৄࡉը໘ʹ͍͍͕ͬͯͨɺ ϦϝΠΫ൛ UI ͕ೋׂ͞Ε ը໘Γସ͑ͳ͠ʹϝχϡʔͷৄࡉը໘͕දࣔ͞ΕΔ εϜʔζͳૢ࡞ମݧ͕࣮ݱͰ͖ΔΑ͏ʹͳͬͨ
ϝχϡʔը໘ͷมԽ ϦϝΠΫͰେ͖͘UI͕มΘͬͨͷϝχϡʔը໘ چ࡞ϝχϡʔ͕߲Λબ͔ͯ͠Β ৄࡉը໘ʹ͍͍͕ͬͯͨɺ ϦϝΠΫ൛ UI ͕ೋׂ͞Ε ը໘Γସ͑ͳ͠ʹϝχϡʔͷৄࡉը໘͕දࣔ͞ΕΔ εϜʔζͳૢ࡞ମݧ͕࣮ݱͰ͖ΔΑ͏ʹͳͬͨ
ɾը໘Γସ͑Λ͞·ͳ͍ͷͰεϜʔζͳભҠମݧ͕Մೳʹͳͬͨ ɾ࣮ݱʹٕज़্େ͖͍ ϝχϡʔը໘ͷมԽͷϙΠϯτ
औΓฦ͠ͷ͔ͭͳ͍ཁૉͷରԠ
औΓฦ͠ͷ͔ͭͳ͍ ཁૉͷରԠ Ӆ͠ๅശͱ͍͏Ӆ͞Εͨๅശ͕֤ʹ͋Δ ʢΓ͜Έཁૉͷ̍ͭʣ چ࡞Ωϊίʹ͋Δ͜ͷๅശʹॳΊͯ๚Εͨͱ͖ Ҋ͢ΔΩϊϐΦͷ಄ʹ͍͔ͬͯͳ͍ͱऔΕͳ͍ ϦϝΠΫ൛Ͱॳճ๚࣌Ҏ֎ʹऔΕΔΑ͏ʹͳͬͨ ˞ͦͷ΄͔ɺ ʮߦ͚Δײʯͷ͋ΔσβΠϯʹมߋ͞Εͨ
ɾқ͕ߴ͍͜ͱͱཧෆਚͰ͋Δ͜ͱͷ ɾࣄલʹ͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍Γ͜Έཁૉ ཧෆਚʹͳΔՄೳੑʢʹήʔϜϦηο τ͔͠ͳ͍ʣ औΓฦ͠ͷ͔ͭͳ͍ཁૉͷରԠͷϙΠϯτ
ΦʔτηʔϒͱϑΝετ τϥϕϧ
Φʔτηʔϒͱ ϑΝ εττϥϕϧ ϦϝΠΫ൛ͰΦʔτηʔϒͱϑΝ εττϥϕϧ͕ ར༻Ͱ͖ΔΑ͏ʹͳͬͨ ैདྷͷηʔϒϒϩοΫʹΑΔҙλΠϛϯάͷ ηʔϒՄೳ ϑΝ εττϥϕϧػೳՃ͞ΕͨͷͰɺ
μϯδϣϯͰ͙͢ʹϫʔϧυϚοϓҠಈͰ͖Δ
Φʔτηʔϒͱ ϑΝ εττϥϕϧ ϦϝΠΫ൛ͰΦʔτηʔϒͱϑΝ εττϥϕϧ͕ ར༻Ͱ͖ΔΑ͏ʹͳͬͨ ैདྷͷηʔϒϒϩοΫʹΑΔҙλΠϛϯάͷ ηʔϒՄೳ ϑΝ εττϥϕϧػೳՃ͞ΕͨͷͰɺ
μϯδϣϯͰ͙͢ʹϫʔϧυϚοϓҠಈͰ͖Δ
ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ʮૣ͘ Ίͳ͍͞ʯ ʮηʔϒϙΠϯτ·Ͱ ʂʯͱ͍͏ΓͱΓݮΔ ʢʁʣ ॆిΕͱ͍ͬͨಥൃతͳήʔϜதஅʹରԠͰ͖Δ ɾΦʔτηʔϒऔΓฦ͠ͷ͔ͭͳ͍ཁૉʹରͯ͠γϏΞʹͳΔ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛΔແବͳҠಈΛݮΒͤΔ
ΦʔτηʔϒͱϑΝ εττϥϕϧͷϙΠϯτ
WebʹԠ༻Ͱ͖Δͱ͜Ζ
ɾࣄલʹ͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ɾը໘Γସ͑Λ͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟதஅ͠ͳ͍ ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝෛՙΛԼ͛Δ ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺ ϢʔβʔͷෛՙΛݮΒ͢
ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞༷ʹมߋͰ͖Δ ʢ׳Ε͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛΔແବͳҠಈΛݮΒͤΔ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠దͳλΠϛϯάͰ߇͑Δ
ɾࣄલʹ͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ɾը໘Γସ͑Λ͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟதஅ͠ͳ͍ ɾλΠϛϯάΛؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰ ϓϨΠϠʔͷೝෛՙΛԼ͛Δ ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺ ϢʔβʔͷෛՙΛݮΒ͢
ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞༷ʹมߋͰ͖Δ ʢ׳Ε͠Μͩૢ࡞Λҡ࣋Ͱ͖Δʣ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛΔແବͳҠಈΛݮΒͤΔ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠దͳλΠϛϯάͰ߇͑Δ WebͰେࣄ
ɾ ʮܾఆʯͱ͍͏ߦҝʹରͯ͠ૢ࡞Λ౷Ұ͠ɺϢʔβʔͷෛՙΛݮΒ͢ ˠઃఆͷมߋ͕ଈ࠲ʹө͞ΕΔͷ͔อଘϘλϯΛԡ͢ͱө͞ΕΔͷ͔ɺαʔϏεͰ౷Ұ͢Δ ɾ࣌ؒ࣠ͱ͍͏Ұ؏ੑʹରͯ͠چ࡞༷ʹมߋͰ͖Δ ˠΞοϓσʔτͰૢ࡞͕มߋʹͳͬͯچ༷Ͱૢ࡞Ͱ͖Δ ɾΞΫγϣϯ͕Մೳ / ෆՄೳͰ͋Δ͜ͱΛ໌ࣔ͢Δ͜ͱͰϓϨΠϠʔͷೝෛՙΛԼ͛Δ ˠૢ࡞ՄೳɾෆՄೳͳͷΛݟͨ +
ࢧԉٕज़ʹରͯ͠໌ࣔ͢Δ ɾ׳ΕͨϓϨΠϠʔʹରͯ͠దͳλΠϛϯάͰ߇͑Δ ˠ׳ΕͨϢʔβʔʹରͯ͠աͳ͓ΒͤΛݮΒ͢
ɾը໘Γସ͑Λ͞·ͳ͍ͷͰεϜʔζͳભҠʹͳͬͨࢥߟதஅ͠ͳ͍ ˠඇಉظॲཧͳͲΛ׆༻ͯ͠εϜʔζͳॲཧભҠΛ৺͕͚Δ ɾࣄલʹ͍ͬͯͳ͍ݶΓରԠͰ͖ͳ͍ ˠࣄલʹใʹΞΫηεͰ͖ΔΈόοΫΞοϓͷ֬อ ɾλΠϛϯάؾʹͤͣήʔϜΛதஅͰ͖ΔΑ͏ʹͳͬͨ ˠ͍ϑΥʔϜͳͲҙͷλΠϛϯάͰอଘͰ͖ɺҙਤ͠ͳ͍௨৴அ࣌ʹରԠͰ͖Δ ɾϑΝ εττϥϕϧ͕͋ΔͷͰμϯδϣϯΛΔແବͳҠಈΛݮΒͤΔ ˠखؒͳ͘رͷϖʔδʹҠಈͰ͖ΔΑ͏ͳಈઢܭը
·ͱΊ
ɾϦϝΠΫଓฤͰมߋʹͳͬͨՕॴUI/UXͷมߋͰ͋Δ ͦ͜ʹண͢Δͱ໘ന͍ൃݟ͕͋Δ͔͠Εͳ͍ ɾϓϨΠϠʔͷମݧ͕ϝΠϯͰ͋ΔήʔϜҰͷ͕͋Δ WebσβΠϯʹԠ༻Ͱ͖ΔϙΠϯτ͕ͨ͘͞Μ͋Δ ·ͱΊ
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ICS ͰϑϩϯτΤϯυΤϯδχΞΛืूத https://ics-web.jp/recruit/