Webサイトに3Dモデルを埋め込む方法｜model-viewer・iframe・WebARの実装ガイド【2026年版】

TL;DR（3行要約）

3つの方法: model-viewer直接実装、iframe埋め込み、SaaS活用の3パターンで3Dモデルをサイトに表示できる
最も手軽: iframe埋め込みなら、HTMLコード1行をコピペするだけで3D+AR表示が完成する
SEO対策も重要: 3DModel構造化データを実装することで、Google検索結果にリッチリザルトが表示される可能性がある

3Dモデルの埋め込みを今すぐ試してみませんか？ Pitat-ARなら、GLBファイルをアップロードするだけで埋め込みコードが自動生成されます。 → 無料で3D埋め込みを試す

結論: 目的と技術力に合わせて3つの方法を使い分ける

Webサイトに3Dモデルを埋め込むには「model-viewerで直接実装」「iframeで外部サービスを埋め込む」「WebAR SaaSを活用する」の3つの方法があり、開発スキルや運用体制に応じて最適な手法を選ぶことが成功の鍵です。

model-viewerの仕組みと3Dモデル表示

Webサイトに3Dモデルを表示する3つの方法

Webサイトに3Dモデルを埋め込む方法は、大きく分けて以下の3つがあります。

方法	難易度	コスト	AR対応	おすすめ対象
model-viewer直接実装	中〜上級	無料	手動設定	フロントエンド開発者
iframe埋め込み	初級	サービスによる	自動対応	非エンジニア・EC事業者
SaaS活用（Pitat-ARなど）	初級	月額制	自動対応	運用重視の企業

それぞれの方法を、実際のコード例とともに詳しく解説していきます。

model-viewerの基本的な使い方

model-viewerは、Googleが開発・保守しているオープンソースのWebコンポーネントです。HTMLタグを1つ追加するだけで、3Dモデルの表示・回転・ズームをWebページ上で実現できます。

ステップ1: model-viewerの読み込み

まず、HTMLの<head>タグ内、または<body>の終了タグ直前にスクリプトを追加します。

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

ステップ2: 基本的な3Dモデル表示

最もシンプルな実装は以下の通りです。GLB形式の3Dモデルファイルをsrc属性に指定するだけで、インタラクティブな3Dビューワーが表示されます。

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

GLBファイルの作成方法について詳しくは、GLBファイルの作り方完全ガイドをご覧ください。各属性の意味は以下の通りです。

属性	説明
`src`	GLBファイルのパス（必須）
`alt`	アクセシビリティ用のテキスト
`camera-controls`	マウス/タッチ操作で回転・ズーム可能にする
`auto-rotate`	自動回転を有効にする

ステップ3: AR機能の追加

model-viewerでAR表示に対応するには、ar属性とiOS向けのios-src属性を追加します。iOS端末ではUSDZ形式のモデルが必要です。

<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>

注意点: ios-srcに指定するUSDZファイルは、GLBから別途変換する必要があります。この変換作業が手間になる場合は、Pitat-ARのようなサービスを使えば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>

poster属性にプレビュー画像を設定することで、モデル読み込み前にも視覚的なフィードバックを提供でき、LCP（Largest Contentful Paint）への悪影響を抑えられます。

ECサイトでの3Dモデル埋め込みイメージ

ECサイト（Shopify・BASE・WordPress）への3D埋め込み手順

ECプラットフォームによって、3Dモデルの埋め込み方法は異なります。以下に主要プラットフォームごとの手順をまとめます。

Shopifyでの3Dモデル埋め込み

Shopifyは3Dモデル表示をネイティブサポートしています。

手順:

Shopify管理画面から「商品」を開く
商品のメディアセクションで「メディアを追加」をクリック
GLBファイルをアップロード（Shopifyが自動でmodel-viewerを使用して表示）
テーマのproduct.liquidテンプレートで3Dメディアの表示を有効化

Shopifyネイティブ機能でカバーできない場合（AR対応やカスタムUIが必要な場合）は、テーマのカスタムHTMLセクションにiframeを直接埋め込む方法も有効です。

<!-- ShopifyのカスタムHTML/Liquidセクションに追加 -->
<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>

BASEでの3Dモデル埋め込み

BASEでは、商品説明のHTML編集機能を使ってiframeを埋め込みます。

手順:

BASE管理画面の「商品管理」から対象商品を開く
商品説明のエディタを「HTML編集モード」に切り替える
iframeコードを貼り付ける

<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>

補足: BASEではscriptタグの直接追加が制限されているため、model-viewerの直接実装は困難です。iframe方式を使うことで、この制約を回避できます。

WordPress（WooCommerce）での3Dモデル埋め込み

WordPressでは、model-viewerの直接実装とiframe埋め込みの両方が可能です。

方法A: カスタムHTMLブロックでiframeを埋め込む

ブロックエディタ（Gutenberg）で「カスタムHTML」ブロックを追加し、iframeコードを貼り付けます。この方法が最も簡単です。

方法B: model-viewerをテーマに直接実装する

functions.phpにスクリプトを登録し、ショートコードで呼び出す方法です。

// functions.php に追加
function register_model_viewer() {
    wp_enqueue_script(
        'model-viewer',
        'https://ajax.googleapis.com/ajax/libs/model-viewer/4.0/model-viewer.min.js',
        array(),
        '4.0',
        true
    );
}
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モデルの埋め込みで最も注意すべきなのが、ページの表示速度への影響です。最適化を怠ると、直帰率の上昇やSEO評価の低下を招きます。なお、3Dモデルをまだお持ちでない場合は、AIで3Dモデルを自動生成する方法も選択肢の一つです。

ファイルサイズの目安

用途	推奨ファイルサイズ	上限
モバイル表示	3MB以下	5MB
デスクトップ表示	5MB以下	10MB
EC商品ページ	2MB以下	5MB

Draco圧縮の適用

GLBファイルのサイズを大幅に削減するには、Draco圧縮が効果的です。glTF-Transformを使った圧縮手順は以下の通りです。

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

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

一般的に、Draco圧縮によりファイルサイズを50〜80%削減できます。

ポリゴン数の最適化

品質レベル	ポリゴン数	用途
低（高速表示優先）	10,000以下	モバイルEC
中（バランス型）	50,000以下	一般的なWebサイト
高（品質優先）	100,000以下	デスクトップ向け

Blenderを使ったポリゴン削減手順:

Blenderでモデルを開く
Decimateモディファイアを追加（Modifier Properties → Add Modifier → Decimate）
Ratioを0.5（50%削減）に設定しプレビューで確認
見た目を保てる最小のポリゴン数を探す

テクスチャの最適化

テクスチャ画像はファイルサイズの大部分を占めることが多いです。

解像度: 1024x1024ピクセルを基準とする（2048x2048は高品質が必要な場合のみ）
形式: PNGよりJPEG/WebPを優先（透過が必要な場合のみPNG）
テクスチャアトラス: 複数テクスチャを1枚にまとめることでHTTPリクエスト数を削減

遅延読み込みの実装

3Dモデルの読み込みをビューポートに入ったタイミングまで遅延させることで、初期表示速度を大幅に改善できます。

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

loading="lazy"を指定することで、ユーザーがスクロールしてモデルが画面に近づいたときに初めて読み込みが開始されます。

ECサイトでの3Dモデル活用イメージ

iframe埋め込みで最も簡単にAR+3D表示を実現する方法

model-viewerの直接実装には、3Dファイルのホスティング、USDZ変換、AR設定など、複数のステップが必要です。これらをすべてスキップして、最短で3D+AR表示を実現するのがiframe埋め込みです。

iframe埋め込みの仕組み

iframeは、外部サービスが提供する3Dビューワーページを、自分のWebサイト内にウィンドウとして表示する仕組みです。つまり、3Dモデルのレンダリングやar対応は外部サービス側が担当し、自分のサイトにはiframeコードを1行追加するだけで済みます。

Pitat-ARの埋め込みコード機能

Pitat-ARでは、3DモデルをGLBファイルとしてアップロードすると、以下が自動で行われます。

USDZ形式への自動変換（iOS AR対応）
CDN経由での高速配信設定
iframe埋め込みコードの自動生成
QRコードの発行

生成される埋め込みコードは以下のような形式です。

<iframe
  src="https://pitat-ar.com/ar/PROJECT_ID"
  width="100%"
  height="480"
  frameborder="0"
  allow="camera; xr-spatial-tracking"
  allowfullscreen
  title="商品名 - 3Dビューワー"
></iframe>

このコードを商品ページのHTMLに貼り付けるだけで、3D表示とAR体験の両方が有効になります。QRコードを使った店頭でのAR表示方法については、QRコードでAR表示する方法も参考になります。

iframe埋め込みのベストプラクティス

レスポンシブ対応: アスペクト比を維持しつつ、画面幅に応じてリサイズする実装を推奨します。

<div style="position: relative; width: 100%; max-width: 640px; padding-bottom: 75%; margin: 0 auto;">
  <iframe
    src="https://pitat-ar.com/ar/PROJECT_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>

アクセシビリティ: title属性には、何が表示されているかを説明するテキストを必ず設定してください。スクリーンリーダーがiframeの内容を読み上げる際に使用されます。

パフォーマンス: loading="lazy"を指定することで、iframeがビューポートに入るまで読み込みを遅延できます。ファーストビュー外に3Dモデルを配置する場合は必ず設定しましょう。

3D表示のSEO対策：3DModel構造化データの実装

Googleは3DModel構造化データ（Schema.org）に対応しており、検索結果にリッチリザルトとして3Dモデルのプレビューを表示する可能性があります。EC商品ページに3Dモデルを埋め込む場合は、構造化データの実装も検討しましょう。

3DModel構造化データの基本実装

<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構造化データの中に3Dモデル情報を含めることで、より豊かな検索結果を実現できます。

<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>

SEO実装のチェックリスト

JSON-LDの構文エラーがないか（Googleリッチリザルトテストで検証）
contentUrlが実際にアクセス可能なURLを指しているか
imageにフォールバック画像を必ず設定しているか
Product構造化データと矛盾がないか

FAQ: Webサイトへの3Dモデル埋め込みに関するよくある質問

Q. 3Dモデルを表示するのにGLBとglTF、どちらを使うべきですか？

A. Web表示にはGLB形式を推奨します。GLBはglTFのバイナリ版で、テクスチャやメッシュを1つのファイルにまとめて格納します。glTFは複数ファイルに分かれるため、配信時のHTTPリクエスト数が増えます。model-viewerも公式にGLB形式を推奨しています。一方、iOSのAR Quick Lookで使用するにはUSDZ形式が必要です。GLBからUSDZへの変換は、Blenderや専用ツール、あるいはPitat-ARの自動変換機能で行えます。

Q. 3Dモデルの埋め込みはページ表示速度にどのくらい影響しますか？

A. 最適化なしで3Dモデルを配置した場合、ページの読み込み時間が2〜5秒増加することがあります。ただし、以下の対策を組み合わせることで影響を最小限に抑えられます。(1) loading="lazy"による遅延読み込み、(2) poster画像の設定、(3) Draco圧縮によるファイルサイズ削減、(4) CDN経由の配信。これらをすべて実施すれば、Core Web Vitalsへの影響はほぼ無視できるレベルになります。

Q. スマートフォンで3Dモデルが表示されない場合の対処法は？

A. 主な原因と対策は以下の通りです。(1) ファイルサイズが大きすぎる: モバイルでは5MB以下を目安にします。(2) WebGLが無効: 一部の古い端末やブラウザではWebGLが無効になっています。model-viewerはWebGLが利用できない場合にposter画像をフォールバック表示します。(3) CORS設定: 3Dモデルファイルが別ドメインにホストされている場合、CORSヘッダーが適切に設定されていないと読み込みに失敗します。サーバー側でAccess-Control-Allow-Originヘッダーを設定してください。

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

A. 判断基準は「開発リソース」と「運用の手間」です。自社にフロントエンド開発者がいて、3DモデルのホスティングやiOS向けのUSDZ変換を自前で管理できるならmodel-viewerの直接実装が最適です。カスタマイズの自由度が高く、ランニングコストも抑えられます。一方、開発リソースが限られている場合や、複数の3Dモデルを継続的に管理する必要がある場合は、iframe埋め込み（SaaS活用）が効率的です。Pitat-ARなどのサービスを使えば、USDZ変換、CDN配信、閲覧数の分析まで一括で対応できます。

まとめ: 3Dモデル埋め込みの方法を整理する

方法選択のフローチャート

開発リソースはあるか？
├── はい → カスタマイズ性は必要か？
│          ├── はい → model-viewer直接実装
│          └── いいえ → iframe埋め込み（SaaS活用）
└── いいえ → iframe埋め込み（SaaS活用）

最終比較表

項目	model-viewer直接実装	iframe埋め込み（SaaS）
初期設定の手間	中〜高	低
カスタマイズ性	高	中
iOS AR対応	手動（USDZ変換必要）	自動
ホスティング	自前で用意	サービス側が提供
SEO	直接制御可能	iframeのため間接的
ランニングコスト	サーバー費用のみ	月額サービス料
運用の手間	高	低

実装時の重要ポイント

ファイルサイズは5MB以下に最適化する -- Draco圧縮とテクスチャ最適化で対応
遅延読み込みを必ず設定する -- loading="lazy"とposter画像の組み合わせ
構造化データを実装する -- 3DModel Schema.orgでSEO対策
レスポンシブ対応を忘れない -- アスペクト比固定のCSS手法を使用
アクセシビリティを確保する -- alt属性とtitle属性を適切に設定