Adobe XD Meeting vol.07＠日本マイクロソフト株式会社セミナールーム の登壇資料です。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・シルエットデザイン http://kage-design.com/ ・human pictogram 2.0 http://pictogram2.com ・ICOOON MONO http://icooon-mono.com/

1. Adobe XD Meeting #07
Adobe XDをHoloLensで表示させて考
えるいろいろな可能性
ワンフットシーバス 田中正吾

2. 私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です！

3. 自己紹介

4. 田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。
デジタルサイネージやアプリ制作もやります。

5. HoloLens

6. みなさんHoloLens
ご存知ですか？

7. Microsoftが発売した
初の自己完結型ホログラフィックコンピュータ

8. これなんですが

9. 透過性のメガネで、ざっくりいうと
半分だけ現実世界に3D映像を加えれる

10. つまり空間に

11. つまり空間に情報が

12. つまり空間に情報が可視化できる

13. 現実空間にアウトプット
HoloLens
OUTPUT

14. のこりの半分は？
HoloLens
OUTPUT

15. たとえば壁をタップしてみるとポリゴンで認識

16. 今度は天井のカドをタップ

17. ソナーみたいな波紋広がる

18. ソナーみたいな波紋広がる

19. HoloLensが認識している

20. HoloLensが認識している

21. いろいろなセンサーで空間を認識
MRとは？ HoloLensのハードウェア／機能／アプリ動作／ユーザー操作 - Build Insider
http://www.buildinsider.net/small/hololens/001

22. 環境認識カメラや慣性計測ユニットなど
複合的に感知して「世界を認識している」

23. 現実空間をインプット
HoloLens
OUTPUTINPUT

24. 現実世界を認識しながら
3D空間として映像を投影できるデバイス

25. それがHoloLens
10/90

26. まずAdobeXDを表示してみる

27. なぜHoloLensでAdobeXDを
使いたいか

28. Mixed Reality(HoloLens)

29. 空間全部で可視化できる
自分で取捨選択できるし、もはやインテリアに近い
HoloLens
OUTPUT

30. 空間全部に入力にできる
「現実の何かをアクションする」ことの可視化もできる
HoloLens
INPUT

31. 空間で情報を把握できる伝達手段

32. まだまだ知見のない伝達手段なので
すばやいプロトタイプを目指したい

33. やってみる！

34. とはいえ！

35. HoloLensではAdobeXDアプリは
まだ来てない

36. なんとか使いたい！

37. HoloLensのメニューを見てみる

38. Edgeブラウザがある！
HoloLensに標準インストールされています

39. Canvasアニメーションなど
HTML5もちゃんと動く

40. デモ

41. いよいよAdobeXDオンライン共有

42. 緑→青→赤 とループするネタを
オンライン共有

43. デモ

44. できた！

45. ちょっと難点が

46. 共有URL長くて入力に慣れが必要
もちろんショートURL化してブックマーク登録はアリ

47. よし。このプレビューを表示するための
HoloLensアプリを作ってみよう

48. HoloLensを動かす
2D UWPアプリにWebViewある

49. AdobeXD動くWebView

50. スマホでWEBアプリ表示させるのに近い

51. こんなプロトタイプ

52. フリーのAdobe XD UI素材
Fitnessサンプル

53. フリーのAdobe XD UI素材
Windows Fluent Design的なサンプル

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. PCで動かしてみる

56. このブラウザ機能を
オンライン共有URL固定したアプリへ

57. PCで表示するだけUWPアプリつくる！

58. PC→HoloLens アプリ転送

59. HoloLensインストール完了！

60. 表示されました！

61. 動画

62. 実際の操作デモ

63. ここから考えてみる

64. さてAdobeXDをMixedRealityに
取り込めました

65. 3つの見え方がある

66. 1つめ

67. 1つめは共同作業として

68. ノートPCとHoloLensで
一緒にプロトタイプ検討できる
（今後の制作シーンとして使える）

69. 2つめ

70. 現場に設置されないと
わからないことを解決できる

71. 現実世界に2Dプロトタイプ
たとえば家電の操作UIの表示など実際の大きさを見ないと実装しにくい

72. Mixed Realityは現実の世界に
そのままプロトタイプを置ける

73. 現実に合わせたUI検討ができそう
存在感・分かりやすさ・操作のしやすさ など

74. デモ

75. 3つめ

76. これからの3DのUI設計として
AdobeXDをつかえそう（つかいたい）

77. たとえばこんなアプリ作り中

78. センサーデータを可視化する

79. まだまだ大変

80. VRやHoloLnsの3Dアプリは
Unityで作ることが多い

81. ツールの習熟もあるが、プロトタイプを
繰り返すのは、まだまだ骨が折れる

82. 今後Adobe XDで良いUIを
実際に配置して何度も試したい

83. とはいえ違う部分もある

84. たとえば

85. 3Dの奥行き要素は大事だが
やりすぎず効果的につかうとよさそう
たとえばHoloLensアプリのリスト要素は少々立体感を出してる

86. 空間全部使えるため視線の流れが2Dと変わる
現実のインテリアデザイン的な感覚も必要
センサーデータを可視化したグラフ例

87. さきほどのセンサー表示も
3D使いすぎるとわかりにくい
文字をストーンヘンジみたいに配置すると見にくい場合もある
ストーンヘンジ

88. Adobe XDでいずれUnityパーツに
書き出してくれたらステキ（妄想）

89. 3D空間のUIはまだ手探りだが
プロトタイプで磨いていくのは大事。
AdobeXDのようなツールは必要と感じてます！

90. ➔Adobe XDで作ったプロトタイプを表示してみ
ていろいろな可能性が見えた
➔（まだいまは難しいが）HoloLensにもAdobe
XDが登場すると共同作業ができる
➔Mixed Realityの長所である、現実空間に直接
配置できることで、現場でより精度の高いプ
ロトタイプ検討ができる
まとめ

91. ➔Mixed Realityでは奥行きなど3D特有の要素も
ある。だが前例は少なく試行錯誤であり、2D
のノウハウも生きる場所もありそう
➔2Dと同様に3Dでのプロトタイプ検討は必要な
ので、Adobe XDのようなプロトタイプの需要
は感じる
まとめ

92. ご清聴いただきまして
ありがとうございました！