model-viewerとは？GoogleのWebAR・3D表示タグの使い方を徹底解説

Webページ上で3DモデルをARで表示したい——そんなニーズに応えるGoogleのオープンソースWebコンポーネントが「model-viewer」です。HTMLタグを1行追加するだけでiOS・Androidの両方でAR体験を提供でき、ECサイトの商品3D表示や観光・教育コンテンツなどで急速に採用が広がっています。本記事では、model-viewerの概要から実装コード・カスタマイズまで、ステップバイステップで解説します。

model-viewerとは？

model-viewerはGoogleが開発・公開しているオープンソースのWebコンポーネントです。glTF/GLB形式の3DモデルをWebページ上でインタラクティブに表示し、対応デバイスではワンタップでARモードを起動できます。

主な特徴

• クロスプラットフォーム：iOS（AR Quick Look）・Android（Scene Viewer）の両方をサポート
• アプリ不要：ブラウザだけで動作するWebARを実現
• オープンソース・無料：商用利用も含めApache License 2.0で無料
• 豊富なカスタマイズ：自動回転・影・ライティング・ポスター画像など属性で制御
• アクセシビリティ対応：WAI-ARIAに準拠したアクセシブルな実装

インストール（CDN）と基本実装

CDNで読み込む

npmは不要です。HTMLのhead内に以下のスクリプトタグを1行追加するだけで使えます。

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

基本実装コード

3Dモデルを表示する最小限のコードは以下の通りです。

<model-viewer
  src="model.glb"
  alt="3Dモデルの説明"
  style="width: 100%; height: 400px;"
  camera-controls
></model-viewer>

ar属性でARを起動する

AR起動の基本コード

ar属性を追加すると、対応デバイスで「ARで見る」ボタンが自動表示されます。

<model-viewer
  src="model.glb"
  ios-src="model.usdz"
  alt="商品の3D表示"
  style="width: 100%; height: 400px;"
  camera-controls
  ar
  ar-modes="webxr scene-viewer quick-look"
></model-viewer>

iOS・Androidの動作の仕組み

プラットフォーム	AR技術	必要ファイル	起動方法
iOS（Safari）	AR Quick Look	.usdz	「ARで見る」タップ
Android（Chrome）	Scene Viewer / WebXR	.glb	「ARで見る」タップ
PCブラウザ	3D表示のみ（AR不可）	.glb	3Dビューのみ

カスタマイズ：ポスター画像・自動回転・影

<model-viewer
  src="model.glb"
  ios-src="model.usdz"
  alt="商品の3D表示"
  poster="thumbnail.webp"
  auto-rotate
  rotation-per-second="30deg"
  shadow-intensity="1"
  exposure="0.8"
  style="width: 100%; height: 500px;"
  camera-controls
  ar
></model-viewer>

• poster：3Dモデル読み込み中に表示するサムネイル画像
• auto-rotate：自動でゆっくり回転させる
• rotation-per-second：1秒あたりの回転角度
• shadow-intensity：床の影の濃さ（0〜1）
• exposure：明るさの調整

ECサイトへの埋め込み例

ShopifyやWooCommerceなどのECサイトに商品3D表示を組み込む場合は、カスタムHTMLブロックにmodel-viewerのコードを貼り付けるだけで対応できます。

<div class="product-3d-viewer">
  <model-viewer
    src="/models/product-001.glb"
    ios-src="/models/product-001.usdz"
    alt="商品名 3D表示"
    poster="/images/product-001-thumb.webp"
    camera-controls
    auto-rotate
    ar
    ar-modes="webxr scene-viewer quick-look"
    shadow-intensity="0.8"
    style="width: 100%; height: 400px; background: #f5f5f5; border-radius: 8px;"
  >
    <button slot="ar-button" style="background: #333; color: #fff; padding: 8px 16px; border: none; border-radius: 4px; cursor: pointer;">
      ARで見る
    </button>
  </model-viewer>
</div>

よくある質問