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

1. Tokyo HoloLens meetup #11 LT
楽しんで始める
HoloLensアプリ設計
青木 淳夫
2018.12.15

2. 自己紹介
• 青木淳夫(@aoki1210)
• 西新宿のネクストスケープという会
社で働いています。開発者募集中で
す。
• https://www.nextscape.net/solutions/HoloLens
• 神戸出身です。
• ラーメンとお酒とアジャイル開発が
好きです。

3. 小ネタ
• 今日の5分のために、
昨日、Logicool
Spotlight買いました。
• 9800円
• お金の力で、よりよい
プレゼンテーション
を！

4. 困ったこと
•MRでは、設計の仕
方が従来の開発と
違うようだ。
•どうしよう。

5. わかってきたこと
https://hackernoon.com/the-ux-workflow-for-hololens-mixed-reality-3bf59192e577
MR固有の
「進め方
（ワークフロー）」
があるもよう
01
MR固有の
「設計方法」
があるもよう
02

6. MRプロジェクトの進め方
1.ビジョン確認
課題の確認とxRで解決す
ることの合意
2.MR設計
MR/VR/AR判定
MR設計要素（構成要素）
ストーリーボード
プロトタイプ
3.関係者への共有
フローチャート
コンセプトアート

7. ビジョンの確認（MRに限らずですよね）
現課題(AS-IS)
• 背景
• プロジェクトを実施す
る背景
• 市場状況
解決したいゴール(TO-BE)
• 目指すビジョン
• 強みとなる機能はなにか
• これまでや他と何が違う
のか

8. MRプロジェクトの進め方
1.ビジョン確認
課題の確認とxRで解決す
ることの合意
2.MR設計
MR/VR/AR判定
MR設計要素（構成要素）
ストーリーボード
プロトタイプ
3.関係者への共有
フローチャート
コンセプトアート

9. 本当にMRかの確認（MR or VR or AR）
• ヘッドマウントディスプレイ：HTC Vive/Oculs とか
• 現実世界を隠し、仮想空間に没入
VR(Virtual Reality)
仮想現実
• スマートフォン：ポケモンGOアプリとか
• 現実世界のデータに仮想レイヤを追加
AR(Augmented Reality)
拡張現実
• ヘッドマウントディスプレイ： HoloLens/Magic Leapとか
• 実世界のデータに仮想レイヤを追加
• 実世界でインタラクティブに操作
MR(Mixed Reality)
複合現実

10. MRの設計要素
• MRアプリケーションの設計をするときには、
現実と仮想、
インプットとアウトプット
などを整理できるとわかりやすい。

11. MR設計の要素
①物理空間
②ユーザー入力
③ホログラム
④3Dサウンド
⑤MRデザイン手法
INPUT
OUTPUT

12. MRの構成要素
①物理空間 ②ユーザー入力 ③ホログラム ④3Dサウンド ⑤MRデザイン手法
壁 ゲーズ（視線カーソ
ル）
3Dオブジェクト ホログラフィックUI要
素
ユーザーインタラク
ションに対するフィー
ドバック音声
外観の変形(ホログラムを
用いて、物理空間の表面
を視覚的に変更)
共有スペースでのア
ノテーション(複数人
で空間を共有し、
マークする)
テーブル天板 ジェスチャ（エアタッ
プ等）
3Dストラクチャ ホログラフィックアバ
ター
音声の合図による環
境ナビゲーション
空間データ(よくある2次
元データを制限ない3次
元空間に表示)
周囲の面 音声コマンド 3D環境 環境マッピングの3D
アニメーション
環境サウンド スクリーンToワールド(モニ
タ/タブレットと3Dオブ
ジェクトの統合)
ホログラフィックとの
コラボレーション(ホロ
グラフ オブジェクトを
中心に対話)
周囲のスペース マウス・キーボード入
力
3Dの人、動物、
キャラクター
周囲のスペースの3D
アニメーション
オブジェクト固有の
サウンド
物理環境にホログラフ投
影した複合現実環境へ没
入(MR没入)
床 タブレット操作 3Dデータ ホログラフィックビデオ 空間化3Dサウンドコ
ンポジション
複合現実感(MR感) ホ
ログラフとの遊び
ホログラフィックの構
築（物理空間に出
力する意図でホログ
ラムを組み立て）天井 ユーザの移動 2Dデータ 2Dビデオ ユーザ対話 物理オブジェクトに情報を
オーバーレイ
現実空間 操作 仮想空間 変化/インタラクション

13. MRの設計方法
• MRアプリケーションの構成要素がわかっても、
設計の手順がわからない・・・
どうしよう・・・
⇒ストーリーボードという手書きのスケッチを書きま
しょう。

14. まずストーリーボード（手書き）
• 色使いがポイント！
◆現実 ：黒、グレー
◆仮想 ：青、緑
◆インタラクション ：オレンジ、黄色
◆空間音 ：紫
ストーリーボードは、4コマ漫画みたいなもの

15. ストーリーボード（まずは手書き）
視線で操作して
インタラクション
机の実態の上に
ホログラム
作業者
壁側のホログラムで
2D動画再生

16. ストーリーボードは、パワポの描画が便利
（特にインクの再生ボタンで紙芝居風に）

17. プロトタイプの活用
• スケッチができたら、チームで認識合わせをするため
に「プロトタイプ」を作ってみましょう
３つのプロトタイプのやり方があります。
①想像力
②工作
③3Dソフト
簡単
大変

18. プロトタイプ①
想像力（シンプル）版
• ペットボトル、わりばし、コップ
で先程のストーリーボードを表してみる。

19. プロトタイプ①
想像力（ややリッチ）版
• ぬいぐるみ、ペン、本で
表してみる（前頁よりはわかりやすい）。

20. プロトタイプ②工作版
• 本当に認識があっているか不安な場合は「工作型のプロトタイ
プ」を作成します
（デザインシンキング系の文化）。
• 下図はスマホアプリの工作型プロトタイプです。
Author/Copyright holder: Samuel Mann. Copyright terms and licence: CC BY 2.0

21. プロトタイプ②工作版
（HoloLensの場合）
• 紙、テープ、ねんど、トイレットペー
パー、ディッシュ空き箱、ダンボール、
タブレット..etcで、
• 全体的に立体的になるため、きれいに工
作できれば、わかりやすいはず。
• しかし時間はかかる。

22. プロトタイプ③は、3Dのモデリングツー
ルを用いてモデルを作ります。
• Maya
• 3ds Max
• Blender
• Unity ... etc
手間はかかりますが、最終アプリのイメージに近くなりま
す。
（そのため、実際にHoloLensに組み込んで見てもらうよう
な流れになることも多いです）

23. プロトタイプ③ 3Dソフト版
(3D Builderにて作成)

24. 動画に書き出すことも
（3D ViewerでMRのイメージに）

25. MRプロジェクトの進め方
1.ビジョン確認
課題の確認とxRで解決す
ることの合意
2.MR設計
MR/VR/AR判定
MR設計要素（構成要素）
ストーリーボード
プロトタイプ
3.関係者への共有
フローチャート
コンセプトアート

26. コンセプトアート
(ひと目でわかるアプリ紹介)
Dynamics365
Layout
Dynamics365
Remote Assist
Galaxy Explore
クリエイティブなメンバーがいる場合に限られますが、アプリケーションをビジュ
アル化します。プロジェクトの雰囲気を伝え、新たな発想を沸かせ、チーム内外の
協力を得やすくなります。
（余談ですが、HoloLens装着者だけが見えるホログラムと、HoloLens装着者が一緒の写真に映ると違和感があ
りますが、あまり気にしないようにしてます。）

27. フローチャートで意思疎通
フロー番号 ①テーブルの上にホログ
ラムを表示
②テーブル上のオブジェク
トにあわせる
③動画の再生
イメージ
物理空間 床
テーブル
床
テーブル
床
テーブル
ユーザー入力 なし
（アプリ起動時） ⇒テーブル上のホログラムに
ゲーズを合わせる ⇒ユーザーがテレビの
前でエアタップする
ホログラム テーブル上に、ホログラ
ムを表示
テーブル上のホログラムに
説明文言を表示
2Dビデオの再生
サウンド なし オブジェクトにゲーズがあ
たったときの効果音
オブジェクト固有の
動画再生音楽

28. MRプロジェクトの進め方
（ぐるぐるイテレーティブに回してみる）
1.ビジョン確認
課題の確認とxRで解決す
ることの合意
2.MR設計
MR/VR/AR判定
MR設計要素（構成要素）
ストーリーボード
プロトタイプ
3.関係者への共有
フローチャート
コンセプトアート

29. さいごに
• 忘年会ということで、皆様ありがとうございました。
• 有益な情報がたくさんあって本当に助かりました。
• 来年も日本からHoloLens/MRを盛り上げていきましょう！