Apple Vision Pro、Meta Quest 3、そして新たに登場したSamsungのXRデバイス。空間コンピューティングが現実味を帯びてきた今、Webデザインは2D画面を飛び出して3D空間に進出しようとしている。まだ先の話？いや、意外と近い未来かもしれません。
WHAT IS SPATIAL WEB
空間コンピューティングとは
従来のWebは2Dのモニター上で完結していた。ブラウザという四角い窓の中にレイアウトを組み、テキストと画像を並べ、ユーザーはマウスやタッチでスクロールする。僕たちWebデザイナーが当たり前にやってきた仕事は、すべて「平面」の上での話だった。
空間コンピューティングでは、Webコンテンツが3D空間に浮かぶウィンドウとして表示される。Apple Vision Proでは既にSafariが空間ブラウザとして動作し、既存のWebサイトをVR空間内で閲覧できる。目の前の壁に巨大なブラウザウィンドウを貼り付けたり、作業デスクの横に参考サイトを浮かべたり。SF映画で見た光景が、もう現実になっている。
ここで重要なのは、「既存のWebサイトがそのまま表示できる」ということ。つまり、僕たちが今作っているHTML/CSS/JSのサイトは、そのまま空間ブラウザで動く。ただし、「動く」と「美しく体験できる」は別の話。ここに、新しいデザインの可能性がある。
正直に言うと、初めてVision Proの発表動画を見たとき「いや、あのゴーグルかぶって仕事する人いる？」と思った。でも実際にデモを触ってみると、考えが変わった。Webブラウジングの体験が根本的に違うのだ。ページが「平面のスクリーン上の情報」ではなく「自分の空間に存在するオブジェクト」になる。この感覚は、言葉で説明するより体験してもらうのが早い。
HOW IT CHANGES DESIGN
Webデザインはどう変わるか
空間コンピューティングの普及が進むと、Web制作者が考えなければならない要素が大きく増える。従来の「画面幅に応じたレスポンシブ」だけでは足りなくなる日が来るかもしれない。ここでは、特に大きな変化をもたらすであろう4つのポイントを整理してみた。
Z軸の追加
従来のX/Y軸に加え、奥行き（Z軸）のデザインが求められる。レイヤーの重なりや距離感が新たな設計要素に。CSSのtranslateZやperspectiveがリアルな奥行きを持つ世界では、「見た目だけの装飾」から「実際の空間配置」へと意味が変わる。
視線インタラクション
クリックやタップの代わりに「見る」「注目する」がインタラクションの基本に。ホバー状態の概念が根本から変わる。Vision Proでは視線を合わせた要素がハイライトされ、指のピンチ操作で「クリック」する。デザイナーは「視線で選びやすいサイズと間隔」を設計する必要がある。
空間オーディオ
UIにサウンドフィードバックが標準搭載。ボタンを押す音、通知音が3D空間で聞こえる。左側に配置したパネルからの通知音は左から聞こえ、右上のメニューを操作すれば右上から操作音が返ってくる。Webサイトにも「音のデザイン」が求められる時代。
ハンドジェスチャー
ピンチ、グラブ、スワイプ。手の動きでWebを操作する時代。スクロールは手を上下に動かすジェスチャーに、ズームは両手を広げる動作に。タッチターゲットの概念が「指先で押せるサイズ」から「手で掴めるサイズ」へとスケールアップする。
ちなみに、この4つの変化は「いつか来る未来」ではなく、Apple Vision Proでは既に現実のものとなっている。もちろん普及率はまだ低いが、Appleがやると決めたことは、大体5年以内に業界標準になる。iPhoneがそうだったように。
EXPERIMENTS
実験的プロトタイプの紹介
理屈はわかった。じゃあ実際に何が作られているのか？ 世界中のクリエイターたちが、空間Webのプロトタイプをすでにたくさんリリースしている。ここではWeb技術をベースにした特に面白い事例を紹介したい。
WebXR APIを使った3Dポートフォリオサイト -- 従来のポートフォリオが「ページを上から下にスクロールして作品を見る」だったのに対し、WebXR版では「ギャラリー空間の中を歩き回って作品を鑑賞する」体験になっている。壁に掛けられた作品に近づくと詳細情報がポップアップし、手を伸ばすとインタラクションが始まる。まさに美術館体験。
Three.jsで構築された没入型プレゼンテーション -- PowerPointのスライドが平面的だとすれば、こちらは「データが空間に浮かぶプレゼン」。グラフが3Dで目の前に立体的に表示され、棒グラフの「棒」を実際に掴んで回転させられる。投資家向けのピッチで使ったら、まずインパクトだけで勝てるかもしれない。
A-Frameで作るVRショールーム -- 家具メーカーのECサイトが、A-Frame（Web上でVRコンテンツを作れるフレームワーク）を使って実際の部屋サイズのショールームを構築。ソファの横に立ってサイズ感を確認し、色を変え、気に入ったらそのまま購入ボタンを押す。試着ならぬ「試し置き」がWebブラウザだけで完結する。
これらはいずれもHTML/CSS/JSの延長線上にある技術で作られている。つまり、僕たちWeb制作者の守備範囲内の話。新しいプログラミング言語を覚える必要はない。Three.jsやA-Frameの知識を加えるだけで、空間Webの世界に足を踏み入れられる。
個人的に一番ワクワクしたのはA-Frameのショールーム。実は僕自身も小さなデモを作ってみたのだが、意外なほど簡単にVR空間が構築できた。HTMLのカスタム要素（<a-scene>、<a-box>など）を並べるだけで3Dオブジェクトが配置できるのだから、HTMLを書ける人なら誰でも始められる。
MY TAKE
Web制作者としての見解
正直、普及にはまだ時間がかかる。デバイスの価格が高く、一般消費者への普及率は低い。Apple Vision Proは約50万円、Meta Quest 3でも約7万円。「ちょっとWebサイト見るためにゴーグルかぶるか」とはならないだろう。少なくとも今は。
しかし、「2Dサイトが空間ブラウザで美しく表示される」ことの重要性は今すぐ意識すべきだと思う。具体的には、CSSのtransform3d、perspective、backdrop-filterなどのプロパティが空間表示でより効果的に機能する。Vision ProのSafariでは、backdrop-filterのブラー効果が本当にガラス越しに見ているような質感になる。これは2D画面では味わえない美しさだ。
僕が今、案件で意識していることがいくつかある。まず、CSSのtransform: translateZ()をデコレーション的に使うこと。現時点では2Dブラウザで見ても大した違いはないが、空間ブラウザで見たときにレイヤーの重なりが自然に表現される。コストゼロで「空間対応」の下地が作れるわけだ。
次に、backdrop-filterを積極的に使うこと。すりガラス効果はフラットデザインの定番テクニックだが、空間UIではこれが「透明なパネルの向こうにコンテンツが見える」という物理的な表現になる。今のうちから使い慣れておいて損はない。
そして一番大事なのは、「アクセシビリティの意識を拡張する」こと。空間UIでは視覚だけでなく、聴覚や触覚（ハプティクス）もUIの一部になる。WAI-ARIAのaria-labelが、将来的には音声UIのトリガーになる可能性がある。セマンティックHTMLを書くことの重要性が、今以上に増すはずだ。
あと、これは完全に個人的な予感だけど、空間Webの普及は「ゲーム」と「EC」から始まると思う。ゲームは没入体験との相性が抜群だし、ECは「試着・試し置き」の需要がある。コーポレートサイトやブログが空間化されるのはもっと先の話。でも、その「もっと先」は意外と10年以内かもしれない。
KEY NUMBERS
空間Webの現在地
Apple Vision Proの価格
約50万円。一般普及にはまだ遠い
XRデバイス普及予測年
IDC調べ。年間出荷台数5000万台超予測
空間Web標準API
W3C策定。主要ブラウザ対応進行中
今のうちにWebXR APIの基本概念だけでも触れておくことをおすすめする。MDNのドキュメントが充実しているし、Three.jsの公式サイトにも実践的なサンプルが揃っている。「いつか必要になったときに慌てない」ための投資だと思えば、週末1日の学習コストで十分だ。
10年前、スマホ対応は「必要ない」と言われていた。今、レスポンシブは当たり前。空間Webも同じ道をたどるかもしれない。 2015年頃、「うちのお客さんはパソコンしか使わないから、スマホ対応は不要です」と言っていたクライアントが何人もいた。今、彼らのサイトはすべてスマホファースト。テクノロジーの波は、いつも「まだ早い」と言われている間に押し寄せてくる。空間Webも、きっとそうなる。僕はその波に乗る準備を、今から始めている。