Splat Labs
Back to Blog
Article

ウェブサイトに3D Gaussian Splatビューアを埋め込む方法

1行のHTMLで任意のウェブサイトにインタラクティブな3D Gaussian Splatビューアを埋め込む方法を学びましょう。埋め込みコードをコピーし、サイトに貼り付けて、訪問者がブラウザで直接フォトリアリスティックな3Dシーンを探索できるようにしましょう。

Splat Labs TeamFebruary 6, 20268 分で読める
Open Dataset
TutorialEmbedWeb DevelopmentGaussian SplattingHow-Toiframe
ウェブサイトに3D Gaussian Splatビューアを埋め込む方法

なぜ3D Gaussian Splatを埋め込むのか？

静的な画像や360度写真でも限られたことしか伝えられません。Gaussian Splatの埋め込みにより、ウェブサイトの訪問者は完全にフォトリアリスティックな3Dシーンを歩き回る能力を得ます — 任意の角度から回転、ズーム、探索 — すべてアプリを1つもインストールせずに。

不動産エージェントとしてリスティングを紹介する場合でも、建設会社として利害関係者とサイトの進捗を共有する場合でも、クリエイティブスタジオとしてインタラクティブなポートフォリオを構築する場合でも、Gaussian Splatビューアを埋め込むことで、受動的な視聴者をアクティブな探索者に変えます。

Splat Labs Cloudでは、埋め込みは1行のHTMLをコピーするだけで簡単です。

仕組み

Splat Labs Cloudにアップロードするすべてのプロジェクトに共有可能なビューアURLが付きます。そのURLはブラウザで直接開くことも、HTMLの<iframe>タグでラップして任意のウェブページに埋め込むこともできます — 自分のサイト、ブログ、Zillowリスティング、MLSページ、Notionドキュメント、またはWordPress、Squarespace、Webflowのようなブログシステム。

プロセスは以下のとおりです：

ステップ1：共有ダイアログを開く

Splat Labs CloudにGaussian Splatをアップロードして処理した後、プロジェクトを開きます。ビューアの左側にサイドバードロワーが表示されます。そのサイドバーの下部にある共有ボタンをクリックします。

共有ダイアログが開き、アクセス設定の制御と埋め込みコードの取得ができます。

Splat Labsの共有と埋め込みダイアログ — 埋め込みをクリックしてiframeコードを取得する Splat Labsの共有ダイアログ。「リンク共有を有効にする」がチェックされていることを確認してから、EMBEDボタンをクリックしてiframeコードを取得します。

ステップ2：埋め込みURLまたはコードを取得する

共有ダイアログで：

  1. **「リンク共有を有効にする」**がチェックされていることを確認します — これによりリンクを持つ誰でもプロジェクトを表示できます。
  2. EMBEDボタンをクリックして埋め込みセクションを展開します。

2つのフィールドが表示されます：

  • 埋め込みURL — Zillow、Notion、またはMLSのようなプラットフォームに直接使用または貼り付けることができるビューアURL。
  • 埋め込みコード — ウェブサイトに直接コピー&ペーストできる既製のHTML<iframe>スニペット。

埋め込みURLとHTMLコードを表示するSplat Labsの埋め込みコードダイアログ EMBEDをクリックすると、ダイアログに埋め込みURLとHTMLの全埋め込みコードが表示されます — どちらのフィールドの横にあるコピーアイコンをクリックします。

両方のフィールドには右側にコピーアイコンがあります。クリックすると値がクリップボードにコピーされます。

このURLは任意の最新ブラウザで動作するインタラクティブな3Dビューアを読み込みます — デスクトップ、タブレット、またはモバイル。

ステップ3：埋め込みコードを貼り付ける

埋め込みコードを取り（またはビューアURLを標準のHTML<iframe>タグでラップして）、ウェブサイトのHTMLに追加します：

<iframe
  src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

それだけです。訪問者はページを離れずにフルの3Dシーンを探索できるようになりました。

プロのヒント： ビューアがどのスクリーンサイズでもコンテナを埋めるようにwidth="100%"を設定します。レイアウトに合わせてheightを調整します — ほとんどのデザインには500〜700ピクセルがうまく機能します。

ライブサンプル

以下はSplat Labs Cloudでホストされている2つのGaussian Splatシーンです。ここで直接操作してください — クリック&ドラッグして回転し、スクロールしてズームし、すべての角度を探索します。これらの埋め込みはあなた自身のウェブサイトで無料で使用できます。各ビューアの下の埋め込みコードをコピーしてサイトに貼り付けてください。共有ビューアにはSplat Labsのウォーターマークが含まれています。

例1：建設現場

LiDARでキャプチャし、Gaussian Splatとして処理した数週間にわたる建設現場。これは建設チームが遠隔地の利害関係者と共有して、移動せずに現場を探索できるようにする埋め込みの種類です。

埋め込みURL：

https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat

埋め込みコード（コピー&ペースト）：

<iframe
  src="https://cloud.splatlabs.ai/viewer/e6d9b3eb-35bb-4a73-8499-8f2e3ad21d4b?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

例2：ニセコビレッジ — 雪のスキーリゾート

日本、ニセコの雪のスキーリゾートビレッジのフォトリアリスティックなキャプチャ。この種の没入型埋め込みは観光、ホスピタリティ、デスティネーションマーケティングに最適です — 潜在的な訪問者が予約する前にロケーションを探索できます。

埋め込みURL：

https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3

埋め込みコード（コピー&ペースト）：

<iframe
  src="https://cloud.splatlabs.ai/viewer/0729c1d5-8d65-4dbc-b4f4-a7ed4fbd6ce3"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

埋め込みのカスタマイズ

レスポンシブな高さ

任意のスクリーンで16:9のアスペクト比を維持するレスポンシブな埋め込みのために、iframeをコンテナでラップします：

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
  <iframe
    src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

このテクニック — アスペクト比ボックスとも呼ばれる — はビデオとマップの埋め込みに広く使用されています。4Kモニターからスマートフォンまですべてでビューアが美しく表示されます。

フル幅埋め込み

ビューアをコンテンツコラムの外に出して、ブラウザの全幅にわたって表示したいですか？このラッパーを使用します：

<div style="position: relative; width: 100vw; left: 50%; margin-left: -50vw;">
  <iframe
    src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
    width="100%"
    height="600"
    frameborder="0"
    allowfullscreen
    loading="eager">
  </iframe>
</div>

読み込み動作

  • loading="eager" — ページが読み込まれたときにビューアがすぐに読み込みを開始します。埋め込みがページの上部にある場合や主なコンテンツである場合に最適です。
  • loading="lazy" — ユーザーがスクロールしてビューアが表示されたときのみ読み込みます。複数の埋め込みがあるページやビューアがページの下にある場合に最適です。

プラットフォーム別埋め込みガイド

Splat LabsビューアはHTMLまたはiframeをサポートするどこでも動作します。以下はすべての主要プラットフォームの詳細なウォークスルーです。

WordPress

WordPressには、ブロックエディタ（Gutenberg）またはクラシックエディタを使用しているかどうかによって、iframeを埋め込むいくつかの方法があります。

ブロックエディタ（Gutenberg）— 推奨：

  1. ビューアを埋め込みたいページまたは投稿を開きます。
  2. +ブロックインサーターをクリックしてカスタムHTMLを検索します。
  3. カスタムHTMLブロックをページに追加します。
  4. ブロックに全iframeの埋め込みコードを貼り付けます。
  5. プレビューをクリックして正しくレンダリングされることを確認してから公開します。

クラシックエディタ：

  1. ページまたは投稿を開き、テキストタブ（ビジュアルではない）に切り替えます。
  2. 表示したい場所にiframeの埋め込みコードを直接貼り付けます。
  3. ビジュアルタブに戻ってプレビューしてから公開します。

プラグインの使用（オプション）：

頻繁にiframeを埋め込む場合、iFrameプラグイン（7万以上のアクティブインストールでWordPress.orgで利用可能）を使用すると、生のHTMLの代わりにシンプルなショートコードが使えます：

[iframe src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat" width="100%" height="600"]

これはHTMLビューに切り替える必要なく、ブロックエディタとクラシックエディタの両方で機能します。

Elementor / その他のページビルダー：

ElementorやDivi、Beaver BuilderなどのほとんどのページビルダーにはHTMLまたはコードブロックが含まれています。そのブロックをページにドロップしてiframeコードを貼り付けます。

トラブルシューティング： 埋め込みが空白スペースを表示する場合、WordPressサイトとSplat LabsビューアがどちらもHTTPS経由で提供されていることを確認してください。混合コンテンツ（HTTPSページ上のHTTP iframe）は最新のブラウザによってブロックされます。Splat Labs CloudはHTTPSを常に使用するため、これは問題にならないはずです。

Squarespace

SquarespaceはCode Blocksを通じてiframeをサポートしますが、注意すべき重要なプラン要件があります。

プラン要件： Code BlocksにJavaScriptまたはiframeを追加するには、ビジネス、コマーシック基本、コマーシック上位、コア、プラス、または上位プランが必要です。パーソナルプランではCode BlocksにプレーンHTML、Markdown、CSSのみがサポートされています — iframeはレンダリングされません。

埋め込み方法：

  1. Squarespaceのページエディタを開きます。
  2. 挿入ポイント（コンテンツセクション間の線）をクリックするか、ブロックを追加をクリックします。
  3. ブロックメニューからコードを選択します。
  4. コードブロックエディタに全iframeの埋め込みコードを貼り付けます。
  5. ブロックの外をクリックして保存します。埋め込みがエディタに表示されるはずです。

編集中に埋め込みが表示されない場合： これはSquarespaceがセキュリティ上の理由からログインしているときにiframeコンテンツを隠すことがある予期される動作です。プレビューをクリックするかシークレットウィンドウで公開サイトを表示して、訪問者向けに埋め込みが正しくレンダリングされていることを確認します。

ヒント： SquarespaceのパーソナルプランでCode BlocksにiframeがなくてSquarespaceを使用している場合、ビジネスプランへのアップグレードを検討してください — または訪問者が新しいタブで開けるように標準のハイパーリンクとしてSplat Labsビューアの直接URLをリンクします。

Webflow

WebflowはEmbed要素（コードEmbedとも呼ばれる）を通じてカスタムコードをファーストクラスのデザイン要素として扱います。

埋め込み方法：

  1. プロジェクトのWebflow Designerを開きます。
  2. 追加パネル（左サイドバーの**+**アイコン）を開きます。
  3. Embedを検索またはスクロールして（コンポーネントセクション下）、ビューアを表示したいキャンバス上にドラッグします。
  4. コードエディタが自動的に開きます — 全iframeの埋め込みコードを貼り付けます。
  5. 保存して閉じるをクリックします。

iframeはWebflowキャンバスで直接プレビューされます。<iframe>タグでラップされたコンテンツはDesignerでライブプレビューをレンダリングするため、すぐにSplat Labsビューアが見えるはずです。

プラン要件： Embed要素はすべてのWebflow Workspaceプラン（コア、グロース、エージェンシー、フリーランサー）およびアクティブなサイトプランを持つサイトで利用可能です。

Wix

Wixは外部コンテンツを埋め込むための専用HTML iFrame要素を提供します。

Wixエディタ — 埋め込み方法：

  1. Wixエディタで左サイドバーの**+（追加）**ボタンをクリックします。
  2. Embed Code → Embed HTMLに移動します。
  3. ページにグレーのボックスが表示されます — 希望の位置にドラッグし、必要に応じてサイズを変更します。
  4. 要素をクリックして、コードを入力をクリックします。
  5. コード（ウェブサイトアドレスではなく）を選択します。
  6. テキストボックスに全iframeの埋め込みコードを貼り付けます。
  7. 更新（または適用）をクリックします。

URL経由で埋め込む（代替方法）：

iframeコードを貼り付ける代わりに、ビューアURLを直接貼り付けることができます：

  1. 上記のようにEmbed要素を追加します。
  2. コードを選択する代わりに、ウェブサイトアドレスを選択します。
  3. Splat LabsビューアのURLを貼り付けます：https://cloud.splatlabs.ai/viewer/{project-id}?view=splat
  4. 適用をクリックします。

Wixの重要な注意点：

  • 埋め込みURLはHTTPSを使用しなければなりません。Splat Labs CloudはHTTPSで常に提供するため、これはすでに処理されています。
  • Wixのiframeはモバイルに自動的に変換されません。Wixのモバイルエディタで、モバイル画面用に特別に配置・サイズ調整されたEmbed HTML要素を追加する必要がある場合があります。

Notion

NotionはHTMLや<iframe>コードを直接受け付けません。代わりに、EmbedブロックにURLを貼り付けてコンテンツを埋め込み、Notionが裏でiframeのレンダリングを処理します。

埋め込み方法：

  1. ビューアを表示したいNotionページを開きます。
  2. 新しい行に/embedと入力するか、+ボタンをクリックしてEmbedを選択します。
  3. Splat LabsビューアのURL（iframeコードではなく — URLだけ）を貼り付けます： 
    https://cloud.splatlabs.ai/viewer/{project-id}?view=splat
  4. リンクを埋め込むをクリックします。

Notionはビューアをインラインフレームでレンダリングします。ブロックの上にカーソルを合わせて両側のハンドルをドラッグしてサイズを変更できます。

重要：URLを使用し、iframeコードではありません。 Notionのembedブロックはクリーンなhttps://URLを期待します。全<iframe>HTMLタグを貼り付けても機能しません。

Zillow / MLSリスティング

ZillowとほとんどのMLSプラットフォームはバーチャルツアーリンクをサポートしますが、標準のiframe埋め込みとは異なる方法で動作します。iframeコードを直接貼り付けるのではなく、専用のフィールドにビューアURLを提供します。

Zillowへの追加方法：

  1. zillow.comのZillowエージェントアカウントにログインします。
  2. リスティングダッシュボードに移動して物件を選択します。
  3. リスティングを編集をクリックします。
  4. 写真セクションまでスクロールします — その下にバーチャルツアーURLというラベルのフィールドがあります。
  5. Splat LabsビューアのURLを貼り付けます： 
    https://cloud.splatlabs.ai/viewer/{project-id}?view=splat
  6. 下までスクロールして更新をクリックして保存します。

Zillowはリスティングページに**「バーチャルツアーを見る」**ボタンを追加します。訪問者がクリックすると3Dビューアが開きます。

MLSへの追加方法：

ほとんどのMLSシステム（Flexmls、Matrix、Bright MLSなど）はリスティング編集ページにバーチャルツアーURLフィールドがあります。そこにSplat LabsビューアのURLを貼り付けます。

不動産専門家： バーチャルツアー付きのリスティングはより多くの閲覧数を得ます。Zillowは3Dツア付きのリスティングがなしのものより最大68%多くの閲覧数を得ると報告しています。Gaussian Splatウォークスルーを埋め込むことで、購入者が物件のあらゆる角度を探索できます — 24時間365日、どこからでも。

GitHub Pages

GitHub Pagesサイトは静的HTMLなので、iframeの埋め込みは簡単です — コードをHTMLまたはMarkdownファイルに直接貼り付けます。

HTMLファイルに：

ページの<body>内の任意の場所にiframeの埋め込みコードを貼り付けます：

<iframe
  src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

GitHub READMEファイルに関する注意： GitHubリポジトリページ（GitHub Pagesサイトではない）のREADME.mdに埋め込もうとしている場合、iframeはレンダリングされません。GitHubのMarkdownサニタイザーはセキュリティ上の理由からREADMEファイルの<iframe>タグを除去します。

React / Next.js

ReactとNext.jsプロジェクトでは、JSXでiframeを直接使用します。HTML<iframe>タグはネイティブで動作します — JSXの属性命名の違いに注意してください。

基本的なReactコンポーネント：

export default function SplatViewer({ projectId }) {
  return (
    <iframe
      src={`https://cloud.splatlabs.ai/viewer/${projectId}?view=splat`}
      width="100%"
      height="600"
      frameBorder="0"
      allowFullScreen
      loading="eager"
      style={{ border: 'none' }}
    />
  );
}

HTMLとの主なJSXの違い：

  • frameborder → frameBorder（キャメルケース）
  • allowfullscreen → allowFullScreen（キャメルケース）

WordPress以外のCMS / カスタムHTML / 任意のウェブサイト

ウェブサイトのHTMLソースファイルに直接アクセスできる場合、任意のページの<body>にiframeコードを貼り付けるだけです：

<iframe
  src="https://cloud.splatlabs.ai/viewer/{project-id}?view=splat"
  width="100%"
  height="600"
  frameborder="0"
  allowfullscreen
  loading="eager">
</iframe>

これは静的HTMLサイト、サーバーレンダリングサイト（PHP、Python、Rubyなど）、およびページソースを直接編集できるCMSで機能します。

よくある質問

埋め込みは無料ですか？

はい。すべてのSplat Labsプロジェクトは追加費用なしで共有・埋め込みできます。共有埋め込みにはSplat Labsのウォーターマークが表示されます。ビジネスおよびエンタープライズプランではブランディングを削減またはホワイトラベルオプションが利用できます。

訪問者は何かをインストールする必要がありますか？

いいえ。ビューアはWebGLを使用してブラウザで完全に動作します。Chrome、Safari、Firefox、Edge — デスクトップ、タブレット、モバイルで動作します。

初期カメラ位置を制御できますか？

はい。共有する前にSplat Labsビューアで好みのカメラアングルを設定します。埋め込みはその正確な位置で読み込まれます。

埋め込みはページ速度に影響しますか？

iframeはページコンテンツとは独立して読み込まれます。loading="lazy"を使用することで、ビューアはスクロールして表示されるときのみ読み込まれ、初期ページ読み込み時間への影響が最小限になります。

同じビューアを複数のページに埋め込めますか？

もちろんです。同じビューアを埋め込めるページ数に制限はありません。ビューアはSplat Labs CDNから提供されるため、どこでも速く読み込まれます。

埋め込みが空白スペースを表示するのはなぜですか？

最も一般的な原因は混合コンテンツのブロック（HTTPページがHTTPS iframeまたはその逆を読み込む）とX-Frame-OptionsまたはContent-Security-Policyヘッダーによるiframeのブロックです。Splat Labs CloudはすべてのビューアURLをHTTPS経由で提供し、デフォルトでiframeの埋め込みを許可するため、空白スペースが表示される場合は自分のサイトもHTTPS経由で提供されているかどうかを確認してください。

ビューアのブランディングをカスタマイズできますか？

無料の共有リンクにはSplat Labsのウォーターマークが含まれています。ビジネスおよびエンタープライズプランでは、ブランディングを独自のロゴに削除または置き換えるホワイトラベルオプションが利用できます。

自分自身の埋め込みを始める準備ができましたか？

Gaussian Splatビューアの作成と埋め込みは数分かかります：

  1. cloud.splatlabs.aiで無料でサインアップ
  2. Gaussian Splatファイル（PLY、SPLAT、KSPLAT、またはXGRIDS形式）をアップロード
  3. 共有をクリックして埋め込みURLまたはiframeコードをコピー
  4. ウェブサイト、ブログ、またはリスティングプラットフォームに貼り付ける

Splat LabsはあらゆるソースからのGaussian Splatsをサポートします — PortalCam、Lixel L2 Pro、Postshot、Kiri Engine、Luma AI、XGRIDS、または標準のsplat形式を出力するその他のツール。

無料で埋め込みを始める

特定のプラットフォームへの埋め込みについてヘルプが必要ですか？チームにお問い合わせください — 喜んでご案内します。

Related Articles

Splat Labsでの共有とアクセス制御
February 10, 202610 分で読める

Splat Labsでの共有とアクセス制御

Gaussian Splatプロジェクトをプライベートまたはパブリックで共有し、データへのアクセスを制御し、ビューアが見るものを管理する方法を学びましょう — 生のプロジェクトデータ、デリバラブル、フォルダー全体を含みます。

SharingAccess ControlTutorial+6 more
Read More
GLB 3DオブジェクトをGaussian Splatにインポート：AIバーチャルステージング + Meta SAMワークフロー
March 21, 20268分で読めます

GLB 3DオブジェクトをGaussian Splatにインポート：AIバーチャルステージング + Meta SAMワークフロー

ビューア内のAI画像ジェネレーターでステージングした写真を生成し、Meta Segment Anything Modelと3Dメッシュツールでオブジェクトをにし、Splat Labsシーンにインポートして配置 — ネイティブジオメトリのように歩き回れます。

TutorialGaussian SplattingGLB+4 more
Read More
Splat Labsでの自動フロアプラン生成：ステップバイステップチュートリアル
March 20, 20268分で読めます

Splat Labsでの自動フロアプラン生成：ステップバイステップチュートリアル

Gaussian Splatをきれいな2Dフロアプランと位置合わせされたミニマップに変換しましょう。クリッピングやラッソクリーンアップからAIスタイル、キャリブレーション、ナビゲーションまで—動画を見ながらSplat Labs Cloudで各ステップに沿って進めましょう。

TutorialFloor PlanSplat Labs Cloud+3 more
Read More
ウェブサイトに3D Gaussian Splatビューアを埋め込む方法 | Splat Labs Blog | Splat Labs - Gaussian Splat Cloud