Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

楽しんで始めるHoloLensアプリ設計

Tokyo HoloLens meetup #11のLTで発表したスライドです。HoloLensアプリケーションの設計は、従来のWeb開発などとは異なります。現実空間と3D仮想ホログラムとユーザーがコラボレーションするHoloLensアプリケーションの設計手順について紹介しています。

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

楽しんで始めるHoloLensアプリ設計

  1. 1. Tokyo HoloLens meetup #11 LT 楽しんで始める HoloLensアプリ設計 青木 淳夫 2018.12.15
  2. 2. 自己紹介 • 青木淳夫(@aoki1210) • 西新宿のネクストスケープという会 社で働いています。開発者募集中で す。 • https://www.nextscape.net/solutions/HoloLens • 神戸出身です。 • ラーメンとお酒とアジャイル開発が 好きです。
  3. 3. 小ネタ • 今日の5分のために、 昨日、Logicool Spotlight買いました。 • 9800円 • お金の力で、よりよい プレゼンテーション を!
  4. 4. 困ったこと •MRでは、設計の仕 方が従来の開発と 違うようだ。 •どうしよう。
  5. 5. わかってきたこと https://hackernoon.com/the-ux-workflow-for-hololens-mixed-reality-3bf59192e577 MR固有の 「進め方 (ワークフロー)」 があるもよう 01 MR固有の 「設計方法」 があるもよう 02
  6. 6. MRプロジェクトの進め方 1.ビジョン確認 課題の確認とxRで解決す ることの合意 2.MR設計 MR/VR/AR判定 MR設計要素(構成要素) ストーリーボード プロトタイプ 3.関係者への共有 フローチャート コンセプトアート
  7. 7. ビジョンの確認(MRに限らずですよね) 現課題(AS-IS) • 背景 • プロジェクトを実施す る背景 • 市場状況 解決したいゴール(TO-BE) • 目指すビジョン • 強みとなる機能はなにか • これまでや他と何が違う のか
  8. 8. MRプロジェクトの進め方 1.ビジョン確認 課題の確認とxRで解決す ることの合意 2.MR設計 MR/VR/AR判定 MR設計要素(構成要素) ストーリーボード プロトタイプ 3.関係者への共有 フローチャート コンセプトアート
  9. 9. 本当にMRかの確認(MR or VR or AR) • ヘッドマウントディスプレイ:HTC Vive/Oculs とか • 現実世界を隠し、仮想空間に没入 VR(Virtual Reality) 仮想現実 • スマートフォン:ポケモンGOアプリとか • 現実世界のデータに仮想レイヤを追加 AR(Augmented Reality) 拡張現実 • ヘッドマウントディスプレイ: HoloLens/Magic Leapとか • 実世界のデータに仮想レイヤを追加 • 実世界でインタラクティブに操作 MR(Mixed Reality) 複合現実
  10. 10. MRの設計要素 • MRアプリケーションの設計をするときには、 現実と仮想、 インプットとアウトプット などを整理できるとわかりやすい。
  11. 11. MR設計の要素 ①物理空間 ②ユーザー入力 ③ホログラム ④3Dサウンド ⑤MRデザイン手法 INPUT OUTPUT
  12. 12. MRの構成要素 ①物理空間 ②ユーザー入力 ③ホログラム ④3Dサウンド ⑤MRデザイン手法 壁 ゲーズ(視線カーソ ル) 3Dオブジェクト ホログラフィックUI要 素 ユーザーインタラク ションに対するフィー ドバック音声 外観の変形(ホログラムを 用いて、物理空間の表面 を視覚的に変更) 共有スペースでのア ノテーション(複数人 で空間を共有し、 マークする) テーブル天板 ジェスチャ(エアタッ プ等) 3Dストラクチャ ホログラフィックアバ ター 音声の合図による環 境ナビゲーション 空間データ(よくある2次 元データを制限ない3次 元空間に表示) 周囲の面 音声コマンド 3D環境 環境マッピングの3D アニメーション 環境サウンド スクリーンToワールド(モニ タ/タブレットと3Dオブ ジェクトの統合) ホログラフィックとの コラボレーション(ホロ グラフ オブジェクトを 中心に対話) 周囲のスペース マウス・キーボード入 力 3Dの人、動物、 キャラクター 周囲のスペースの3D アニメーション オブジェクト固有の サウンド 物理環境にホログラフ投 影した複合現実環境へ没 入(MR没入) 床 タブレット操作 3Dデータ ホログラフィックビデオ 空間化3Dサウンドコ ンポジション 複合現実感(MR感) ホ ログラフとの遊び ホログラフィックの構 築(物理空間に出 力する意図でホログ ラムを組み立て)天井 ユーザの移動 2Dデータ 2Dビデオ ユーザ対話 物理オブジェクトに情報を オーバーレイ 現実空間 操作 仮想空間 変化/インタラクション
  13. 13. MRの設計方法 • MRアプリケーションの構成要素がわかっても、 設計の手順がわからない・・・ どうしよう・・・ ⇒ストーリーボードという手書きのスケッチを書きま しょう。
  14. 14. まずストーリーボード(手書き) • 色使いがポイント! ◆現実 :黒、グレー ◆仮想 :青、緑 ◆インタラクション :オレンジ、黄色 ◆空間音 :紫 ストーリーボードは、4コマ漫画みたいなもの
  15. 15. ストーリーボード(まずは手書き) 視線で操作して インタラクション 机の実態の上に ホログラム 作業者 壁側のホログラムで 2D動画再生
  16. 16. ストーリーボードは、パワポの描画が便利 (特にインクの再生ボタンで紙芝居風に)
  17. 17. プロトタイプの活用 • スケッチができたら、チームで認識合わせをするため に「プロトタイプ」を作ってみましょう 3つのプロトタイプのやり方があります。 ①想像力 ②工作 ③3Dソフト 簡単 大変
  18. 18. プロトタイプ① 想像力(シンプル)版 • ペットボトル、わりばし、コップ で先程のストーリーボードを表してみる。
  19. 19. プロトタイプ① 想像力(ややリッチ)版 • ぬいぐるみ、ペン、本で 表してみる(前頁よりはわかりやすい)。
  20. 20. プロトタイプ②工作版 • 本当に認識があっているか不安な場合は「工作型のプロトタイ プ」を作成します (デザインシンキング系の文化)。 • 下図はスマホアプリの工作型プロトタイプです。 Author/Copyright holder: Samuel Mann. Copyright terms and licence: CC BY 2.0
  21. 21. プロトタイプ②工作版 (HoloLensの場合) • 紙、テープ、ねんど、トイレットペー パー、ディッシュ空き箱、ダンボール、 タブレット..etcで、 • 全体的に立体的になるため、きれいに工 作できれば、わかりやすいはず。 • しかし時間はかかる。
  22. 22. プロトタイプ③は、3Dのモデリングツー ルを用いてモデルを作ります。 • Maya • 3ds Max • Blender • Unity ... etc 手間はかかりますが、最終アプリのイメージに近くなりま す。 (そのため、実際にHoloLensに組み込んで見てもらうよう な流れになることも多いです)
  23. 23. プロトタイプ③ 3Dソフト版 (3D Builderにて作成)
  24. 24. 動画に書き出すことも (3D ViewerでMRのイメージに)
  25. 25. MRプロジェクトの進め方 1.ビジョン確認 課題の確認とxRで解決す ることの合意 2.MR設計 MR/VR/AR判定 MR設計要素(構成要素) ストーリーボード プロトタイプ 3.関係者への共有 フローチャート コンセプトアート
  26. 26. コンセプトアート (ひと目でわかるアプリ紹介) Dynamics365 Layout Dynamics365 Remote Assist Galaxy Explore クリエイティブなメンバーがいる場合に限られますが、アプリケーションをビジュ アル化します。プロジェクトの雰囲気を伝え、新たな発想を沸かせ、チーム内外の 協力を得やすくなります。 (余談ですが、HoloLens装着者だけが見えるホログラムと、HoloLens装着者が一緒の写真に映ると違和感があ りますが、あまり気にしないようにしてます。)
  27. 27. フローチャートで意思疎通 フロー番号 ①テーブルの上にホログ ラムを表示 ②テーブル上のオブジェク トにあわせる ③動画の再生 イメージ 物理空間 床 テーブル 床 テーブル 床 テーブル ユーザー入力 なし (アプリ起動時) ⇒テーブル上のホログラムに ゲーズを合わせる ⇒ユーザーがテレビの 前でエアタップする ホログラム テーブル上に、ホログラ ムを表示 テーブル上のホログラムに 説明文言を表示 2Dビデオの再生 サウンド なし オブジェクトにゲーズがあ たったときの効果音 オブジェクト固有の 動画再生音楽
  28. 28. MRプロジェクトの進め方 (ぐるぐるイテレーティブに回してみる) 1.ビジョン確認 課題の確認とxRで解決す ることの合意 2.MR設計 MR/VR/AR判定 MR設計要素(構成要素) ストーリーボード プロトタイプ 3.関係者への共有 フローチャート コンセプトアート
  29. 29. さいごに • 忘年会ということで、皆様ありがとうございました。 • 有益な情報がたくさんあって本当に助かりました。 • 来年も日本からHoloLens/MRを盛り上げていきましょう!

×