ガウシアンスプラッティング × ランディングページ：スクロール演出で魅せる3Dストーリーテリング（2026年版）

この2年間、ガウシアンスプラットは「箱の中」に閉じ込められていました。空間をキャプチャし、ビューワーに収め、来訪者は通販サイトの3Dモデルのようにくるくると回す——最初は驚いても、2スクロール目には忘れられてしまう。そんな体験です。

その箱は、もう必要ありません。同じフォトリアルなキャプチャを、今度は物語の「舞台」として使えるようになりました。スクロールでカメラが動き、独自のライティングシステムで光が差し、物理エンジンに反応するインタラクティブな3Dオブジェクトと一体になる。キャプチャした空間そのものが世界となり、すべてがその中を動いていく——これがスクロール連動型のガウシアンスプラッティング・ランディングページです。

ホームページの片隅に置かれた3Dの「おもちゃ」ではありません。フォトリアルな現実とインタラクティブな3Dが一つのシーンを共有し、スクロールそのものがカメラになる、ヒーロー体験です。

「この記事の対象読者」：フラッグシップLPやプロダクトローンチを検討するブランド責任者、マーケティング担当者、経営者。動画では再現できないフォトリアルな差別化を求める方へ。

この記事のポイント

• 「何ができるのか」：フォトリアルなガウシアンスプラットのキャプチャを「環境」とし、スクロール位置がその中を進むシネマティックなカメラを駆動。リアルタイム3Dオブジェクト・物理・ライティングと融合させたランディングページです。
• 「動画に勝る理由」：動画は毎回同じ映像を再生するだけ。スプラットのシーンには本物の奥行きがあり、視差・インタラクション・キャプチャ世界の「内側」に存在する3Dオブジェクトが生まれます。
• 「難所は感動ではなく容量」：未圧縮のスプラットシーンは20〜200MB。これをLCP（表示速度）を損なわずに読み込ませる技術が肝。正しく作れば、フォトリアルなヒーローでもCore Web Vitalsをクリアできます。
• 「一度読み込めば動作は軽快」：デスクトップで60FPS、最新スマートフォンで30〜45FPS。同等のポリゴン表現よりはるかに低コストでフォトリアルを実現します。
• 「費用の目安」：キャプチャが7万〜70万円程度、スクロール連動型のスプラットLP制作は物理・インタラクティブ性・モバイル最適化に応じて200万〜800万円以上。
• 「成果が出る場面・出ない場面」：フラッグシップのヒーロー、プロダクトの初公開、明確なコンバージョン目的のあるローンチには最適。SEO主体のページや「とりあえず格好良く」という薄い狙いには不向きです。

スクロール連動型スプラットLPとは何か

混同されがちな3つを整理すると分かりやすくなります。

「静的なスプラットビューワー」。ご覧になったことがあるはずです——キャプチャした部屋や商品を枠内に収め、オービット操作で回せるもの。来訪者がカメラを動かします。検品用途（不動産ツアー、ECの商品アップ）には有効で、詳しくはガウシアンスプラッティング完全ガイドで解説しています。ただし受動的。ページが物語を語るのではなく、来訪者の操作を待つだけです。

「ジェネラティブ3Dのスクロールテリング」。StripeやAppleの製品ページの系譜です。スクロールがBlenderやthree.jsで作った3Dシーンの中をアニメーションさせる。美しく、物語性があり、実績も豊富——その手法は没入型ストーリーテリングサイトガイドにまとめています。ただし、その3Dは「モデリングされたもの」。CGに見えるのは、実際にCGだからです。

「スクロール連動型スプラットLPは、その第三の選択肢」です。1つ目のフォトリアルなキャプチャと、2つ目の物語的なカメラを組み合わせる。スクロールがシネマティックなカメラを「実際にキャプチャした場所」の中で動かし、同時にインタラクティブな3D要素——製品の形状、UI、空間に浮かぶタイポグラフィ——が同じシーンに合成され、来訪者に反応します。

差別化のキーワードはただ一つ、「フォトリアル」。ヒーローは製品や空間を様式化した3Dレンダリングではなく、光としてキャプチャされた「本物そのもの」。スクロールに応じてカメラがその中を滑っていきます。

なぜスプラットと本物の3Dを混ぜるのか——そしてそれが難しい理由

スプラット単体は美しくても、動きません。中にボタンを置いたり、オブジェクトを衝突させたり、別のムードに照らし直したりが容易にできない。スプラットはキャプチャされた光であり、CGジオメトリやインタラクション、シーンのライティングを本来は知らないのです。

それらを通常の3Dと「共存」させることこそが、本当のエンジニアリングです。Utsuboが本格的なR&Dを重ねてきた領域であり、この体験を成立させる核心です。

• 「three.js WebGPUレンダラー上の独自ガウシアンスプラッティングプレイヤー」：スプラットと通常のthree.jsオブジェクトを、同じパイプライン・同じシーンで、正しい前後関係を保ってレンダリング。3D製品がキャプチャ世界の一部より「手前」に、別の部分より「奥」に——現実と同じように配置できます。
• 「自社開発の物理エンジン」：キャプチャした空間の中でオブジェクトが衝突し、落下し、反応する。シーンがスクロールや入力に応じる——背景にとどまらない、体験が働きかける対象としてのスプラット環境です。
• 「自社開発のライティングシステム」：キャプチャシーンを照らし直し、スプラットと3Dオブジェクトの両方に作用するCGライトを導入。すべてが一貫したライティングモデルを共有し、2枚のレイヤーを貼り合わせたような不自然さがありません。

最後の点が、「スプラットにHTMLを重ねただけ」のものと、信じられる世界とを分けます。キャプチャした環境と注入した3Dが同じ光・同じ物理に反応するとき、来訪者は仕掛けを見抜くのをやめ、その空間を信じ始めます。

枠組みについて正直に申し上げると、 end-to-endで構築する個別のランディングページは、貴社ブランド向けに「ご提供可能なコンセプト」です。基盤となる技術——WebGPUスプラットプレイヤー、物理、ライティング統合——は実在し、すでに構築済みです。エンジンは当社が持ち込み、ページがご依頼内容となります。

スクロールが「演出家」になる

従来のランディングページでは、スクロールはドキュメントを動かします。この体験では、スクロールが「世界の中のカメラ」を動かし、その世界が行うすべてを引き起こします。

一本のスクロールタイムラインが駆動できるもの：

• 「カメラパス」——キャプチャ空間へのゆっくりとした寄り、スケールを見せる引き、中に置いた製品の周回。
• 「リビール」——スプラットや3Dオブジェクトの一部が、来訪者の降下に合わせてフェードイン・フォーカス・組み上がる。
• 「物理の見せ場」——特定のスクロール位置で、オブジェクトが落下・飛散・着地し、ドラマを生む。
• 「ライティングの変化」——キャプチャシーンが朝から夕へ、スポットライトが製品を捉え、物語に合わせてムードが移ろう。

このオーケストレーションの手法は、あらゆるプレミアムな物語型サイトを支えるスクロールトリガーと同じ——GSAPとScrollTriggerが業界標準であり、物語の作り込みは没入型ストーリーテリングガイドで詳述しています。ここで異なるのは「演出される対象」。モデリングされたシーンではなく、本物の3Dと物理が内側に息づくフォトリアルなシーンなのです。

ファイル容量：成否を分ける最重要ポイント

ここが正直な制約であり、ご依頼前に意思決定者の方に最も理解いただきたい点です——「スプラットは重い」。

キャプチャした生のシーンは、ごく普通に20〜200MBに達します。通常のLPヒーロー画像は数百KB。フルのスプラットシーンを無造作にページへ置けば、Largest Contentful Paint（最大コンテンツの描画）は崩壊し、モバイルユーザーは離脱し、美しい体験は誰の目にも触れません。

ゆえに、これを「うまく」やる技術のすべては、その重さを先に支払わずに読み込ませることにあります。

• 「圧縮」：最新フォーマット（SPZ・KSPLAT・SOG）は、生のPLYに対しファイルサイズを5〜10分の1に圧縮し、視覚的な損失はわずか。Web配信では必須です。
• 「レベル・オブ・ディテール（LOD）」：まず軽量版を配信し、来訪者が留まりスクロールするにつれて精細化。冒頭フレームは高速に読み込まれ、フル精細はその裏で届きます。
• 「プログレッシブ／遅延読み込み」：ヒーローはシーン全体ではなく最初の一拍だけがあればいい。残りは来訪者がスクロールで近づくにつれてストリーミングされ、初期描画は軽く、LCPは良好に保たれます。
• 「モバイルの容量設計」：スマートフォンはデスクトップのスプラット数を運べません。20万〜50万スプラット（デスクトップは100万〜200万）を目標とし、低スペック端末には優雅なフォールバックを用意することで、トラフィックの大半を占めるモバイルでも高速を維持します。

重要な捉え方は——「容量は障壁ではなく規律」。これはまさにSaaSマーケティングサイトのエンジニアリングで解説した「遅延読み込みされ、LCPをクリアする一つのWebGLサーフェス」の原則を、ページ上で最も負荷の高いアセットに適用したものです。読み込みの作業をこなすチームが扱えば、フォトリアルなスプラットヒーローはCore Web Vitalsと「両立」して出荷できます。雑に扱えば、サイト上で最も重い失敗になります。

利点：パフォーマンスとインパクト

シーンさえ読み込まれれば、計算は貴社に有利に傾きます。

「パフォーマンス」。ガウシアンスプラットはリアルタイムでレンダリングされ——デスクトップで60FPS、最新スマホで30〜45FPS——同等に精細なポリゴンシーンよりGPU負荷が低いことも多い。シェーディングすべき数百万のトライアングルが存在しないからです。WebGPUはこれをさらに推し進め、スプラット処理でWebGLに対し有意な高速化をもたらします。生き生きとしたフレームレートで、フォトリアルな精細さが得られます。

「インパクト」。ここで予算が正当化されます。

• 「差別化」：フォトリアルでスクロール連動、インタラクティブなスプラット体験を出荷している企業はほとんどありません。ヒーローに同じようなツールのシーンを置いた、横並びのサイトには見えません。
• 「滞在時間」：探索したくなる世界なら、人は最後までスクロールします。奥行きとインタラクティブ性は、ループ動画とは違う形で注意を惹きつけます。
• 「拡散性・PR」：真に新しいヒーローは、投稿され、リンクされ、記事になる。体験そのものが流通経路になります。（没入型3Dが注意を捉える脳科学的な理由はデジタルの畏敬の心理学で扱っています。）

使うべき場面・使わざるべき場面

これは切れ味の鋭い道具です。目的を持って使ってください。

「スクロール連動型スプラットLPを選ぶべき」なのは、場所や製品の「実在性」そのものが物語になるとき——キャプチャしたフラッグシップ店舗、実在のホテル、素材の質感が訴求点となる物理製品——かつ、驚きの先にコンバージョン目標があるときです。

「避けるべき」なのは、ページの主目的がSEOとテキストの発見性であるとき（これらはランキング用ページではなくコンバージョン・インプレッション用の面です。従来型の構造と組み合わせてください）、様式化したシーンよりフォトリアルである必然性がないとき、あるいは来訪者の大半が低スペックモバイルで体験が大きく劣化してしまうときです。

費用と期間

ここでは2つの費用レイヤーが積み重なります。

「キャプチャ」——フォトリアルなシーンの取得：空間や対象の規模・複雑さに応じて7万〜70万円程度。ガウシアンスプラッティング完全ガイドの数値と整合します。

「カスタムランディングページ」——その上にスクロール連動体験を構築：通常「200万〜800万円以上」。金額を動かす要因：

• カメラと物語の複雑さ（単純な寄り vs. 複数シーンの旅）
• 物理とインタラクティブ性（静的な美しさ vs. 反応するオブジェクト）
• ライティング統合（キャプチャの光を使う vs. 完全に照らし直しムードが変化するシーン）
• 「モバイルQAと読み込み最適化」——後回しの作業ではなく、独立した費用項目として計上を。Core Web Vitalsを守る作業です
• シーンに合成する3Dオブジェクトの制作

期間は概ね4〜10週間：まずキャプチャと処理、続いてシーン構築、スクロール演出、そして出荷可能にする読み込み・モバイル最適化のパスです。

よくある質問（FAQ）

「ガウシアンスプラッティングのヒーローはSEOや表示速度を損ないませんか？」 読み込みの規律を守って構築すれば損ないません。スプラットシーンは遅延読み込みとプログレッシブストリーミングで配信され、Largest Contentful Paintは良好に保たれます——重いデータは初期描画の前ではなく裏で届きます。これらのページはコンバージョン・インプレッション用の面と捉え、検索発見性のための従来型テキスト構造は別途維持してください。

「モバイルでも動作しますか？」 はい、適切な容量設計があれば。スマートフォンは、スプラット数を抑え（デスクトップの100万〜200万に対し20万〜50万）、低スペック端末に優雅なフォールバックを用意することで、最適化シーンを30〜45FPSで動かします。モバイル最適化は追加オプションではなく中核スコープです。

「ファイルは実際どれくらい大きいのですか？」 生のシーンは20〜200MB。圧縮（SPZ/KSPLAT/SOGで5〜10分の1）に加え、LODとプログレッシブ読み込みにより、来訪者はヒーローを見る前にフルの重さをダウンロードすることはありません——最初の一拍を高速に受け取り、残りはスクロールに応じてストリーミングされます。

「本当にスプラットと物理・3Dオブジェクトを混ぜられるのですか？」 はい——それが当社R&Dの核心です。独自スプラットプレイヤーはthree.js WebGPUレンダラー上で動作し、自社開発の物理エンジンとライティングシステムを備えています。フォトリアルなスプラットと通常の3Dオブジェクトが一つのシーン・一つの深度バッファ・一つのライティングモデルを共有。オブジェクトはキャプチャ空間内で衝突し、スクロールに反応します。

「動画ヒーローではいけないのですか？」 動画は固定された一本の映像を再生するだけで、奥行きもインタラクションもありません。スプラットシーンは本物の3D——視差、スクロールで来訪者が動かすカメラ、キャプチャ世界の内側に生きるインタラクティブなオブジェクト。空間を「眺める」のと「その中にいる」のとの違いです。

「このようなプロジェクトの費用と期間は？」 キャプチャが7万〜70万円、カスタムのスクロール連動LPは物理・インタラクティブ性・ライティング・モバイル調整に応じて200万〜800万円以上。キャプチャからローンチまで概ね4〜10週間を想定してください。

Utsuboについて

Utsuboはリアルタイム3D Web体験を専門とするクリエイティブテクノロジースタジオです。スクロール連動型ガウシアンスプラッティングLPのために、当社のツールキットは内製で構築されています。

• 「three.js WebGPUレンダラー上の独自ガウシアンスプラッティングプレイヤー」：スプラットと通常の3Dオブジェクトを、一つのパイプライン・一つのシーンで、正しい前後関係を保ってレンダリング。
• 「自社開発の物理エンジン」：キャプチャ世界の中でオブジェクトが衝突・落下・反応し、シーンがスクロールや入力に応じます。
• 「自社開発のライティングシステム」：キャプチャシーンを照らし直し、スプラットと3Dオブジェクトの両方に作用するCGライトを導入。すべてが一貫したライティングモデルを共有します。
• 「Web最適化パイプライン」：圧縮・LOD・プログレッシブ読み込みにより、フォトリアルなシーンをCore Web Vitalsをクリアした状態で出荷します。
• 「没入型ウェブサイト」：スクロール連動の物語とブランドストーリーテリングを、コンセプトからローンチまで。

当社は初期からThree.jsで開発を続け、技術の成熟とともにガウシアンスプラッティングをツールキットに統合してきました——スプラットをリアルタイム3D・物理・ライティングと一つの一貫したシーンで共存させる、より難しい課題も含めて。

お問い合わせ

フラッグシップのヒーローでも、プロダクトのローンチでも、スクロール連動型スプラット体験が適しているか、そして高速性を保ったまま出荷するには何が必要かを、ご一緒に判断します。

「30分の無料相談」で、コンセプト・キャプチャ・現実的な読み込みと予算計画についてお話ししましょう。

• 「予約」：cal.com/utsubo/30min
• 「メール」：contact@utsubo.co