Three.js vs Unity WebGL：2026年、Web 3Dプロジェクトにどちらを選ぶべきか？

チームにUnityの開発経験がある。次のプロジェクトはブラウザで動かす必要がある。CTOが問う：「Unityからそのまま WebGLエクスポートすればいいのでは？」

場合によっては正しい。しかし判断には、バンドルサイズ（168 kB vs 30 MB以上）、ライセンス費用（無料 vs 年間約34万円/席）、モバイルパフォーマンス、SEO要件、チームのスキルセットを考慮する必要があります。このガイドでは、データに基づいた判断材料を提供します。

対象読者： CTO・テックリード・プロジェクトマネージャー。Three.jsとUnity WebGLエクスポートのどちらを選ぶか——コンフィギュレーター、マーケティング体験、ブラウザゲーム、研修プラットフォームで悩んでいる方。

要点まとめ

• バンドルサイズの差は圧倒的。 Three.jsコアはツリーシェイキングで約500 kB〜1 MB。Unity WebGLは5〜15 MBから始まり、実プロジェクトでは25〜50 MBに達する
• ロード時間は3〜10倍の差。 Three.js体験は2〜6秒でロード。Unity WebGLは通常8〜30秒かかる
• Three.jsは永久無料。 MITライセンス、シート制限なし、売上上限なし。Unity Proは年間約34万円/シート（売上2,000万円超の場合）
• SEOではThree.jsが有利。 DOM統合によりクロール可能なテキスト、セマンティックHTML、優れたCore Web Vitalsを実現。Unityは不透明なcanvasにレンダリング
• Unityはオーサリング速度で勝る。 組み込みの物理演算、アニメーションステートマシン、ビジュアルスクリプティングで複雑なゲームロジックを高速にプロトタイピング
• WebGPUが差を広げる。 Three.jsはr171からWebGPUをネイティブサポート。Unity WebGLエクスポートは非対応
• 技術ではなくプロジェクト要件で判断する。 チームの快適さではなく、要件から始める

1. クイック比較表

2. それぞれの技術とは

2-1. Three.js：Webネイティブの3Dライブラリ

Three.jsは、WebGLまたはWebGPUを使用してブラウザ内で3Dグラフィックスを直接レンダリングするJavaScriptライブラリです。ゲームエンジンではなく、レンダリングの基盤です。

シーングラフ、カメラ、ライト、マテリアル、ローダー、レンダラーが提供されます。物理演算、オーディオ、ゲームループ、UIはエコシステムから追加するか、自分で構築します。

エコシステムは巨大です。React Three FiberはThree.jsを宣言的なReactコンポーネントに変えます。Rapierで物理演算を追加。Dreiは数十の既製ヘルパーを提供します。npm週間500万ダウンロードにより、あらゆる問題が既に解決されています。

Web向け3Dライブラリの詳細比較はThree.js vs Babylon.js vs PlayCanvas比較ガイドをご覧ください。Three.jsエコシステムの最新動向はThree.js 2026年：何が変わったのか？で解説しています。

最適な用途： フルコントロールが必要なチーム、Reactベースのアプリケーション、軽量なWeb体験、プロダクトコンフィギュレーター、パフォーマンスとバンドルサイズが重要なプロジェクト

2-2. Unity WebGLエクスポート：ブラウザ内のゲームエンジン

Unityはフルゲームエンジン——エディタ、物理演算、アニメーション、パーティクル、オーディオ、ビジュアルスクリプティング——であり、WebAssemblyとWebGLを通じてブラウザで動作するようプロジェクトをエクスポートできます。

エクスポートにより、C#コードとエンジンランタイムがWASMにコンパイルされます。結果は<canvas>要素内で実行される自己完結型アプリケーションです。Unityのパワーをブラウザに持ち込む一方で、Unityの重さも持ち込みます。

空のUnity URPプロジェクトでもWASMだけで2〜4 MB。マテリアル、シェーダー、モデルを追加すると圧縮時10〜25 MBに達します。Unity公式ドキュメントでは、ビルドを15〜25 MB以内に抑えるための積極的な最適化を推奨しています。

最適な用途： 既存のUnity専門知識を持つチームで、複雑なゲームロジック、物理シミュレーション、クロスプラットフォーム展開（Web＋ネイティブアプリ）が必要な場合

3. パフォーマンス：数字で見る

3-1. バンドルサイズとロード時間

Webプロジェクトで最も差が大きく、影響力のある領域です。

Three.jsは通常のWebサイトと同様にロードされます——プログレッシブで、ストリーミング可能で、アセットはオンデマンドでフェッチされます。Unity WebGLは何もレンダリングする前に、WASMエンジン全体をダウンロードしてデコンパイルする必要があります。

Needle Toolsの比較によると、同等のビジュアル品質でThree.js実装はUnity WebGLエクスポートの3〜10分の1のペイロードを実現しています。

なぜ重要か： ロード時間が1秒増えるごとにコンバージョンが低下します。マーケティングサイトやプロダクトコンフィギュレーターでは、20秒のロードは致命的です。一方、ユーザーが待ち時間を受け入れる社内研修プラットフォームでは許容範囲です。

3-2. ランタイムパフォーマンス

ロード後は、どちらの技術もデスクトップハードウェアでスムーズな60 FPSを実現できます。差が出るのは負荷時と低スペックデバイスです：

• デスクトップ（最新GPU）： どちらも中程度のシーンで60 FPSを達成。Unityの組み込み最適化（LOD、オクルージョンカリング）は複雑なシーンですぐに効果を発揮
• ミッドレンジモバイル： Three.jsはCPUオーバーヘッドが低く、より高い持続FPSを維持——Emscriptenの変換レイヤーがないため。Unity WebGLはドローコールコストが10〜30%高く、メモリ圧力も大きい
• コンピュート集約型ワークロード： Three.js + WebGPUコンピュートシェーダーは、同等のWebGL実装に対して2〜3倍のパフォーマンス向上を実現。Unity WebGLにはWebGPUパスがない

3-3. WebGPU：広がる差

Three.jsはr171（2025年9月）でプロダクション対応のWebGPUサポートを出荷しました。設定不要——WebGPURendererをインポートするだけです。2026年初頭時点で全主要ブラウザがサポート。

Unity WebGLエクスポートはWebGL 2.0のみを対象としています。WebGPUエクスポートパスは存在せず、発表もされていません。

WebGPU + Three.jsの移行技術の詳細は、WebGPU + Three.js移行ガイドをご覧ください。

4. 開発コストとタイムライン

4-1. プロジェクトタイプ別のコスト目安

2025〜2026年のエージェンシー・フリーランス料金に基づく（日本国内：時給8,000〜15,000円、米国/欧州：$80〜150/時）：

4-2. 開発速度

Unityのエディタは特定のワークフローにおいて確かに高速です。物理演算、アニメーションステートマシン、パーティクルシステム、衝突検知が必要なら、Unityはすべてをすぐに使えます。Unityチームなら数日で動くプロトタイプを作成可能です。

Three.jsではこれらの部品を組み合わせる必要がありますが、エコシステムは成熟しています。React Three Fiber、Rapier物理演算、GSAPアニメーションでほとんどのニーズをカバー。スクロールドリブンアニメーション、DOM連携、Reactステート管理といったWebネイティブ体験では、Webプラットフォームと連携して作業するため、Three.jsの方が速くなります。

4-3. 継続的なメンテナンス

5. ライセンスと隠れたコスト

5-1. Three.js：MITライセンス（永久無料）

Three.jsはMITライセンスです。シート制限なし、売上上限なし、ランタイム料金なし。10億円の製品を作ってもライブラリへの支払いは発生しません。

エコシステムも同様：React Three Fiber（MIT）、Drei（MIT）、Rapier（Apache 2.0）。フレームワーク総コストは0円です。

5-2. Unity：サブスクリプション + 売上閾値

Unityの価格体系は2024〜2025年に大きく変更されました。物議を醸したRuntime Feeは撤廃。2026年の価格：

5名の開発チームなら、コードを1行書く前にUnityライセンスだけで年間約170万円。複数年プロジェクトでは差が拡大します。

6. SEOとディスカバラビリティ

6-1. Three.js：DOM統合とクローラビリティ

Three.jsは<canvas>にレンダリングしますが、通常のWebページ内に存在します。セマンティックHTMLを3Dコンテンツの上に、周りに、横に配置できます：

• DOM内のテキストコンテンツはGoogleとAI検索エンジンにクロール可能
• Core Web Vitals（LCP、CLS、FID）は小さなバンドルでスコアが向上
• 没入型ストーリーテリングパターンとの統合で、3Dがコンテンツを置き換えるのではなく強化

6-2. Unity WebGL：ブラックボックス問題

Unity WebGLはすべてを単一の<canvas>内にレンダリング。検索エンジンから見ると：

• canvas要素が1つ
• クロール可能なテキストなし
• セマンティックHTML構造なし
• アクセシブルなランドマークなし

3Dコンテンツが検索で発見される必要がある場合（商品ページ、マーケティング、教育コンテンツ）、Three.jsはUnityでは実現できない構造的優位性を持ちます。

7. モバイル・ブラウザ互換性

WebGL 2.0は2026年のモバイルブラウザで92%以上のグローバルサポートを持ちます。両技術とも対象にできますが、体験は異なります：

8. Unityが勝つケース

特定の明確に定義されたシナリオでは、Unityが正しい選択です。

8-1. 複雑なゲームロジックと物理演算

物理シミュレーション、ラグドールシステム、複雑なAI、衝突検知、アニメーションステートマシンが必要なら、Unityはこれらすべてを標準装備しています。Three.jsで同等のシステムを構築するには数週間〜数ヶ月のカスタム開発が必要です。

ゲーム性が高いブラウザ体験については、ゲーム公式サイトを「体験」に変えるガイドもご覧ください。

8-2. 既存のUnityコードベースとチーム

組織に10名のUnity/C#開発者がいてJavaScript専門家がゼロなら、再教育は高コストです。既存のUnity専門知識を活用してWebエクスポートするのは実用的——特に長期的なWebメンテナンスが優先事項でないワンオフプロジェクトでは。

8-3. クロスプラットフォーム対応

UnityはiOS、Android、Windows、macOS、コンソール、VRヘッドセット、Webに単一コードベースからエクスポートします。プロジェクトが3つ以上のプラットフォームで一貫した動作を本当に必要とするなら、Unityの「一度構築、どこでもデプロイ」モデルには実際の価値があります。

8-4. ビジュアルスクリプティングとノンコーダーワークフロー

UnityのVisual Scripting（Bolt）とTimelineツールにより、デザイナーや非プログラマーが複雑な挙動を作成可能。コードを書かずにイテレーションする必要があるアーティストやデザイナーがチームにいるなら、Unityのエディタは真の生産性倍増装置です。

3D eラーニング・研修体験では、インストラクショナルデザイナーを含む開発チームにおいて、Unityのオーサリングツールがコンテンツ制作を大幅に加速できます。

9. Three.jsが勝つケース

9-1. 軽量なWeb体験とマーケティングサイト

3DコンテンツがWebサイトの一部——全体ではなく——であるなら、Three.jsが明確な勝者です。ヒーローアニメーション、インタラクティブな商品ショット、スクロールドリブンの3Dシーケンス：高速にロードし、スムーズにレンダリングし、他のWebスタックと競合しない必要があります。

9-2. プロダクトコンフィギュレーターとEコマース

Three.jsで構築されたEコマース商品ビューアーは、DRACOで圧縮されたglTFモデルで合計5 MB未満のペイロードを常に達成し、2〜6秒でロードします。同じコンフィギュレーターをUnity WebGLで作ると15〜25 MBで8〜20秒のロード時間です。

コンバージョンが重要なページでは、このロード時間の差は直接売上に影響します。

9-3. SEOが重要なコンテンツ

オーガニック検索トラフィックが重要なページはすべてThree.jsを使うべきです。DOM統合、小さなバンドル、優れたCore Web Vitalsスコアにより、Unityの最適化では再現できない構造的優位性が得られます。

9-4. React/Vue/Svelte統合

React Three FiberはReactアプリケーションにおける宣言的3Dの業界標準です。VueにはTresJS、SvelteにはThrelteがあります。JavaScriptフレームワークエコシステムはThree.jsをファーストクラスシチズンとして扱います。

Unity WebGLはフレームワークの外に位置します。UnityとWebアプリ間の通信にはSendMessage()ブリッジが必要——脆弱で、型がなく、デバッグが困難です。

9-5. WebGPUパフォーマンス目標

コンピュートシェーダー、GPU駆動パーティクルシステム、高度なポストプロセッシングが必要なら、Three.js + WebGPUが唯一のブラウザネイティブパスです。

パフォーマンス最適化テクニックの詳細は、Three.jsベストプラクティス100選をご覧ください。

10. 意思決定フレームワーク

ここから始めてください。正直に答えましょう：

1. プロジェクトに複雑なゲームロジック（物理演算、AI、ステートマシン）が必要ですか？

• はい → Unityに大きなアドバンテージがあります。#2に進む。
• いいえ → Three.js。 ここで決定。

2. 既存チームにUnity/C#の専門知識がありますか？

• はい → Unityエクスポートは実行可能。#3に進む。
• いいえ → Three.js。 Unity for Webの採用とランプアップコストがメリットを上回ります。

3. ロード時間が重要ですか（マーケティングサイト、Eコマース、SEO）？

• はい → Three.js。 Unityの15〜30秒ロードはコンバージョンを殺します。
• いいえ → #4に進む。

4. クロスプラットフォーム対応が必要ですか（Web + ネイティブアプリ）？

• はい → Unity。 複数プラットフォーム向け単一コードベース。
• いいえ → #5に進む。

5. 予算に制約がありますか？

• はい → Three.js。 ライセンス0円、少人数チームで対応可能。
• いいえ → どちらでも可。チームの強みで選択。

11. Utsuboについて

UtsuboはThree.js開発、インタラクティブ・インスタレーション、没入型Web体験を専門とするクリエイティブスタジオです。

大阪万博2025でのインスタレーション展開、Eコマースブランド向けプロダクトコンフィギュレーター構築、WebGPU移行による100倍のパフォーマンス改善など、多くの実績があります。チームには、Three.jsコアコントリビューターのRenaud Rohlingerが在籍しています。

私たちの立場を明確にします：毎日Three.jsで開発しており、ほとんどのWeb 3Dプロジェクトで最適な選択だと考えています。しかし、プロジェクトがそれを必要とする場合——特に既存のUnityパイプラインを持つゲーム性の高い体験では——Unity WebGLを推奨したこともあります。

12. ご相談ください

次のWebプロジェクトでThree.jsとUnityの選択に悩んでいますか？私たちはインタラクティブ体験、プロダクトコンフィギュレーター、没入型ブランドプロジェクトでチームと協業しています。

パートナーシップをご検討中なら、プロジェクトについてお話しましょう：

• 何を構築しているか、どのような制約があるか
• 目標に対してどの技術アプローチが適切か
• 私たちが実行をお手伝いするのに適したパートナーかどうか

プロジェクトについて相談する

メールをご希望ですか？ contact@utsubo.co

意思決定者チェックリスト

• 主なユースケースを特定した（コンフィギュレーター、マーケティング、ゲーム、研修）
• チームの既存スキルを評価した（JavaScript vs Unity/C#）
• 合計バンドルサイズと許容ロード時間を見積もった
• SEO/オーガニック検索が要件かどうか確認した
• プロジェクト全期間のライセンスコストを評価した
• モバイルデバイスのサポート要件を確認した
• ターゲットデバイスでプロトタイプのパフォーマンスをテストした
• WebGPUを長期的なパフォーマンス戦略として検討した
• クロスプラットフォーム要件を確認した（Webのみ vs マルチプラットフォーム）
• 各アプローチで2〜3社のベンダー見積もりを比較した

出典・参考資料

• Needle Tools：Three.js vs Unity WebGL比較
• Unity：Runtime Fee撤廃と価格変更
• Unity公式ドキュメント：WebGLパフォーマンス
• Can I Use：WebGL 2.0ブラウザサポート
• Ravespace：ピクセルストリーミング vs WebGL/Three.js
• NPM Trends：Three.jsダウンロード数

よくある質問

Unity WebGLは本番のWeb体験として十分な品質ですか？

特定のユースケースでは、はい。Unity WebGLは本番環境のブラウザゲーム、研修シミュレーション、社内ツールで使用されています——ユーザーが長めのロード時間を受け入れる場合。公開向けマーケティングサイト、商品ページ、第一印象が高速ロードに依存するコンテキストには不向きです。実プロジェクトでは8〜30秒の初期ロードを想定し、Unityが推奨する15〜25 MBのターゲットに到達するための積極的な最適化（Brotli圧縮、アセットストリーミング、コードストリッピング）を計画してください。

Three.jsのWebプロジェクトはUnity WebGLと比べてどのくらいのコストですか？

Three.jsプロジェクトは、同等のWeb体験で通常20〜40%低コストです。プロダクトコンフィギュレーター：200万〜800万円（Three.js）vs 300万〜1,200万円（Unity）。マーケティングサイト：150万〜600万円 vs 350万〜1,000万円。Three.jsはライセンスでも節約——永久無料 vs Unity Proで年間約34万円/シート。複雑なゲーム的体験ではUnityの組み込みツールが開発を加速するため、差は縮まります。

Unity WebGLのコンテンツはGoogle検索結果にランクインできますか？

Unity WebGLのcanvas自体は検索クローラーから見えません——テキスト、リンク、セマンティックHTMLがありません。Unity埋め込みの周りにHTMLコンテンツを構築できますが、3D体験自体はSEOに何の貢献もしません。Three.jsアプリケーションはcanvas上にクロール可能なDOMコンテンツを配置でき、より良いCore Web Vitalsスコアを達成し、インデックス用のテキストを提供します。オーガニック検索が重要なページでは、これが決定的な優位性です。

Unity WebGLはiPhoneとiPadで動作しますか？

はい、ただし制約があります。iOS SafariにはWASMメモリ制限があり、シーンの複雑さが制限されます。オーディオの自動再生ルールはより厳格です。大きなバンドル（20 MB以上）は低速なモバイル回線で失敗したり、Safariのメモリ上限に達する可能性があります。Three.jsアプリケーションはフットプリントが5〜10分の1であるため、これらの問題に直面しません。

チームが既にUnityを知っている場合、Unity WebGLを使うべきですか？

プロジェクトタイプによります。複雑な物理演算を伴うブラウザゲームを構築し、チームに数年のUnity経験があるなら、その専門知識を活用するのは合理的です。しかし、プロジェクトがWebファーストなら（マーケティングサイト、プロダクトコンフィギュレーター、SEO重要コンテンツ）、再教育コストにもかかわらずWebネイティブアプローチが勝つことが多いです。

WebGPUはThree.js vs Unityの比較をどう変えますか？

大きく変えます。Three.jsはr171（2025年9月）からWebGPUをネイティブサポートしており、コンピュートシェーダー、より良いドローコールバッチング、重いワークロードでの2〜3倍のパフォーマンス向上を実現。Unity WebGLエクスポートはWebGL 2.0のみ——WebGPUサポートは存在せず、発表もされていません。2〜3年のライフスパンを持つプロジェクトでは、Three.jsがGPUパフォーマンスの向上にアクセスし続ける一方、Unity WebGLは古いAPIに留まることを意味します。

Unity WebGLからThree.jsに後から移行できますか？

部分的には可能です。3Dアセット（モデル、テクスチャ）はUnityからglTF/GLBとしてエクスポートしてThree.jsで再利用できます。しかし、すべてのC#ロジック、アニメーションステートマシン、物理演算の設定、シェーダーはJavaScript/TypeScriptで書き直す必要があります。実際には、移行はポートというよりリビルドに近く——元のプロジェクトコストの60〜80%を見込んでください。最初から適切な技術を選ぶことで、このシナリオを回避できます。