AR ショッピング体験

AR 商品表示を画像1枚から3D化

Shopify・BASE などの EC ストアで、ユーザがスマホ AR で商品を「自分の部屋に置いて」確認できる導入を、撮影機材なしで実現します。

商品写真1枚から3Dモデルを生成し、ECサイトに <model-viewer> で埋め込み。iPhone/Android のAR機能でユーザの部屋に試し置きできるように。

AR 試し置きは、家具・雑貨・小物の EC で購入率を大きく押し上げる施策です。しかし従来は3Dスキャナー機材と撮影スタジオが必要で、中小ECには敷居が高い領域でした。Image2GLB は商品写真1枚から AR 表示用の GLB を生成し、Shopify テーマや BASE のカスタム HTML に貼るだけで AR 対応が完了します。

iOS Safari の Quick Look (USDZ) も Web の <model-viewer> 経由で動作するため、追加のアプリインストールは不要。GLB と USDZ の両方を視野に入れたフローを最初から組めます。

実際に作れる3Dモデルのサンプル

下のビューアはマウス/タッチでぐるぐる回せます。すべて Image2GLB の AI で生成済みのサンプルです。

ベージュスニーカー の元画像
ベージュスニーカー - 生成された3Dモデル
サンプル3Dモデル 操作可能な3Dビューアを準備中
ベージュスニーカー — アパレル商品ページに3Dプレビューを差し込み、回転で全方位を見せられる。
レザーアームチェア の元画像
レザーアームチェア - 生成された3Dモデル
サンプル3Dモデル 操作可能な3Dビューアを準備中
レザーアームチェア — 1枚の商品写真から、AR配置や家具ECの3Dビューに使えるアセットへ。
観葉植物のスツール の元画像
観葉植物のスツール - 生成された3Dモデル
サンプル3Dモデル 操作可能な3Dビューアを準備中
観葉植物のスツール — 観葉植物の写真からAR配置 / インテリアECで使える3Dへ。

EC 商品の AR 表示を1枚画像から立ち上げる手順

  1. 1

    商品写真を 3/4 ビューで撮影

    白背景・斜め上から。1枚で十分。

  2. 2

    Image2GLB で 3D 化

    3〜5 分で GLB が完成。

  3. 3

    CDN にアップロード

    Cloudflare R2 / Vercel Blob などに GLB を配置。

  4. 4

    &lt;model-viewer&gt; を商品ページに埋め込み

    ar 属性を付ければスマホで AR ボタンが出ます。

  5. 5

    iOS USDZ 変換 (任意)

    Apple Reality Converter で USDZ も作れば iOS Quick Look 完全対応。

Image2GLB の早見表

できること写真・イラスト・AI生成画像1枚から、テクスチャ付きの3Dモデルを自動生成
無料で試せる量登録で60クレジット(標準品質1体+STL書き出し分)。クレジットカード不要
有料プラン月額980円から(500クレジット/月)。いつでも解約可
1体あたりの消費標準品質 37クレジット / 高品質 72クレジット
所要時間標準品質でおおむね3〜5分
入力できる画像PNG / JPEG / WebP(20MBまで)。テキストからAIで元画像を作ることも可能
出力形式GLB / STL / 3MF / Unity用ZIP / Webゲーム用ZIP
使える端末PC・iPhone・Android のブラウザ。アプリのインストール不要
言語・決済画面・サポートとも日本語。日本円(税込)のカード決済
できないことリギング(骨入れ)やアニメーションは付きません。人物の顔の再現や細い部品は苦手です

よくある質問

Q. Shopify でも動きますか?
はい、Liquid テンプレートに <model-viewer> タグを直接書けば動作します。アプリ不要。
Q. 商用利用 OK ですか?
利用規約の範囲で商用利用できます。元にした画像やキャラクターの権利はご自身で確認してください。
Q. iPhone でも AR 表示できますか?
USDZ も用意すれば iOS Quick Look で完全に動作します。GLB のみでも Android Chrome は対応します。

関連する記事

関連ページ