【WWDC26】Webに3Dの新時代が到来！HTML <model> 要素で変わるこれからのWebフロントエンド開発

Webサイトに3Dモデルを組み込む際、これまでは重いJavaScriptライブラリの導入や複雑な設定が必要でした。しかし、AppleのSafariチームが新たに推進するHTML <model> 要素の登場によって、その常識が覆ろうとしています。

本記事では、WWDC26で発表された最新情報をもとに、新しい<model>要素の概要から具体的な実装方法、最適化ツールまでを分かりやすく解説します。

1. HTML <model> 要素とは？

これまでApple Vision Pro（visionOS）で先行導入されていた<model>要素が、ついにiOS、iPadOS、およびmacOSのSafariに対応しました。

最大のポイントは、「<img>タグや<video>タグと同じ感覚で、ネイティブに3DモデルをWebページに埋め込める」という点です。

従来の「Model Viewer」などのライブラリとの違い

現在、Webでの3D表示にはJavaScriptライブラリ（model-viewerなど）が多く使われていますが、<model>要素はブラウザのネイティブ機能です。

• 外部ライブラリ不要： コードを軽量に保てます。

• 圧倒的なパフォーマンス： プラットフォームによって直接レンダリングされます。

• 空間コンピューティングへの最適化： visionOSでは、標準で立体レンダリング（ステレオスコピック表示）に対応します。

• 将来性： W3CのWeb標準として策定が進められているため、将来的にあらゆるブラウザでの動作が期待できます。

2. 3Dアセットの準備（USDZフォーマット）

<model>要素で推奨されているフォーマットは、USDZ（Universal Scene Description Zipped）です。この1つのファイルの中に、3Dの形状（ジオメトリ）、マテリアル、テクスチャ、さらにはアニメーションまですべてパッケージ化されています。

3Dモデルをお持ちでない場合でも、Appleは以下の「Capture（キャプチャ）」「Convert（変換）」「Create（作成）」のアプローチを推奨しています。

• iPhoneによるスキャン： 現実のオブジェクトを簡単に3D化。

• Blenderなどの3Dツール： 既存アセットの編集やモデリング。

• 生成AIツールの活用： 最近では「3D」や「Mesh AI」といったアプリを使い、テキストプロンプトや画像から高品質な3Dモデルを生成することも容易になっています。

3. 基本的な実装方法とフォールバックの設計

基本コード

基本的な記述は非常にシンプルです。

HTML

<model src="product-mallet.usdz"></model>

<video>タグのように、<source>タグを使ってMIMEタイプを指定することも可能です。

非対応ブラウザへのフォールバック

まだ<model>要素をサポートしていない古いブラウザや他社ブラウザ向けには、タグの内部に<img>を配置するだけで、自動的に画像に切り替わるフォールバックを設定できます。

HTML

<model src="product-mallet.usdz">
  <img src="fallback-image.jpg" alt="商品のプレビュー画像">
</model>

読み込み状態のハンドリング

3Dモデルはファイルサイズが大きくなりがちなため、読み込み完了を検知するJavaScriptのプロミス（ready）が用意されています。ローディングスピナーなどのUI制御もスマートに実装可能です。

JavaScript

const modelElement = document.querySelector('model');

modelElement.ready.then(() => {
  // ロード完了：スピナーを非表示にする
}).catch((error) => {
  // エラー処理：フォールバックコンテンツを表示
});

4. インタラクションとアニメーションの制御

ユーザーに3Dモデルを触って動かしてもらうための機能も、驚くほど簡単に実装できます。

属性ひとつで回転を可能にする「Orbitモード」

stage-mode="orbit" という属性を追加するだけで、ユーザーはモデルを自由に回転・チルト（傾け）できるようになります。傾けた後に指を離すと緩やかに元の位置に戻るほか、回転時にモデルが画面からはみ出さないよう自動でスケーリングされる仕様になっています。

HTML

<model src="product-mallet.usdz" stage-mode="orbit"></model>

JavaScriptによるカスタム操作と滑らかなアニメーション

より高度な制御を行いたい場合は、entityTransformプロパティにDOMMatrixを代入することで、任意の角度（例：サイドビューなど）へ変更できます。さらに、requestAnimationFrameと組み合わせることで、ボタンクリック時にモデルを滑らかに回転させるアニメーションも実装可能です。

組み込みアニメーションの再生

Blender等であらかじめUSDZファイル内に焼き込まれた（ベイクされた）アニメーションがある場合、model.play()メソッドで簡単に再生できます。playbackRateの値を調整すれば、倍速再生や、負の数（マイナス）を指定して逆再生させることも可能です。

5. 空間コンピューティングとARへのシームレスな移行

Web上の3Dモデルを、現実世界に飛び出させることも簡単です。

iOSやiPadOSでは、rel="ar"属性を付与した<a>タグでUSDZファイルにリンクさせることで、Apple純正の「AR Quick Look」が起動し、目の前の空間に製品を配置してサイズ感などを確認できます。

さらにApple Vision Pro（visionOS）のSafariでは、Webページに埋め込まれた3Dモデルをユーザーが直接手で「引き出す」ような感覚で、現実空間に立体的に配置して細部まで観察できるようになります。

6. 生産性を高めるmacOS内蔵の最適化ツール

Webで3Dを扱う上で最大のボトルネックとなるのが「通信量（ファイルサイズ）」です。これに対して、macOSには標準で強力なコマンドラインツールが付属しています。

• usdcrush 画質や見た目のクオリティを一切落とさずに、ファイルサイズを劇的に圧縮します。セッション内のデモでは、7.9MBあったファイルがわずか1.9MBにまで軽量化されました。

• usdrecord 3Dモデルから、フォールバックやサムネイルとして使用するための2D画像をコマンドライン（またはスクリプト）経由で自動生成できるツールです。カタログ全体の画像を自動で一括生成する際などに威力を発揮します。

これらはMacユーザーであれば追加インストールなしで今すぐ利用可能です。

7. まとめ：Webの未来に参加しよう

HTML <model> 要素は、3DグラフィックスをWebの主要な構成要素（ファーストクラス市民）へと引き上げる重要なステップです。

Appleは現在、W3CのImmersive Web Community Groupや、Alliance for OpenUSD（AOUSD）と連携し、この要素をWeb全体のオープンな標準規格にすることを目指しています。

開発者が今すぐできるアクション：

1. 手持ちの画像やAIツールでUSDZファイルを作ってみる。

2. <model> タグを使ってWebサイトに配置し、Safariで動かしてみる。

3. usdcrushなどのツールを使ってアセットの最適化を試す。

Web標準は開発者コミュニティのフィードバックによって形作られます。ぜひ皆さんも新しい3D Webの世界を体験し、フィードバックを発信してみてはいかがでしょうか。