ShopifyとWooCommerceの商品ページにARを追加する方法
要点: 商品ページにARを追加するには、商品の実寸の3Dモデルを、GLB（Androidとウェブ用）とUSDZ（iPhone用）で用意します。Shopifyは3Dモデルを商品メディアとして扱えます。WooCommerceなどのサイトでは、無料のmodel-viewerコンポーネントに両方のファイルを指定して埋め込みます。
手順1：3Dファイルを作る
- 平面の商品（アートプリント、ポスター、キャンバス、ラグ、壁紙サンプル）：商品写真をjpgtousdzにアップロードし、実際の幅か高さを入力します。そのサイズのGLBとUSDZが得られます。
- 立体物（花瓶、椅子、靴）：商品の周りをゆっくり動画撮影し、動画から3Dを使って、実際の高さを入力します。
- 商品ページが重くならないよう、各ファイルは小さく保ちます（テクスチャは2048 px以下）。
手順2a：Shopify
- Shopifyの管理画面で商品を開き、メディアからGLBファイルを3Dモデルとしてアップロードします。
- Shopifyの3Dビューアで表示され、対応するテーマでは、スマホに「お部屋で見る」ボタンが追加されます。
- iPhoneとAndroidの両方で商品を確認してください。現在のファイルサイズ制限や対応テーマは、Shopifyのヘルプセンターに載っています。
手順2b：WooCommerce、WordPress、その他のウェブサイト
GLBとUSDZをメディアライブラリにアップロードし、商品説明にカスタムHTMLブロックを追加して、model-viewerを記述します。
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="/media/print-50x70.glb" ios-src="/media/print-50x70.usdz"
ar ar-modes="quick-look scene-viewer webxr" ar-placement="wall"
camera-controls alt="50 x 70 cmのプリント"></model-viewer>手順2c：コード不要の方法
ページを編集できない場合は、その商品のjpgtousdz ARビューアのリンクを、ボタンやQRコードに設定します。アプリなしで、iPhoneでもAndroidでもARで開けます。
公開前のチェックリスト
| 確認項目 | 理由 |
|---|---|
| 実寸が正しい | お客様はARでサイズを判断します。スケールが違うと返品の原因になります。 |
| 配置が正しい（壁または床） | アートは壁に、家具は床に置きます。 |
| iPhoneとAndroidで動く | それぞれ別のファイルを使います。 |
| 代替テキストを設定した | アクセシビリティと検索のため。 |
よくある質問
ShopifyにUSDZは必要ですか？
ShopifyにはGLBをアップロードすれば、表示は任せられます。テーマや他のチャネルで必要になる場合に備えて、USDZも保管しておくと安心です。
WooCommerceはARに標準対応していますか？
いいえ。プラグインを使うか、上記のようにGLBとUSDZでmodel-viewerを埋め込みます。
費用はいくらですか？
model-viewerは無料です。jpgtousdzの写真からARへの変換は初回無料で、その後はプランに含まれます。APIは写真1枚$0.15、動画の3Dモデル1つ$1.50です。