Adobe XD Meeting #07
Adobe XDをHoloLensで表示させて考
えるいろいろな可能性
ワンフットシーバス 田中正吾
私の話はスライドを後ほど共有します。
話す内容に注力いただいて大丈夫です!
自己紹介
田中正吾(たなかせいご)
屋号:ワンフットシーバス
2004年よりフリーランス。以後、FLASH制作を
中心にインタラクティブコンテンツを主に行い
現在に至る。
最近は、JavaScriptやHTML5アニメーション、
スマートフォン演出制作のワークフロー改善に
関わったりしていました。
デジタルサイネージやアプリ制作もやります。
HoloLens
みなさんHoloLens
ご存知ですか?
Microsoftが発売した
初の自己完結型ホログラフィックコンピュータ
これなんですが
透過性のメガネで、ざっくりいうと
半分だけ現実世界に3D映像を加えれる
つまり空間に
つまり空間に情報が
つまり空間に情報が可視化できる
現実空間にアウトプット
HoloLens
OUTPUT
のこりの半分は?
HoloLens
OUTPUT
たとえば壁をタップしてみるとポリゴンで認識
今度は天井のカドをタップ
ソナーみたいな波紋広がる
ソナーみたいな波紋広がる
HoloLensが認識している
HoloLensが認識している
いろいろなセンサーで空間を認識
MRとは? HoloLensのハードウェア/機能/アプリ動作/ユーザー操作 - Build Insider
http://www.buildinsider.net/small/hololens/001
環境認識カメラや慣性計測ユニットなど
複合的に感知して「世界を認識している」
現実空間をインプット
HoloLens
OUTPUTINPUT
現実世界を認識しながら
3D空間として映像を投影できるデバイス
それがHoloLens
10/90
まずAdobeXDを表示してみる
なぜHoloLensでAdobeXDを
使いたいか
Mixed Reality(HoloLens)
空間全部で可視化できる
自分で取捨選択できるし、もはやインテリアに近い
HoloLens
OUTPUT
空間全部に入力にできる
「現実の何かをアクションする」ことの可視化もできる
HoloLens
INPUT
空間で情報を把握できる伝達手段
まだまだ知見のない伝達手段なので
すばやいプロトタイプを目指したい
やってみる!
とはいえ!
HoloLensではAdobeXDアプリは
まだ来てない
なんとか使いたい!
HoloLensのメニューを見てみる
Edgeブラウザがある!
HoloLensに標準インストールされています
Canvasアニメーションなど
HTML5もちゃんと動く
デモ
いよいよAdobeXDオンライン共有
緑→青→赤 とループするネタを
オンライン共有
デモ
できた!
ちょっと難点が
共有URL長くて入力に慣れが必要
もちろんショートURL化してブックマーク登録はアリ
よし。このプレビューを表示するための
HoloLensアプリを作ってみよう
HoloLensを動かす
2D UWPアプリにWebViewある
AdobeXD動くWebView
スマホでWEBアプリ表示させるのに近い
こんなプロトタイプ
フリーのAdobe XD UI素材
Fitnessサンプル
フリーのAdobe XD UI素材
Windows Fluent Design的なサンプル
フリーの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/
PCで動かしてみる
このブラウザ機能を
オンライン共有URL固定したアプリへ
PCで表示するだけUWPアプリつくる!
PC→HoloLens アプリ転送
HoloLensインストール完了!
表示されました!
動画
実際の操作デモ
ここから考えてみる
さてAdobeXDをMixedRealityに
取り込めました
3つの見え方がある
1つめ
1つめは共同作業として
ノートPCとHoloLensで
一緒にプロトタイプ検討できる
(今後の制作シーンとして使える)
2つめ
現場に設置されないと
わからないことを解決できる
現実世界に2Dプロトタイプ
たとえば家電の操作UIの表示など実際の大きさを見ないと実装しにくい
Mixed Realityは現実の世界に
そのままプロトタイプを置ける
現実に合わせたUI検討ができそう
存在感・分かりやすさ・操作のしやすさ など
デモ
3つめ
これからの3DのUI設計として
AdobeXDをつかえそう(つかいたい)
たとえばこんなアプリ作り中
センサーデータを可視化する
まだまだ大変
VRやHoloLnsの3Dアプリは
Unityで作ることが多い
ツールの習熟もあるが、プロトタイプを
繰り返すのは、まだまだ骨が折れる
今後Adobe XDで良いUIを
実際に配置して何度も試したい
とはいえ違う部分もある
たとえば
3Dの奥行き要素は大事だが
やりすぎず効果的につかうとよさそう
たとえばHoloLensアプリのリスト要素は少々立体感を出してる
空間全部使えるため視線の流れが2Dと変わる
現実のインテリアデザイン的な感覚も必要
センサーデータを可視化したグラフ例
さきほどのセンサー表示も
3D使いすぎるとわかりにくい
文字をストーンヘンジみたいに配置すると見にくい場合もある
ストーンヘンジ
Adobe XDでいずれUnityパーツに
書き出してくれたらステキ(妄想)
3D空間のUIはまだ手探りだが
プロトタイプで磨いていくのは大事。
AdobeXDのようなツールは必要と感じてます!
➔Adobe XDで作ったプロトタイプを表示してみ
ていろいろな可能性が見えた
➔(まだいまは難しいが)HoloLensにもAdobe
XDが登場すると共同作業ができる
➔Mixed Realityの長所である、現実空間に直接
配置できることで、現場でより精度の高いプ
ロトタイプ検討ができる
まとめ
➔Mixed Realityでは奥行きなど3D特有の要素も
ある。だが前例は少なく試行錯誤であり、2D
のノウハウも生きる場所もありそう
➔2Dと同様に3Dでのプロトタイプ検討は必要な
ので、Adobe XDのようなプロトタイプの需要
は感じる
まとめ
ご清聴いただきまして
ありがとうございました!

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