---
title: "3Dモデルビューア（model-viewer等）HTMLを共有する方法"
description: "3Dモデルの質感や形状の細部を静止画では伝えられず、実物に近い形で取引先に確認してもらいたい制作者向け。model-viewerなどで作ったWebGLの3D表示ページを認証付きURLで共有する手順と、閲覧環境での注意点をまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/3d-model-viewer-html"
markdown: "https://giga-site.com/articles/3d-model-viewer-html/index.md"
category: "コンテンツ別"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 4
---
# 3Dモデルビューア（model-viewer等）HTMLを共有する方法

3Dモデルビューアは、回転やズームで自由に見られてこそ価値があります。静止画では質感や形状の細部が伝わりません。この記事では、model-viewerなどで作ったWebGLの3D表示ページを、取引先へ認証付きの確認用URLで共有する手順と、3D特有の注意点を解説します。

> Source HTML: https://giga-site.com/articles/3d-model-viewer-html
> Article index: https://giga-site.com/articles/index.md

## 3Dモデルは触れる状態で見せる価値がある

製品の3DモデルやCGプロップは、回転・ズーム・ライティングの確認を相手自身が操作できて初めて意味があります。スクリーンショットでは角度が固定され、裏側のディテールや断面、材質の見え方を伝えきれません。商談やデザインレビューの場面では、相手が手元で動かせる3Dビューアを共有するのが効果的です。

model-viewerのようなWebコンポーネントを使えば、glTF/GLBなどのモデルをHTML一枚で表示できます。これを共有URL化すれば、相手は専用ソフトのインストールなしで、ブラウザだけでモデルを確認できます。

## 3D表示ページの構成ファイルを確認する

3DビューアのHTMLは、本体のHTMLに加えてモデルファイル（.glb / .gltf）、テクスチャ画像、環境マップ（HDR/環境光用画像）、ビューアのスクリプトなど複数ファイルで構成されることが多いです。これらの相対パスが崩れると、モデルが真っ黒になったり読み込まれなかったりします。

とくにGLBは単一ファイルにテクスチャを内包しますが、glTFはテクスチャやバイナリが別ファイルになりがちです。どの形式を使っているかで同梱すべきファイルが変わるため、書き出し設定を確認しておきましょう。

## 共有前チェックリスト

3Dモデルビューア（model-viewer等）HTMLを共有は、共有する中身によって確認観点が変わります。見た目、操作、個人情報、外部送信、スマホ表示のどれが重要かを先に決めてからURL化します。

チェックリスト化しておくと、毎回同じ品質で共有できます。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 見た目: PC/スマホ、余白、画像、フォント、折り返しを確認する
- 操作: ボタン、リンク、フォーム、遷移先を確認する
- 情報: 顧客名、社内URL、価格、未公開文言が残っていないか見る
- 共有: 認証、期限、差し替え、レビュー依頼文をセットで決める

## ギガサイト便で3DビューアをURL化する

ギガサイト便はCSS・JS・画像を含むZIPに対応しているため、3Dモデルやテクスチャを含むビューア一式もZIPにまとめてアップロードできます。相対パスを保ったまま配信されるので、ローカルで動く構成のままURL化できます。

1. HTML・モデルファイル・テクスチャ・スクリプトを1つのフォルダにまとめる
2. ローカルでブラウザを開き、モデルが正しく表示されるか確認する
3. フォルダをZIPに圧縮する
4. ギガサイト便のトップページにZIPをドロップする
5. 発行された共有URLを開き、回転・ズームが動くか確認する
6. 取引先向けに認証方式を設定してURLを送る

## 取引先限定で安全に確認依頼する

未発表製品の3Dモデルは機密性が高いため、共有範囲の管理が重要です。ギガサイト便ではパスワードやメール認証（ワンタイムコード）、会社ドメイン認証を設定でき、取引先の担当者だけがアクセスできるようにできます。

アクセスログで誰がいつ閲覧したかを確認できるため、確認依頼を出した相手が実際に見たかどうかが分かります。公開期限を設定しておけば、確認期間が過ぎたモデルが残り続けるリスクも抑えられます。一時公開にはnoindexが付きますが、機密モデルには検索除けだけでなく認証を必ず併用してください。

## 修正モデルの差し替えと表示パフォーマンス

デザイン修正で形状やテクスチャを更新するたびに新しいURLを発行すると、相手の手元に古いリンクが残ってしまいます。ギガサイト便は同じURLのまま中身を差し替えられるので、更新したモデルをアップロードし直せば、相手は同じリンクから最新版を確認できます。

3DモデルはファイルサイズがCDNのエッジ配信で速く届くとはいえ大きくなりがちです。テクスチャの解像度やポリゴン数を確認用に最適化しておくと、相手の回線でも軽快に表示され、確認がスムーズになります。

## よくある質問

### 取引先は専用ソフトを入れずに3Dモデルを見られますか。

見られます。model-viewerなどのWebGLビューアはブラウザで動くため、相手はURLを開くだけで回転・ズームができます。アプリのインストールは不要です。

### glTFとGLBのどちらで共有すべきですか。

GLBはテクスチャを単一ファイルに内包するため同梱が簡単です。glTFは別ファイルになりがちなので、テクスチャやバイナリも忘れずZIPに含めてください。どちらもZIPでアップロードできます。

### 未発表モデルを取引先だけに見せられますか。

できます。パスワードや会社ドメイン認証を設定すれば、指定した相手だけがアクセスできます。アクセスログで閲覧の有無も確認できます。

### モデルを修正したらURLは変わりますか。

変わりません。同じURLのままファイルを差し替えられるので、更新版をアップロードすれば相手は同じリンクで最新モデルを見られます。

### 改善後の記事では何を確認できますか？

共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。

## 関連記事

- [HTMLニュースレター・メルマガを共有する方法](https://giga-site.com/articles/share-html-newsletter/index.md)
- [HTMLカタログ・パンフレットを共有する方法](https://giga-site.com/articles/share-html-catalog/index.md)
- [HTML操作マニュアルを共有する方法](https://giga-site.com/articles/share-html-manual/index.md)
- [FAQ・ヘルプページのHTMLを共有する方法](https://giga-site.com/articles/share-html-faq-page/index.md)
- [年表・タイムラインHTMLを共有する方法](https://giga-site.com/articles/share-html-timeline/index.md)
- [組織図HTMLを共有する方法](https://giga-site.com/articles/share-html-org-chart/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "3Dモデルビューア（model-viewer等）HTMLを共有する方法",
  "description": "3Dモデルの質感や形状の細部を静止画では伝えられず、実物に近い形で取引先に確認してもらいたい制作者向け。model-viewerなどで作ったWebGLの3D表示ページを認証付きURLで共有する手順と、閲覧環境での注意点をまとめます。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/3d-model-viewer-html",
  "url": "https://giga-site.com/articles/3d-model-viewer-html",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "コンテンツ別",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "取引先は専用ソフトを入れずに3Dモデルを見られますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "見られます。model-viewerなどのWebGLビューアはブラウザで動くため、相手はURLを開くだけで回転・ズームができます。アプリのインストールは不要です。"
      }
    },
    {
      "@type": "Question",
      "name": "glTFとGLBのどちらで共有すべきですか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GLBはテクスチャを単一ファイルに内包するため同梱が簡単です。glTFは別ファイルになりがちなので、テクスチャやバイナリも忘れずZIPに含めてください。どちらもZIPでアップロードできます。"
      }
    },
    {
      "@type": "Question",
      "name": "未発表モデルを取引先だけに見せられますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "できます。パスワードや会社ドメイン認証を設定すれば、指定した相手だけがアクセスできます。アクセスログで閲覧の有無も確認できます。"
      }
    },
    {
      "@type": "Question",
      "name": "モデルを修正したらURLは変わりますか。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "変わりません。同じURLのままファイルを差し替えられるので、更新版をアップロードすれば相手は同じリンクで最新モデルを見られます。"
      }
    },
    {
      "@type": "Question",
      "name": "改善後の記事では何を確認できますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "共有前の確認点、認証と期限の考え方、差し替えやレビュー回収の流れを、実務でそのまま使える形で確認できます。"
      }
    }
  ]
}
```