1枚の写真から作るAR 3Dモデル
写真1枚から3~5分でAR 3Dモデルを作成。AndroidのScene ViewerとWeb向けのGLB、iPhoneとiPadのAR Quick Look向けのUSDZに対応します。
- 無料クレジット3回、カード不要
- GLB + USDZ
- iPhone、iPad、Android
部屋に置けるAR 3Dモデルの作り方
スマホ両OSには標準のARビューアがあります。プラットフォームごとに1ファイル、そして正しいサイズを焼き込む必要があります。
- 01
写真1枚から生成
単一のオブジェクトを鮮明に撮った写真をここまたはスタジオでアップロードします。ARにはテクスチャ付きで生成してください(3クレジット、有料プラン)。グレーのモデルは実際のテーブルの上で未完成に見えます。テクスチャ付きモデルは通常3~5分かかります。 - 02
実寸を設定
AIはオブジェクトの大きさを知りません。BlenderでGLBを開き、Nパネルで寸法をメートル単位で設定し、スケールを適用して再書き出しします。glTFの1 unit = 1 mにより、ARではそのサイズで配置されます。 - 03
AndroidとWeb向けにGLBを書き出す
GoogleのScene ViewerとWebコンポーネント<model-viewer>が読み込むのはGLBです。無料ダウンロードでもあります。 - 04
Appleデバイス向けにUSDZを書き出す
USDZは、iPhone、iPad、Apple Vision ProのSafari、メッセージ、メール、ニュース、メモでAR Quick Lookが開く形式です。有料のスタジオ書き出しを使うか、無料のGLBをUSDZに変換するコンバーターでGLBを自分で変換できます。 - 05
両方のファイルを確認
- 06
リンクまたは埋め込みで公開
ファイルをHTTPSでホストし、次のセクションのコードを使います。<model-viewer>タグ1つで両プラットフォームに対応できます。
AR 3Dモデル:各プラットフォームに必要なもの
AppleとGoogleの開発者ドキュメントに基づく要件(2026年10月確認)。
| iPhone / iPad(AR Quick Look) | Android(Scene Viewer) | |
|---|---|---|
| ファイル形式 | USDZ | glTF 2.0 / GLB |
| 配信方法 | MIMEタイプ model/vnd.usdz+zip | HTTPS URL |
| Webリンク | 子要素に<img>または<picture>をちょうど1つだけ含む<a rel="ar" href="model.usdz"> | intent://arvr.google.com/scene-viewer/1.0?file=…リンク |
| サイズ上限 | 明確な数値は公開されていません。Androidの目標値を安全な目安にしてください | 推奨は100k三角形(理想は30–50k)、10 MB、テクスチャは最大2048 × 2048 |
| マテリアル | PBR | PBR。推奨は最大10マテリアル、メッシュごとにUVセット1つ(厳格な上限) |
| 拡張 | 該当なし | KHR_materials_unlitとKHR_texture_transformのみが記載されています |
| 向き | 検出された面に直立で配置 | +Yが上。正面は+Zを向くように |
| 影 | テクスチャに焼き込まない | 硬い影は自動で追加されるため、焼き込まない |
WebサイトにAR 3Dモデルを埋め込むコード
すべてのスマホに対応するタグ1つ。 GoogleのWebコンポーネント<model-viewer>はGLBを読み込み、ar属性を付けると対応デバイスでARを提供します。デフォルトのar-modes値はwebxr scene-viewer quick-lookで、この優先順位です。ios-srcを設定しない場合、iPhone向けのUSDZをその場で生成するため、GLB1つで両プラットフォームをカバーできます。アートや鏡にはar-placement="wall"を、商品を誤ったサイズにピンチ操作させたくない場合はar-scale="fixed"を設定します。
iPhoneのみ、JavaScriptなし。 USDZをrel="ar"でリンクし、プレビュー用の<img>を1つ包みます。するとSafariはページ遷移せずにその場でAR Quick Lookを開き、終了時にはページに戻ります。サーバーはファイルをmodel/vnd.usdz+zipとして送信する必要があります。そうでないとSafariはARコンテンツとして扱いません。
Androidのみ。 arvr.google.com/scene-viewer/1.0へのインテントリンクを使い、file=にGLBのHTTPS URLを設定します。3Dプレビューをスキップするにはmode=ar_onlyを追加し(Googleはブラウザから起動するリンクには使わないよう推奨)、実寸を固定するにはresizable=false、表示名にはtitle=を設定します(60文字で切り捨て)。AR非対応の人を有用な場所へ誘導するため、S.browser_fallback_urlを含めてください。
写真1枚から作ったAR 3Dモデル
人が実際にARで置くもの:商品、インテリア雑貨、コレクターズアイテム。買い物客のように、それぞれを回転させてテクスチャを間近で確認できます。
AR向けUSDZ:サイズと軽さを正しく整える
スマホでARモデルに違和感が出る原因は2つ:サイズが違うことと、読み込みが遅いことです。サイズはファイルの一部なので、書き出す前に修正します。26 cmのスニーカーはglTFで高さ0.26 unitsにする必要があります。次にファイルを軽く保ちます。GoogleのScene Viewer向けガイドラインは、三角形数10万未満(理想は3万~5万)、10 MB未満、テクスチャは最大2048 × 2048です。
- 無料のメッシュ簡略化ツールで三角形数を削減
- 当社のGLB圧縮ツールはmeshoptとWebPを使用しています。
<model-viewer>では問題ありませんが、Scene Viewerはどちらの拡張も記載していないため、使用前にテストしてください - テクスチャに影を焼き込まないでください。Scene Viewerはオブジェクト配置時に独自の影を追加します
- オブジェクトの正面を+Zに向けて、見る人と向き合うように
AR 3Dモデルのやるべきこと・避けること
- 商品は柔らかく均一な光で撮影 – テクスチャは写真から作られます
- 顧客が見るものにはテクスチャ付きモデルを生成
- 書き出す前に実世界の寸法をメートルで設定
- 公開前にiPhoneとAndroidを1台ずつでテスト
- AR非対応の人向けにフォールバック画像を用意
- 元写真で光沢のある反射や強い影を使う
- 商品ページに50 MBのファイルを配信する
- 正面だけの商品写真からAIに背面を推測させる
- アニメーションを期待する – モデルは静的です
- ぴったり合う必要がある部品など、正確な寸法が重要な場面でAIモデルを使う
AI製ARコンテンツの正直な限界
AI再構成は、ものがどんな見た目で、部屋の中でどれくらいの大きさかを示すのに非常に優れています。ただし計測スキャンではありません。比率は近いものの正確ではなく、ラベルの細かい文字はたいていぼやけます。箱が40 cmの棚に収まるかどうかを買い物客が知る必要があるなら、ARボタンの横に実寸をページ上で明記してください。
モデルは動きません。スケルトンがないため、歩行サイクルやアニメーションキャラクターは作れず、静的表示が役割です。家具についてはインテリアデザインのワークフロー、同じオブジェクトの印刷版については写真からフィギュアをご覧ください。
ARファイル向けツール
FAQ
よくある質問
AR 3Dモデルはどのファイル形式を使いますか?
iPhoneでAR用USDZを表示するには?
AndroidでGLBをARで開くには?
SupaVoxelのAR 3Dモデルは無料ですか?
ARモデルのサイズが合わないのはなぜ?
ARモデルを商品ページで商用利用できますか?
ARモデルはアニメーションできますか?
1つのファイルでiPhoneとAndroid両方のARに対応できる?
ar属性を付けて埋め込むだけ。デフォルトのar-modesはwebxr、scene-viewer、quick-lookで、ios-srcがなくてもiPhone向けのUSDZを自動生成します。ただしMessagesなどWeb外での共有には別途USDZファイルが必要です。関連ツールとガイド
続きを読む
無料で始める
AR 3Dモデルで商品をあなたの部屋に
写真をアップロードするだけで数分でテクスチャ付きモデルが完成。GLBとUSDZで書き出せます。無料クレジット3回分、カード登録不要。
クレジットカード不要 · 無料クレジット3回分付き