Apple Vision Proで変わるWebサイトのデザインとナビゲーション
Monaca
XR
Appleから新しいデバイスVision Proが発表されました。このXRデバイスの特性から、新しい種類のユーザーインターフェース（UI）とユーザーエクスペリエンス（UX）が求められています。
このデバイスは新しいオペレーティングシステム（OS）であるvisionOSを使って動作します。
visionOSにはWebブラウジングを可能にするSafariというブラウザが内蔵されています。しかし、XRデバイスを通して見るWebブラウジング体験を最大限に生かすためには、特定の設計指針に従ったWebサイトが必要です。
本記事ではMeet Safari for spatial computing – WWDC23 – Videos – Apple Developerより、visionOS向けWebサイトの注意点を紹介します。
画像の形式について
まず、visionOSで使用するために推奨される画像フォーマットはSVGです。
SVG（スケーラブルベクターグラフィックス）は、拡大・縮小しても画質が損なわれない特性を持つフォーマットです。これは、XRデバイスでの視覚体験を最大化するために重要です。
自然な表示とインタラクション
次に、visionOSはユーザーの目の前にデジタル空間を投影します。そのため、表示やインタラクションは自然でなければなりません。不自然な動きや表現はユーザーに疲労を感じさせ、結果としてそのサイトやアプリケーションから離れる可能性があります。
操作方法について
visionOSでは、主に3つの操作方法が存在します。
それは視線による選択、指によるタップ、そして指によるピンチ（2本の指で画面をつまむ動作）です。
視線入力は、ユーザーが特定のリンクやボタンを注視することで、その要素が選択されるという方式です。
イベントとしては、視線入力では、リンクやボタンに注目すると pointerdown イベントが発生します。そして、注目している間 pointermove イベントが、視線を外したときに pointerup イベントが発生します。人差し指によるタップ操作も基本的に同じイベントです。
スクロールイベントにも対応しています。
そのためのメディアクエリーも用意されています。
@media (pointer: coarse) {
}
@media (hover: none) {
}ユーザーの視線によって色を変えるなどする場合には cursor: pointer を使います。この視線操作に対する適切なフィードバックが、ストレスなく利用するための鍵になりそうです
全画面表示
Webサイトやアプリケーションが全画面表示になるときもあります。
特にXRデバイスでは、全画面表示はユーザー体験を大きく向上さ せることができます。
そのため、JavaScriptというプログラミング言語を使用して、全画面表示にすることが可能です。
document.documentElement.requestFullscreen();そしてフルスクリーンになったときには以下のイベントが実行されます。
document.documentElement.addEventListener( "fullscreenchange", () => {
});なお、フルスクリーン時の表示幅は960、高さは540のようです。
3Dモデルの表示
visionOSは、3Dモデルを表示できます。
3Dモデルは、ユーザーに深みのある、現実に近い体験を提供することができます。これは、WebXRという技術を使用して実現されます。USDZファイルも同様に対応しています。
<model interactive>
<source src="example.usdz" />
</model>これはJavaScriptからも利用可能で、カメラやアニメーションなどを操作できます。
まとめ
visionOSは、スマートフォンやタブレットとは異なり、視線による操作が中心となると予想されます。そのため、視線で自然に感じられるようなインターフェースの設計が求められます。
現状では、アプリ開発者はこの新たなOS、visionOSに対してまだ慎重な態度をとっているようです。
豊富なアプリがリリースされるまでの間、主にWebサイト閲覧のためにこのデバイスが使用されると予想されます。そのため、WebサイトがvisionOSに対して適切に最適化されていれば、ユーザーはストレスなくそのサイトを利用できるでしょう。
Meet Safari for spatial computing – WWDC23 – Videos – Apple Developer
