ShopifyにARを導入するには？標準3D機能と外部WebARの選び方

Shopifyの商品ページにARを追加したい場合、まずは現在使用しているテーマと、Shopify標準の商品メディア機能で目的を達成できるかを確認します。外部サービスや専用アプリの導入が必須とは限りません。

一方、展示会で配布するチラシのQRコードから同じAR体験を案内したい場合や、商品ページとは別に独立した案内ページを作りたい場合は、外部WebARツールの併用が選択肢に入ります。

この記事では、商品ページへの3D・AR導入を検討している担当者向けに、導入方法の判断基準と公開前の確認項目を解説します。なお、Shopifyの仕様に関する記述は、2026年9月時点の公式ヘルプに基づいています。

Shopify標準機能で対応できる範囲を確認する

Shopifyの商品メディア機能は、標準で3Dモデルの登録に対応しています。公式ヘルプではGLB形式およびUSDZ形式のファイル追加が案内されており、対応テーマを使用していれば商品ページ上で3D表示やAR起動が可能です。Shopify公式：商品メディアの種類

そのため、初めから外部アプリの契約を前提にする必要はありません。まずは代表的な商品を1点選び、標準機能による表示や操作感が要件を満たしているか試すことから始めます。

標準機能と外部WebARの使い分け

標準機能と外部WebARには、それぞれ次のような特徴があります。

「商品画像の並びに3Dモデルを表示したい」という目的であれば、標準機能の検証を優先します。「紙のパンフレットやSNSから、補足テキストを添えた専用のARページへ直接誘導したい」という目的であれば、商品ページへのリンクで十分か、専用のWebARページを設けるべきかを判断します。

3Dモデルで確認すべき品質と仕様

ファイルが正常にアップロードできたとしても、購入判断に適したモデルとは限りません。次の項目を実際の商品情報と突き合わせて確認します。

• 寸法と実寸比率：幅・奥行き・高さが実物と同じサイズ（1単位＝1メートル）で作られているか。
• 正面の向きと接地位置：読み込み時に見せたい角度を向いており、床面に置いた際に底面が浮いたり沈んだりしていないか。
• 質感と色：布、金属、木材、透明パーツなどの見た目が実物と乖離していないか。
• 形状の整合性：裏面や底面など、普段見えにくい部分の作り込みに間違いがないか。
• ファイル容量：一般的なスマートフォン回線で開いた際に、待機時間が長すぎないか。

AR表示は空間での配置イメージを掴む補助手段であり、搬入経路やミリ単位の設置可否を保証するものではありません。商品ページには寸法表や注意事項を明記し、ARモデルを見る際にも確認しやすい位置に配置します。モデル制作の手順については、GLBファイルの作り方でも詳しく解説しています。

導入の手順

1. 代表的な商品で表示を検証する

寸法が明確で、実物と比較しやすい商品を1点選びます。まずは3Dモデルをアップロードして表示を確認し、問題が発生した際に「3Dデータ側の不備」か「テーマやテンプレート側の不備」かを切り分けます。Shopifyでの具体的な登録手順は、公式ドキュメントに記載されています。Shopify公式：商品メディアの追加

2. AR起動の導線を整える

画面上に「ARで見る」というボタンを置くだけでは、用途が伝わらない場合があります。家具や家電であれば、「部屋に置いてサイズを確かめる」のように具体的な行動を促す文言を添えると意図が伝わりやすくなります。

また、商品写真、価格、寸法情報、カート追加ボタンとの位置関係にも配慮が必要です。3Dビューアの操作に夢中になり、購入手続きへの導線を見失わないレイアウトを意識します。

3. 外部WebARを使う場合は遷移と権限を確認する

外部ページへリンクさせる方式では、リンク先の商品が合致しているか、ブラウザーの「戻る」操作で元の商品ページに正しく復帰できるかを確認します。

iframeで埋め込む方式では、3Dモデルの回転だけでなくAR起動まで確認します。ブラウザーでARを動かす技術（WebXRなど）には、HTTPS接続やiframeに対する空間トラッキング権限（allow="xr-spatial-tracking"など）が求められます。端末やブラウザーによってAR起動の仕組みが異なるため、実機での検証が欠かせません。model-viewer公式：ARの条件

4. 公開前に実機テストを実施する

動作検証を行う際は、対象環境ごとの合否基準を定めて記録を残します。

スマートフォンでのARは、iOSならQuick Look、AndroidならScene ViewerやWebXRなど、OSごとに異なる仕組みで動作します。OSのバージョンが新しくても機種によっては非対応の場合があるため、主要な実機での確認を推奨します。また、GLBからUSDZへの自動変換を行っている環境では、材質表現やアニメーションの挙動が崩れていないかも確認が必要です。

効果測定の注意点

導入後の成果を振り返る際は、表示回数と購入への貢献を分けて計測します。

管理画面に記録される「閲覧数」は、該当ページが読み込まれた回数を示すものであり、実際にARを起動した回数や実体験者の人数とは異なります。可能であれば、商品ページの表示、3Dモデルの操作、AR起動ボタンの押下、カート追加、注文完了といった各段階を個別のイベントとして計測します。

また、AR機能を利用する利用者は、もともと商品への関心や購買意欲が高い層である傾向があります。利用者の購入完了率が高い場合でも、それがARによる直接的な押し上げ効果なのか、元々の購入意欲によるものなのかを慎重に見極める必要があります。効果を正しく評価するには、対象期間や流入経路を揃えて比較するか、ABテストなどで表示有無による差分を検証します。

よくある質問

Q. Shopifyなら3Dモデルを用意するだけでARが動きますか？

A. Shopify自体は3D・ARに対応していますが、利用中のテーマが3Dメディアの表示に対応している必要があります。また、カラーバリエーションごとの表示切り替えや、独自にカスタマイズした商品ページ構成では、別途テーマのコード調整が必要になる場合があります。

Q. Shopify標準機能と外部WebARサービスは併用すべきですか？

A. 併用は必須ではありません。商品ページ内での表示だけで完結する場合はShopifyの標準機能で十分です。紙の印刷物や外部サイトなど、Shopifyの外でも同じ3D・AR体験を提供したい場合に外部サービスの活用を検討してください。

Q. 外部への導入相談時にはどのような情報が必要ですか？

A. 対象商品ページのURL、使用中のテーマ名、導入したい商品の点数、3Dデータの有無を伝えると進行がスムーズになります。あわせて想定しているスケジュールや予算の目安を共有することで、標準機能の改修で進めるべきか、外部ツールを組み合わせるべきかの判断がしやすくなります。

商品ページへのAR導入を相談する

Pitat-ARでは、ECサイトやWebサイトへの3D・AR組み込みに関するご相談を受け付けています。Shopifyの標準機能で対応できる範囲と、追加のデータ調整や外部組み込みが必要な範囲を切り分け、運用に合わせた導入方法を検討します。

商品ページへのAR導入を相談する

事前に社内での要件整理を進めたい場合は、WebAR開発の依頼書テンプレートをご活用ください。