プロジェクトから振り返る─5年間開拓し続けて学んだXRデザイン（15の参考資料付）
こんにちは！XRデザイナーのまちるだ（@mathi0829lda）です！
デザイナーとしての活動は学生時代のインターンから含めると、8年目になります。そして、XRデザイナーとして活動して5年が経つので、デザイナー人生の約2/3をXR領域で過ごしてきたことになります。
今となっては現実世界で目の前にARで何かが表示されてインタラクションをすることも驚きはないかもしれませんが、4〜5年前は目の前にARオブジェクトが表示されただけで感動しましたし、現実世界のものがARオブジェクトを遮蔽するオクルージョンを見た時はめちゃくちゃ感動しました。
そんな時代にXRデザイナーとして活動を始めたわけですが、5年前初めてXRデザインをするとなったとき何から始めていいのか全くわからず、リサーチをしてもごくわずかな事例やセオリーがあったくらいだったのでプロジェクトの制作を通して自ら開拓していく方法がメインとなりました。
（ワンシーンを切り取ったようなリファレンスは少数ありましたが、実際の体験に落とし込むという観点では参考になるものや前例がありませんでした）
今でこそARが溶け込んだ世界が想像されるコンセプト動画がリリースされていたり、XRの事例もたくさん増えてきたわけですが、5年経った今でもXRデザインは型も正解もないから常に開拓していかなければと日々のプロジェクトを通して感じています。
技術進化が加速しているフェーズだからこそ体験づくりもそれに応じて進化していく必要性もあります。
自ら開拓をして成功したり失敗したりしてきた経験はこの5年でしか得られなかった貴重なものだと思っています。
5年という区切りのいいタイミングでもあるので、これまで携わったプロジェクトでの試行錯誤から得たインターフェース作りをする上での学びをこれまで参照してきたドキュメントも交えて紹介したいと思います。
前提として、XrealデバイスやQuestなどのポインター操作をベースに書いています。
1. コンテンツの配置と操作範囲
XR体験の前提にはなりますが、これまでのスクリーン体験と大きく異なることはユーザーが操作するインターフェースが限られた範囲の2Dスクリーンから、奥行きも加わった360度の空間そのものになったということです。
制約のある2Dスクリーンと同じUIををそのまま空間にレイアウトし直すだけでは体験品質を保つことができない可能性があります。
こういった観点から、今後空間インターフェースを考えなければならない私たちデザイナーは何を意識しなければならないのでしょうか？
◇距離 X サイズでUIの操作感が変わる
スクリーンの制約があるスマホPCではXYという2軸の中でのレイアウトを考えていると思います。 戻るボタンの例で考えて見ましょう。
サイズ：240pt X 56pt
レイアウト：画面の左上から100pt
操作のしやすさや視認性はFigmaなどのデザインツールでレイアウトすれば担保できますよね！
ここに距離（Z）を加えて考えるとどうでしょうか？
サイズ：240pt X 56pt
レイアウト：一定の範囲内の左上から100pt、1.2m先に配置
一見これでレイアウトすればOKなのでは・・・？
単純に距離を加えればいいかというとそうでもなく、以下のような点も踏まえて検討する必要があります。
近すぎて視野角から見切れていないか？
ポインターが当てやすいサイズ X 距離になっているのか？
同時に閲覧する他UIも考慮した際に、相対的にバランスの取れたレイアウトになっているか？…
◇体験での基準となる距離・サイズをつくる
サービスの種類によって最適な距離・サイズは変わってきます。
Netflixのようなスクリーンを目の前に表示する体験の場合、スクリーンはプロジェクターのようなダイナミックなサイズになるのでユーザーからある程度離れた距離に配置され、スクリーン操作に紐づくPauseやPlayボタンなども合わせて距離が遠くなりボタンサイズも大きくなります。
加えてスクリーンのサイズや距離すらもユーザーの任意で変更することができるとなると、操作感の良し悪しを何を持って決めるのかがわからなくなってしまいます。
こういった観点から、基準となる距離・サイズをつくろうというわけです。
当時参考にしていたのが、2017年のGoogle I/O Designing Screen Interfaces for VRで解説されていた「dmm」という概念です。
1m先にある高さ1mmのオブジェクトを1dmmとして換算します。 1m先で高さ480mmを基準にするのであれば、2m先では960mm、3m先では1440mm…と基準サイズに距離を掛けることで距離が変わっても一定の操作感を担保できるようになっています。
そしてこれに近い考え方がApple Vision Proの動画でも「Dynamic Scale」として語られていました。
GAUGUINというMESONの独自XR開発システムに含まれるUI Kitでも基準となるサイズと距離をつくっていて、3つのボタンが並んだUIは1m先で高さ5cmとしました。
実際スケールと距離のテストしてみて…の感想ですが、1m先の5cmと5m先の25cmはたしかに正面からみると違和感は感じませんでしたが、ポインターを当てる時に明確に距離を感じました。
1mと2mとではポインターの伸びる距離が異なり、5m先の方ではポインターの先端が小さく見えます。そのせいかポインターが気持ち当てづらい感覚がありました。
Apple Vision Proではポインターは不要の体験なのでこういった感覚は感じないのかもしれませんが、同じダイアログのボタンなのに1m先5cmのシーンと5m先25cmシーンがあるというような1つ体験の中で混在させたレイアウトは避けた方が良さそうです。
◇3つの視界ゾーン
ではどういう体験のときにどういう距離を目安にしたらいいのでしょうか？
視界を3つのゾーンに分けることができると言われています。
（参照リンクが切れてしまっていたため、手元のメモから抜粋しています🙏）
A. ローカル：自分の手が届くくらいの範囲（〜70cm）
B. 近接：物体との距離感を感じられる範囲（〜10m）
C. 遠隔：物体との距離を感じられない範囲（10m〜）
ローカル：自分の手が届くくらいの範囲（〜70cm）
コントロールパネルといった、コントローラーやハンドジェスチャーで操作できるもの。
近接：物体との距離感を感じられる範囲（〜10m）
鑑賞するもの。モノを注視することでインタラクションが生じたり、遠くにあるものをローカルへと引き寄せる動作が考えられます。
遠隔：物体との距離を感じられない範囲（10m〜）
操作が困難になるため、他の物体と合わせた利用法が考えられます。 （遠くの山の上、ビルの上や空の上の文字や物体が出現し世界観を表現する、エフェクトとしての役割になるなど）
ちょっとだけ踏み込んだ話をここで触れておきたいと思います。
インターフェースの距離は操作のしやすさや視認性の観点のお話ももちろんありますが、あえてもっと未来的な点で考えると「物理距離＝心理距離」というお話があると思っています。
少し前にふとこんなことを考えました。
「もしかしたら将来、インターフェースにはボタンなんて存在しないのかもしれない。操作するという言葉も消えて、インターフェースと人との心の距離が近くなって、友達や相棒みたいに振る舞ってくれるかもしれない」
人と人も物理距離が遠ければ寂しく感じたり、近ければ安心したりしますよね。 人とインターフェースの間にも将来同じことが言えるのかもしれないと思いました。
そんな考えから6月にカリフォルニアで開催されたAWE 2023に出展した「Spatial Message」ではオールハンドジェスチャーの体験をつくりました。 これは上記で挙げている「ローカル」にあたる部分のインターフェースです。
「スタートボタンをタップする」当たり前の動作を少しでもテンション上げられたらいいなというところからハイタッチで体験をスタートするスタイルを採用しました。 この手にハイタッチをすると「ッパーン🎉」という音も鳴らすことでよりハイタッチ感を際立たせました。
その後の体験も白いハンドくんの真似をしていくことでチュートリアルを勧められるようにしたり、ハンドジェスチャーが正解だとThumbs upポーズをしてくれるなど、ユーザーとの心の距離が縮まるような工夫を散りばめました。
遠隔範囲→近接範囲→ローカル範囲になるにつれてインターフェースとの物理距離は近づきます。それに伴って心の距離も近づけるようなデザインを考えることが将来必要になるかもしれません。
余談ですが、WWDC23の直前のカンファレンスということもありAppleから発表されるデバイスはハンドジェスチャーをメインインタラクションにするはず…！と期待していたので、AWEでハンドジェスチャーの体験デザインにチャレンジすることができてよかったです…！
◇水平視野60度以内・中心から下に-6度の位置に操作対象を配置する
人の目を負担なく動かして認知できる範囲は水平視野で両目60度（片目30度）、垂直視野で上下40度（上20度 / 下20度）と言われています。先日発表されたApple Vision Proも「60度以内に操作対象を配置すること」といったお話しがありましたが、これは人が普段生活する中で「よく見えている」と意識している範囲です。
これは人がUIを認知する上で負担のかからない範囲ということです。
実は2017年のGoogle I/O '17のDesigning Screen Interfaces for VRでもこのお話は語られていました。
人の目は身長 X 0.9の位置にあるので、そこから-6度の角度に操作対象を配置すると良いと言われています。
実際のプロジェクトで、ARグラスの真正面（0度）に表示するのと-6度の位置に表示するのとで目にかかる負担がどのくらいか検証してみました。
前者は1.2度見る程度であれば特に問題はありませんでしたが、凝視したり何度も見るのを繰り返すと普段よりも上の方に目を意識して動かしている気がして目の筋肉が疲れてくる感覚がありました。
一方後者は、意識してUIを見ているという感覚はなく普段自然にふと前を見た時と変わらず凝視することも視線を動かして繰り返し見ることへの負担も感じませんでした。
◇奥行きを活かしたレイアウトでユーザーの負担を下げる
はじめにお伝えしておくと、必ずしもこうした方が良いということではありません。 奥行きのある体験や操作に慣れていないユーザーを置いてきぼりにしないためにも、今はまだ上手く使い分けていく必要があります。
Apple Vision Proのインターフェースもがっつり奥行きあるものかと思いきや、思ったよりもレイアウトに奥行きがなくフラットな印象でした。ガラスの質感や影にこだわることで立体感や実存感は保ちつつもユーザーの操作ハードルや慣れを考慮して今のようなデザインになっていると考えられます。
とは言っても、スマホインターフェースがそのまま空間に置かれたら操作しやすいのか問題はありますし、わざわざXRにしなくてもいいのではと思わせてしまう体験になってしまうなんて避けたいものです。
例えば、複数の中から1つを選択するカルーセルシーンを考えてみましょう。 ずらっと横並びに同じサイズ同じ距離に配置してあったらどうでしょうか？ 目線の位置が定まらず、カルーセルの動きに合わせて目の動きも大きくなります。 上でお話しした操作対象の位置で言うと水平視野の90°の端から端までに目を動かすことになります。
では、水平視野30度以内に目線が定まる負担の少ないカルーセルにしてみるとどうでしょうか？
画像のようなレイアウトであれば、カルーセルするだけで中心の固定のフレームの中に収まるのでどれがセレクト状態なのかがわかります。
インタラクションの範囲も水平視野30°以内に収まるのでポインターを動かす手の範囲も軽減できます。 そして、左右のオブジェクトのサイズと距離を中心から離れるにつれて小さく遠くしているため情報のコントラストもつき、より目線をフォーカスすべき場所がはっきりとしたと思います。
奥行きは用いるシーンを間違えると、逆に混乱を生んでしまう可能性はあると思っています。
目線移動の距離を短くするためであったり、インタラクションステップを少なくするためであったり、 まずは、「ユーザーの負担を下げる」ことを目的に検討してみてください。
◇この章のおまけ🌞
せっかくなので上で紹介したハンドジェスチャーについても触れておこうと思います。ハンドジェスチャーの操作インターフェースの範囲は3つあると言われています。
・Primary zone：〜360mm
・Secondary zone：〜500mm
・Tertiary zone：：〜700mm
腕の長さは人によって異なるため、Primary zone、Secondary zone内（360mm〜500mm以内）に収めるのが良いとされています。
プロジェクトの知見として、初めの段階でハンドジェスチャーする対象が遠くて触れることができないと、距離が遠いということは知覚せず「触ってるのに反応がない」と思い混乱してしまいます。
そういった観点からも、Primary zone、Secondary zone内に収めてあげるのが良いと思います。
2. 注視行動の設計
注視行動設計（視線誘導）は、どのプロジェクトでも必ず悩まされる項目です。 何が大変かというと、体験の流れをシーケンスで精緻化してカンプにしても実機で一通り体験してみるまで気付けないことが多いということです。
◇陰影
人がモノを知覚する際の手がかりの1つの要素として陰影があり、これによって奥行きや位置を把握しています。 XRのインターフェースでも陰影を意識して取り入れるだけでも、情報をキャッチしやすくなり、操作の混乱を軽減したり、立体物の知覚にバグが起きにくくなります（いわゆる目がバグるというやつ）
Apple Vision Proもインターフェース自体にはそこまで立体感を持たせずとも、ガラスの角部分の反射や机の上に影を落とすなど影を陰影を繊細に表現することで実空間との融合が違和感のないものになっていました。
去年の11月に行われたオシム元監督の追悼試合のプロジェクトでは、オシム元監督への想いを空間に投稿する体験を展示しました。
空間に投稿されたメッセージは画像のように柱のようになっています。 柱の内側は一定暗く、さらに柱の奥に行くにつれてより暗くする空気遠近法のような工夫をすることで手前と奥の判別がしやすくなり、また、柱自体の実存感を際立たせることができました。
↑展示のダイジェストムービーもぜひ
◇自然な視線誘導
ここでわたしが大事にしてきたのは「気づかせるための矢印は使わないこと」です。
矢印は良い意味ではガイドとしてのわかりやすさはありますが、体験としてはぶつ切りになってしまったり世界観に合わない異物感がでてしまいます。 できるだけ、体験の流れを邪魔しない「思わず目で追ってしまうような、自然な視線誘導」を意識していました。
Case Study01：さりげない違和感を作り出す！
お寺の中を歩き回りガイドを聞いたり写真を撮影できたりする観光VRのプロジェクトでは、お寺の中のスポットスポットに説明ガイドがありそこに誘導するデザインを考えていました。
ガイドと聞くとまさに矢印が真っ先に思いつきますよね。道に線が敷かれていて方向に沿って矢印が表示される…お寺という厳かな空間に全く合わない表現方法です。 もっとさりげなく誘ってくれるようなものはないかと考えた結果、ガイドスポットに合流するようにパーティクルがふわ〜っと導いてくれる演出にすることで、お寺という景観を崩すことなく次のガイドスポットまで誘導することができました。
Case Study 02：演出が実は視線誘導になっていた！
去年の11月に行われたオシム元監督の追悼試合展示のプロジェクトでは、オシム元監督への想いを投稿したあと空まで昇って届くという文字が散るシーンがあり、そこから再び正面に向かせて最後のエンディングを見せるという流れを考えていました。
実際テストをしてみると、空に文字が昇るエフェクトによってユーザーの目線が上に行きそのまま上を眺めたまま正面を向かないということがわかりました。これでは、エンディングを見逃してしまいます。
エモーショナルな体験の中で矢印を使ってあからさまにこっちこっち👇とするのはだけは避けたかったので、「空にメッセージが届いた返事がオシム元監督から返ってきた」というコンセプトをつくり、数々の名言が降り注ぐという演出を入れることにしました。 1つ1つの名言が上から下に向かって表示されては消えを繰り返し、それを目で追うことで気づいたら正面を向いているという設計にしました。
3. フィードバック
XR体験ではフィードバックはとても重要を果たします。 陰影などの視覚的な実存感と合わせて用いることで、さらに没入度の高い体験に繋げることができます。 フィードバックの種類は主に3種類です。
視覚変化
サウンドエフェクト
ハプティクス
UIの視覚変化はどんな体験であったとしてもベースとして取り入れておきたい手法です。 Disabled, Enabled, Hovered, Clickedの最大4つのステータスを考えておくと良いと思います。
視覚変化に加えてサウンドエフェクト（以下SE）が加わるとマルチモーダルな体験となり、体験への没入度をより一層高めてくれます。 Disabled, Enabled, Hovered, Clickedのうち、特にHoveredとClickedにSEをつけてあげて、Clickedの方は「決定」に相当するので、Hoveredに比べより重ためな音にすると、操作感とも一致した体験になります。
視覚変化加えてSE、ハプティクスとプラスされていくとオブジェクトの実存感や一体感の感じ易さを感じやすくなります。 ハプティクスは触れた感覚をダイレクトに手元にフィードバックされるので、オブジェクトの質感や硬さに合わせて、振動の粒度x強さx時間を調整するだけで、レイの先端がUIにぶつかる感覚、壁を擦っている感覚、手元のスマホに視線誘導する役割などさまざまな応用がききます。
【おまけ】参照資料&インスピレーション
最後に、ここまでお話しした内容とは別にこれまで参照してきたドキュメントや記事をまとめて紹介したいと思います！だいぶ前のものもありますが、XRデザインの黎明期からドキュメント化してくれているデバイス各社のガイドラインをはじめ、その他世界中のXRデザインに携わる方々の知見は今になっても学びになります。
上の章でインターフェースとユーザーは心理距離が近くなっていくのではという妄想のお話をしました。 実際、これを考えるのには自力のアイデアだけでは限界があります。 そこでよくインスピレーションにしていたのが….
🔯👒🕊ジブリ🔮🌳🪄
です！
（ほぼわたしの好みの話でも入ってきますが笑） ジブリ作品にはヒントがたくさんあります。
ハウルの動く城では、ソフィの指輪が光の線を放ち方向を指し示していたり、サリマンが魔法陣を作って謎の小人がぐるぐる回ったり、白の扉のドアノブを合わせる色を変えると別の場所に出ていけたり… XRの体験、インタラクションを考えるのにかなりインスピレーションをもらっています。
おわりに
長い記事になってしまいましたが、5年間の学びをぎゅっと凝縮してみました。 全てを紹介できたわけではないですが、主要どころはおさえられたかなと思います。 Apple Vision Proの登場はデザイナーの仕事領域が大きく広がる合図だったと思っています。
デジタルの中ではできなかった本当の意味での直感的なデザインが求められるようになり、人間の感覚に直接触れるような体験ではこれまで以上に嘘がつけなくなります。
XR体験の中ではちょっとの違和感をユーザーがすぐに感じ取り、それが大きな混乱につながることも大いにあります。
そうしたスマホやPCとは全く違った概念の中で、今後どのようなことを学び、配慮してデザインをしていく必要があるか考えるきっかけであったり、実践としてデザインに取り入れていける内容になっていたら嬉しいです！
最後までお付き合いいただきありがとうございました！
実際にオフィスで体験してみませんか？🕊️
過去制作したプロジェクトでのデザインのお話しをしながら、XRのデザイン・体験づくりを知ってもらえる機会ができたらと思っています
興味がある方がいましたらぜひ遊びに来てください！
まちるだのTwitterからでもこちらのページからご連絡お待ちしています！💭
この記事が気に入ったらサポートをしてみませんか？