Webサイトに3Dモデルを埋め込む方法｜model-viewer・iframe・WebAR対応

WebサイトやECサイトの商品ページに3Dモデルを表示すると、ユーザーが手元で商品を全方位から確認できるようになります。さらにWebARを組み合わせることで、実際の部屋に等身大で試し置きする体験も提供できます。

Webサイトに3Dモデルを埋め込む方法は、大きく分けて「<model-viewer>を直接記述する」「ホスティングサービスやWebARツールのiframeを貼り付ける」の2通りです。実装に必要な工数、表示のカスタマイズ性、運用体制に合わせて選ぶ必要があります。

本記事では、model-viewerを用いた直接実装の手順、ECプラットフォーム別の埋め込み方、表示速度を損なわないためのモデル軽量化手法、検索エンジン向けの構造化データ設定まで具体的に解説します。

---

Webサイトに3Dモデルを表示する手法の比較

自社サイトで3Dモデルを表示する場合、開発工数とカスタマイズの自由度がトレードオフになります。

自社でWebコンポーネントを管理し、細かなUI制御を行いたい場合はmodel-viewerの直接実装が適しています。一方、USDZの変換や3Dファイルの配信設定に手間をかけず、HTMLへのタグ追加だけで済ませたい場合はiframe埋め込みが向いています。

---

model-viewerを使った直接実装の手順

model-viewerは、Googleが開発しているオープンソースのWebコンポーネントです。HTMLタグを追加するだけで、3Dモデルの回転やズーム操作が可能なビューワーをページ上に配置できます。

なお、ブラウザ上での3Dプレビュー表示と、端末のカメラを用いたAR起動では動作要件が異なります。AR起動時は、iOSではQuick Look、Androidでは対応端末のScene ViewerまたはWebXRが呼び出されます。OSのバージョンだけでなく端末の対応状況にも依存するため注意してください。

1. スクリプトの読み込み

HTMLの<head>タグ内、または<body>の終了タグ直前に公式スクリプトを読み込みます。

<script
  type="module"
  src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"
></script>

2. 基本的な3Dビューワーの配置

GLB形式の3Dモデルファイルをsrc属性に指定します。

<model-viewer
  src="/models/product.glb"
  alt="商品の3Dモデル"
  camera-controls
  auto-rotate
  style="width: 100%; height: 400px;"
></model-viewer>

GLBファイルの作成方法については、GLBファイルの作り方完全ガイドで解説しています。

主要な属性の役割は以下の通りです。

3. AR機能の追加

スマートフォンでARを起動するには、ar属性とAR起動モードを指定します。iOS向けのios-srcを省略すると、AR起動時にUSDZを自動生成できます。アニメーションなどに制約があるため、変換結果が目的に合わない場合は、別途作成したUSDZをios-srcに指定してください（model-viewer公式のAR例）。

<model-viewer
  src="/models/product.glb"
  ios-src="/models/product.usdz"
  alt="商品の3Dモデル - ARで表示可能"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  shadow-intensity="1"
  exposure="0.75"
  style="width: 100%; height: 500px;"
>
  <button slot="ar-button" style="
    background: #1a73e8;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
  ">
    ARで見る
  </button>
</model-viewer>

Webサイトを公開する際は、WebXRやカメラアクセスのセキュリティ要件を満たすため、HTTPS環境での配信が必須です。また、GLBからUSDZへ変換する際、マテリアルの質感やアニメーションの挙動が完全に一致しない場合があるため、実機での表示確認を行ってください。

4. ポスター画像と遅延読み込みの設定

3Dモデルは画像に比べてデータ容量が大きいため、通信環境によっては表示までに時間がかかります。読み込み完了前に表示するプレビュー画像（ポスター）を設定しておくと、レイアウトの崩れを防ぎやすくなります。

<model-viewer
  src="/models/product.glb"
  alt="商品の3Dモデル"
  poster="/images/product-poster.webp"
  loading="lazy"
  reveal="auto"
  camera-controls
  auto-rotate
  style="width: 100%; height: 500px;"
>
  <div class="progress-bar" slot="progress-bar">
    <div class="update-bar"></div>
  </div>
</model-viewer>

loading="lazy"を指定すると、ユーザーが画面をスクロールしてビューワーに近づくまでファイル取得を保留します。ファーストビュー直下に置く場合の初期読み込み負荷を低減できます。

---

主要なECプラットフォームへの埋め込み手順

利用しているECカートやCMSによって、利用できる埋め込みタグの種類が異なります。Shopify、BASE、WordPressでの実装手順を整理します。

Shopifyでの実装

Shopifyは商品管理機能で3Dモデル（GLB）を標準サポートしています。

1. Shopify管理画面の「商品管理」から対象商品を開きます。
2. メディアセクションで「ファイルを追加」を選び、GLBファイルをアップロードします。
3. 利用中のテーマが3Dメディアに対応していれば、商品詳細ページにビューワーが表示されます。

テーマ標準のビューワーではなく、外部のWebAR表示画面をそのまま商品ページに埋め込みたい場合は、テーマエディタの「カスタムLiquid」や「カスタムHTML」ブロックにiframeコードを記述します。

<div style="width: 100%; max-width: 640px; margin: 0 auto;">
  <iframe
    src="https://your-ar-service.com/embed/PROJECT_ID"
    width="100%"
    height="480"
    frameborder="0"
    allow="camera; xr-spatial-tracking"
    allowfullscreen
  ></iframe>
</div>

iframeでカメラやAR機能を利用する場合は、allow属性にcamera; xr-spatial-trackingを含める必要があります。

BASEでの実装

BASEの商品説明欄を、自由にHTMLを実行できる領域として扱うことはできません。埋め込みを検討する場合は、HTML編集Appの公式ドキュメントを確認し、テーマを編集する方法を検討します。

以下はテーマ側へ設置するiframeの例です。利用するテーマや表示環境での動作確認が必要です。テーマ編集が難しい場合は、商品説明から閲覧ページへ案内するリンクやQRコードを使う方法もあります。

<div style="position: relative; width: 100%; padding-bottom: 75%;">
  <iframe
    src="https://your-ar-service.com/embed/PROJECT_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    allow="camera; xr-spatial-tracking"
    allowfullscreen
  ></iframe>
</div>

WordPress（WooCommerce）での実装

WordPressでは、ブロックエディタを用いたiframe埋め込みと、テーマ関数によるmodel-viewerの組み込みの両方に対応できます。

カスタムHTMLブロック（iframe）

投稿や固定ページ、WooCommerceの商品詳細テンプレート編集画面で「カスタムHTML」ブロックを追加し、iframeタグを貼り付けます。最も設定手順が少ない方法です。

テーマへのmodel-viewer直接実装

WordPress 6.5以降では、テーマのfunctions.phpでモジュール用の読み込み関数を使い、ショートコードを登録できます。編集前に子テーマなどで変更を管理してください（WordPress公式のScript Modules API）。

// functions.php に追加
function register_model_viewer() {
    wp_enqueue_script_module(
        'model-viewer',
        'https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js',
        array(),
        '4.0.0'
    );
}
add_action('wp_enqueue_scripts', 'register_model_viewer');

// ショートコード登録
function model_viewer_shortcode($atts) {
    $atts = shortcode_atts(array(
        'src' => '',
        'ios_src' => '',
        'height' => '400px',
    ), $atts);

    return '<model-viewer src="' . esc_url($atts['src']) . '"'
        . ($atts['ios_src'] ? ' ios-src="' . esc_url($atts['ios_src']) . '"' : '')
        . ' ar camera-controls auto-rotate'
        . ' style="width:100%;height:' . esc_attr($atts['height']) . ';">'
        . '</model-viewer>';
}
add_shortcode('3d_model', 'model_viewer_shortcode');

ショートコードを作成した後は、本文内に以下のように記述して呼び出します。

[3d_model src="/wp-content/uploads/models/product.glb" height="500px"]

---

3Dモデル表示速度を落とさないための軽量化基準

3Dモデルの容量が大きいと、読み込みに時間がかかります。埋め込み前に軽量化し、モバイル回線でも表示を確かめてください。手元に3Dデータがない場合の作成手段はAIで3Dモデルを生成する方法でも紹介しています。

ファイルサイズとポリゴン数の目安

用途に応じたデータ容量の目安は以下の通りです。モバイル端末からのアクセスが多いECサイトでは、3MB以下を目安に制作・書き出しを行います。

Draco圧縮の適用

GLB内のジオメトリデータを圧縮する手法としてDraco圧縮があります。オープンソースツールのglTF-Transformを利用して適用できます。

# glTF-Transform CLIのインストール
npm install -g @gltf-transform/cli

# Draco圧縮を適用
gltf-transform draco input.glb output.glb

Draco圧縮により形状データのファイルサイズを大幅に減らせる場合があります。ただし、ブラウザ側でのモデル展開時にCPU処理が発生するため、極端に複雑なメッシュの場合は解凍時間との兼ね合いを確認してください。

ポリゴン数とテクスチャの調整

BlenderなどのDCCツールで出力する際は、次の調整を行います。

• Decimate（ポリゴン削減）: 見た目の輪郭が破綻しない範囲で面数を削減します。
• テクスチャ解像度: スマートフォン表示が前提であれば1024×1024ピクセルを基準にし、必要以上に大きなテクスチャ（4096×4096など）は避けます。
• テクスチャの統合: 複数のマテリアルやテクスチャを1枚のアトラス画像にまとめることで、描画処理負荷とリクエスト数を減らせます。

---

iframeによる手軽な埋め込みとPitat-ARの仕様

自前で3Dモデルのホスティングサーバーを用意したり、iOS向けにUSDZファイルを別途作成・管理したりする負担を省きたい場合、外部のWebARサービスが発行するiframeコードの利用が適しています。

iframe埋め込みの基本形

iframeを用いた埋め込みコードは、アスペクト比を維持するコンテナで囲んで記述します。

<div style="position: relative; width: 100%; max-width: 640px; padding-bottom: 75%; margin: 0 auto;">
  <iframe
    src="https://pitat-ar.com/ar/ASSET_ID"
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; border-radius: 8px;"
    allow="camera; xr-spatial-tracking"
    allowfullscreen
    loading="lazy"
    title="商品の3Dモデルビューワー"
  ></iframe>
</div>

• allow="camera; xr-spatial-tracking": 親ページからiframe内のAR機能に対してカメラや空間追跡の利用を許可します。この記述がないと端末上でARモードに遷移できない場合があります。
• loading="lazy": ビューポートに入るまで通信を遅延させ、ページ全体の初期表示速度を守ります。
• title属性: スクリーンリーダー利用者に向け、何が表示されている領域なのかを明示します。

Pitat-ARの提供機能と制約

Pitat-ARは、GLBファイルをアップロードすることでWeb表示用ビューワー、iOS向けUSDZファイル、埋め込みコード、AR起動用QRコードを生成するWebARツールです。個人向けに無料枠が提供されています。

• 対応フォーマット: GLB形式（ファイル上限20MiB/ファイル）
• 利用可能リソース: 個人スペース1つ、プロジェクト3件、モデル10点まで、保存容量500MiB
• 配信容量制限: 直近24時間500MiB、月間2GiBまで（上限到達時は追加課金が発生せず、配信受付が一時停止）
• 変換処理: サーバー側でGLBからUSDZへの変換を行いますが、複雑なシェーダーや独自アニメーションは完全には再現されない場合があります。
• 閲覧ログ: ダッシュボードの表示数はビューワーページのアクセス記録であり、AR起動の実人数や正確なセッション数とは異なります。

高度な顔認識や画像ターゲットトラッキング、AIによる3D自動生成機能はPitat-AR本体には含まれていないため、3Dモデルの配置・試し置きを用途として利用します。

---

検索エンジン向けの設定：3DModel構造化データの実装

Webページに3Dモデルを掲載する場合、Schema.orgの3DModel仕様に基づいた構造化データを配置できます。Google検索などのクローラーに対して、ページ内に3Dアセットが存在することを正確に伝える役割を果たします。

基本的な3DModelマークアップ

ページの<head>内または<body>内にJSON-LD形式で記述します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "3DModel",
  "name": "ウォールナット無垢材テーブル",
  "description": "幅120cm x 奥行80cm x 高さ72cmのダイニングテーブル",
  "image": "https://example.com/images/table-photo.webp",
  "encodingFormat": "model/gltf-binary",
  "contentUrl": "https://example.com/models/table.glb"
}
</script>

商品情報（Product）に組み込む場合

ECサイトの商品詳細ページでは、Product構造化データのsubjectOfプロパティに関連付けて記載します。

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Product",
  "name": "ウォールナット無垢材テーブル",
  "description": "天然ウォールナットを使用したダイニングテーブル。",
  "image": "https://example.com/images/table.webp",
  "brand": {
    "@type": "Brand",
    "name": "Example Furniture"
  },
  "offers": {
    "@type": "Offer",
    "price": "89000",
    "priceCurrency": "JPY",
    "availability": "https://schema.org/InStock"
  },
  "subjectOf": {
    "@type": "3DModel",
    "name": "ウォールナット無垢材テーブル 3Dモデル",
    "encodingFormat": "model/gltf-binary",
    "contentUrl": "https://example.com/models/table.glb"
  }
}
</script>

実装後は、Googleのリッチリザルトテストツールなどで構文エラーがないか、contentUrlに指定したファイルへ正常にアクセスできるかを確認してください。

---

よくある質問

Q. Web表示にはGLBとglTFのどちらを使うべきですか？

A. Web上での配信にはGLB形式が適しています。GLBはメッシュ、テクスチャ、アニメーションデータを1つのバイナリファイルにまとめているため、サーバーへのHTTPリクエスト数を最小限に抑えられます。glTF（JSONと外部テクスチャに分かれた形式）は開発時のデータ編集には向いていますが、本番配信時はGLBにまとめて配置するのが一般的です。

Q. 3Dモデル自体が表示されないときは？

A. モデルのURLを直接開き、404やアクセス拒否になっていないか確認します。別ドメインから配信する場合はCORS設定も確認してください。次に、ライブラリがtype="module"で読み込まれているか、ブラウザのWebGLやハードウェアアクセラレーションが使えるかを確認します。開発者ツールのネットワークとコンソールで、読み込みエラーを切り分けられます。

Q. 3Dは見えますが、スマートフォンでARが起動しません

A. 以下の点を確認してください。

1. 通信環境がHTTPSになっているか: カメラや空間認識機能はセキュアなコンテキスト（HTTPS）でのみ動作します。
2. iframeの権限設定: allow="camera; xr-spatial-tracking"がiframeタグに付与されているか確認してください。
3. iOS向けのUSDZ設定: ios-srcを指定している場合は、そのURLを確認します。省略している場合はUSDZの自動生成に失敗していないか確認してください。
4. Android端末のAR対応状況: AndroidでのAR表示にはGoogle Play開発者サービス（AR）への対応が必要です。一部の端末やブラウザアプリ内Webビューでは起動できない場合があります。

Q. model-viewerの直接実装と外部ツールのiframe埋め込みはどちらを選ぶべきですか？

A. 社内のエンジニアリソースと運用規模で判断します。自社でサーバー環境を持ち、USDZファイルの生成や独自UIの構築を行える体制があるなら、model-viewerによる直接実装が自由度の面で有利です。一方、手作業でのUSDZ変換やホスティング作業を省略し、タグを貼り付けるだけで手軽に運用したい場合はiframe埋め込み方式が適しています。

---

埋め込み方式の選択フロー

自社でフロントエンド開発・3Dファイル配信環境を用意できるか？
├── はい → UIやカメラ挙動を独自に制御したいか？
│          ├── はい → model-viewer直接実装
│          └── いいえ → iframe埋め込み
└── いいえ → iframe埋め込み（WebARツール活用）

要件別の確認表

実装時は、モデルのファイルサイズを抑えること、ポスター画像とloading="lazy"で初期表示の負荷を軽減すること、必要に応じて構造化データを記述することを徹底してください。

---

3Dモデルの埋め込みを手軽に検証する

Pitat-ARでは、GLBファイルをアップロードすることで、Web表示用のiframeコードやAR体験用のQRコードが発行されます。iOS向けのUSDZ変換も自動処理されるため、自社で3D変換環境を用意することなく検証を進められます。

個人向けには無料利用枠が用意されており、最大3プロジェクトまで作成できます。

→ 無料で3D埋め込みを試す

---

参考情報

著者: Pitat-AR開発チーム
WebARおよび3Dビューワーの技術検証に基づき作成。

参照ドキュメント:

• model-viewer 公式ドキュメント
• Schema.org 3DModel 仕様
• Google 検索セントラル: 3Dモデルの構造化データ
• glTF-Transform ドキュメント

---

Shopifyの商品ページに導入する場合

Shopifyを利用している場合は、外部ツールを導入する前に標準の商品メディア機能で要件を満たせるか確認できます。ShopifyのAR導入チェックでは、Shopify標準機能と外部WebARの使い分け、公開前の確認項目を整理しています。