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
夢の技術をユーザーに届ける ~AR×UX×Gameのかけ算実施録~ / Deliver the...
Search
denari
September 13, 2020
Design
1
140
夢の技術をユーザーに届ける ~AR×UX×Gameのかけ算実施録~ / Deliver the Sci-Fi dream
UX JAM All Night の中で登壇をさせていただいた内容になります。
denari
September 13, 2020
Tweet
Share
More Decks by denari
See All by denari
「デザイン」の本質を見なおす / review core of 'design'
denari
3
1k
ぶっちゃけ世の中全て見た目で決まるから。笑 / lol all things are decided by appearance.
denari
2
340
Other Decks in Design
See All in Design
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
190
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
300
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3k
商業デザインのアクセシビリティにおける倫理フレームワークの考察
securecat
1
620
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
720
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
320
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
330
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
560
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
780
portfolio_YumiYasuda
yum0418
0
300
Kid Cowboy 103
marilutwin
0
280
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Into the Great Unknown - MozCon
thekraken
40
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Git: the NoSQL Database
bkeepers
PRO
431
65k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
We Have a Design System, Now What?
morganepeng
53
7.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Transcript
在 @denari01 Graffity Inc. AR×UX×Game
@denari01 Gra ty Inc. 在 UX 在 Web Dev denari.link
. ?! . ? . 在 !! . ?! AR×UX×Game
AR ?
"VHNFOUFE3FBMJUZʜ֦ுݱ࣮ײ
None
None
CG
CG →
VR Beat Saber
AR AR
None
None
Ͳ͏ͯ͠ԶΒͷαʔϏε ΘΕͯͳ͍ͷ
None
None
·͞ʹʮݱ࣮Λ֦ுͯ͠Δ͍͍ϓϩμΫτʯ͡Όͳ͍͔
ྲྀߦΒͳ͍ Ϣʔβʔ͕શવ͜ͷΞϓϦΛͬͯ͘Εͳ͍ʜ
ΠϚΠνྲྀߦΒͣɻݱࡏΫϩʔζ͞Ε͍ͯΔʜ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS ཧͯ͠ΈͯΘ͔ΔɺʮΊΜͲ͍͘͞ʯײ֮
None
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS εϚϗͰ"3ΞϓϦΛ࡞Δͱ࣮֬ʹ௨Δεςοϓ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS
None
https://www.youtube.com/watch?v=uTknV2tPwsg
݁Ռɺ"3ΞϓϦͰ ࠓ·Ͱʹ΄΅ͳ͍Ϩϕϧͷ τϥϑΟοΫΛهɻ AR Gra ty ..w
- Ͳ͏ͯ͠ԶΒͷαʔϏε ΘΕͯͳ͍ͷ 在
None
ͳΜͰ͜ͷϓϩμΫτͬͯ ྑ͔ͬͨΜ͚ͩͬ
ॱ෩ຬൕͳΓग़͠ʂ ελʔτΞοϓͱͯ͠ ͕͜͜؊৺ɻ ˠ͜ͷϓϩμΫτΛ࣠ʹ ɹࣄۀΛΈཱͯΔ͜ͱʹ
ͦ͏͔ΜͨΜͰͳ͔ͬͨʜ
ܧଓ͞Εͳ͍ ͜ͷΞϓϦɺϦςϯγϣϯ͕Ͳ͏͍ͯ͠ʜ
Πϯετʔϧೋͷ Ϣʔβʔ͕ͲΕ͚ͩ ϓϨΠͯ͘͠ΕΔ͔ͷσʔλ ˞ը૾ΠϝʔδͰ͢ɻ࣮ࡍϦςϯγϣϯΛݟ·ͨ͠ɻ
Πϯετʔϧೋͷ Ϣʔβʔ͕ͲΕ͚ͩ ϓϨΠͯ͘͠ΕΔ͔ͷσʔλ ˞ը૾ΠϝʔδͰ͢ զʑͷΞϓϦɺҰճ༡ΜͩΒ࣍ىಈ͞Εͳ͔ͬͨʜ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS ༑ୡͱʹ্͕ͬͯ Πϯετʔϧͯ͠ ࣮ࡍʹ༡ΜͰָ͠ΜͰ ཌҎ߱ܧଓʜ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS ༑ୡͱʹ্͕ͬͯ Πϯετʔϧͯ͠ ࣮ࡍʹ༡ΜͰָ͠ΜͰ ཌҎ߱ܧଓʜ ͜͜ͷܧଓ෦͕མͪͯ͠·͏
Ͳ͏ͯ͠ܧଓͯ͠ΘΕͳ͍͔ ήʔϜͱͯ͠ͷΓ͜Έཁૉ͕ͳ͍͔Β ਖ਼֬ʹ࣌ʮ࡞͍ͬͯͳ͍͚ͩʯͰඞཁੑΘ͔͍ͬͯͨ
Γ͜·ΕΔήʔϜͷಛྫ ऩूཁૉ͕͋Δ ରઓ૬ख͕͍Δ ϓϨΠεΩϧ্ָ͕͍͛͠
Ͳ͏ͯ͠ܧଓͯ͠ΘΕͳ͍͔ ϖνϟότʹશͯͳ͔ͬͨ ɾಛʹऩूͰ͖ΔཁૉͳͲӅ͠ཁૉແ͘ ɾͷલʹ༑ୡ͕͍Δͱ͖͔͠ϓϨΠͰ͖ͳ͍ ɾϧʔϧ͔ͳΓ୯ௐͳήʔϜ
Γ͜·ΕΔήʔϜͷಛྫ ऩूཁૉ͕͋Δ ରઓ૬ख͕͍Δ ϓϨΠεΩϧ্ָ͕͍͛͠ ͍ͭ͜ΒʮͲ͏ʹ͔ͳΔͩΖ͏ʯͱࢥͬͨ
Γ͜·ΕΔήʔϜͷಛྫ ऩूཁૉ͕͋Δ ରઓ૬ख͕͍Δ ϓϨΠεΩϧ্ָ͕͍͛͠ ͜Ε͔ͬΓϢʔβʔʹ༡ΜͰΒΘͳ͍ͱʜ
αʔϏεͱͯ͠ͷࠓͷྑ͞कΓͳ͕Β ήʔϜੑΛਂ͍ͷʹ͢Δ ϛογϣϯ
ϖνϟότͷྑͬͯ͞ ͳΜ͚ͩͬ AR !!! (AR ) →
None
None
AR IT
AR IT ↓
AR IT ↑
ήʔϜੑΛਂ͍ͷʹ͢Δ ັྗ͕Θ͔ͬͨͱ͜ΖͰ
None
λϚΛආ͚ͳ͕Β૬खͷλϫʔͷͱʹ ͞ΕͨΒࣗͷλϫʔμογϡ͢Δ ΞΫςΟϒͳಈ͖͕ٻΊΒΕΔήʔϜੑ
W
W \ !!/ \ !!/ ༑ୡͱϓϨΠ͢ΔલఏͰίϛϡχέʔγϣϯྔΛ૿͢
W \ !!/ \ !!/ ͜ΕΒʹΑͬͯΠϯλϏϡʔͷධՁ͕ͲΜͲΜධʹ
- ͳΜͰ͜ͷϓϩμΫτͬͯ ྑ͔ͬͨΜ͚ͩͬ 在 在
Ϣʔβʔݟͯͳ͍Μ͡Όͳ͍ɺ ݟ͑ͳ͍Μͩ
͜͏͍͏৽نϧʔϧΛ࡞Δͱಉ࣌ʹͲΜͲΜݦࡏԽͨ͠
ཧղͮ͠Β͍ ෳࡶ͕͞૿ͯ͠͠·͍ɺϢʔβʔࣗʹԿ͕ى͖͔ͨΘ͔Βͳ͍
͜ͷࠒྑ͘ѱ͘ɺ ʮγϯϓϧͳήʔϜʯͩͬͨ
͜ͷࠒྑ͘ѱ͘ɺ ʮγϯϓϧͳήʔϜʯͩͬͨ ͦΜͳࠒͰ͑͞ɺࠨԼͷඞࡴٕϘλϯʹϢʔβʔ͕ؾ͔ͮͳ͍
ͦΜͳʹΘ͔Γʹ͍͘6*͡Όͳ͘Ͷʜ
λϚΛආ͚ͳ͕Β૬खͷλϫʔͷͱʹ ͞ΕͨΒࣗͷλϫʔμογϡ͢Δ ΞΫςΟϒͳಈ͖͕ٻΊΒΕΔήʔϜੑ ͖ͬ͞ͷεϥΠυ
ϢʔβʔʹٻΊΒΕΔߦಈʜ
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ λϚΛආ͚Δ
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ λϚΛආ͚Δ λϫʔΛૂ͏
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ λϚΛආ͚Δ λϫʔΛૂ͏ ૬खͷअຐΛͭͭ͠
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ λϚΛආ͚Δ λϫʔΛૂ͏ ૬खͷअຐΛͭͭ͠ ࢮΜͩΒλϫʔͷۙ͘
ϢʔβʔʹٻΊΒΕΔߦಈʜ ૬खΛ߈ܸ͢Δ λϚΛආ͚Δ λϫʔΛૂ͏ ૬खͷअຐΛͭͭ͠ ࢮΜͩΒλϫʔͷۙ͘ ͜ΕΛߴͰΔ
UI
6*ʹରͯ͠ɺ࡞ͬͯΔͱ͖ͱͬͯΔͱ͖Ͱମײ͕ҧ͍͗ͨ͢
ը໘෦Λ༻͍ͨ)1දݱ ࣮ࡍʹࣦ͋ͬͨഊ HP → HP
σβΠϯ࣌ͷײ ը໘ͷ)1όʔ FPS !!!
࣮ࡍʹϓϨΠͯ͠Έͯ ը໘ͷ)1όʔ
Ϣʔβʔ͕͋·Γʹͯ͘͠ɺݟ͑Δͷݟ͑ͳ͍
ɾϢʔβʔͷͰ͖Δ͜ͱΛҾ͖ࢉ͍ͯ͘͠ ɾใʹ༏ྼΛ͚ͭͯѻ͍ʹࠩΛ͚ͭΔ ɾͱʹ͔͍ͪ͘ૣ͘ɺσβΠϯըΛखݩʹ࠶ݱ͢Δ Β͕ͬͨ͜ͱ
͞ΑͳΒɺඞࡴٕ ϢʔβʔͷͰ͖Δ͜ͱΛҾ͖ࢉ͢Δ 2 在
ࣗͷ͜ͱɺઓگͷ͜ͱɺ ૬खͷ͜ͱʹΘ͚Δ ใͷѻ͍ʹࠩΛ͚ͭΔ UI AR
ϓϨΠͨ͠ମײΛ͍ͪૣ͔֬͘Ί͍ͨʜ
"EPCF9%ͷσόΠεϓϨϏϡʔ σβΠϯըΛ͍ͪૣ͘खݩ ( UI ) PC USB UI HoloBreak
HoloBreak - https://www.youtube.com/watch?v=kbH0hurmL18
- Ϣʔβʔݟͯͳ͍Μ͡Όͳ͍ɺ ݟ͑ͳ͍Μͩ 在 Adobe XD
͓٬͞Μ͕ू·Βͳ͍
AR ! ! ! ΒͷັྗΛ౿·͑ͯ
ΞιϏϧʹͯؒ ग़ళ͍͖ͤͯͨͩ͞·ͨ͠ɻ
ਓ͕ɺू·Βͳ͍ ༡ΜͰΒͬͨํ͔Βͱͯධͳͷʹɺͳͥʜ
ΞιϏϧʹͯؒ ग़ళ͍͖ͤͯͨͩ͞·ͨ͠ɻ 9.00 (10 ) ?!
None
ͳʹͬͯΔ͔Θ͔Μͳ͍ʜ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS ༡ΜͰΔͷΛݟͯ ͓ۚΛͬͯ ࣗ༡Ϳ
ϢʔβʔࢹʹཱͬͯετʔϦʔΛߟ͑Δ Ϣʔβʔδϟʔχʔͷཧ ؆қWFS ༡ΜͰΔͷΛݟͯ ͓ۚΛͬͯ ࣗ༡Ϳ ͕͜͜؊ʹͳΔ
ॏཁͳͷ ʮτϥΠΞϧྗʯͰ͋Δɻ →
೩අʹɺτϥΠΞϧྗΛߴΊΔ ΞΠσΟΞΛੜΉ͜ͱ Β͕ͬͨ͜ͱ
DESIGN SPRINT
@denari01 5ؒͷരϓϩτλΠϐϯά ՝Λఆٛ͢Δ Day.1 ΞΠσΟΞΛൃࢄ͢Δ Day.2 ΞΠσΟΞΛબ͢Δ Day.3 ϓϩτλΠϓΛ࡞Δ Day.4
ΠϯλϏϡʔͰݕূ͢Δ Day.5
@denari01 ΞΠσΟΞΛൃࢄ͢Δ Day.2 طଘͷࣄྫΛूΊͯ͘Δ طଘࣄྫͷ͍͍ͱ͜ΖΛϝϞ͢Δ ϝϞͨ͠த͔ΒΞΠσΟΞΛߟ͑Δ
͍ͬͯΔࣄྫ͔ΜͨΜͳݕࡧͰग़ΔࣄྫΛूΊͯ
ࣄྫΛͱʹΞΠσΟΞग़͠ΛϒϨετܗࣜͰ࣮ࢪ
ධՁ࣠ΛαΫοͱܾΊͯධՁ͢Δ
ͦͷ݁Ռݟͨ͠ͷʮΞϓϦຊମʯͰͳ͘ձͩͬͨ
AR https://youtu.be/uM7_Mg6i60A
在 https://www.youtube.com/watch?v=YvgPXbiscwI
εϚϗΛखʹऔΔલ͔ΒମݧཧΛͯ͠ඪΛୡ
- ͓٬͞Μ͕ू·Βͳ͍ 在 SPRINT 在
(SBGpUZͷઓ·ͩ·ͩଓ͘ͷͰ͋Δʜ
ࠓճͷ·ͳͼͨͪ ·ͱΊ
- Ͳ͏ͯ͠ԶΒͷαʔϏε ΘΕͯͳ͍ͷ 在
- ͳΜͰ͜ͷϓϩμΫτͬͯ ྑ͔ͬͨΜ͚ͩͬ 在 在
- Ϣʔβʔݟͯͳ͍Μ͡Όͳ͍ɺ ݟ͑ͳ͍Μͩ 在 Adobe XD
- ͓٬͞Μ͕ू·Βͳ͍ 在 SPRINT 在
͍ͭͰ69ͷࢹΛ࣋ͪɺ၆ᛌͰཧΛ͢Δ͜ͱ ϢʔβʔࢹʹཱͬͯՁΛಧ͚͑͢͞Ε͍ͭͯ͘Δ ૯ׅເͷٕज़ΛϢʔβʔʹಧ͚Δʹʜ
@denari01 5IBOLTGPSZPVSBUUFOUJPO