20200926_Adobe XD User Festival 2020

Fecdd3417cd7375cc0bd0352d72db27e?s=47 1ft-seabass
September 26, 2020
150

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/

Fecdd3417cd7375cc0bd0352d72db27e?s=128

1ft-seabass

September 26, 2020
Tweet

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 ・2

  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 いろいろ試していきたい!