Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Adobe XDをHoloLensで表示させて考えるいろいろな可能性

2,035 views

Published on

Adobe XD Meeting vol.07@日本マイクロソフト株式会社セミナールーム の登壇資料です。

◆スライド内の素材は以下を使用させて頂いております。ありがとうございます!

・シルエットデザイン http://kage-design.com/
・human pictogram 2.0 http://pictogram2.com
・ICOOON MONO http://icooon-mono.com/

Published in: Technology
  • Be the first to comment

Adobe XDをHoloLensで表示させて考えるいろいろな可能性

  1. 1. Adobe XD Meeting #07 Adobe XDをHoloLensで表示させて考 えるいろいろな可能性 ワンフットシーバス 田中正吾
  2. 2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です!
  3. 3. 自己紹介
  4. 4. 田中正吾(たなかせいご) 屋号:ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い 現在に至る。 最近は、JavaScriptやHTML5アニメーション、 スマートフォン演出制作のワークフロー改善に 関わったりしていました。 デジタルサイネージやアプリ制作もやります。
  5. 5. HoloLens
  6. 6. みなさんHoloLens ご存知ですか?
  7. 7. Microsoftが発売した 初の自己完結型ホログラフィックコンピュータ
  8. 8. これなんですが
  9. 9. 透過性のメガネで、ざっくりいうと 半分だけ現実世界に3D映像を加えれる
  10. 10. つまり空間に
  11. 11. つまり空間に情報が
  12. 12. つまり空間に情報が可視化できる
  13. 13. 現実空間にアウトプット HoloLens OUTPUT
  14. 14. のこりの半分は? HoloLens OUTPUT
  15. 15. たとえば壁をタップしてみるとポリゴンで認識
  16. 16. 今度は天井のカドをタップ
  17. 17. ソナーみたいな波紋広がる
  18. 18. ソナーみたいな波紋広がる
  19. 19. HoloLensが認識している
  20. 20. HoloLensが認識している
  21. 21. いろいろなセンサーで空間を認識 MRとは? HoloLensのハードウェア/機能/アプリ動作/ユーザー操作 - Build Insider http://www.buildinsider.net/small/hololens/001
  22. 22. 環境認識カメラや慣性計測ユニットなど 複合的に感知して「世界を認識している」
  23. 23. 現実空間をインプット HoloLens OUTPUTINPUT
  24. 24. 現実世界を認識しながら 3D空間として映像を投影できるデバイス
  25. 25. それがHoloLens 10/90
  26. 26. まずAdobeXDを表示してみる
  27. 27. なぜHoloLensでAdobeXDを 使いたいか
  28. 28. Mixed Reality(HoloLens)
  29. 29. 空間全部で可視化できる 自分で取捨選択できるし、もはやインテリアに近い HoloLens OUTPUT
  30. 30. 空間全部に入力にできる 「現実の何かをアクションする」ことの可視化もできる HoloLens INPUT
  31. 31. 空間で情報を把握できる伝達手段
  32. 32. まだまだ知見のない伝達手段なので すばやいプロトタイプを目指したい
  33. 33. やってみる!
  34. 34. とはいえ!
  35. 35. HoloLensではAdobeXDアプリは まだ来てない
  36. 36. なんとか使いたい!
  37. 37. HoloLensのメニューを見てみる
  38. 38. Edgeブラウザがある! HoloLensに標準インストールされています
  39. 39. Canvasアニメーションなど HTML5もちゃんと動く
  40. 40. デモ
  41. 41. いよいよAdobeXDオンライン共有
  42. 42. 緑→青→赤 とループするネタを オンライン共有
  43. 43. デモ
  44. 44. できた!
  45. 45. ちょっと難点が
  46. 46. 共有URL長くて入力に慣れが必要 もちろんショートURL化してブックマーク登録はアリ
  47. 47. よし。このプレビューを表示するための HoloLensアプリを作ってみよう
  48. 48. HoloLensを動かす 2D UWPアプリにWebViewある
  49. 49. AdobeXD動くWebView
  50. 50. スマホでWEBアプリ表示させるのに近い
  51. 51. こんなプロトタイプ
  52. 52. フリーのAdobe XD UI素材 Fitnessサンプル
  53. 53. フリーのAdobe XD UI素材 Windows Fluent Design的なサンプル
  54. 54. フリーのAdobe XD UI素材 URLはこちら ● Fitness Dashboard for Adobe XD - XDGuru.com ○ https://www.xdguru.com/fitness-dashboard-xd/ ● Windows Fluent Design Concept - XDGuru.com ○ https://www.xdguru.com/windows-fluent-design-xd/
  55. 55. PCで動かしてみる
  56. 56. このブラウザ機能を オンライン共有URL固定したアプリへ
  57. 57. PCで表示するだけUWPアプリつくる!
  58. 58. PC→HoloLens アプリ転送
  59. 59. HoloLensインストール完了!
  60. 60. 表示されました!
  61. 61. 動画
  62. 62. 実際の操作デモ
  63. 63. ここから考えてみる
  64. 64. さてAdobeXDをMixedRealityに 取り込めました
  65. 65. 3つの見え方がある
  66. 66. 1つめ
  67. 67. 1つめは共同作業として
  68. 68. ノートPCとHoloLensで 一緒にプロトタイプ検討できる (今後の制作シーンとして使える)
  69. 69. 2つめ
  70. 70. 現場に設置されないと わからないことを解決できる
  71. 71. 現実世界に2Dプロトタイプ たとえば家電の操作UIの表示など実際の大きさを見ないと実装しにくい
  72. 72. Mixed Realityは現実の世界に そのままプロトタイプを置ける
  73. 73. 現実に合わせたUI検討ができそう 存在感・分かりやすさ・操作のしやすさ など
  74. 74. デモ
  75. 75. 3つめ
  76. 76. これからの3DのUI設計として AdobeXDをつかえそう(つかいたい)
  77. 77. たとえばこんなアプリ作り中
  78. 78. センサーデータを可視化する
  79. 79. まだまだ大変
  80. 80. VRやHoloLnsの3Dアプリは Unityで作ることが多い
  81. 81. ツールの習熟もあるが、プロトタイプを 繰り返すのは、まだまだ骨が折れる
  82. 82. 今後Adobe XDで良いUIを 実際に配置して何度も試したい
  83. 83. とはいえ違う部分もある
  84. 84. たとえば
  85. 85. 3Dの奥行き要素は大事だが やりすぎず効果的につかうとよさそう たとえばHoloLensアプリのリスト要素は少々立体感を出してる
  86. 86. 空間全部使えるため視線の流れが2Dと変わる 現実のインテリアデザイン的な感覚も必要 センサーデータを可視化したグラフ例
  87. 87. さきほどのセンサー表示も 3D使いすぎるとわかりにくい 文字をストーンヘンジみたいに配置すると見にくい場合もある ストーンヘンジ
  88. 88. Adobe XDでいずれUnityパーツに 書き出してくれたらステキ(妄想)
  89. 89. 3D空間のUIはまだ手探りだが プロトタイプで磨いていくのは大事。 AdobeXDのようなツールは必要と感じてます!
  90. 90. ➔Adobe XDで作ったプロトタイプを表示してみ ていろいろな可能性が見えた ➔(まだいまは難しいが)HoloLensにもAdobe XDが登場すると共同作業ができる ➔Mixed Realityの長所である、現実空間に直接 配置できることで、現場でより精度の高いプ ロトタイプ検討ができる まとめ
  91. 91. ➔Mixed Realityでは奥行きなど3D特有の要素も ある。だが前例は少なく試行錯誤であり、2D のノウハウも生きる場所もありそう ➔2Dと同様に3Dでのプロトタイプ検討は必要な ので、Adobe XDのようなプロトタイプの需要 は感じる まとめ
  92. 92. ご清聴いただきまして ありがとうございました!

×