Slide 1
Slide 1 text
ˇ
ARグラス時代における、
空間体験デザインとは
Slide 2
Slide 2 text
PAGE 2
本間 悠暉
⾃⼰紹介
MESON, inc. ディレクター/デザイナー
東京⼤学経済学部を卒業後、MESONにジョイン
博報堂とのARクラウド共同研究、MRグラスNrealLightの実証研究
を始めとして、さまざまなプロジェクトの企画からデザインを担当
ARといった体験を拡張するプロダクト、⾃分のアイデアとプロトタ
イプをnoteやTwitterにて配信中
Slide 3
Slide 3 text
PAGE 3
MESONとは
MESON is
Experience Augmentation Company
MESONはAR (Spatial Computing)時代の
ユースケースとUXをつくる会社です.
様々なアセットを持つパートナー企業と組んで
研究するクリエイティブスタジオ事業を展開.
Slide 4
Slide 4 text
PAGE 4
いままでの主なARサービス
PORTAL AR CITY
ΞΠςϜͱͷग़ձ͍ɺϒϥϯυͷੈք؍ͷ
ֶͼΛఏڙ͢ΔARϑΝογϣϯγϣʔ
ARΫϥυΛ༻͍ͯɺෳਓͰڞಉͰ
ཧͷ֗ͷϓϥϯΛͭ͘Δମݧలࣔ
AWE AWARD FINALIST AWE AWARD FINALIST
UNITY DEVELOPMENT CASE 2019
Spatial Communication
άϥεܕσόΠε͕ීٴͨ࣌͠ʹ
ࢢۭؒͰͲͷΑ͏ͳίϛϡχέʔγϣϯ͕
ੜ·ΕΔ͔Λ࣮ূ࣮ݧத
Slide 5
Slide 5 text
PAGE 5
個⼈で遊んでいること
Slide 6
Slide 6 text
PAGE 6
ࠓ͢͜ͱ
TODAY'S TOPIC
Slide 7
Slide 7 text
PAGE 7
今⽇話すこと
ελʔτΞοϓͰͷ
ͷඳ͖ํ
02
AR(֦ுݱ࣮)
=Spatial Computing
ͱݴΘΕΔٕज़͕
ۙ͞Ε͍ͯΔཧ༝
Ͳ͏ͯ͠ARʹ
Ṍ͚͍ͯΔ͔ʁ
01
SX Design
ۭؒମݧσβΠϯ
Λͭ͘Δ͔
03
͜ͷʹཱͭ·Ͱ
Ͳ͏͕ࣗาΜͰ͖͔ͨ
ࣄͷεεϝʢݱ࣌ʣ
ͲͷΑ͏ʹνʔϜͰ
Spatial Experience
Design
Λ͍ͭͬͯ͘Δ͔
Slide 8
Slide 8 text
PAGE 8
こちらにて後ほどスライドを公開するので、
ごゆるりとお聞きください！
@y__homm
今⽇話すこと
Slide 9
Slide 9 text
PAGE 9
今⽇話すこと
ελʔτΞοϓͰͷ
ͷඳ͖ํ
02
AR(֦ுݱ࣮)
=Spatial Computing
ͱݴΘΕΔٕज़͕
ۙ͞Ε͍ͯΔཧ༝
01
SX Design
ۭؒମݧσβΠϯ
Λͭ͘Δ͔
03
͜ͷʹཱͭ·Ͱ
Ͳ͏͕ࣗาΜͰ͖͔ͨ
ࣄͷεεϝʢݱ࣌ʣ
ͲͷΑ͏ʹνʔϜͰ
Spatial Experience
Design
Λ͍ͭͬͯ͘Δ͔
Ͳ͏ͯ͠ARʹ
Ṍ͚͍ͯΔ͔ʁ
Slide 10
Slide 10 text
AR（拡張現実）という技術をご存知の⽅？
Slide 11
Slide 11 text
11
かくちょう-げんじつ【拡張現実】の解説
《augmented reality》実世界から得られる知覚情報に、コンピューターで情報を補⾜したり、
センサーによる情報を加えて強調したりする技術の総称。
専⽤のゴーグルや機器などを通して⾒た現実の⾵景に、電⼦情報を重ね合わせて表⽰するもの。
スマートホンのカメラ機能を⽤いたAR動画などに応⽤されている。
Pokemon Go SNOW ΧʔφϏͷόοΫϞχλʔ
Slide 12
Slide 12 text
PAGE 12
Spatial Computingの機運
⽇本版 WIREDで
AR特集の号
GAFAなど巨⼤IT企業の
カンファレンスのメインテーマ
Adobeをはじめとした
デザインツール×ARの兆し
MRデバイスnreal発売
Appleのグラス型デバイス報道
Slide 13
Slide 13 text
PAGE 13
なぜいまSpatial Computingなのか
AR・MRグラス
5G AI AR Cloud
通信容量が拡⼤
メディアが平⾯的なものから
空間・⽴体的なものへ
情報の⽴体表⽰
視界情報のインプット化
空間把握
現実世界の
意味を読み取りデジタル
世界と紐付けられるように
複数⼈数でのAR体験
現実世界とデジタルレイヤー
の重ね合わせ
Spatial Computing
2020~ 2020~2022 Now~ 2020~2022?
Slide 14
Slide 14 text
PAGE 14
AR = Spatial Computingの時代
AR（Spatial Computing）
いままでフラットに扱っていた情報を⽴体的・空間的な形で
現実世界と対応させて扱う技術
「Hyperlink, Social Graphに続く第3のプラットフォーム」
（WIRED, 「〈インターネット〉の次に来るもの」）
＝
＝
Slide 15
Slide 15 text
PAGE 15
Spatial Computingによってデザインはどう変化するか
Spatial Computing
Responsive
Web
↓
Responsive
Space
Manual Input
↓
Input by
Context
Video Sharing
↓
Presence Sharing
Hyper Link
↓
Hyper Space
Text /
Image / Video
↓
Space
2D Interaction
↓
3D Interaction
O2O / OMO
↓
Mirror World
Slide 16
Slide 16 text
PAGE 16
今⽇話すこと
ελʔτΞοϓͰͷ
ͷඳ͖ํ
02
AR(֦ுݱ࣮)
=Spatial Computing
ͱݴΘΕΔٕज़͕
ۙ͞Ε͍ͯΔཧ༝
01
SX Design
ۭؒମݧσβΠϯ
Λͭ͘Δ͔
03
͜ͷʹཱͭ·Ͱ
Ͳ͏͕ࣗาΜͰ͖͔ͨ
ࣄͷεεϝʢݱ࣌ʣ
ͲͷΑ͏ʹνʔϜͰ
Spatial Experience
Design
Λ͍ͭͬͯ͘Δ͔
Ͳ͏ͯ͠ARʹ
Ṍ͚͍ͯΔ͔ʁ
Slide 17
Slide 17 text
17
スタートアップでの成⻑について
ワクワクする⽅へ ロードマップを引いて スキルを掛け合わせ磨く
現状この3つが⼤切な仕事のススメと考えている
Slide 18
Slide 18 text
PAGE 18
ワクワクする⽅とは？
Slide 19
Slide 19 text
PAGE 19
Slide 20
Slide 20 text
PAGE 20
SF⼩説家、映像作家、研究者
が描いていた未来を⾃分の⼿で実装すること
は間違いなくアツいと。
ワクワク度 = アクセル度
Slide 21
Slide 21 text
PAGE 21
⼈⽣においていちばん⼤事なのは、何が⾃分にあっているか
をうまく⾒つけ出すことです。そのためには若いうちにいろん
なことを試してみるといいです。
ଜ্य़थ ʰʮ͜Ε͚ͩɺଜ্͞Μʹݴ͓ͬͯ͜͏ʯͱੈؒͷਓʑ͕ଜ্य़थʹͱΓ͋͑ͣͿ͚ͬͭΔ330ͷ࣭ʹՌͨͯ͠ଜ্͞ΜͪΌΜͱ͑ΒΕΔͷ͔? ʱ
とりあえずワクワクする⽅へ⾜を運んでみよう
Slide 22
Slide 22 text
22
ロードマップを引く
サービスデザイン領域でのスキルは下から順に積み重ね、実践
https://note.mu/kajiken0630/n/nad654142d9ef
Slide 23
Slide 23 text
23
Business
Technology Creative
AR(Digital)
Product
Marketer
Director
Producer
Planner
UI Designer
Graphic Designer
Back-end engineer
Front-end engineer
スキルを掛け合わせ磨く
Creative coder
Unity Engineer
Spatial Designer
BTC領域をいかに跨ぎ、越境した⼈材になることができるか？
3D Modeler
Slide 24
Slide 24 text
24
Business
Technology Creative
AR(Digital)
Product
Marketer
Director
Producer
Planner
UI Designer
Graphic Designer
Back-end engineer
Front-end engineer
スキルを掛け合わせ磨く
Creative coder
Unity Engineer
Spatial Designer
社内プロジェクト、⾃主プロジェクト、座学を駆使し、
⼀旦BTCのスキルを抑えることで⾃⾝の進みたい⽅向を⾒つける
3D Modeler
ࣾ
ࣗओ
࠲ֶ
※ͨͱ͑ࣗͷ߹
Slide 25
Slide 25 text
PAGE 25
今⽇話すこと
ελʔτΞοϓͰͷ
ͷඳ͖ํ
02
AR(֦ுݱ࣮)
=Spatial Computing
ͱݴΘΕΔٕज़͕
ۙ͞Ε͍ͯΔཧ༝
01
SX Design
ۭؒମݧσβΠϯ
Λͭ͘Δ͔
03
͜ͷʹཱͭ·Ͱ
Ͳ͏͕ࣗาΜͰ͖͔ͨ
ࣄͷεεϝʢݱ࣌ʣ
ͲͷΑ͏ʹνʔϜͰ
Spatial Experience
Design
Λ͍ͭͬͯ͘Δ͔
Ͳ͏ͯ͠ARʹ
Ṍ͚͍ͯΔ͔ʁ
Slide 26
Slide 26 text
PAGE 26
Spatial Experience Design
=デジタル×空間の体験デザイン
Slide 27
Slide 27 text
27
拡
散
収
束
拡
散
収
束
解くべき問い
「〇〇を××するには
どうしたらよいだろうか」
という具体的な問い
ゴールの共有
プロジェクトのゴール
このプロジェクトで
達成したい状態の定義
MESON Creative Studioのデザインプロセス
切り⼝の洗い出しと
解くべき問いの選定
アイデアの
拡散と収束
プロトタイプでの
価値検証
リリースに向けた
サービス開発
サービスアイデア
「解くべき問い」を
解決するサービス案
プロトタイプ
荒削りだが、
サービスの価値仮説を
裏付けるプロトタイプ
サービス
実際にユーザーに
提供できる状態の
サービス
Slide 28
Slide 28 text
28
拡
散
収
束
拡
散
収
束
解くべき問い
「〇〇を××するには
どうしたらよいだろうか」
という具体的な問い
ゴールの共有
プロジェクトのゴール
このプロジェクトで
達成したい状態の定義
Spatial Experience Design ならではさ
切り⼝の洗い出しと
解くべき問いの選定
アイデアの
拡散と収束
プロトタイプでの
価値検証
リリースに向けた
サービス開発
サービスアイデア
「解くべき問い」を
解決するサービス案
プロトタイプ
荒削りだが、
サービスの価値仮説を
裏付けるプロトタイプ
サービス
実際にユーザーに
提供できる状態の
サービス
1.バックキャスティング思考 2.リアリティシーケンス
3. グラスUIデザインの
はじめ
4. 表現のチーム共有
Slide 29
Slide 29 text
1. バックキャスティング思考
29
現在のデータや
事象から積み上げで
未来を予測する
まず遠い未来を想像し、
そこから今や近い未来を
逆算してアイデアを考える
Future City
Life
▼FORECAST
▼BACKCAST
Slide 30
Slide 30 text
30
・今起きている事やデータから確度の⾼い未来を予想する
・社会が右肩上がりで進んでいるときに有効
・未来はこういった事が起こるであろうといった未来から逆算する未来志向
の考え⽅
・社会・技術が指数関数的に発展していく中で未来を考える際に有効
フォアキャスティング
バックキャスティング
1. バックキャスティング思考
Slide 31
Slide 31 text
AR関連技術で今できること∕まだできないこと,
2040年になっても残っているであろう⼈間の本質的欲求・⾏動,
現時点で広く普及しているサービスを整理
現在のAR技術
⼈間の欲求・⾏動
普及中サービス
1. バックキャスティング思考
Slide 32
Slide 32 text
$
"
#
ීวతͳཉٻɾߦಈɺݱࡏීٴ͍ͯ͠ΔαʔϏε͕
ʹͲΜͳαʔϏεͷܗͱͯ͠ݱΕ͍ͯΔ͔Λߟ͑ɺ
ߦಈɾཉٻͷछྨͳͲͷ࣠Ͱάϧʔϓʹ͚Δ
現在のAR技術
⼈間の欲求・⾏動
普及中サービス
AR×未来のサービス
1. バックキャスティング思考
Slide 33
Slide 33 text
άϧʔϐϯάͨ͠ͷঢ়ଶ͔Βٯࢉͯ͠
ʹͲͷΑ͏ͳαʔϏε͕ීٴ͍ͯ͠Δ͔Λ༧͢Δ
$
"
#
現在のAR技術
⼈間の欲求・⾏動
普及中サービス
AR×未来のサービス
1. バックキャスティング思考
Slide 34
Slide 34 text
PAGE 34
2.リアリティシーケンス
"34FSWJDF%FTJHO5PPMLJU
ϓϩμΫτεςʔτϝϯτ
δϟϕϦϯϘʔυ
ϖϧιφγʔτ
ϢʔβʔετʔϦʔϚοϐϯά
Ϣʔεέʔεγʔτ
ετʔϦʔϘʔυ
λεΫϑϩʔ
*"Ϛοϓ
ϦΞϦςΟγʔΫΤϯε
ϦΞϦςΟεέον
)J'JϫΠϠʔϑϨʔϜ
-P'JϓϩτλΠϓ
4LFUDIσβΠϯ
)J'JϓϩτλΠϓ
ޒײνΣοΫ
ॱ൪
Slide 35
Slide 35 text
PAGE 35
2.リアリティシーケンス
ARサービスをつくる上での課題の⼀つが、
ラフな段階のサービスイメージをどうやって形にしてチームと共有するか
Slide 36
Slide 36 text
PAGE 36
2.リアリティシーケンス
ユーザーが⾃由に視点を選べるARサービスにおいては、
従来のスクリーンベースのワイヤーフレームではサービス体験を⼗分に表現できない
Slide 37
Slide 37 text
PAGE 37
2.リアリティシーケンス
MESONではLillian Warnerの「REALITY SEQUENCE」と「REALITY SKETCH」を使⽤
Slide 38
Slide 38 text
PAGE 38
2.リアリティシーケンス
「REALITY SEQUENCE」はスクリーンベースではなくシーンベースで
ユーザー体験を定義するデザインツール
Slide 39
Slide 39 text
PAGE 39
2.リアリティシーケンス
ΞΠσΞ νʔϜ ςετ
γʔϯɿ
UIؚΊͯϢʔβʔͷࢹքʹө͍ͬͯΔݱ࣮ڥཁૉΛඳ͖ग़͢
ΠϯϓοτΦϓγϣϯɿ
Ϣʔβʔ͕Ͳ͏͍ͬͨλΠϓͷΞΫγϣϯ͕Ͱ͖Δ͔
ΦʔσΟΦɿ
Ͳ͏͍ͬͨԻָԻͰϢʔβʔΛΨΠυ͍ͯ͠Δ͔
ϢʔβʔΠϯϓοτɿ
Ϣʔβʔ͕࣍ͷγʔϯʹߦͨ͘ΊʹͲ͏͍ͬͨΞΫγϣϯΛ͢Δ͔
Slide 40
Slide 40 text
PAGE 40
3. グラスUIデザインのはじめ
ARは空間を移動しながら
現実に重畳された情報を摂取する体験なので、
従来のディスプレイに閉じない情報配置を考える
Slide 41
Slide 41 text
PAGE 41
3. グラスUIデザインのはじめ
安全性、オブジェクト配置、視野⾓、インタラクション
とグラスデバイスでのUIデザインを考える
安全性のデザイン オブジェクトの距離デザイン 視野⾓のデザイン インタラクションのデザイン
Slide 42
Slide 42 text
PAGE 42
4. 表現のチーム共有
ARは空間的・五感的な体験なので、⾔葉や絵で伝えきれないことも多い
Slide 43
Slide 43 text
PAGE 43
4. 表現のチーム共有
「アレみたいな感じ」で伝わるチームの引き出しを
いかに増やせるかが重要なテーマ
Slide 44
Slide 44 text
PAGE 44
4. 表現のチーム共有
MESONでは以下を通してチームの「アレ」の引き出しを増やしている
ςΫϊϩδʔΛͬͨలࣔʹ
ΈΜͳͰߦ͘
৽͍͠ARɾVRΞϓϦΛ
ΈΜͳͰ͏
PinterestͰ
ΠϯεϐϨʔγϣϯ
ϘʔυΛڞ༗
ࣾͰΈΜͳͰ
ήʔϜΛ͢Δ
Slide 45
Slide 45 text
45
あたらしいデザイン体系を⽣み出しつつ
ディスプレイに縛られない体験を届けたい
Slide 46
Slide 46 text
PAGE 46
·ͱΊ
WRAP UP
Slide 47
Slide 47 text
PAGE 47
今⽇話すこと
ελʔτΞοϓͰͷ
ͷඳ͖ํ
02
AR(֦ுݱ࣮)
=Spatial Computing
ͱݴΘΕΔٕज़͕
ۙ͞Ε͍ͯΔཧ༝
Ͳ͏ͯ͠ARʹ
Ṍ͚͍ͯΔ͔ʁ
01
SX Design
ۭؒମݧσβΠϯ
Λͭ͘Δ͔
03
͜ͷʹཱͭ·Ͱ
Ͳ͏͕ࣗาΜͰ͖͔ͨ
ࣄͷεεϝʢݱ࣌ʣ
ͲͷΑ͏ʹνʔϜͰ
Spatial Experience
Design
Λ͍ͭͬͯ͘Δ͔
Slide 48
Slide 48 text
PAGE 48
Spatial Computingによってデザインはどう変化するか
Spatial Computing
Responsive
Web
↓
Responsive
Space
Manual Input
↓
Input by
Context
Video Sharing
↓
Presence Sharing
Hyper Link
↓
Hyper Space
Text /
Image / Video
↓
Space
2D Interaction
↓
3D Interaction
O2O / OMO
↓
Mirror World
Slide 49
Slide 49 text
49
スタートアップでの成⻑について
ワクワクする⽅へ ロードマップを引いて スキルを掛け合わせ磨く
現状この3つが⼤切な仕事のススメと考えている
Slide 50
Slide 50 text
50
拡
散
収
束
拡
散
収
束
解くべき問い
「〇〇を××するには
どうしたらよいだろうか」
という具体的な問い
ゴールの共有
プロジェクトのゴール
このプロジェクトで
達成したい状態の定義
Spatial Experience Design ならではさ
切り⼝の洗い出しと
解くべき問いの選定
アイデアの
拡散と収束
プロトタイプでの
価値検証
リリースに向けた
サービス開発
サービスアイデア
「解くべき問い」を
解決するサービス案
プロトタイプ
荒削りだが、
サービスの価値仮説を
裏付けるプロトタイプ
サービス
実際にユーザーに
提供できる状態の
サービス
1.バックキャスティング思考 2.リアリティシーケンス
3. グラスUIデザインの
はじめ
4. 表現のチーム共有
Slide 51
Slide 51 text
PAGE 51
越境⼈材チームの時代
拙いスピーチでしたがいろんな⼈と繋がりながら
新しい時代のComputing Designをつくっていけたらと！
ΫϦΤΠςΟϒ
σΟϨΫλʔ
ݐஙՈ
ө૾
ΫϦΤΠλʔ αϯυ
σβΠφʔ
ςΫχΧϧ
ΞʔςΟετ
3D
ΞʔςΟετ
Πϥετ
Ϩʔλʔ
Slide 52
Slide 52 text
52
B5の展⽰スペースではAR/MRグラスのサービスも体験できるのでぜひ！
Slide 53
Slide 53 text
53
このデザイナーの⼤舞台には⼀⼈では⽴てなかったです…
弊社の代表梶さん、マチルダによろしければ拍⼿を！
関根 詩織
UIデザイナー
梶⾕ 健⼈
CEO
チームのみんな
And,,
Slide 54
Slide 54 text
54
Thank You!!
こちらに書かれていた参考noteも後々まとめていきます！
@y__homm