Designship2019_AR / Spatial Experience Design

19th, Nov, 2019 Designship
Yuki Homma/MESON, inc

Transcript

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