Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
スーパーマリオRPGのリメイク版の変更点からみるUX
Search
にしはら
September 06, 2024
Technology
1
850
スーパーマリオRPGのリメイク版の変更点からみるUX
スーパーマリオRPGの新旧を比較し、UXの変化を考察します
にしはら
September 06, 2024
Tweet
Share
More Decks by にしはら
See All by にしはら
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.7k
速くて安いWebサイトを作る
nishiharatsubasa
20
18k
defineModelを使って気軽にコンポーネントのv-modelをやろう
nishiharatsubasa
3
1.5k
2023 CSS
nishiharatsubasa
7
4.7k
vue_component_from_composable
nishiharatsubasa
2
690
エルデンリングに学ぶ道に迷わないUIと世界観
nishiharatsubasa
0
1.4k
HTMLとCSSだけでつくるリアルな絵 / How to make a realistic picture only HTML and CSS
nishiharatsubasa
2
7.2k
Other Decks in Technology
See All in Technology
「図面」から「法則」へ 〜メタ視点で読み解く現代のソフトウェアアーキテクチャ〜
scova0731
0
260
2025年 開発生産「可能」性向上報告 サイロ解消からチームが能動性を獲得するまで/ 20251216 Naoki Takahashi
shift_evolve
PRO
1
190
ExpoのインダストリーブースでみたAWSが見せる製造業の未来
hamadakoji
0
110
Databricks向けJupyter Kernelでデータサイエンティストの開発環境をAI-Readyにする / Data+AI World Tour Tokyo After Party
genda
1
440
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
hawkymisc
2
190
評価駆動開発で不確実性を制御する - MLflow 3が支えるエージェント開発
databricksjapan
1
200
エンジニアリングをやめたくないので問い続ける
estie
2
1.2k
Debugging Edge AI on Zephyr and Lessons Learned
iotengineer22
0
210
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
tomoki10
0
510
AWSセキュリティアップデートとAWSを育てる話
cmusudakeisuke
0
290
Database イノベーショントークを振り返る/reinvent-2025-database-innovation-talk-recap
emiki
0
200
文字列の並び順 / Unicode Collation
tmtms
3
590
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
97
6.4k
GitHub's CSS Performance
jonrohan
1032
470k
Art, The Web, and Tiny UX
lynnandtonic
304
21k
GraphQLとの向き合い方2022年版
quramy
50
14k
Building a Scalable Design System with Sketch
lauravandoore
463
34k
What's in a price? How to price your products and services
michaelherold
246
13k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
35
2.3k
Thoughts on Productivity
jonyablonski
73
5k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Visualization
eitanlees
150
16k
Being A Developer After 40
akosma
91
590k
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/