神 戸 デ ジ タ ル ・ ラ ボ 新 事 業 創 造 係 堀 尾 風 仁 K o b e H o l o L e n s ミ ー ト ア ッ プ v o l . 5 Microsoft Mesh に学ぶ Mixed Reality の気持ち良い UX とは？ －MRTK v2.7.3 で実験しみてた

堀 尾 風 仁 株 式 会 社 神 戸 デ ジ タ ル ・ ラ ボ コ ミ ュ ニ テ ィ 運 営 ・ A R K O B E ・ A z u r e T e c h L a b . M i c r o s o f t M V P f o r W i n d o w s D e v e l o p m e n t ( 2 0 2 0 - 2 0 2 2 ) Twitter アカウント @Futo_Horio

Microsoft Mesh とは h t t p s : / / w w w . y o u t u b e . c o m / w a t c h ? v = l h K n 9 m j y _ Q M Microsoft Mesh ハンズオンデモ | 協調的な複合現実体験を提供する新しいプラットフォーム H o l o L e n s や P C か ら M i x e d R e a l i t y 空 間 へ ダ イ ブ し て 、 ホ ロ グ ラ フ ィ ッ ク を 共 有 し な が ら コ ミ ュ ニ ケ ー シ ョ ン が 可 能 P u b l i c P r e v i e w アバターで相手の動きをリアルに感じることができたり、 クラウドレンダリングで容量の大きなモデルも表示できる

気持ち良いユーザー体験 を言語化したい UX (User Experience)

( ユ ー ザ ー の 動 作 に 対 し て ) 周 囲 の 環 境 が 反 応 ( 変 化 ) 、 変 化 量 を 知 覚 し て 意 味 理 解 す る こ と 動 作 ( 2 ) 意 味 理 解 世 界 ( 物 理 世 界 と デ ジ タ ル 世 界 ) ( 1 ) 変 化 の 知 覚 ( 視 覚 ・ 聴 覚 ・ 嗅 覚 ・ 味 覚 ・ 触 覚 ) まず ユーザー体験 を言語化してみる 人 環境 (場所) コンピューター ユ ー ザ ー 自 身 周 囲 の 環 境 アクション 反応 (変化) フィードバック

周 囲 の 環 境 の 変 化 が 自 分 の 期 待 し た 内 容 だ っ た か ど う か ( ユ ー ザ ー の 主 観 に 依 存 す る ) 動 作 ( 2 ) 意 味 理 解 世 界 ( 物 理 世 界 と デ ジ タ ル 世 界 ) ( 1 ) 変 化 の 知 覚 ( 視 覚 ・ 聴 覚 ・ 嗅 覚 ・ 味 覚 ・ 触 覚 ) では 気持ち良い とは何か？ 人 環境 (場所) コンピューター ユ ー ザ ー 自 身 周 囲 の 環 境 アクション 反応 (変化) フィードバック

Mixed Reality に対するユーザーの期待値 AR (拡張現実) VR (仮想現実) ホログラフィック (デジタルコンテンツ) と 物理世界が自然に近いカタチで融合している体験 かつ 目的達成 物理世界の存在を忘れ、 完全にデジタル世界へ入り込んでいる体験 かつ 目的達成 ※ 当たり前だけど、AR と VR で気持ちの良い UX は異なる ※ ユーザー体験という名称の通り、人それぞれ気持ち良さを感じる部分は異なる

Mixed Reality を構成する要素 h t t p s : / / d o c s . m i c r o s o f t . c o m / j a - j p / w i n d o w s / m i x e d - r e a l i t y / d i s c o v e r / m i x e d - r e a l i t y # e n v i r o n m e n t a l - i n p u t - a n d - p e r c e p t i o n E n v i r o n m e n t 環 境 H u m a n 人 間 C o m p u t e r コ ン ピ ュ ー タ ー M i x e d R e a l i t y C o n v e n t i o n a l R e a l i t y H u m a n C o m p u t e r I n t e r a c t i o n P e r c e p t i o n Mixed Reality とは

体 験 Mixed Reality コンテンツの UX 構成要素 (ver 0.1.0) Environment Human Computer 環 境 の 広 さ ( 体 積 ) 環 境 光 ( 照 度 ) 環 境 材 質 エ ッ ジ ク ラ ウ ド U X U X ホ ロ グ ラ ム の 安 定 化 U X 頭 ( H e a d ) 視 線 ( E y e ) 手 ( H a n d ) 音 声 ( V o i c e ) ネ ッ ト ワ ー ク ( 通 信 速 度 ) デ ー タ ス ト ア レ ン ダ リ ン グ シ ェ ア リ ン グ 物 理 環 境 の セ ン シ ン グ A I ( 人 工 知 能 ) I n t e r a c t i o n ( 3 つ の 要 素 が 相 互 作 用 す る 状 態 ) 物 理 環 境 ( ど こ で ) 操 作 性 コ ミ ュ ニ ケ ー シ ョ ン 体 験 人 数 ( だ れ と ) [ １ 人 / 複 数 ] [ 同 期 / 非 同 期 ] 体 験 場 所 ・ 時 間 近 接 遠 隔 体 験 時 間 ( い つ ) ( ど の く ら い ) デ バ イ ス メ ン テ コ ン ト ロ ー ラ ー ( C o n t r o l l e r ) イ ン タ ラ ク シ ョ ン の 可 能 性 を 広 げ る ホ ロ グ ラ フ ィ ッ ク 色 、 ラ イ ト 、 素 材 ス ケ ー ル タ イ ポ グ ラ フ ィ サ ウ ン ド

体 験 Mixed Reality コンテンツの UX 構成要素 (ver 0.1.0) Environment Human Computer 環 境 の 広 さ ( 体 積 ) 環 境 光 ( 照 度 ) 環 境 材 質 エ ッ ジ ク ラ ウ ド U X U X ホ ロ グ ラ ム の 安 定 化 U X 頭 ( H e a d ) 視 線 ( E y e ) 手 ( H a n d ) 音 声 ( V o i c e ) ネ ッ ト ワ ー ク ( 通 信 速 度 ) デ ー タ ス ト ア レ ン ダ リ ン グ シ ェ ア リ ン グ 物 理 環 境 の セ ン シ ン グ A I ( 人 工 知 能 ) I n t e r a c t i o n ( 3 つ の 要 素 が 相 互 作 用 す る 状 態 ) 操 作 性 コ ミ ュ ニ ケ ー シ ョ ン 体 験 人 数 ( だ れ と ) [ １ 人 / 複 数 ] [ 同 期 / 非 同 期 ] 体 験 場 所 ・ 時 間 近 接 遠 隔 デ バ イ ス メ ン テ コ ン ト ロ ー ラ ー ( C o n t r o l l e r ) イ ン タ ラ ク シ ョ ン の 可 能 性 を 広 げ る ホ ロ グ ラ フ ィ ッ ク 色 、 ラ イ ト 、 素 材 ス ケ ー ル タ イ ポ グ ラ フ ィ サ ウ ン ド こ の 資 料 で 説 明 す る 領 域 物 理 環 境 ( ど こ で ) 体 験 時 間 ( い つ ) ( ど の く ら い )

Microsoft Mesh から 気持ち良い UX を学ぶ

Microsoft Mesh 気持ち良い UX ポイント 3 D モ デ ル の 操 作 ア ク シ ョ ン 他 の ユ ー ザ ー と ア バ タ ー で コ ミ ュ ニ ケ ー シ ョ ン が 可 能 ( シ ェ ア リ ン グ ) ク ラ ウ ド レ ン ダ リ ン グ で 容 量 の 大 き な モ デ ル を 表 示 サ イ ン イ ン 時 ア プ リ 起 動 時 メ ニ ュ ー 表 示 切 り 替 え 時 コ ン テ ン ツ 体 験 時 チュートリアル表示 サインイン時のアニメーションとサウンド メニューのホバーアクション メニュー表示切り替え時のアニメーション 体験時間 0 (m) 15 (m) etc ..

Microsoft Mesh 気持ち良いUX ポイント(1) ハ ン ド メ ニ ュ ー と 空 間 に 配 置 す る メ ニ ュ ー で ア イ コ ン を 注 視 す る と 、 ボ タ ン の ラ ベ ル が 表 示 さ れ る ラ ベ ル 表 示 は フ ェ ー ド イ ン / ア ウ ト 効 果 も . .

Microsoft Mesh 気持ち良いUX ポイント② サ イ ン イ ン 完 了 時 に パ ー テ ィ ク ル と 効 果 音 で ス ペ ー ス へ の ダ イ ブ を 表 現 し て い る ( 没 入 感 U P ) ス テ ー ジ が ス ケ ー ル ア ッ プ と 同 時 に 色 が 濃 く な っ て い る

Microsoft Mesh 気持ち良いUX ポイント③ 空 間 に 配 置 す る メ ニ ュ ー の ボ タ ン を 押 す と 、 詳 細 メ ニ ュ ー が ア ニ メ ー シ ョ ン 付 き で 表 示 さ れ る

Microsoft Mesh 気持ち良いUX ポイント④ ア イ ト ラ ッ キ ン グ で 、 操 作 可 能 な オ ブ ジ ェ ク ト で あ る こ と を ユ ー ザ ー に 伝 え て い る ( ハ ン ド レ イ が オ フ に な っ て い る )

Microsoft Mesh 気持ち良いUX ポイント⑤ 音 (BGM ＋ 効果音)

MRTK ( Mixed Reality Toolkit ) とは MR アプリケーション開発を加速させる ツール や UX ビルディングブロック を提供するオープンソースプロジェクト ( 最新版 : v2.7.3 ) ・ クロスプラットフォームの入力システム、3次元空間のインタラクションやUI を提供 ・ ラピッドプロトタイピングの実現 : Unity Editor シミュレーションですぐに変更を確認 ・ 幅広いプラットフォームをサポート ( eg OpenXR, WinMR, Oculus, Mobile ) ・ Unity, Unreal 各ゲームエンジン向けのプロジェクトが用意されている ( ※ 今回は MRTK-Unity を使用 ) ・ MIT ライセンス での提供 ( 商用利用可能 ) https://github.com/microsoft/MixedRealityToolkit-Unity

https://docs.microsoft.com/ja-jp/windows/mixed-reality/design/app-patterns-landingpage 一般的なコントロールと動作

MRTK v3 https://www.youtube.com/watch?v=aN38B9HL_sI 2022/1/18（火）Tokyo HoloLens ミートアップ vol 29 HoloLens日本上陸五周年記念！ 現在、新しいバージョンの MRTK v3 の開発が進んでいます。 詳しい内容は、YouTube のアーカイブ動画をご覧ください

MRTK v3 ロードマップ https://www.youtube.com/watch?v=aN38B9HL_sI 2022/1/18（火）Tokyo HoloLens ミートアップ vol 29 HoloLens日本上陸五周年記念！ 今年1月に開催された Tokyo HoloLens ミートアップの Yoon さんの発表で開発情報の共有がありました。 開発中 パブリックプレビュー リリース 現在 (2022年1月) 2022年春~夏頃 未定 ・UX ビルディングブロックのポーティング ・内部バリデーション ・パフォーマンス分析 ・OpenXR と XRI (XR Interaction Tool) 上に構築される新しいアーキテクチャ ・新しい Mixed Reality デザイン言語 ・独立したサブシステム ・UIテーマシステム ・データバインディング ・ナビゲーターコレクション ・ボルメティックレイアウトツール ・入力シミュレーション向上 ・コア UX ビルディングブロック

Microsoft Mesh ライクな UX を実験してみた(1) E y e T r a c k i n g を 使 用 し て メ ニ ュ ー ラ ベ ル の 表 示 / 非 表 示 を 試 し て み た

Eye Tracking を有効にする(1) M i x e d R e a l i t y T o o l k i t > I n p u t > I n p u t D a t a P r o v i d e r を 展 開 す る Input Data Provider に ・OpenXR XRSDK Device Manager ・OpenXR XRSDK Eye Gaze Provider が登録されていることを確認する ※ Unity Editor で アイトラッキングを検証する場合は、Input Data Providers > Input Simulation Service > Eye Gaze Simulation を設定する必要がある

Eye Tracking を有効にする(2) M i x e d R e a l i t y T o o l k i t > I n p u t > P o i n t e r s を 展 開 す る Gaze Settings の設定を変更する ・Gaze Cursor Prefab を EyeGazeCursor に変更 ・IsEyeTrackingEnabled にチェックを入れる

Eye Tracking を有効にする(3) P r o j e c t S e t t i n g s > X R P l u g - i n M a n a g e m e n t > O p e n X R を 開 く Interaction Profiles に ・Eye Gaze Interaction Profile を追加する

ハンドメニューを追加する M R T K . E x a m p l e s に 含 ま れ る H a n d M e n u _ S m a l l _ H i d e O n H a n d D r o p . p r e f a b を シ ー ン に 追 加 す る 手の平を返すジェスチャーで表示されるハンドメニュー (手を下げると、メニューも非表示となる) シ ー ン ビ ュ ー ゲ ー ム ビ ュ ー ( 再 生 時 )

ボタンラベル α値をフェードイン/アウトするスクリプトを準備する イベント時に呼び出すためのメソッドを実装 ・FadeIn() / FadeOut() ゲームオブジェクトが有効になった時 ・ラベルの文字カラーα値を 0 (透明) にする メンバー変数を作成する

ボタンラベル α値をフェードイン/アウトするスクリプトを準備する コルーチン : fadeInLabel() を実装する ・遅延させる (duration) ・10フレームでフェードイン (α値: 1) コルーチン : fadeOutLabel() を実装する ・遅延させる (duration) ・10フレームでフェードアウト (α値: 0)

Eye Tracking で ラベル を 表示/非表示 する PressableButton へアタッチして、ラベルオブジェクトを設定する EyeTrackingTarget を追加して、メソッドを登録する ヒエラルキービュー P r e s s a b l e B u t t o n に 必 要 な コ ン ポ ー ネ ン ト を ア タ ッ チ す る オブジェクトを見た時、FadeIn() 発火 オブジェクト以外を見た時、FadeOut() 発火

M e s h ラ イ ク な メ ニ ュ ー の 表 示 切 り 替 え 時 の ア ニ メ ー シ ョ ン を 実 装 し て み ま し た Microsoft Mesh ライクな UX を実験してみた(2)

気持ちの良いアニメーションをトレースする 気 持 ち の 良 い ア ニ メ ー シ ョ ン を 因 数 分 解 す る ・メニューボタンを押す ・チュートリアル表示が表示される (アニメーション開始) ・少し小さいスケール ( 0.7~0.8 ) ・X軸 Rotate : 0 度 ・チュートリアルが表示される (アニメーション終了) ・スケールの拡大 ・X軸 Rotate : 30度 ・元のメニュー画面は少し暗く、 位置も後ろに移動している 時間軸

アニメーションさせたいメニューを準備する 今 回 は ア ニ メ ー シ ョ ン を 付 け る こ と が メ イ ン な の で 、 適 当 に メ ニ ュ ー を 作 成

アニメーションさせたいメニューを準備する 同 じ メ ニ ュ ー を 2 枚 、 準 備 す る z軸は 0.05 程度ずらしておく

アニメーションクリップを準備する W i n d o w s > A n i m a t i o n > A n i m a t i o n で ア ニ メ ー シ ョ ン ク リ ッ プ を 作 成 し ま す

アニメーションクリップを準備する ア ニ メ ー シ ョ ン を 作 成 し た ゲ ー ム オ ブ ジ ェ ク ト を 選 択 し た 状 態 で 、C r e a t e ボ タ ン を 押 し ま す

アニメーションクリップを準備する (奥側) 各 メ ニ ュ ー ご と に ア ニ メ ー シ ョ ン を 用 意 す る ( 初 期 表 示 さ れ て い る メ ニ ュ ー) 0秒 0.05秒 メニューをz軸後方に移動させつつ、バックプレートの色を暗くする

アニメーションクリップを準備する (手前) 各 メ ニ ュ ー ご と に ア ニ メ ー シ ョ ン を 用 意 す る ( 初 期 表 示 さ れ て い る メ ニ ュ ー) 0.00秒 0.15秒 0.20秒 スケール 80%程度 回転とスケールをさせながら、 Y軸上方へ移動 Y軸上方へ移動した分、 Y軸下方へ戻す

Animator コンポーネントを追加する さ き ほ ど 作 成 し た ア ニ メ ー シ ョ ン ク リ ッ プ を A n i m a t o r コ ン ポ ー ネ ン ト を 使 用 し て 制 御 し ま す

Animator コンポーネントを追加する A n i m a t o r タ ブ で ス テ ー タ ス に 紐 づ く 、 ア ニ メ ー シ ョ ン 処 理 を 追 加 す る アニメーションなし アニメーション再生 アニメーション逆再生 ※ スピードを -1 に設定

ボタンへアクションを追加する ボ タ ン の I n t e r a c t a b l e コ ン ポ ー ネ ン ト の O n C l i c k ( ) ト リ ガ ー に A n i m a t o r . P l a y を 登 録 す る Animator.Play (string : ステート名)

実験してみて感じたこと (1) アニメーションのチューニングは想像以上に難しい (これまでにない表現なので) (2) アニメーションで同じ場所にボタンのあるメニューを被せると、ご操作につながる可能性がある.. (3) アイトラッキングのデータを瞬時に UI に反映すると、目障りになるので、 ある程度の遅延処理 (duration) を入れた方が良い (4) アニメーションも大事だが、効果音 (SE) とセットで取り組まないと気持ち良さの向上は頭打ちになる (5) アイトラッキングでラベルを表示/非表示の処理はユーザーが処理に困った場合 (注視した場合) のみ有効になるので、普段必要がない情報の見せ方として凄く良い実装例でした (6) Animator を使えば色んな種類のアニメーションをステータスごとに使い分け可能 (7) 気持ちの良い体験というのは緻密に計算されつくされた実装の賜物だと再認識

(まとめ) Mixed Reality における 気持ち良い UX とは 体験を通じて ユーザー の 目的達成に貢献すること MR特有の体験であること 体験プロセスが人間が知覚可能な変化 (グラデーション) を伴っていること

Thanks やっぱり Microsoft Mesh は最高だった Twitter アカウント @Futo_Horio