Adobe XD Meeting #07

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

ワンフットシーバス 田中正吾

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

自己紹介

田中正吾（たなかせいご）屋号：ワンフットシーバス

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

HoloLens

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

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

これなんですが

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

つまり空間に

つまり空間に情報が

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

現実空間にアウトプット

HoloLensOUTPUT

のこりの半分は？

HoloLensOUTPUT

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

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

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

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

HoloLensが認識している

HoloLensが認識している

いろいろなセンサーで空間を認識

MRとは？ HoloLensのハードウェア／機能／アプリ動作／ユーザー操作 - Build Insiderhttp://www.buildinsider.net/small/hololens/001

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

現実空間をインプット

HoloLensOUTPUTINPUT

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

それがHoloLens

10/90

まずAdobeXDを表示してみる

なぜHoloLensでAdobeXDを使いたいか

Mixed Reality(HoloLens)

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

HoloLensOUTPUT

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

HoloLensINPUT

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

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

やってみる！

とはいえ！

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のようなプロトタイプの需要は感じる

まとめ

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