20200926_Adobe XD User Festival 2020

by 1ft-seabass

Slide 1

Slide 1 text

[サブタイトル] [タイトル] ワンフットシーバス田中正吾 Adobe XD User Festival 2020 Adobe XD と HoloLens 2 でちょっと未来のUIプロトタイプを考えてみるワンフットシーバス田中正吾

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

田中正吾（たなかせいご）屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を中心にインタラクティブコンテンツを主に行い現在に至る。最近ではWEBフロントエンドをベースにしながらも、情報とインターフェースが合わさるアプローチという視点でIoTやMixed Realityといった技術も取り入れながら活動しています。

Slide 4

Slide 4 text

HoloLens 2 と Adobe XD の話 XD

Slide 5

Slide 5 text

今日はスライドをしゃべりつつ動画デモをしたりリアルタイムデモをしますスライド動画デモリアルタイムデモ

Slide 6

Slide 6 text

HoloLens2 実機も装着しつつプレゼンテーションさせてくださいうっかり手元に置いちゃうとスリープしたりで環境保つのがややこしいため起動しつづけたい

Slide 7

Slide 7 text

今日のイベントマスクまでフル装備したら怪しくなり調整しました

Slide 8

Slide 8 text

では、はじめていきましょう～

Slide 9

Slide 9 text

HoloLens 1 ・２

Slide 10

Slide 10 text

HoloLens 1 のときも試してはみた Adobe XD 忘年会2017のときに話してみた

Slide 11

Slide 11 text

もどかしかった首でマウスカーソルを合わせて遠くからマウスクリックする感じ

Slide 12

Slide 12 text

薄皮一枚バリアがある感じ直接指で振れる感覚ではなくて惜しい

Slide 13

Slide 13 text

HoloLens 2 というヘッドマウントディスプレイ 7月から個人でも手に入るようになった

Slide 14

Slide 14 text

HoloLens 1 がすでにあったがいろいろ進化解像度・視野角 2倍明るさ 3倍で見やすく！

Slide 15

Slide 15 text

手の細かな認識できるようになり 3Dのオブジェクトを直接指で触れるようになった

Slide 16

Slide 16 text

メニューを操作する動画 https://twitter.com/1ft_seabass/status/1309706843342606337

Slide 17

Slide 17 text

オブジェクトを掴んだり回したりする動画 https://twitter.com/1ft_seabass/status/1309706812766126080

Slide 18

Slide 18 text

HoloLens 2 で Edge ブラウザが使える

Slide 19

Slide 19 text

ブラウザ起動する動画

Slide 20

Slide 20 text

指の操作の注意点とブラウザでのスクロール

Slide 21

Slide 21 text

動画では指が手前に回り込まないが実際の操作時はポインタが出て直感的に触れます

Slide 22

Slide 22 text

Adobe XD でオンラインで共有できる

Slide 23

Slide 23 text

Wiresを日本向けに再構築したUIキットWires jp こちらを使います

Slide 24

Slide 24 text

少しだけ調整してつくりました

Slide 25

Slide 25 text

これで現実空間で Adobe XD が指で触れる！ https://twitter.com/1ft_seabass/status/1309708439904370688

Slide 26

Slide 26 text

いざ実際の操作デモ！メインはHoloLens 2 の視界。右下のエリアで別カメラで私がどう動いているかも伝えます。メインが HoloLen 2 の視界私の動き

Slide 27

Slide 27 text

やってみる！

Slide 28

Slide 28 text

やってみて気づいたこと

Slide 29

Slide 29 text

大きなモバイルデバイスを動かしている感覚

Slide 30

Slide 30 text

現実のスケールでは小さな文字は操作しにくかった

Slide 31

Slide 31 text

デジタルサイネージのデザインや配置の検証

Slide 32

Slide 32 text

FREE Dashboard UI Kit for Adobe XD を利用 https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD/moodboard

Slide 33

Slide 33 text

壁に貼り付けて検証してみる

Slide 34

Slide 34 text

やってみて気づいたこと

Slide 35

Slide 35 text

壁にくっつけるプロトタイプは適切な画面の大きさを探れる自由すぎるともいえる難しいけど面白い

Slide 36

Slide 36 text

触感はないのでやや押し込みすぎて、突き指しそうにやるまで気づかなかった。面白くてあぶない。

Slide 37

Slide 37 text

エクストラの話もし話す時間があれば ● IoTデバイスでもタッチパネル入力が手軽にできるようになった話（M5Stack Core2） ● Oculus Questの内蔵ブラウザでもAdobe XDの共有が表示できた話 ● 内蔵ブラウザだと上のバーが見えちゃうがC#でブラウザ埋め込んだアプリ作れば、より現実に当てはめやすくなる話

Slide 38

Slide 38 text

少し未来のことを考えてみる

Slide 39

Slide 39 text

その 1

Slide 40

Slide 40 text

3DやIoTの仕組みはWEBほど手軽にできないのでこのようなプロトタイプができるとうれしい

Slide 41

Slide 41 text

いまIoT・3D制作はつくる時間がWEBよりかかりプロトタイプの余地がまだ少ないが考えていきたい WEB制作 IoT・3D制作プロトタイプ実際につくる実際につくる（つくる時間はかかる） XD

Slide 42

Slide 42 text

その 2

Slide 43

Slide 43 text

デバイス数・ディスプレイ数に縛られず空間に自由に置ける ∞

Slide 44

Slide 44 text

デバイス数・ディスプレイ数に縛られず、空間に自由に置いて検討できそう https://twitter.com/1ft_seabass/status/1309708471386828800

Slide 45

Slide 45 text

現実世界にすぐ展開できて触れるとデザインの比較検討が進みやすいかも

Slide 46

Slide 46 text

Adobe XD と一緒にに色々な領域へ試すことができた！ XD

Slide 47

Slide 47 text

WEBだけでなく様々な作る場で手軽につくって試せる世界が広がっていくといいな！これからも Adobe XD いろいろ試していきたい！