HTMLの<model>要素がすべてのApple OSに登場

WWDC 2026で、あるSafariエンジニアが、JavaScriptライブラリを一切使わずに<model>という1つのタグだけで3Dのキャンプ用マレットをeコマースの商品ページに配置し、来訪者が指でそれを回転できるようにしてみせました。¹ これを可能にした要素自体は、しばらく前からvisionOSに搭載されていました。2026年のニュースは、同じマークアップがiPhone、iPad、MacのSafariでもレンダリングされるようになり、それを取り巻くJavaScript APIも成熟したことです。Appleははっきりとこう述べています。「私たちはvisionOSでModel要素を切り開きました……そして今、Model要素がiOS、iPadOS、macOSに登場します。同じマークアップ、同じ要素が、Appleのプラットフォーム全体で動作するのです。」¹

以下のウォークスルーは、セッションが示すドロップイン3Dの流れに沿って進みます。静的な<img>フォールバックから始まり、オービット操作、スクリプトによる変換、ベイク済みアニメーションの再生、そしてAR Quick Lookへと進んでいきます。ここで紹介する内容はすべて、WWDC 2026のセッション215から直接得たものです。

TL;DR

• <model>要素はそれより前にvisionOSでデビューしました。WWDC 2026ではこれをiOS、iPadOS、macOSのSafariへ拡大し、それを取り巻くJavaScript APIを成熟させています。¹
• modelはメディアと同じように埋め込めます。srcをUSDZファイルに向け、<video>と同じようにMIMEタイプ付きの<source>タグを加え、まだ要素をサポートしていないブラウザー向けのフォールバックとして内部に<img>をネストします。¹
• readyプロミスは、modelの読み込みが完了したタイミングを知らせてくれるので、スピナーを差し替えられます。catchブロックでは失敗時にフォールバックコンテンツを表示します。¹
• stagemode="orbit"属性は、1つの属性だけでインタラクティブな回転を実現します。スクリプトによる制御が必要な場合はstagemode="none"を設定し、rotateSelfで構築したDOMMatrixを使ってentityTransformを駆動します。¹
• ベイク済みアニメーションはplaybackRateとplay()で再生し、負の値を指定すると逆再生になります。modelを<a rel="ar">で包めば、iOSとiPadOSの来訪者に本格的なAR Quick Look体験を提供できます。¹

実際にリリースされたもの

SafariチームのAlekseiが、0:37からクロスプラットフォーム展開について説明しています。

ここでは正直な位置づけが大切です。<model>要素はまったくの新顔ではありません。AppleはまずこれをvisionOSで投入し、そこでは内蔵の立体視レンダリングを備えていたため、Apple Vision Pro上で商品が本物の奥行きを持っているかのように感じられました。¹ WWDC 2026は、その土台の上に2つのことを行います。1つは要素をiOS、iPadOS、macOSのSafariにもたらすことで、これにより「あなたの3Dコンテンツは、外出中のiPhone、カフェのiPad、デスクのMacのいずれであっても、すべてのSafari来訪者に届く」ようになります。もう1つは、静的なビューアをインタラクティブなものへと変えるJavaScript APIを充実させることです。¹

現状に対する訴求は明快です。今日のWeb上のほとんどの3Dは、人気のJavaScriptライブラリであるmodel-viewerを介して動いています。Appleの主張はこうです。ネイティブの要素には追加のライブラリが不要で、「プラットフォームによって直接」レンダリングされ、「新興のWeb標準であるため、あなたのコードは将来にわたって通用する」というものです。¹ AppleのSafariチームは「W3Cでmodel仕様に積極的に貢献している」と述べ、Immersive Web Community Groupを通じたフィードバックを呼びかけています。¹ まだ要素をサポートしていないブラウザー向けに、セッションは「JavaScriptを介して新しい標準のAPIを後付けする」ポリフィルを紹介していますが、引用に値する但し書きが1つあります。「Apple Vision Proのような空間プラットフォームでの立体視表示など、要素の一部の機能はポリフィルできません。」¹

コンテンツのフォーマットはUSDZです。「Universal Scene Descriptionを単一のファイルにzip化したもの」で、「3Dモデルに必要なすべて、つまりジオメトリ、マテリアル、テクスチャ、アニメーションをパッケージ化します。」¹ Safariは他のフォーマットもサポートしますが、セッションは最良の体験のためにUSDZを推奨しています。¹ アセットがどこから来るのかは別の問題です。Appleは「キャプチャ、変換、作成」というアプローチを推奨しており、iPhoneで実物をスキャンする、既存のファイルを変換する、Blenderのようなツールでゼロから作る、といった方法があります。¹ セッションはまた、エコシステムに生成ツールが存在することにも触れています。挙げられたアプリ、Tripo3DとMeshy.aiは、Apple製品ではなくサードパーティのサービスです。¹

ページにmodelを配置する

この要素は、Web開発者なら誰もが既に知っているメディアタグと同じように振る舞います。「<img>タグや<video>タグと同じように、<model>タグをsource属性でファイルに向ければ、あとはブラウザーが処理してくれます。プラグインは不要です。」¹ <video>と同じパターンで、MIMEタイプ付きのネストした<source>タグを使うこともできます（セッションでは値を明示せずにパターンを示していますが、標準のUSDZメディアタイプはmodel/vnd.usdz+zipです）。フォールバックこそ、今日の採用を安全にしてくれる部分です。<model>の内部に<img>を置くと、古いバージョンのSafariやサポートのないブラウザーでは代わりにその画像がレンダリングされます。¹

<model src="mallet.usdz">
  <source src="mallet.usdz" type="model/vnd.usdz+zip">
  <img src="mallet.jpg" alt="キャンプ用マレット" width="480" height="480">
</model>

3Dモデルは「数十メガバイト以上」になることもあるため、読み込みには時間がかかります。¹ readyプロミスは、modelが実際に読み込まれ、表示の準備が整ったときに解決します。待っている間はスピナーを表示し、readyが解決したらそれを隠し、予期しないことが起きた場合はcatchブロックでフォールバックコンテンツを表示します。

const model = document.querySelector("model");

try {
  await model.ready;
  spinner.hidden = true;       // model is loaded and ready to display
} catch (error) {
  spinner.hidden = true;
  fallback.hidden = false;     // show fallback content on failure
}

レンダリングに関する細かな点で、人がつまずきがちなものが1つあります。<model>要素は「独自の仮想空間の中でレンダリングされるため、ページの背景を引き継ぎません。」¹ ページのデザインに合わせるには、modelに直接background-colorを設定します。セッションはこう制約を付け加えています。「背景は常に不透明にレンダリングされ、透明度付きの色を指定しても変換されます。」¹

来訪者に探索させる

最も手軽なインタラクティブ性は、属性1つで済みます。stagemode="orbit"を使うと、来訪者は「modelを左右に自由に回転させられ、上下に傾けると、元の角度へとゆっくり跳ね戻ります。」¹ modelはまた、回転中にどの部分も見切れないよう、わずかに小さく再スケールされます。¹ ほとんどの商品ページでは、このたった1つの属性が機能のすべてです。「orbitのstagemodeは、1つの属性でインタラクティブな3Dを実現してくれます。」¹

正確な角度が必要な場合は、代わりにJavaScriptからmodelを駆動します。entityTransformプロパティは「JavaScriptを介して正確な視点の角度を設定できる」ものです。¹ これを使うには、まずorbitを無効にします。stagemode属性を削除するか、"none"に設定します。¹ セッションは、表示領域の外へ回転させると手動の変換によってmodelの一部が見切れたり隠れたりする可能性があると警告しているので、位置の調整が必要になることもあります。¹ 「3D空間でのmodelの向きを表す」DOMMatrixを使って向きを構築し、rotateSelfを呼んで回転を定義してから、これを代入します。

// disable orbit: <model stagemode="none"> in the markup

// capture the original orientation up front, for Reset
const initialTransform = model.entityTransform;

// Side view: rotate 135 degrees around the Y axis
sideButton.addEventListener("click", () => {
  const matrix = new DOMMatrix();
  matrix.rotateSelf(0, 135, 0);
  model.entityTransform = matrix;
});

// Reset to the original orientation
resetButton.addEventListener("click", () => {
  model.entityTransform = initialTransform;
});

変換を代入すると、視点は瞬時に切り替わります。遷移を滑らかにするため、セッションではrequestAnimationFrameで回転をアニメーション化しています。アニメーションの長さは500ミリ秒、「キビキビしつつも滑らかに感じる半秒」で、フレームをまたいで回転をイージングし、毎フレーム新しいDOMMatrixでentityTransformを更新します。¹ Apple自身の言葉による正直なトレードオフはこうです。カスタム変換は「フルコントロールを与えてくれますが、バウンディングボックス、クリッピング、手動のアニメーションコードといった追加の作業が必要になります。」¹ スクリプトによる変換は必要なときに使い、そうでないときはstagemode="orbit"に頼りましょう。

ベイク済みアニメーションを再生し、ARへ進む

modelは独自の動きを持つこともできます。アニメーションは「通常BlenderやMayaのような3Dツールで作成され、USDZファイルにベイクされ」ており、要素は「最初のアニメーショントラックを再生」します。¹ 再生を制御するJavaScriptは2行です。modelにplaybackRateを設定し、そのplay()メソッドを呼びます。正の値は順方向に再生し、負の値は逆再生します。セッションでは、より速い再生のために5と-5を使っています。

function play(rate) {
  model.playbackRate = rate;   // positive plays forward, negative reverses
  model.play();
}

play(5);    // fast forward
play(-5);   // fast reverse

最後のステップは、商品を画面から取り出して部屋の中へ持ち込みます。「modelをrel="ar"属性付きの<a>タグで包み、同じリソースを指すようにすると、iOSとiPadOSではお客さまに本格的なAR Quick Look体験が提供されます。」¹

<a rel="ar" href="mallet.usdz">
  <model src="mallet.usdz">
    <img src="mallet.jpg" alt="キャンプ用マレット">
  </model>
</a>

visionOSでは、この要素は既に3Dを「Webの自然な一部のように感じさせて」いました。立体視レンダリングによって、お客さまは「商品をページから引き出し、まるで手元にあるかのように眺める」ことができ、来訪者をSafariからシーンの中に置く没入型のWebサイト環境も実現しています。¹

より小さく届ける

ローカルのファイルは見栄えがしますが、同じファイルをインターネット越しに読み込むと遅くなります。セッションでは、modelに対してコマンドラインツールのusdcrushを実行します。「品質の変化なしに、ファイルは7.9 MBから1.9 MBに下がり」、2つのバージョンをSafariで並べて開いても見分けがつきません。¹ 同類のツールusdrecordは、まだ画像を持っていないときに3Dファイルから直接サムネイルやフォールバック画像を生成します。出力フォーマットや、ファイル内のカスタムカメラからのレンダリングといったオプションがあります。¹ どちらのツールも、より大きなUSDスイートの一部として「すでにあなたのMacにインストールされて」おり、セッションはusdrecordをカタログ全体に対してスクリプトで実行できることにも触れています。¹ フォーマットそのものについては、Alliance for OpenUSDがUSDZ仕様の全文を「明快でベンダー中立なリファレンス」として、変換ツールとともに公開しています。¹

ラボがサイズと読み込みについて加えたこと

WWDCのラボは、セッションが触れずに残したいくつかの細部を埋めてくれました。

圧縮については、usdcrushは現在テクスチャをAVIFにエンコードします。以前はJPEGを使っていました。² Appleはまた、適切なメッシュ圧縮フォーマットについてAlliance for Open Mediaと協議中だとも述べました。²

サイズについては、パネルは厳密な上限を示しませんでしたが、ページ内のmodelでは最大の視覚品質がおよそ10 MBあたりに落ち着くと示唆しました。没入型環境は正当にそれより大きくなり得ます。²

読み込みについては、パネルはギャップを認めました。今日、modelの読み込み状態を表すCSS擬似クラスは存在しないため、前述のreadyプロミスがその仕事のためのツールとなります。² パネルはまた、心に留めておくべき2段階の区別も示しました。ダウンロードされたバイト数は、リソースが処理されて使用可能になっていることと同じではないのです。²

重要なポイント

Web開発者向け: - 内部に<img>フォールバックをネストして、今日<model>を追加しましょう。そうすれば、サポートしないブラウザーは静的な画像に劣化し、サポートするSafariは自動的にインタラクティブな3Dへアップグレードします。¹ - 表示をreadyプロミスでゲートし、失敗はcatchで処理しましょう。数メガバイトのUSDZは読み込みに実際の時間がかかるからです。¹

3Dアーティスト向け: - 最初のアニメーショントラックをBlenderやMayaでUSDZにベイクしましょう。要素がそれを再生し、順方向と逆方向の制御のためにplaybackRateとplay()を公開します。¹ - 出荷前にusdcrushを実行して、見た目の品質を落とさずにファイルサイズを削減し、usdrecordでmodel自体から<img>フォールバックを生成しましょう。¹

製品・コマースチーム向け: - 属性1つでインタラクティブな回転を実現するstagemode="orbit"を使い、正確な角度やカスタムUIが必要なケースのためにスクリプトによるentityTransformを取っておきましょう。¹ - modelを<a rel="ar">で包めば、iOSとiPadOSの買い物客はAR Quick Lookを通じて商品を自分の空間に配置できます。¹

FAQ

HTMLの<model>要素は2026年にまったく新しく登場したのですか？

いいえ。Appleはまず<model>要素をvisionOSで投入しました。WWDC 2026では、同じマークアップでこれをiOS、iPadOS、macOSのSafariへ拡大し、それを取り巻くJavaScript API（readyプロミス、entityTransform、ベイク済みアニメーションの再生、<a rel="ar">）を成熟させています。¹

<model>をサポートしないブラウザー向けのフォールバックはどう追加しますか？

<model>タグの内部に<img>タグをネストします。古いバージョンのSafariや、まだ要素をサポートしていないブラウザーは代わりにその画像をレンダリングするので、来訪者には依然として商品が表示されます。ポリフィルも利用できますが、visionOSの立体視表示など一部の機能はポリフィルできません。¹

<model>要素はどのファイルフォーマットを使いますか？

USDZです。Universal Scene Descriptionを単一のファイルにzip化したもので、ジオメトリ、マテリアル、テクスチャ、アニメーションをパッケージ化します。Safariは他のフォーマットもサポートしますが、Appleは最良の体験のためにUSDZを推奨しており、Alliance for OpenUSDが仕様の全文を公開しています。¹

modelをインタラクティブにするにはどうしますか？

stagemode="orbit"を設定すると、属性1つで左右への自由な回転ができます。正確な角度が必要な場合はstagemode="none"を設定し、rotateSelfでDOMMatrixを構築して、modelのentityTransformプロパティに代入します。滑らかな遷移が欲しければrequestAnimationFrameでフレームをまたいでアニメーション化しましょう。¹

Web上のmodelを拡張現実に持ち込むにはどうしますか？

<model>を、同じUSDZリソースを指すrel="ar"属性付きの<a>タグで包みます。iOSとiPadOSでは、これにより来訪者に本格的なAR Quick Look体験が提供され、商品を自分の環境に配置できるようになります。¹

<model>要素は、Appleがプラットフォームをまたいで推進しているのと同じUSDの土台の上に成り立っています。Appleの新しいSwiftネイティブのUSDフレームワーク、USDKitや、visionOS 27の新機能の空間的な文脈をご覧ください。ライブラリよりもタグを選ぶという主張は、no-buildマニフェストやHTMLはエージェントが求めるフォーマットであるで展開している、より広い議論にも合致します。シリーズ全体のハブはApple Ecosystemシリーズです。

参考文献