20200926_Adobe XD User Festival 2020

Adobe XD User Festival 2020「Adobe XD と HoloLens 2 でちょっと未来のUIプロトタイプを考えてみる」の登壇資料です。

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

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

Transcript

1. [サブタイトル] [タイトル] ワンフットシーバス 田中正吾 Adobe XD User Festival 2020 Adobe XD と HoloLens 2 で ちょっと未来のUIプロトタイプを考えてみる ワンフットシーバス 田中正吾
2. 私の話はスライドを後ほど共有します。 話す内容に注力いただいて大丈夫です！
3. 田中正吾（たなかせいご） 屋号：ワンフットシーバス 2004年よりフリーランス。以後、FLASH制作を 中心にインタラクティブコンテンツを主に行い現 在に至る。 最近ではWEBフロントエンドをベースにしなが らも、情報とインターフェースが合わさるアプ ローチという視点でIoTやMixed Realityといった 技術も取り入れながら活動しています。
4. HoloLens 2 と Adobe XD の話 XD
5. 今日はスライドをしゃべりつつ 動画デモをしたりリアルタイムデモをします スライド 動画デモ リアルタイム デモ
6. HoloLens2 実機も装着しつつ プレゼンテーションさせてください うっかり手元に置いちゃうとスリープしたりで環境保つのがややこしいため起動しつづけたい
7. 今日のイベントマスクまで フル装備したら怪しくなり調整しました
8. では、はじめていきましょう～
9. HoloLens 1 ・２
10. HoloLens 1 のときも試してはみた Adobe XD 忘年会2017のときに話してみた
11. もどかしかった 首でマウスカーソルを合わせて遠くからマウスクリックする感じ
12. 薄皮一枚バリアがある感じ 直接指で振れる感覚ではなくて惜しい
13. HoloLens 2 というヘッドマウントディスプレイ 7月から個人でも手に入るようになった
14. HoloLens 1 がすでにあったがいろいろ進化 解像度・視野角 2倍 明るさ 3倍 で見やすく！
15. 手の細かな認識できるようになり 3Dのオブジェクトを直接指で触れるようになった
16. メニューを操作する動画 https://twitter.com/1ft_seabass/status/1309706843342606337
17. オブジェクトを掴んだり回したりする動画 https://twitter.com/1ft_seabass/status/1309706812766126080
18. HoloLens 2 で Edge ブラウザが使える
19. ブラウザ起動する動画
20. 指の操作の注意点とブラウザでのスクロール
21. 動画では指が手前に回り込まないが 実際の操作時はポインタが出て直感的に触れます
22. Adobe XD でオンラインで共有できる
23. Wiresを日本向けに再構築したUIキットWires jp こちらを使います
24. 少しだけ調整してつくりました
25. これで現実空間で Adobe XD が指で触れる！ https://twitter.com/1ft_seabass/status/1309708439904370688
26. いざ実際の操作デモ！ メインはHoloLens 2 の視界。右下のエリアで別カメラで私がどう動いているかも伝えます。 メインが HoloLen 2 の視界 私の動き
27. やってみる！
28. やってみて気づいたこと
29. 大きなモバイルデバイスを動かしている感覚
30. 現実のスケールでは 小さな文字は操作しにくかった
31. デジタルサイネージのデザインや配置の検証
32. FREE Dashboard UI Kit for Adobe XD を利用 https://www.behance.net/gallery/60714355/FREE-Dashboard-UI-Kit-for-Adobe-XD/moodboard
33. 壁に貼り付けて検証してみる
34. やってみて気づいたこと
35. 壁にくっつけるプロトタイプは 適切な画面の大きさを探れる 自由すぎるともいえる難しいけど面白い
36. 触感はないので やや押し込みすぎて、突き指しそうに やるまで気づかなかった。面白くてあぶない。
37. エクストラの話 もし話す時間があれば • IoTデバイスでもタッチパネル入力が手軽にできるよ うになった話（M5Stack Core2） • Oculus Questの内蔵ブラウザでもAdobe XDの共有が 表示できた話 • 内蔵ブラウザだと上のバーが見えちゃうがC#でブラ ウザ埋め込んだアプリ作れば、より現実に当てはめや すくなる話
38. 少し未来のことを考えてみる
39. その 1
40. 3DやIoTの仕組みはWEBほど手軽にできないので このようなプロトタイプができるとうれしい
41. いまIoT・3D制作はつくる時間がWEBよりかかり プロトタイプの余地がまだ少ないが考えていきたい WEB制作 IoT・3D制作 プロトタイプ 実際につくる 実際につくる（つくる時間はかかる） XD
42. その 2
43. デバイス数・ディスプレイ数に縛られず 空間に自由に置ける ∞
44. デバイス数・ディスプレイ数に縛られず、 空間に自由に置いて検討できそう https://twitter.com/1ft_seabass/status/1309708471386828800
45. 現実世界にすぐ展開できて触れると デザインの比較検討が進みやすいかも
46. Adobe XD と一緒にに色々な領域へ 試すことができた！ XD
47. WEBだけでなく様々な作る場で手軽につくって 試せる世界が広がっていくといいな！ これからも Adobe XD いろいろ試していきたい！