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
420
スーパーマリオRPGのリメイク版の変更点からみるUX
スーパーマリオRPGの新旧を比較し、UXの変化を考察します
にしはら
September 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.2k
2023 CSS
nishiharatsubasa
7
4.5k
vue_component_from_composable
nishiharatsubasa
2
560
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.1k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
6.9k
Other Decks in Technology
See All in Technology
Amazon Kendra GenAI Index 登場でどう変わる? 評価から学ぶ最適なRAG構成
naoki_0531
0
100
統計データで2024年の クラウド・インフラ動向を眺める
ysknsid25
2
830
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
株式会社ログラス − エンジニア向け会社説明資料 / Loglass Comapany Deck for Engineer
loglass2019
3
31k
.NET 9 のパフォーマンス改善
nenonaninu
0
280
2024年にチャレンジしたことを振り返るぞ
mitchan
0
130
UI State設計とテスト方針
rmakiyama
2
260
どちらを使う?GitHub or Azure DevOps Ver. 24H2
kkamegawa
0
600
Snykで始めるセキュリティ担当者とSREと開発者が楽になる脆弱性対応 / Getting started with Snyk Vulnerability Response
yamaguchitk333
2
180
AI時代のデータセンターネットワーク
lycorptech_jp
PRO
1
280
KubeCon NA 2024 Recap / Running WebAssembly (Wasm) Workloads Side-by-Side with Container Workloads
z63d
1
240
OpenAIの蒸留機能(Model Distillation)を使用して運用中のLLMのコストを削減する取り組み
pharma_x_tech
4
540
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Building Your Own Lightsaber
phodgson
103
6.1k
Making the Leap to Tech Lead
cromwellryan
133
9k
How GitHub (no longer) Works
holman
311
140k
Gamification - CAS2011
davidbonilla
80
5.1k
A designer walks into a library…
pauljervisheath
204
24k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Automating Front-end Workflow
addyosmani
1366
200k
Bash Introduction
62gerente
608
210k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Adaptive Systems
keathley
38
2.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
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/