ShopifyにARを入れた記録｜アプリなしで、30作品・480通りを自分の壁に試せるようにした
Shopifyの商品ページにARを入れるとき、有料アプリを使わずに自前で作る方法があります。自社ECで30作品・480通りの選択すべてをAR対応にした記録です。Shopifyの制限、費用、公開後に見つかった不具合まで書きます。
アートを買うときに迷うのは、絵柄よりもサイズです。「18×24インチ」と書かれていても、自分の部屋の壁に掛けたときの大きさは、なかなか思い浮かびません。
ULTROが運営しているECサイト「the MA walls」では、この迷いを減らすために、作品を自分の壁に置いて見られるAR（拡張現実）を商品ページに入れました。the MA walls は、アートポスターを主に米国へ販売しているShopifyのストアです。前回は、作品のサイズをベッドと並べて比べる機能を入れています。
AIでShopifyにサイズ比較機能を実装した記録｜任せたこと、人が決めたこと、公開後に直したこと
ULTRO NOTES｜サイト構築・改善AIでShopifyにサイズ比較機能を実装した記録｜任せたこと、人が決めたこと、公開後に直したこと自社ECの商品ページに、アートのサイズをベッドと並べて比べる機能を、AIのCodexを使って実装しました。作業はおよそ4時間。AIに任せた部分、人が決めた部分、公開後に見つかった3つの不具合と直し方を、記録をもとにまとめます。
今回のARも、コードと3Dモデルの作成はAIのCodexに任せました。この記事は、作業の記録とShopifyの公式ヘルプをもとにまとめています。画面は2026年10月時点のものです。購入率への効果は、まだ測っていません。
作ったもの
商品ページの画像の最後に、「3D」と「AR」の2枚を足しました。
「AR」の画面は、使っている端末によって中身が変わります。
| 端末 | 何が出るか |
|---|---|
| iPhone | 「View on your wall with AR」のボタン。押すとカメラが開き、壁に作品を置ける。AR の中でサイズと種類を切り替えられる |
| Android | 同じボタン。押すとカメラが開き、選んでいたサイズと額の作品が出る |
| パソコン | QRコード。スマートフォンで読み取ると、パソコンで選んでいたサイズと額のまま、スマートフォンの商品ページが開く |
ARを知らない人にも伝わる動き
「AR」という言葉だけでは、何が起きるのか分からない人もいます。そこで、AR画面の説明には動きを付けました。何も掛かっていない部屋に、スマートフォンを持った手が入ってきて、画面の中にだけ作品が写ります。
動きを作るときに気をつけたのは、次の点です。
- 作品は壁の決まった位置にあり、スマートフォンの画面がそこに重なったときだけ見える。画面の外の壁には何も掛かっていない。実際のARと同じ見え方にした
- 写る作品は、その商品ページで選んでいる作品とサイズ、額の色に合わせて切り替わる。作品は公式の商品画像を使い、部屋と手の画像は画像生成で作った
- 最初は動画ファイルで作ったが、手の動きと作品の出るタイミングがずれたので、部屋・手・作品をページの中で同時に描く方式に替えた
- 端末で「視差効果を減らす」などの設定をしている人には、動かさずに静止画を出す
対象はポスターと額装の2種類で、サイズは4つ（12×16、16×20、18×24、24×36インチ）、種類はポスターと額の3色（黒、木目、白）の4つです。30作品×4サイズ×4種類で、選べる組み合わせは480通りになります。
ARの中で、サイズと額を切り替えられる
iPhoneでは、ARで壁に作品を置いたまま、画面下のメニューでサイズ（4つ）と種類（ポスター、額の黒・木目・白）を切り替えられます。12×16を置いてみて、少し小さいと感じたら、その場で18×24に替えて見比べられます。
最初に出るのは、商品ページで選んでいたサイズと額です。ARを閉じて選び直し、また開く、という手間を減らすためにこうしました。Androidの仕組みには同じメニューがないので、Androidでは商品ページで選んでからARを開きます。
ARを開く前に、使い方を見せる
ARは、慣れていないと「開いたけれど壁に置けない」「作品が宙に浮く」といったことが起きます。うまく使えないまま閉じられると、ARを入れたことがかえって不満につながります。
そこで、使い方の手順をARの入口に置きました。パソコンのQRコードからスマートフォンで開いたときは、カメラを起動する前に、まず次の画面が出ます。
手順は4つです。
- 壁から1〜2メートル離れる
- ボタンを押して、カメラを開く
- 壁とその周りを、ゆっくり映す
- 壁に置いて比べる。iPhoneは画面下のメニューでサイズと額を替えられる。Androidは商品ページで選び直して、もう一度開く
手順の下には、うまくいかないときの対処を1つ書いています。作品が壁より手前に浮いて見えたら、周りをもう一度映してから、壁に置き直す、です。商品ページのAR画面にも、同じ手順を置いています。
チャットで聞かれても答えられるようにする
使い方を見ても分からない人は、チャットで聞いてきます。そこで、Shopify Inboxが回答に使うKnowledge Baseに、ARの使い方と、うまくいかないときの対処を足しました。お客様がチャットで聞けば、AIのエージェントがその内容をもとに答えます。
Knowledge Baseの育て方は、Shopify Inboxの記事に書いています。
Shopify Inboxの使い方｜AIエージェントの設定と運用の要点
ULTRO NOTES｜サイト構築・改善Shopify Inboxの使い方｜AIエージェントの設定と運用の要点Shopify Inboxの設定手順を管理画面のキャプチャで解説します。AIエージェントのペルソナ、回答の元になるKnowledge BaseとQuery logの使い方、任せていい問い合わせの線引き、有人対応が必要な場合の選択肢までまとめました。FAQはInbox以外のAIエージェントも参照する前提で作られています。
Shopifyの3Dモデルには、2つの制限がある
Shopifyでは、商品に画像や動画と同じように3Dモデルを登録できます。対応したテーマなら、そのままAR表示もできます。今回これを使わなかったのは、Shopifyのヘルプに書かれている制限が2つあったからです。
1つ目は、3Dモデルをバリエーションに紐付けられないことです。ヘルプには「3D models and videos can’t be used for your product variant media.」とあります。サイズを18×24に切り替えたら18×24のモデルを出す、という動きは、商品メディアの仕組みだけでは作れません。
2つ目は、動画と3Dモデルの件数に上限があることです。Basicプランでは、ストア全体で動画と3Dモデルを合わせて250件までです。今回の960ファイルは入りません。
そこで、3Dモデルは商品メディアではなく、Shopifyの「ファイル」に置きました。どの選択にどのファイルを出すかの対応表は、テーマのLiquid（Shopifyのテーマの言語）に持たせています。
ファイルの数と費用
1つの選択につき、2つのファイルを用意しています。
| ファイル | 使う場面 | 数 |
|---|---|---|
| USDZ | iPhoneのAR（Quick Look） | 480 |
| GLB | 商品ページの3D表示と、AndroidのAR（Scene Viewer） | 480 |
合計960ファイル、約3.6GBです。iPhone用のUSDZには、1つのファイルの中に4サイズ×4種類の切り替えが入っています。最初に表示する組み合わせだけを変えて、選択ごとにファイルを分けました。iPhoneのAR画面でサイズを変えても、商品ページで選んでいたものから始まるようにするためです。
ファイルの置き方が料金や上限にどう響くかは、Shopifyのサポートに問い合わせて確かめました。担当者からの回答は次のとおりです。
- APIで「ファイル」として登録したGLBとUSDZは、動画・3Dモデルの件数（250件）には数えない
- 代わりに、一般の保存容量を使う。Basicプランは100GBまで
- 問い合わせた時点で、このストアの使用量は885MBだった
この回答はストアごとの問い合わせへの答えで、ヘルプに書かれている内容ではありません。同じ置き方をする場合は、自分のストアでも確かめてください。
費用は、有料のARアプリも外部のサーバーも使っていないので、ARのための月額は増えていません。外部に置く場合も比べました。CloudflareのR2なら、30作品の規模では無料の範囲に収まる計算でした。作品が1,000点まで増えると、約120GBになり、Basicプランの100GBには入りません。そのときは外部に置くことを考えます。
作業の流れ
作業の記録に残っている流れは次のとおりです。
| 日付 | 内容 |
|---|---|
| 10月3日 | 1作品で試作。4サイズのモデルを作り、公開していないテーマに入れた |
| 10月4日 | iPhoneで壁に置いて確かめた。額が壁から棚のように突き出たので、向きを直した。実物の18×24の額の写真から、額の幅と厚みを推定した |
| 10月5日 | 30作品・960ファイルに広げた。サポートに保存容量を確認し、本番に公開した |
| 10月6日 | 画面の説明と見せ方を直した。額の裏側の作りを直した。ポスターの絵が上下逆になる不具合を直した |
| 10月10日 | 製造の委託先から額の寸法の回答が届き、額装のモデルを作り直した |
1作品で試してから広げる
最初は1作品だけで、4サイズのモデルを作りました。作品の画像は、商品ページに載せている公式の画像から、作品の部分だけを切り出して貼っています。AIで描き直してはいません。
サイズは、商品の公称サイズ（インチ）をメートルに直して、そのまま使っています。1つのモデルを拡大・縮小して4サイズを作ることはしていません。
1作品で、壁に置いたときの大きさと向きが合うことを確かめてから、30作品に広げました。30作品分は、作品ごとの画像を読み込んで同じ形のモデルを作るスクリプトで作っています。新しい作品を足すときの手順も、文書にして残しました。
公開していないテーマで確かめる
変更は、公開していないテーマに入れて、プレビューで確かめてから本番に出しました。確かめた項目は、次のようなものです。
- 480通りの選択すべてで、対応表のファイルが存在し、使える状態になっているか
- サイズや額の色を変えたとき、3D表示とARで開くファイルが切り替わるか
- パソコンのQRコードに、選んでいるサイズと額が入っているか
- 画面の幅が320、390ピクセルで、ボタンやチャットの表示が重ならないか
本番に出すときは、テーマを丸ごと入れ替えず、ARに関係するファイルだけを反映しました。公開していないテーマが古いままの部分（チャットの設定やよくある質問の並び）を、本番に戻してしまわないためです。
実機で見つかった問題
ブラウザでの確認では、カメラを使うARの動きまでは分かりません。実物のiPhoneで試して、次の問題が見つかりました。
額が壁から棚のように突き出る
ファイルに「壁に置く」という指定を入れた最初の版は、iPhoneで壁に置くと、額が壁から手前に突き出て、棚板のような向きになりました。額の正面がどちらを向くかの基準が、壁に置く前提になっていなかったためです。モデルを90度回して、正面が部屋の側を向くように直しました。
iPhoneで、ポスターの絵が上下逆になる
公開したあと、ポスターの絵がiPhoneのARで上下逆に出ることが分かりました。調べると、ポスターのUSDZ 120ファイルすべてで、絵の上下の指定が逆になっていました。額装のファイルとAndroid用のGLBは正しい向きでした。
120ファイルを作り直し、新しいファイル名で置き直してから、対応表を差し替えています。ファイル名を変えたのは、古いファイルを残しておき、問題があれば元に戻せるようにするためです。
サイズの切り替えメニューが消える
iPhoneのARには、AR の中でサイズと種類を切り替えるメニューがあります。試作の途中で、このメニューが一度出たあと、出なくなりました。商品ページにARの入口が2つあり、それぞれ別のファイルを開いていたのが原因でした。入口を1つにまとめて直しています。
実機で確かめたこと
「Moss and Time」の18×24インチ・黒の額（実物）を壁に掛け、同じ壁に、iPhoneのARで同じ作品の18×24を置いて並べました。大きさは合っていました。
この写真は、額の寸法を製造の委託先（Printful）の回答に合わせて直したあとのものです。
公開した時点では、額の外寸がまだ分かっていませんでした。手元にある18×24の実物を写真で測り、その値で額を作っていました。10月10日に届いた回答は次のとおりです。
| 項目 | Printfulの回答 | 18×24インチの場合 |
|---|---|---|
| 額の外寸 | 紙の寸法＋12.7mm（縦・横それぞれ） | 469.9×622.3mm |
| 作品が見える部分 | 紙の寸法−25.4mm（四辺が12.7mmずつ額に隠れる） | 431.8×584.2mm |
| 額の幅・奥行き | 約19.05mm | 約19.05mm |
許容差は±5.08mmです。写真から測った値は、外寸も見える部分もこの許容差を超えてずれていたので、4サイズ×3色すべてのモデルをこの値で作り直しました。作品の画像も、額に隠れる12.7mmぶんは見えないようにしています。
AIに任せたこと、人が決めたこと
コード、3Dモデルの作成、ファイルの登録、ブラウザでの確認は、Codexに任せました。人が決めたのは、主に次の点です。
| 決めたこと | 理由 |
|---|---|
| 説明の動きを作る | ARという言葉を知らない人にも、何ができるのかが一目で伝わるようにした |
| ARの中でサイズと額を替えられるようにする | 閉じて選び直す手間をなくし、その場で見比べられるようにした |
| 使い方をARの入口で先に見せる | うまく使えないまま閉じられて、不満につながるのを減らす |
| チャットのKnowledge Baseを更新する | 使い方や、うまくいかないときの対処を聞かれても、チャットで答えられるようにした |
| 寸法の回答を待たずに出し、届いたら作り直す | 実物の写真から測った値で先に公開し、回答が届いた日にモデルを差し替えた |
| 説明の言葉と画面の配置 | ボタンの文言、手順の書き方、チャットボタンと重ならない配置などを、画面を見て直した |
| 実機で確かめる | iPhoneで壁に置き、実物と並べて見るのは人がやった。棚のように突き出る問題も、ここで見つかった |
サイズ比較の記事と同じで、速くなったのはコードとモデルを作る部分でした。何を対象にするか、いつ出すか、実物と合っているかを確かめるところは、人の側に残っています。
同じことを自社のストアでやるなら
部屋に置いたときの大きさで迷う商品なら、同じ考え方が使えます。アートのほかに、鏡、照明、家具などです。始める前に、次の点を決めておきます。
- 商品メディアの3Dで足りるか。サイズや色ごとにモデルを出し分けたいなら、テーマの改修かアプリが要る
- モデルの数と置き場所。選択の数×2ファイルになる。Shopifyの「ファイル」に置くなら、保存容量の上限を見ておく
- 寸法の根拠。公称サイズだけでよいか、額や枠の外寸まで要るか。実物と並べて確かめられるか
- 実機での確認。iPhoneとAndroidで、壁に置いた向きと大きさを見る。ブラウザの確認だけでは分からない
効果を見るなら、ARのボタンを押した回数と、そこからカートに入った回数を先に計測しておくと、あとで判断できます。
まだやっていないこと
- 購入率、カート追加率への効果の測定
- Androidの実機での、壁に置いたときの大きさの確認
- Instagramなど、アプリの中のブラウザからARが開けるかの実機での確認
参考にした公式情報
よくある質問
ShopifyでARを使うのに、アプリは必要ですか？
必須ではありません。Shopifyは商品メディアとして3Dモデルを登録でき、対応したテーマならiPhoneとAndroidでAR表示ができます。ただし、3Dモデルはバリエーションに紐付けられません。サイズや色ごとに別のモデルを出したい場合は、今回のようにテーマを改修するか、アプリを使うことになります。
3Dモデルのファイル形式は何を使いましたか？
2種類です。iPhoneのAR（Quick Look）にはUSDZ、Androidのブラウザ表示とAR（Scene Viewer）にはGLBを使っています。どちらも1つの選択につき1ファイル用意しました。
費用はかかりましたか？
有料アプリと外部のサーバーは使っていないので、ARのための月額費用は増えていません。960ファイル、約3.6GBをShopifyの「ファイル」に置いています。Shopifyのサポートに確認したところ、この置き方では動画・3Dモデルの件数の上限（Basicプランで250件）ではなく、一般の保存容量（100GB）を使うとの回答でした。
ARで見た大きさは、実物と合っていますか？
18×24インチの実物の額と並べて確かめたところ、合っていました。額の外寸と、作品が見える部分の寸法は、製造の委託先から届いた値でモデルを作り直しています。
作品画像は、AIで描き直したのですか？
描き直していません。商品ページに載せている公式の画像から、作品の部分を切り出して3Dモデルに貼っています。切り出した位置と元の画像の対応は、作品ごとに記録に残しています。
購入率は上がりましたか？
まだ測っていません。公開から日が浅いためです。この記事で書いているのは、実装できたことと、確かめられた動作までです。
- 作品を自分の壁に置いて大きさを確かめられるARを、30作品・480通りの選択すべてに入れた。有料アプリと外部サーバーは使っていない
- Shopifyの商品メディアは3Dモデルをバリエーションに紐付けられない。選択とファイルの対応表をテーマに持たせて、選んだサイズと額のモデルを出している
- モデルはiPhone用のUSDZとAndroid・ブラウザ用のGLBで計960ファイル、約3.6GB。Shopifyの「ファイル」に置き、3Dの件数の上限は使っていない
- 最初のモデルは壁から棚のように突き出た。公開後には、iPhoneでポスターの絵が上下逆になる不具合も見つかり、120ファイルを作り直した
- ARを知らない人にも伝わるように、手に持ったスマートフォンの中に作品が写る説明の動きを作った
- iPhoneではARの中でサイズと額を切り替えられる。使い方はARの入口で先に見せ、チャットのKnowledge Baseにも使い方と対処を足した
- 額の寸法は、製造の委託先の回答でモデルを作り直した。実機では、壁に置いた大きさが実物の額と合っていた。購入率への効果の測定はこれから
この記事を書いた人永田 龍史
株式会社ULTRO 代表取締役Shopify Partner。Shopifyストアの構築・保守・広告運用・CRMを一気通貫で担当。個人として運用した広告費は累計40億円超。計測設計から逆算して、利益が伸びる仕組みを作っています。Google 広告の認定資格（検索・ディスプレイ・動画・ショッピング・アプリ・P-MAX・測定）と Google アナリティクス認定資格を保有。
経歴と執筆記事81本を見る → Xでフォローする @Ryushi_ULTRO →自分のストアでは、どうなっているか。
無料診断では、あなたのShopifyの実データを見てサイトの健康状態を確認し、何から直すべきかを改善案とあわせてご提案します。
