英語記事を翻訳し紹介しています。元の記事は読みたい場合は下記のリンクを確認ください。 https://blog.studio.design/posts/ar-vr-web-design/ここ数年で、デザイナーはWebサイトでストーリーを伝える新たな方法で、最新のブラウザーの限界を引き上げてきました。WebGLやWebSocketsのような技術、three.jsのような3DレンダリングAPIは全て、デジタルクリエーターが従来のWebページの動作を考え直すきっかけになりました。Webサイトはもはや、スクロールの連続やハイパーリンクでリンクされた静的ページである必要はありません。代わりに、ユーザーそれぞれに魅了する、インタラクティブな環境を創り出すことができます。VRやARは、新しい技術の中でも最も話題になっています。企業は、デザイナーやコンテンツクリエーターが制作の中で、VR・ARを活用し始めるのを促しています。新しいツール、より高速なインターネット速度、また最新のWebブラウザーの互換性により、Web VR・ARはこれまで以上に体験しやすくなりました。しかし、これらの新しいメディアには、デザイナーがシームレスで直感的な体験を創り出すために対応しなければならない、新しい課題、リスク、そしてパターンがあります。ゴールを定めるVR・ARは、これまでモバイルアプリやゲームを主流として使用されていますが、Webにもより採用されつつあります。Web VR・ARコンテンツをデザインする前に、ゴールを定めることが重要です。ランディングページやECサイトをデザインするように、ユーザーにどんな行動をしてほしいのかを確立し、VR・ARがユーザーの目標達成のためにどのような手助けをするのかを考え、魅了的でシームレスな体験をつくります。VRは、360°ビデオと実体験のように感じる体験を通じて、新しいストーリーテリングの可能性を大きく広げています。ユーザーは、ヘッドセットやWeb上でコンテンツをドラッグし動かすことで、ブラウザーベースの体験をすることができます。Emergence Magazineは、「Sanctuary of Silence」のカバーストーリーの基準として、Web VRを取り入れています。それにより、オリンピック国立公園が北米で最も静かで穏やかな場所の1つであることを表現しています。VRの使用によりユーザーを惹きつけ、ストーリーの主要メッセージを夢中になる楽しい方法で伝えています。Emergence Magazineの360°で実体験のようなのVR体験ARは、ユーザーが自宅で快適に物理的な製品やオブジェクトとやり取りする新しい方法を提供します。また、そのオブジェクトのユニークな機能を面白い方法で魅了することができます。Shopifyと3D Warehouseの近年の統合により、ユーザーに3Dレンダリングで製品を表示し、AR Kitを通じて現実世界に配置するような感覚を実現しました。万能調理器具とも呼ばれる圧力鍋のInstant Pot（インスタントポット）は、見込み客が購入する前に、自分のキッチンで製品がどう見えるのかを確認することを実現しました。ARの使用は、情報に基づいた購入をするために必要な確信を顧客に与えるスマートな方法です。インスタントポットのWebサイトでは、ユーザーは購入前に自分のキッチンに製品があるイメージを見ることができます。メディアを調和させるデザイナーはVR・ARを使用するとき、まとまりのある体験をつくるために、いくつかのコミュニケーション形式をシームレスに調和させる必要があります。 ビデオ、音楽、コピーライト、3Dモデリングは、実体験のような体験をつくり出すメディアです。2018年のスーパーボウルのキャンペーンのため、ペプシは、ビデオ、3Dモデルの車、音楽、さらにはシンディ・クロフォードのポスターを一体化して、ブランドの歴史の象徴的な瞬間を表現したWeb VRコンテンツを制作しました。Pepsi Go Back は、キャンペーン目的をサポートする方法で、様々な異なるメディアを飛び越えた作品です。ブランドの歴史と文化的影響を魅力的な方法で伝えています。Pepsi Go Backでは、3Dで再現されたジェフ・ゴードンの車の運転席に座っている視点で表現されています。ARを用いた実空間でのインタラクティブな体験が開始されてから、今までとは異なったデザインへの考慮が必要になりました。Googleが定義した最も重要な2つの考慮は、「環境への配慮」と「視覚的アフォーダンス」です。ユーザーは、ARオブジェクトとやり取りするための視覚空間を認識し、どのオブジェクトとやり取りできるかを認識する必要があります。GoogleのUXデザイナー、Alesha Unipingcoは、「テキストやキャラクターアニメーションのような視覚的手かがりは、ユーザーを物理的空間へ移動させることができます」そして、3Dオブジェクトはユーザーを混乱させないように、「インタラクティブなコンポートネントとして目立つ」べきであると述べています。新しいツールを使いこなすデザイナーがWeb VR・ARのデザインを始めるために使用するツールやプログラムは多数あります。Mozilaは、デザイナーがHTMLを使用してWeb VRを作成できるオープンソースフレームワーク、A-Frameを開発しました。初心者でも利用しやすいよう、詳細なドキュメントやサンプルを提供しています。MozilaのオープンソースWeb VRフレームワーク、A-FrameはVR制作を始める素晴らしい方法です。Cinema4DやBlenderのような3Dレンダリングのツールは以前から存在していましたが、習得するのはかなり難しいです。Vectaryなどのスタートアップ企業は、デザイナーが3次元のモデルを作成し、.objや.usdz（AR Kitで使用）などのWeb用のファイル形式にエキスポートすることを、これまで以上に簡単に行えるようにしました。Vectaryでの3Dオブジェクトの作成は、SVGのインポートと同じくらい簡単です。デザイナーは新しいツールと実践を身に付けるために、照明の仕組みやオブジェクトの性質など、3Dデザインの基礎を学ぶ必要があります。この知識があれば、デザイナーはユーザーの興味をそそる刺激あるオブジェクトを作成することができます。加えて、デジタルデザイナーは従来、平面上で制作を行なっていたため、ユーザーを誘導するためには、奥行きとスペースを感じるボリュームあるデザインについて学ぶことが重要です。明確な階層と視認性をつくるランディングページやECサイトを作成するのと同じように、階層と視認性は直感的な体験をつくり出す秘訣です。タイポグラフィは、ユーザーがコンテンツを理解するために必要な役割の1つです。一方でUI要素は、仮想体験をどう操作するのかを伝えるのに役立ちます。GoogleのペトラのVRコンテンツは、説明テキスト、脈動するUI要素、矢印、そして正確なマップ組み合わせて、ユーザーに操作方法を分かりやすく伝えています。これらの要素は、ユーザーが見ているものを、空間とコンテキストを通じてどう操作するのかを明確にする助けとなります。UI要素とタイポグラフィは、ユーザーに明確な操作方法を示しています。VR・ARが新しいメディアとして登場して以来、デザイナーにとって探究心と双方向性を促進する方法で、ユーザーを誘導することが重要になりました。 さらに、それらの要素は目的が明確で親しみやすいものでなければいけません。要素の動きは、ユーザーが考える動作（矢印は移動を意味し、「×」は閉じるなど）であり、デザインパターンはコンテンツ全体で統一されるべきです。パフォーマンスの最適化ほとんどのWeb VR・ARコンテンツは、ブラウザーで3Dオブジェクトをレンダリングするために、大量の計算処理を必要とします。ユーザーがどこにいてもアクセスできるようにするには、可能な限り最適化することが重要です。GoogleがAR対応ブラウザーを強調するために、3Dモデルのプロトタイプを作成したとき、スムーズでシームレスに使用するためのいくつかの方法を提示しました。ローポリモデル、シーン内の光源数の制限、また影の解像度を下げることで、ユーザーに滑らかで自然な3Dオブジェクトを提供することができます。デザイナーは、低帯域幅エリアでも、誰でも体験できるようWeb VR・ARコンテンツを最適化するべきです。Googleは3Dモデルを最適化することで、理想ではないシナリオでもうまく機能するようにしました。アクセシビリティを考慮したデザインWebアクセシビリティは現在、デジタルデザインで注目された話題であり、それには十分な理由があります。従来のWebサイト制作のように、デザイナーは全てのユーザーに同様の体験を提供するために、慎重に検討する必要があります。 現時点では、Web VR・ARでどのようなアクセシビリティが必要なのか明確ではありませんが、企業は、この新しい技術が全ての人々に包括的であることを確かにするための第一歩を踏み出しています。Microsoftは最近、視覚障害のユーザーに触覚フィードバックを提供する「canetroller」を発表しました。ユーザーは、補助杖に似たVRコントローラーを持ち、仮想空間を操作することができます。仮想オブジェクトに触れると物体的抵抗が適用され、「振動触覚」フィードバックは振動をシミュレートし、音声フィードバックは実空間の杖の相互作用の音をシミュレートします。現時点で購入することはできないようですが、将来のWeb VR・ARのアクセシビリティを向上されるための良いステップです。Microsoftが考案した「canetroller」Web VR/ARの未来新しい技術がWebサイトでより顕著になってきているため、デザイナーはブランド化された魅力的なコンテンツを大規模で制作する体系を考えていくべきです。UI/UXパターンは標準化され、視覚システムはより一般的になり、ユーザーはこの形式のコンテンツに慣れていくでしょう。新しい体験をデザインするためにこれらの新しい技術を試し始める、これほどの良い機会はありません。