Three.js MS11 Phase 3 採用可否 調査レポート
結論サマリ（3行）
- Three.js は MS11 Phase 3 に「パターンA: Canvas差し込み型」で採用推奨。MITライセンス・最新r185・Astro Island Architectureと相性が極めて良く、YAML駆動の業種別カスタマイズ（FV装飾だけ差し替え）と親和性が高い。
- 全面Three.js化（パターンB）はNoGo。LCP/INP/CLS悪化リスクと制作コストが業種テンプレ量産モデルに合わない。
- 既存 boss-3d-demo（動画埋込型）との差別化軸は「インタラクティブ性」「DOMオーバーレイによるSEO」「YAMLパラメータでシーン制御」。動画埋込は維持しつつ、Three.js版を上位プラン（15〜30万円）として並走させるのが筋。
1. Three.js 概要
| 項目 | 内容 |
|---|---|
| 最新バージョン | r185（2026年時点） |
| ライセンス | MIT License（商用利用可、著作権表示のみ義務） |
| 種別 | WebGL/WebGPU ベースのJavaScript 3Dライブラリ |
| 2026年トピック | WebGPURenderer が全主要ブラウザで production-ready 化、draw-call重いシーンで最大10倍高速化 |
| エコシステム | three-mesh-bvh、GLTFLoader、Three.js Editor、Chrome DevTools拡張 |
| 公式 | threejs.org ／ GitHub mrdoob/three.js LICENSE |
主要機能：シーングラフ／カメラ／ライティング／PBRマテリアル／GLTFローダー／ポストプロセッシング／WebXR対応。
2. 既存スタックとの統合
MS11 Phase 3 既存スタック: Astro 4.16 + Tailwind 3.4 + js-yaml + (GSAP/AOSは追加予定)
親和性
- Astro Island Architecture と相性が良い: 静的HTMLを全面配信しつつ、Canvasコンポーネントだけ
client:visibleなどで部分ハイドレーション可能。Core Web Vitals を維持したまま3D演出を載せられる（Three.js Astro Integration Guide）。 - GSAP との組み合わせは2026年の業界標準: ScrollTrigger でカメラ移動／オブジェクト出現を制御するパターンが確立。Codropsでも事例多数（Codrops: WebGL Gallery with GSAP, Three.js, Astro and Barba.js）。
- Tailwind v4 への移行: Astro 4系では
@tailwindcss/viteプラグイン推奨。MS11 Phase 3 で Tailwind v4 に上げるなら同時対応推奨。 - YAML駆動カスタマイズ: シーン内オブジェクト数・色・カメラ動線をYAMLパラメータ化することで、業種別差し替えに対応可能（後述パターンA）。
注意点
- Astro の SSG 出力にはCanvasは載らないため、ハイドレーション境界の設計が必要
- bundle size: three本体 約160KB (gzip)、業種別シーンで +50〜200KB 程度を想定
3. パターン比較（A: 部分差し込み / B: 全面化）
| 観点 | パターンA: Canvas差し込み型（推奨） | パターンB: 全面Three.js化 |
|---|---|---|
| 適用範囲 | FV／セクション境界の装飾のみ Three.js、本文はDOM | ページ全体を WebGL シーンで構築 |
| LCP | DOMテキストがLCP対象 → 良好（2.5s以下狙える） | Canvas描画完了がLCP → 劣化リスク大 |
| CLS | Canvas領域固定で抑制可能 | リサイズ／ロード順序で揺れやすい |
| INP | DOMイベント主体で良好 | WebGL内インタラクションでメイン落ちリスク |
| SEO | DOMオーバーレイでテキスト全文クロール可能 | テキストが少なく不利、別途SSR対策必須 |
| YAML駆動親和性 | 高（FV装飾パラメータをYAMLに3〜5項目追加するだけ） | 中（シーン全体定義が肥大化、業種別差替が重い） |
| 初期実装コスト | 中：1業種3〜5人日 | 高：1業種10〜15人日 |
| 学習コスト | 低〜中：FV装飾レベルなら2〜3日でキャッチアップ可 | 高：シーン設計／パフォーマンスチューニングの専門知識必須 |
| 運用コスト | 低：YAMLでパラメータ調整、シーンテンプレ流用 | 高：業種ごとにシーン再設計が発生 |
| 既存3Dデモとの差別化 | 「動画埋込」より上位の体験プランとして並走可能 | 既存サービスを置き換える形になり混乱 |
| 失敗時の影響範囲 | Canvasのみ非表示でフォールバック可能 | ページ全体崩壊リスク |
| 判定 | 採用推奨 | 不採用 |
参考: Three.jsはDOMオーバーレイで text を載せられ、Core Web Vitals／SEO 双方で動画背景より優位というレポートあり（utsubo.com: What's New in Three.js 2026）。
既存 boss-3d-demo との比較
| 観点 | 動画埋込型（既存） | Three.js Canvas差し込み型（新規） |
|---|---|---|
| 体験 | 受動的（再生される動画を見る） | 能動的（スクロール／マウスで変化） |
| 業種カスタマイズ | 動画素材を毎回生成（Higgsfield/Runwayクレジット消費） | YAMLパラメータ差替（追加コストほぼゼロ） |
| 初期コスト | 動画生成 1〜3万円分のクレジット | 業種テンプレ初回構築のみ |
| 月次運用 | 動画差し替えごとに再生成 | YAML変更で即反映 |
| 提案単価 | 10〜15万円 | 15〜30万円（上位プラン化可能） |
| 差別化軸 | 映像クオリティ重視 | インタラクティブ性／長期運用コスト |
→ 両者を併売するのが最適。クライアント予算・業種特性で提案を出し分け。
4. 参考サンプル
- Hashgraph Ventures — 2026/6 Awwwards Site of the Day。コーポレートサイトでのThree.js活用事例。
- Razorpay Sprint 26 — 2026/5 Site of the Day + Developer Award。SaaS系LPでの参考に。
- AIR — 2026/5 Site of the Day + Developer Award。ブランドサイト演出。
- IVRESS — 2026/5 FWA of the Month。WebGPURenderer + WebGL fallback の構成。
- Codrops: Scroll-Revealed WebGL Gallery (GSAP+Three.js+Astro+Barba.js) — MS11スタックに最も近い実装解説。
5. 採用判断チェックリスト
Go（パターンA採用）の条件
- [x] 既存スタック（Astro+Tailwind）と統合可能 → ○（Island Architectureで対応）
- [x] MITライセンスで商用利用OK → ○
- [x] YAML駆動カスタマイズと親和 → ○（FVパラメータ3〜5項目で吸収可能）
- [x] LCP 2.5s以下を維持できる実装方針がある → ○（Canvas差し込み型なら可能）
- [x] 既存 boss-3d-demo と差別化／併売できる → ○（インタラクティブ性／上位プラン化）
- [x] 学習コストが現実的（2〜3日） → ○
NoGo（パターンB）の条件
- [x] FV以外でThree.js必須の要件がない → NoGoで良い
- [x] 業種テンプレ量産モデルに全面WebGL化はオーバースペック → NoGoで良い
- [x] SEO／Core Web Vitalsへの悪影響リスクが残る → NoGoで良い
確認待ち事項
- [ ] おすぎさんが「上位プラン15〜30万円帯」を商品ラインに乗せる意向があるか
- [ ] Naka森さんがThree.js実装担当として動けるか（自分か外注か）
- [ ] 6/23時点で止まっている3DスクロールデモのGo/NoGo（このレポートと同時判断）
6. 推奨アクション
- Phase 3.0: MS11 Phase 3 既存テンプレに FV Canvasスロット を追加（YAML項目
hero.threejs.{enabled, preset, color, intensity}の4つだけ）。Three.js本体はclient:visibleで遅延ロード。 - Phase 3.1: 業種別プリセット3種（例:
particles_clean/geometric_minimal/liquid_metal）を作成。1プリセット2〜3人日。 - Phase 3.2: 既存 boss-3d-demo（動画埋込型）と並列で営業提案。
- 標準プラン: 動画埋込（10〜15万円）
- 上位プラン: Three.js Canvas差し込み（15〜30万円、YAMLで運用しやすい点を訴求）
- Phase 3.3: Lighthouse スコア計測（モバイル LCP < 2.5s / CLS < 0.1 / INP < 200ms）を CI に組み込み、品質ゲート化。
- 6/23デモのGo/NoGo: 本レポートを Naka森さん／おすぎさんに共有 → Phase 3.0 着手承認をもって 3DスクロールデモもGo判定とする。
参考リンク（追加） - Three.js 公式 - Three.js GitHub LICENSE - Three.js Astro統合ガイド - Best Three.js Websites - Awwwards - Core Web Vitals 2026 ガイド - Three.js 2026年動向（utsubo）