Apple Vision Proで変わるWebサイトのデザインとナビゲーション

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のようです。

visionOSは、3Dモデルを表示できます。

3Dモデルは、ユーザーに深みのある、現実に近い体験を提供することができます。これは、WebXRという技術を使用して実現されます。USDZファイルも同様に対応しています。

<model interactive>
  <source src="example.usdz" />
</model>

これはJavaScriptからも利用可能で、カメラやアニメーションなどを操作できます。

visionOSは、スマートフォンやタブレットとは異なり、視線による操作が中心となると予想されます。そのため、視線で自然に感じられるようなインターフェースの設計が求められます。

現状では、アプリ開発者はこの新たなOS、visionOSに対してまだ慎重な態度をとっているようです。

豊富なアプリがリリースされるまでの間、主にWebサイト閲覧のためにこのデバイスが使用されると予想されます。そのため、WebサイトがvisionOSに対して適切に最適化されていれば、ユーザーはストレスなくそのサイトを利用できるでしょう。