Shopify 3D 製品モデル: GLB、AR およびビューアー ワークフロー ガイド
TL;DR
- Shopify は 3D 製品モデルをネイティブにサポートしています。モデルを表示したり、AR を有効にしたりするためのアプリは必要ありません。
- Shopify は GLB および USDZ モデルを受け入れます。 Shopify は互換性のあるデバイスに必要なコンパニオン形式を作成するため、GLB-first ワークフローは便利です。
- 多くの場合、本当のボトルネックはパフォーマンスではなく、3D モデルの取得です。作成、生成、または外部委託することができます。
- アップロード前に最適化: モバイルの速度を維持できるように、ポリゴン数とテクスチャ サイズを適切に保ちます。
- パスを選択してください: ほとんどの店舗ではネイティブ 3D メディア (無料)。高度なニーズに対応するサードパーティ アプリまたはカスタム Liquid ビューア/コンフィギュレータ。
Shopify は、製品メディアとして 3D 製品モデルをサポートしており、買い物客は製品ページ上でモデルを回転し、互換性のある携帯電話で AR を使用できます。通常、より困難な部分は 適切な 3D モデルを取得する ことです。このガイドでは、モデルの作成と最適化からアップロード、ビューアーのセットアップ、モバイル テストまでのワークフローについて説明します。
Shopify での 3D 製品モデルの仕組み
Shopify は、画像やビデオとともにネイティブ製品メディアとして 3D モデルをサポートします。互換性のあるテーマを使用すると、別のストアフロント アプリを必要とせずに、製品ギャラリーでモデルをレンダリングできます。
買い物客はブラウザでモデルを回転、ズーム、検査できます。サポートされているモバイル デバイスでは、商品ページで 「自分のスペースで表示」 を提供できるため、AR を通じて買い物客の環境に商品を配置できます。
Shopify は、GLB と USDZ の両方の製品モデルを受け入れ、アップロードされたモデルを処理するため、互換性のある形式がデバイス間で利用可能になります。 GLB ではジオメトリ、マテリアル、テクスチャが 1 つのファイルにパッケージ化されているため、このガイドでは GLB-first ワークフローを使用します。納品前に、Shopify の現在の製品メディア要件を確認してください。
3D モデルはどこから来たのですか?
モデルを構築したり、PROTECTED_22 で生成したり、3D アーティストに依頼したりできます。製品の要求精度、カタログサイズ、予算、発売スケジュールに基づいて選択してください。
自分で作成: Blender または CAD
Blender ツールと CAD ツールは、ディメンション、トポロジ、UV、マテリアルを最大限に制御できます。このルートは、エンジニアリング主導の製品や、正確な測定値と一致する必要があるアイテムに適していますが、モデリングの専門知識とより多くの生産時間が必要です。
AI で生成
反復処理を高速化するために、Tripo 画像を 3D に変換 により、製品画像を 3D 開始点に変換できます。結果は、特に隠れた表面、薄い部品、対称性、および正確なスケールについて、実際の製品と比較してチェックする必要があります。
一般的なワークフローは単純です。
- 製品の写真をアップロードします (またはテキスト プロンプトを入力します)。
- AI を使用して 3D モデルを生成します。
- 必要に応じて結果を確認し、調整します。
- モデルを GLB としてエクスポートし、Shopify にアップロードします。
このルートでは大規模なカタログの生産を短縮できますが、複雑な製品や寸法が重要な製品は、顧客向けの 3D または AR に適する前に手動でクリーンアップする必要がある場合があります。
購入またはアウトソーシング
既存の資産は汎用製品に使用できますが、独自の商品には通常、委託モデルが必要です。現実世界のスケール、PBR マテリアル、クリーンなトポロジ、Shopify 互換の成果物を求めてください。
AI は、速度とカタログ範囲が重要な場合に役立ちます。寸法精度や最高のクローズアップ品質が重要な場合は、手動モデリングまたはプロによる調整の方が安全です。ハイブリッド ワークフローでは、高速生成とターゲットを絞ったアーティストのクリーンアップを組み合わせることができます。
アップロードする前にモデルを最適化する
Web モデルは、ビジュアル品質とダウンロード サイズおよびデバイスのパフォーマンスのバランスを取る必要があります。アップロードする前に、ジオメトリ、テクスチャ、スケール、方向、原点を確認してください。
ポリゴンとファイル サイズ
製品のシルエットや目に見える詳細を改善しないジオメトリを削除します。一般に、複雑さの低いメッシュは、モバイル ハードウェアでより効率的にダウンロードおよびレンダリングされます。
AI で生成されたメッシュまたは高密度メッシュの場合、Tripo スマート メッシュ は、Web3D およびリアルタイム ワークフロー向けに、よりクリーンで低ポリゴンのトポロジを作成できます。テクスチャを圧縮し、Draco を使用するのは、完全なエクスポートおよびビューア パイプラインがそれをサポートしている場合のみです。
Shopify は現在、500 MB までの 3D モデルのアップロードを受け入れ、15 MB を超えるファイルは自動的に最適化されます。 15 MB をアップロード制限ではなく最適化のしきい値として扱い、Shopify の製品メディア ドキュメントで現在の要件を確認してください。
現実世界のスケールと方向
単位、方向、または原点の配置が正しくないと、AR 内で製品が大きすぎたり、小さすぎたり、位置が適切でなかったりする可能性があります。
現実世界のスケールでエクスポートし、モデルの上軸と前軸を確認し、ベースの中心などの論理的な接触点に原点を配置します。顧客が置く可能性が高い表面で結果をテストします。
テクスチャと PBR
未使用のマテリアルを削除し、適切なテクスチャ解像度を使用し、目に見える詳細を損なうことなくオーバーヘッドを削減できる場合は、マップをアトラスに結合します。
標準の PBR マテリアルを使用し、Shopify のビューアでの外観をテストします。反射性の高いマテリアル、透明なマテリアル、またはレイヤー状のマテリアルは、ブラウザやデバイスによって追加の調整が必要になる場合があります。
Shopify 製品に 3D モデルを追加する (ステップバイステップ)
最適化後、モデルを製品メディアとしてアップロードし、公開する前に最初のプレゼンテーションを構成します。
- Shopify 管理者 を開き、製品 に移動し、更新する製品を選択します。
- メディア セクションで、メディアの追加 をクリックし、サポートされている GLB または USDZ ファイルをアップロードします。 Shopify はそれを処理し、メディア ギャラリーに追加します。
- アップロードした 3D モデルを選択し、ファイルの編集 をクリックし、Shopify のコードなしエディタを使用して環境、照明、背景、モデルの初期回転とズームを調整します。
- 製品ページをプレビューします。デスクトップで回転とズームを確認し、サポートされている iOS および Android デバイスで 「自分のスペースで表示」 をテストします。
現在のエディターのパスと利用可能なコントロールについては、Shopify の 3D モデル エディターのドキュメントを参照してください。
AR:「自分のスペースで表示」をオンにする
アップロードされた単一のモデルは、対話型店頭ビューアと、Shopify が互換性のある形式に処理した後の AR の両方をサポートできます。通常、サポートされているデバイスごとに個別のストアフロント資産を管理する必要はありません。
「スペースで表示」 コントロールは、デバイス、ブラウザ、テーマ、モデルが AR をサポートしている場合にのみ表示されます。デスクトップのプレビューに依存するのではなく、物理デバイスでテストします。
互換性のある Apple デバイスは USDZ と Apple Quick Look を使用します。サポートされている Android デバイスでは Google Scene Viewer を使用できます。 Shopify は互換性のあるモデル形式を準備し、テーマは製品メディアと AR コントロールのレンダリングを担当します。
製品を公開する前に、実際のモバイル デバイスでエクスペリエンスをテストしてください。
- サポートされているスマートフォンで製品ページを開きます。
- 「スペースで表示」 ボタンが表示されていることを確認します。
- AR ボタンをタップし、製品を床またはテーブルに置きます。
- モデルのサイズ、向き、照明が自然に見えることを確認してください。
ネイティブ 3D、サードパーティ アプリ、カスタム ビューアー
製品に必要なインタラクションに基づいて、ネイティブ製品メディア、サードパーティ コンフィギュレータ、またはカスタム テーマ実装の中から選択します。
ネイティブ 3D メディア
ネイティブ 3D メディアは、回転、ズーム、およびサポートされている AR の最も簡単なルートです。テーマが既に Shopify 製品メディアを正しく処理している場合に最適に機能します。
サードパーティのアプリとコンフィギュレーター
買い物客が 3D エクスペリエンス内で素材の変更、コンポーネントの構成、ホットスポットのトリガー、または製品オプションの操作を行う必要がある場合は、サードパーティのプラットフォームを使用します。
- 色と素材の切り替え
- 製品構成
- コンポーネントの選択
- インタラクティブなホットスポット
- ガイド付き製品エクスペリエンス
カスタム液体ビューア
カスタム テーマの場合は、Shopify のサポートされている Liquid パスから開始します。model_viewer_tag で製品モデル メディアをレンダリングし、Shopify の製品メディアと、デバイス固有の AR の Shopify-XR ガイダンスに従います。
テーマにカスタム コントロール、ホットスポット、アニメーション、または読み込み動作が必要な場合、未加工の Google <model-viewer> 統合は引き続き高度なオプションになりますが、開発者はアクセシビリティ、メディアの状態、フォールバック、AR 構成を管理する必要があります。
どれを選ぶべきですか?
- 簡単なものが必要ですか? Shopify の ネイティブ 3D メディア を使用してください。
- 製品のカスタマイズまたはコンフィギュレーターが必要ですか? サードパーティ 3D プラットフォームを選択してください。
- 完全な制御が必要ですか? Shopify のネイティブ メディア統合を拡張するか、高度なカスタム ビューアを構築します。
3D モデルは実際に役立ちますか?パフォーマンスと変換
3D は有用な製品コンテキストを追加できますが、その価値は製品と実装によって異なります。すべてのカタログが平等にメリットを享受できると仮定するのではなく、パフォーマンスと顧客の行動を測定します。
パフォーマンス: 神話と現実
読み込み動作はテーマとビューアによって異なります。最適化されたジオメトリとテクスチャにより、転送、メモリ、レンダリングのコストが削減されますが、販売者は依然として、ミッドレンジのモバイル デバイスや低速の接続で代表的な商品ページをテストする必要があります。
変換と返品
インタラクティブ 3D と AR は、平面画像では伝わりにくいスケール、形状、詳細を買い物客が理解するのに役立ちます。
コンバージョンと収益率の結果は、カテゴリ、視聴者、アセットの品質、掲載場所によって大きく異なります。外部のケーススタディを予測ではなくコンテキストとして扱い、店舗固有のエンゲージメント、コンバージョン、返品データを使用して機能を評価します。
3D に価値があるとき
すべての製品に 3D モデルが必要なわけではありません。最大の価値は、買い物客が購入前に規模、素材、または空間への適合を理解することで利益を得られるアイテムから生まれます。
3D モデルは以下の場合に特に役立ちます。
- 家具と室内装飾
- 靴とファッション アクセサリー
- ジュエリーおよび高級品
- 家庭用電化製品
- 産業用機器および技術製品
- 構成可能なオプションを備えた製品
安価な製品や高度に標準化された製品の場合、従来の写真ですでに十分な情報が提供されている可能性があります。適切な戦略は、最高価値または最高収益の SKU から始めて、エンゲージメントとコンバージョンを測定し、結果が投資に見合ったものであればカタログの残りの部分に 3D を拡張することです。
よくある落とし穴とトラブルシューティング
ほとんどの障害は、アセットの複雑さ、不適切なスケール、サポートされていないデバイスの状態、またはテーマ メディアの処理が原因で発生します。公開する前に以下のチェックを行ってください。
モデルの読み込みが遅い、またはモバイルで読み込まれない
読み込みが遅い場合は、ジオメトリ、テクスチャ解像度、マテリアル数、および合計ファイル サイズを調べてください。 Shopify は最大 500 MB のファイルを受け入れ、15 MB を超えるファイルを最適化しますが、モバイル配信にはやはり小さくて効率的なアセットが望ましいです。
チェックリスト:
- ポリゴン数を減らします。
- テクスチャを圧縮します。
- 最適化された GLB をエクスポートします。
- Wi-Fi とモバイル データの両方でテストします。
AR の製品のサイズが間違っているように見えます
AR で製品が巨大または小さく見える場合は、モデルのスケールまたは方向が正しくない可能性があります。エクスポートする前に、現実世界の単位が使用されていること、正しい前方軸があること、原点がオブジェクトのベースに配置されていることを確認してください。
チェックリスト:
- 単位を確認します (現実世界のスケール)。
- モデルの向きを確認してください。
- 原点/ピボットが正しく配置されていることを確認します。
- 実際のモバイルデバイスで再度テストしてください。
スペースで表示 ボタンが表示されない
モデルは回転するが、AR が利用できない場合は、アップロードがサポートされている GLB または USDZ モデルであることを確認し、互換性のある物理デバイスでテストし、テーマが Shopify の AR コントロールをレンダリングすることを確認します。
チェックリスト:
- モデルがサポートされている形式であることを確認してください。
- 物理的な iPhone または Android デバイスでテストします。
- オペレーティング システムとブラウザが AR をサポートしていることを確認してください。
- 最近モデルを交換した場合は、製品を再公開してください。
AR iPhone では動作しません
iOS では、Quick Look 互換デバイスの Safari でテストします。それでも AR が失敗する場合は、Shopify の処理が完了するまで待ち、スケールとマテリアルを再確認し、テーマが Shopify でサポートされている製品とメディアの統合を使用していることを確認します。
チェックリスト:
- サポートされている iPhone または iPad の Safari でテストします。
- Apple Quick Look がデバイスで利用可能であることを確認してください。
- 問題が解決しない場合は、最新の Shopify ドキュメントを参照してください。
公開前に実際のモバイル デバイスで数分間テストすることで、ほとんどの問題を早期に発見でき、顧客はスムーズな 3D および AR エクスペリエンスを確実に得ることができます。
よくある質問
Shopify は 3D モデルにどのファイル形式を使用しますか?
Shopify は、GLB と USDZ の両方の製品モデルを受け入れます。 GLB-first ワークフローは、モデルとテクスチャを 1 つのファイルにパッケージ化するため、Web 配信に便利ですが、USDZ は Apple Quick Look によって使用されます。 Shopify は、サポートされているデバイス間で互換性のある形式を提供するためにアップロードを処理します。
Shopify 製品に 3D モデルを追加するにはどうすればよいですか?
Shopify 管理者 → 製品 を開き、製品を選択し、サポートされている GLB または USDZ ファイルを メディア にアップロードします。アップロードされたモデルを選択し、ファイルの編集 を使用してその最初のプレゼンテーションを調整します。公開する前にストアフロントをプレビューし、物理的なモバイル デバイスで AR をテストします。
Shopify では 3D 製品モデルは無料ですか? それともアプリが必要ですか?
Shopify のネイティブ製品メディア機能には、基本 3D およびサポートされている AR 用の別個のビューア アプリは必要ありません。サードパーティのアプリは、コンフィギュレーター、マテリアルの切り替え、ホットスポット、分析、または特殊な統合に依然として役立つ場合があります。アクティブなテーマが Shopify 製品メディアをサポートしていることを確認してください。
Shopify 製品で AR を有効にするにはどうすればよいですか?
サポートされている 3D モデルをアップロードし、Shopify 製品メディアと AR コントロールをレンダリングするテーマを使用します。 Shopify は、互換性のある GLB および USDZ アセットを準備します。サポートされている Apple デバイスは Quick Look を使用しますが、互換性のある Android デバイスは Scene Viewer を使用できます。実機で結果を確認してください。
3D モデルは Shopify ストアの速度を低下させますか?
アセットが大きい場合、またはテーマの読み込みが非効率である場合は可能です。不要なジオメトリを削減し、テクスチャを最適化し、モバイル ハードウェアや低速ネットワークで実際の製品ページをテストします。読み込み動作は実装に依存するため、一般的なパフォーマンスの主張に依存するのではなく、測定してください。
Shopify 製品の 3D モデルはどこで入手できますか?
Blender または CAD で製品をモデリングしたり、PROTECTED_30 画像を 3D に変換して開始点を生成したり、適切なライセンス付きアセットを購入したり、3D アーティストに依頼したりできます。どちらのルートを選択する場合でも、公開する前に寸法、材料、トポロジ、および使用権を確認してください。
GLB と Shopify の USDZ の違いは何ですか?
GLB は、ジオメトリ、マテリアル、テクスチャを 1 つのファイルに含めることができるコンパクトな Web 指向の形式です。 USDZ は Apple Quick Look AR に使用されます。 Shopify は両方の形式を受け入れ、互換性のあるストアフロントとデバイスのエクスペリエンスのためにアップロードを処理します。
結論
Shopify は、インタラクティブ 3D とサポートされている AR のための製品メディア基盤を提供します。エクスペリエンスの品質は、モデル、テーマ、テストによって異なります。正確なアセットを作成または調達し、それを最適化し、サポートされている形式をアップロードして、実際のデバイスで結果を検証します。製品画像から開始モデルを作成するには、Tripo AI Studio を試してください。
