HoloLensのUIデザインプロセスに前職のスマホデザインプロセスを持ち込む企みとその苦労。

1. 【試⾏錯誤】スマホデザインプロセス
のHoloLensへの適⽤

2. ライフワークで3Dアート作品などを
作成している者です(名前が草平なの
で、フィロソヘと名乗っておりま
す)。

3. 現在仕事ではTIS株式会社の戦略技術
センターでUI/UXデザイナーとして
xRの中でもMRデバイスとして位置づ
けられている「HoloLens」のアプリ
開発をしております。

4. 前職がスマホアプリUIデザイナー
だったため、そのプロセスを
HoloLensデザインに適⽤しようとし
ております。

5. ⼤変かなぁ、と思っていたのですが、
やはり⼤変でした。

6. ⼤変さについて列挙していきます。

7. UI設置可能エリアが広⼤
スマホの画⾯に対して、xRの空間はあまりにも
広⼤で⾃由すぎて何をどこに配置するのが⼀番
よいのか確信が持てない。

8. ガイドラインが整備されていない
成熟期に⼊ったスマホアプリのガイドラインに
⽐べると、xRのUIガイドラインはまだざっく
りとしか書かれていない印象。

9. 標準UIコンポーネントの不⾜、
プロトタイプソフトの不在
下記スマホデザインプロセスのうち上記2つが充実していない。
1. UX的なことを決める。
2. 標準UIコンポーネントをガイドラインに沿ってノンコーディ
ングなプロトタイピングソフトで組み合わせていく。
3. できたプロトタイプをディレクター、エンジニアらと検討し
ていく。

10. まとめると、
・表⽰空間が広く表現パターンが多いのにガイ
ドライン、標準コンポーネントが整備途上。
・ノンコーディングだとプロトタイプを作成し
づらい。

11. このうちの1つ⽬の標準コンポーネン
トとガイドラインについて少しづつ整
備をはじめています。

12. 標準コンポーネント
MRTKにある程度作成されているのですが、⼀
覧がないので、折⾓あるコンポーネントを活か
しづらいと思いました。
そこでWindowsアプリ⽤のコンポーネント⼀
覧をベースにそれと対照させる形で⼀覧を作成
してみることにしました。

13. https://goo.gl/ib4NkJ

14. ガイドライン
スマホのものをベースに、xRアプリを作成して
いく中で感じた作成上の要注意項⽬のようなも
のを書き出し、エンジニアの⽅とブラッシュ
アップしていっています。

15. https://goo.gl/dvYhHz

16. プロトタイピング
以下を⾏っていますが、まだ試⾏錯誤中です。
・Holographic Emulatorを使⽤。
・エンジニアの⽅にフレームワークを作成いた
だき、そこから調整。
・⾃⼒でインタラクション程度のプログラムを
作成、Playmakerアセットを使⽤。

17. まとめ
表⽰空間が広く表現パターンが多いのにガイドライン、標準コ
ンポーネントが整備途上
→ガイドラインと標準コンポーネントについて少しづつ整備
ノンコーディングでプロトタイプを作成しづらい
・Holographic Emulatorを使⽤。
・エンジニアの⽅にフレームワークを作成いただき、
そこから調整。
・⾃⼒でインタラクション程度のプログラムを作成。
→上記で対応しているが、まだうまく回せていない