3Dウェブサイトは導入すべきか：価値が出る場面と、速さを保つ方法

結論から

3Dウェブサイトに価値があるのは、題材が空間的なものである場合や、その中を動き回ることで写真では伝わらないことを説明できる場合です。回して見せたい製品、場所、データセット、ひとつの世界などがそうです。写真や短い動画でも同じように説明できるページを飾るだけなら、価値はありません。いずれにしても、3Dのレイヤーにはダウンロードサイズ、バッテリー、アクセシビリティの面で実際のコストがかかります。ページは3Dなしでも機能するように作り、3Dは拡張として扱いましょう。

このガイドは、私たち自身の2つのプロジェクトをもとにしています。10の3Dワールドを持つブラウザ体験のJanus Observatoryと、トップページがリアルタイムの3Dシーンで始まるdardo.studioです。

3Dが真価を発揮するとき

• 訪問者が複数の角度から見る必要がある。製品、建物、機材などです。
• 空間そのものがストーリーである。地図、敷地図、場所をめぐる旅などです。
• 操作することで、文章より速く仕組みを説明できる。シナリオの比較やデータの探索などです。
• ブランド体験そのものが製品である。雰囲気が重要で、訪問者が探索を期待するローンチ、展示会、キャンペーンなどです。

向いていないとき

• 3Dシーンが、見出しと画像ですでに伝わっていることを繰り返しているだけ。
• 訪問者の多くがモバイル回線とミッドレンジのスマートフォンで訪れ、価格、住所、営業時間など、1つの情報をすぐに知りたいだけ。
• 公開後にモデル、コード、フォールバックを保守する人がチームにいない。

3D、動画、画像のどれを選ぶか

WebGLはすべての最新ブラウザで動作します。WebGPUは新しく、一部の処理ではより高速ですが、対応状況はまだまちまちなので、フォールバックを計画しておきましょう。dardo.studioの3Dのエントランスは、まずWebGPUを試し、使えなければWebGL 2にフォールバックします。一方、サービス、実績、お問い合わせのページはプレーンなHTMLで、3Dシーンを待つことはありません。

Janus Observatoryの構築で学んだこと

Janus Observatoryは、地球の未来について公表されている10のシナリオを、17章の物語、アトラス、観測所に変えたもので、10のオリジナルのローポリゴンの世界と、関節で動く異星人の天文学者が登場します。アプリケーションのサイズに上限があるCloudflare Workersの無料プランで動いています。2026年9月27日付のプロジェクトのリリースレポートには、速さを保つために必要だったことが記録されています。

• モデルを圧縮し、フォールバックを残す。59個の3Dモデルは、15.8MBではなく合計8.2MBのgzip版として配信され、ダウンロード量は47.9%少なくなります。展開できないブラウザには元のファイルを渡します。
• メインスレッドの外でデコードし、終わったら止める。Meshoptのデコードは1つのバックグラウンドワーカーで実行し、5秒間アイドル状態が続くと終了します。
• JavaScriptの予算を決めて守らせる。トップページの初期JavaScriptはgzip圧縮後で197,059バイトで、予算は256,000バイトです。ビルド時にこれをチェックしています。
• リクエストの嵐に注意する。Next.jsとOpenNextの構成で投機的なプリフェッチのループが発生し、失敗したブラウザトレース1回で11,704件のリクエストが送られました。対策は該当リンクのプリフェッチを無効にすることで、現在のテストでは投機的なリクエストがゼロであることを必須にしています。
• フレームレートを追うより解像度を固定する。canvasは1〜1.5の固定のデバイスピクセル比で描画します。レポートでは、解像度を下げることに依存していた以前のフレームレートの数値も撤回されたため、ここでは引用しません。

3Dなしでも機能するように作る

Janusには、ほかのすべてを左右する1つのルールがあります。中核となる体験は、WebGLなしでも、AIなしでも機能しなければならない、というものです。10のシナリオの記録はすべてJavaScriptを無効にしても読み込まれ、操作はWebGLなしでも機能し、キーボードでの回転、見えるフォーカス表示、動きを減らす設定への対応は、各機能とともに作り込みました。アクセシビリティのページには、操作方法、視覚に頼らない代替手段、既知の制限が記載されています。目標はWCAG 2.2のレベルAAで、Chromium、Firefox、WebKitでの自動テストで確認しています。

このルールは、検索エンジンやAIアシスタントにも役立ちます。テキスト、名称、データがcanvasの中ではなくHTMLにあるからです。

速くてアクセシブルな3Dページのためのチェックリスト

1. まず3Dなしでページを書く。HTML版で意味が通じないなら、3Dでも解決しません。
2. 3Dで何を説明するのかを決め、見栄えのためだけのものは削ります。
3. モデリングを始める前に、JavaScript、モデルの容量、テクスチャサイズの予算を決め、ビルドでチェックします。
4. モデルを圧縮する。meshoptimizerなどのツールを使い、glTF形式で配信し、DecompressionStreamのような新しいブラウザ機能に頼る場合は、非圧縮のフォールバックを残します。
5. シーンはコンテンツの後に読み込む。しかも、画面に表示される直前になってから読み込みます。
6. ピクセル比に上限を設け、高密度の画面で4倍のピクセルを描画しないようにします。
7. 動きを減らす設定を尊重する。prefers-reduced-motionに対応し、すべての操作にキーボードでの手段を用意し、すべてのcanvasの横にテキストの代替を置きます。
8. 実際のミッドレンジのスマートフォンでテストする。複数のブラウザエンジンでも確認し、公開後はCore Web Vitalsを追跡します。

費用

3Dは、デザインと開発に加えて、モデリング、最適化、テストの時間を必要とします。フォールバックはおまけではなく、仕事の一部です。見積もりでは、コロンビアのウェブサイト制作費用のガイドで説明している費用の要因のうち、「独自のモーション、3D、インタラクティブなデータ」の項目として表れます。

Dardoの3Dウェブサイト制作

3D体験はインタラクティブ3Dサイトのサービスで、より軽い動きやスクロール演出はクリエイティブ開発で設計・構築しています。Hyperでは、React Three Fiberを使って、散らばったシグナルを1つの顧客プロファイルにまとめる、スクロール連動の3Dストーリーを制作しました。理解してもらうために空間が必要なアイデアがあれば、ぜひお聞かせください。