--- title: "3Dウェブサイトが有効な場面と高速化の方法 — Dardo" description: "3Dウェブサイトを導入すべき場面、3D・動画・画像の比較、Janus Observatoryの10の3DワールドをWebGLなしでも使えて速い状態に保つために学んだこと。" url: "https://dardo.studio/ja/blog/3d-websites/" language: "ja" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ru":"https://dardo.studio/ru/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T00:56:28.891Z" --- [ブログ](https://dardo.studio/ja/blog/) # 3Dウェブサイトは導入すべきか：価値が出る場面と、速さを保つ方法 3Dウェブサイトが価値を発揮する場面、動画や画像のほうが向いている場面、Janus Observatoryの10の3Dワールドを速く、アクセシブルで使いやすく保った方法を紹介します。 執筆者 [Nicolás Cerón](https://dardo.studio/ja/studio/) ·2026年10月12日 ![夜の古いプラネタリウムの内部。真鍮の投影機が紺色のドームに琥珀色の光の点を散らし、その上に、多面体の小さな深紅の惑星が浮かんでいる。](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## 要点 - 3Dに価値があるのは、題材が空間的なものである場合や、探索することで写真では伝わらないことを説明できる場合です。そうでなければ、たいていは画像や動画のほうが効果的です。 - ページはWebGLなしでも機能するように作り、3Dのレイヤーは拡張として扱いましょう。そうすれば、テキストやデータも検索エンジンが読める状態に保てます。 - Janus Observatoryでは、gzip版を用意することで59個の3Dモデルの転送量を15.8MBから8.2MBに減らし、元のファイルもフォールバックとして残しました。 - モデリングを始める前にJavaScriptとモデルの容量の予算を決め、リリースのたびに確認しましょう。 - ピクセル比に上限を設け、動きを減らす設定を尊重し、すべての操作にキーボードでの手段を用意し、実際のミッドレンジのスマートフォンでテストしましょう。 ## 結論から 3Dウェブサイトに価値があるのは、題材が空間的なものである場合や、その中を動き回ることで写真では伝わらないことを説明できる場合です。回して見せたい製品、場所、データセット、ひとつの世界などがそうです。写真や短い動画でも同じように説明できるページを飾るだけなら、価値はありません。いずれにしても、3Dのレイヤーにはダウンロードサイズ、バッテリー、アクセシビリティの面で実際のコストがかかります。ページは3Dなしでも機能するように作り、3Dは拡張として扱いましょう。 このガイドは、私たち自身の2つのプロジェクトをもとにしています。10の3Dワールドを持つブラウザ体験の[Janus Observatory](https://dardo.studio/ja/work/janus-observatory/)と、トップページがリアルタイムの3Dシーンで始まるdardo.studioです。 ## 3Dが真価を発揮するとき - **訪問者が複数の角度から見る必要がある**。製品、建物、機材などです。 - **空間そのものがストーリーである**。地図、敷地図、場所をめぐる旅などです。 - **操作することで、文章より速く仕組みを説明できる**。シナリオの比較やデータの探索などです。 - **ブランド体験そのものが製品である**。雰囲気が重要で、訪問者が探索を期待するローンチ、展示会、キャンペーンなどです。 ## 向いていないとき - 3Dシーンが、見出しと画像ですでに伝わっていることを繰り返しているだけ。 - 訪問者の多くがモバイル回線とミッドレンジのスマートフォンで訪れ、価格、住所、営業時間など、1つの情報をすぐに知りたいだけ。 - 公開後にモデル、コード、フォールバックを保守する人がチームにいない。 ## 3D、動画、画像のどれを選ぶか | 選択肢 | 向いている用途 | 注意点 | | ------------------------- | ----------------------- | -------------------------------------- | | WebGLまたはWebGPUによるリアルタイム3D | 探索する、回転させる、比較する、操作に反応する | モデルとコードの容量、GPUの負荷、アクセシビリティ対応、ブラウザでのテスト | | 動画 | 一連の流れや雰囲気を毎回同じように見せる | ファイルサイズ、自動再生のルール、字幕、操作できない | | 画像や短いアニメーション | 1つのことを素早く説明する | 印象に残りにくい。探索できない | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI)はすべての最新ブラウザで動作します。[WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI)は新しく、一部の処理ではより高速ですが、対応状況はまだまちまちなので、フォールバックを計画しておきましょう。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なしでも機能し、キーボードでの回転、見えるフォーカス表示、動きを減らす設定への対応は、各機能とともに作り込みました。[アクセシビリティのページ](https://janus-observatory.nicocerond.workers.dev/accessibility)には、操作方法、視覚に頼らない代替手段、既知の制限が記載されています。目標は[WCAG 2.2](https://www.w3.org/TR/WCAG22/)のレベルAAで、Chromium、Firefox、WebKitでの自動テストで確認しています。 このルールは、検索エンジンやAIアシスタントにも役立ちます。テキスト、名称、データがcanvasの中ではなくHTMLにあるからです。 ## 速くてアクセシブルな3Dページのためのチェックリスト 1. **まず3Dなしでページを書く**。HTML版で意味が通じないなら、3Dでも解決しません。 2. **3Dで何を説明するのかを決め**、見栄えのためだけのものは削ります。 3. **モデリングを始める前に、JavaScript、モデルの容量、テクスチャサイズの予算を決め**、ビルドでチェックします。 4. **モデルを圧縮する**。[meshoptimizer](https://meshoptimizer.org/)などのツールを使い、[glTF](https://www.khronos.org/gltf/)形式で配信し、[DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream)のような新しいブラウザ機能に頼る場合は、非圧縮のフォールバックを残します。 5. **シーンはコンテンツの後に読み込む**。しかも、画面に表示される直前になってから読み込みます。 6. **ピクセル比に上限を設け**、高密度の画面で4倍のピクセルを描画しないようにします。 7. **動きを減らす設定を尊重する**。[prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion)に対応し、すべての操作にキーボードでの手段を用意し、すべてのcanvasの横にテキストの代替を置きます。 8. **実際のミッドレンジのスマートフォンでテストする**。複数のブラウザエンジンでも確認し、公開後は[Core Web Vitals](https://web.dev/articles/vitals)を追跡します。 ## 費用 3Dは、デザインと開発に加えて、モデリング、最適化、テストの時間を必要とします。フォールバックはおまけではなく、仕事の一部です。見積もりでは、[コロンビアのウェブサイト制作費用](https://dardo.studio/ja/blog/website-cost-colombia/)のガイドで説明している費用の要因のうち、「独自のモーション、3D、インタラクティブなデータ」の項目として表れます。 ## Dardoの3Dウェブサイト制作 3D体験は[インタラクティブ3Dサイト](https://dardo.studio/ja/services/interactive-3d-websites/)のサービスで、より軽い動きやスクロール演出は[クリエイティブ開発](https://dardo.studio/ja/services/creative-development/)で設計・構築しています。[Hyper](https://dardo.studio/ja/work/hyper/)では、React Three Fiberを使って、散らばったシグナルを1つの顧客プロファイルにまとめる、スクロール連動の3Dストーリーを制作しました。理解してもらうために空間が必要なアイデアがあれば、[ぜひお聞かせください](https://dardo.studio/ja/contact/?service=interactive-3d-websites)。 ## よくあるご質問 **3DウェブサイトはSEOに悪影響がありますか？** コンテンツがHTMLにあれば問題ありません。検索エンジンが読むのはテキスト、リンク、構造化データであり、canvasの中に描かれたものではありません。名称、説明、データはページ内に置き、3Dシーンはそれを引き立てるために使いましょう。 **3Dウェブサイトはスマートフォンで動きますか？** モデルのサイズとJavaScriptの予算を決め、ピクセル比に上限を設け、実際のミッドレンジのスマートフォンでテストすれば動かせます。WebGLなしで機能するバージョンも必ず用意してください。 **WebGLとWebGPUのどちらを使うべきですか？** WebGLはすべての最新ブラウザで動作します。WebGPUは新しく、より高速な場合もありますが、対応状況はまだまちまちです。使う場合は、dardo.studioのトップページのように、WebGLへのフォールバックを計画してください。 **3Dウェブサイトをアクセシブルにできますか？** 各機能とともにアクセシビリティを作り込めば可能です。キーボード操作、見えるフォーカス表示、動きを減らす設定への対応、すべてのcanvasの横に置くテキストの代替などです。Janus ObservatoryはWCAG 2.2のレベルAAを目標にしています。 ## 出典・参考資料 このページの出典です。詳細は各発行元の原典をご覧ください。 - [Janus Observatory：アクセシビリティ（英語）](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN：WebGL API（英語）](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN：WebGPU API（英語）](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN：DecompressionStream（英語）](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN：prefers-reduced-motion（英語）](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group：glTF（英語）](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer（英語）](https://meshoptimizer.org/) · meshoptimizer.org - [W3C：Web Content Accessibility Guidelines（WCAG）2.2（英語）](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev：Web Vitals（英語）](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/ja/studio/) Nicolás Cerónは、コロンビアのボゴタを拠点に、ブランド、Webデザイン、開発を手がけるスタジオ Dardo の創設者です。 ## 関連記事 - [**コロンビアのウェブサイト制作費用はいくら？2026年の実際の価格と見積もりを左右する要素**コロンビアのウェブサイト制作費用を、ボゴタの制作会社が公開している日付入りの価格、ドメインとホスティングの年間固定費、見積もりを実際に左右する要素から整理しました。](https://dardo.studio/ja/blog/website-cost-colombia/) - [**FramerからAstroへの移行：デザインも検索順位も失わずにFramerサイトを移す方法**FramerにはHTMLエクスポートがないため、Astroへの移行はサイトの再構築になります。最初に記録すべきもの、壊れやすい部分、デザイン・URL・検索順位を守る方法を解説します。](https://dardo.studio/ja/blog/framer-to-astro/) - [**WebflowからAstroへの移行：コンテンツ、デザイン、検索順位を失わずにWebflowサイトを移す方法**WebflowのコードエクスポートにはCMS、フォーム、検索、多言語ページが含まれません。Astroへの移行で持ち出すもの、作り直すもの、検索順位の守り方を解説します。](https://dardo.studio/ja/blog/webflow-to-astro/) - [**WordPressからAstroへの移行：ヘッドレスでも完全移行でも、検索順位を落とさずに移す方法**WordPressからAstroへ移る2つの方法と、エクスポートするもの、Yoastのタイトルやパーマリンク、アップロードファイルの引き継ぎ方、見落とされがちなWordPressのURLを解説します。](https://dardo.studio/ja/blog/wordpress-to-astro/) ## もっと見る - [サービス · **Three.jsとWebGLで作るインタラクティブな3Dウェブサイト**](https://dardo.studio/ja/services/interactive-3d-websites/) - [あなたのプロジェクト · **まずはご相談ください**](https://dardo.studio/ja/contact/)