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
620
スーパーマリオ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.3k
2023 CSS
nishiharatsubasa
7
4.6k
vue_component_from_composable
nishiharatsubasa
2
590
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.2k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
6.9k
Other Decks in Technology
See All in Technology
サーバシステムを無理なくコンテナ移行する際に伝えたい4つのポイント/Container_Happy_Migration_Method
ozawa
1
100
モンテカルロ木探索のパフォーマンスを予測する Kaggleコンペ解説 〜生成AIによる未知のゲーム生成〜
rist
4
1.1k
移行できそうでやりきれなかった 10年超えのシステムを葬るための戦略
ryu955
2
510
Amazon EKS Auto ModeでKubernetesの運用をシンプルにする
sshota0809
0
110
お問い合わせ対応の改善取り組みとその進め方
masartz
1
370
バクラクでのSystem Risk Records導入による変化と改善の取り組み/Changes and Improvement Initiatives Resulting from the Implementation of System Risk Records
taddy_919
0
220
Go の analysis パッケージで自作するリファクタリングツール
kworkdev
PRO
1
420
20250328_OpenAI製DeepResearchは既に一種のAGIだと思う話
doradora09
PRO
0
150
RAGの基礎から実践運用まで:AWS BedrockとLangfuseで実現する構築・監視・評価
sonoda_mj
0
440
Tirez profit de Messenger pour améliorer votre architecture
tucksaun
1
150
DevOps文化を育むQA 〜カルチャーバブルを生み出す戦略〜 / 20250317 Atsushi Funahashi
shift_evolve
1
110
ルートユーザーの活用と管理を徹底的に深掘る
yuobayashi
6
730
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Become a Pro
speakerdeck
PRO
27
5.2k
GraphQLとの向き合い方2022年版
quramy
45
14k
Building Adaptive Systems
keathley
41
2.5k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.1k
GitHub's CSS Performance
jonrohan
1030
460k
Practical Orchestrator
shlominoach
187
10k
Rails Girls Zürich Keynote
gr2m
94
13k
Docker and Python
trallard
44
3.3k
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/