3D WarehouseによるShopify AR

iOS 12がインストールされたデバイスでSafariブラウザーを使用するお客様は、Shopify ARによって現実的でインタラクティブなバージョンの商品を拡張現実 (AR) で表示できます。ARにより、お客様は商品のサイズ、スケール、および詳細をよりよく理解できるようになります。3D Warehouseアプリに3Dモデルをアップロードして、ストアの商品にリンクすることで、AR体験を有効にできます。

3Dで花瓶を表示する

お客様が商品をARで表示できるようにするには、3D Warehouseアプリをインストールして、商品の3Dモデルを取得し、3Dモデルをアプリに追加し、AR Quick Lookを有効にするためにテーマを編集して、3D商品にARバッジを追加してください。

ステップ1: 3D Warehouseアプリをインストールする

サインアップページで3D Warehouseアプリをインストールできます。

手順:

  1. サインアップページを開きます。
  2. myshopify.comのストアドメインを入力します。
  3. [インストール] をクリックします。
  4. 詳細を確認し、[アプリをインストールする] をクリックします。

管理画面のアプリ管理ページで、3D Warehouseアプリにアクセスできます。

ステップ2: 商品の3Dモデルを取得する

お客様が商品をARで表示できるようにするには、商品の3Dモデルが必要です。3Dモデルは、3次元で物体 (外観) を仮想的に表現したものです。これにより、どの角度からでも物体を見ることができます。

Shopify パートナープログラムから商品の3Dモデルを取得できます。

手順:

  1. 管理画面でアカウントメニューをクリックし、[Shopify Expertを雇う] をクリックします。

    Shopify エキスパートを雇う

  2. New functionalityセクションをクリックして拡張します。

  3. Create 3D models of your products for augmented reality (starting at $100 USD) をクリックします。

  4. 必要な質問に回答します。product photosやproduct dimensionsを提示する場合、リンクされているガイドラインに従っているかどうか確認します。

  5. [Send job] をクリックします。

ジョブリクエストを送信したことで、Shopify Expertを雇用する契約を結んだわけではありません。この手順は、プロジェクトの説明を対応可能なエキスパートに送信するだけで、その後エキスパートがそのリクエストを精査します。エキスパートがあなたとの共同作業を受け入れると決めた場合には、手数料やプロセスの開始方法に関する情報を加えてあなたに連絡をとります。

商品の写真や商品の寸法をジョブリクエストの一部として提示していない場合、その情報についてエキスパートからリクエストがあります。写真撮影と測定に関して、以下の仕様に従ってください。

商品の写真

3Dモデルは写真に基づいて作成されます。Shopify エキスパートが3Dモデルを作成するためには、複数の角度から撮影された商品の写真が必要です。

商品の写真の角度

商品の写真を撮影する場合、以下のガイドラインに従ってください。

  • 商品が十分に明るい場所にある
  • 商品全体に焦点が合っている
  • 可能であれば、携帯電話のカメラの使用を避けてください。家具など大きい商品の場合、50mmレンズのカメラを使用する。小サイズまたは中サイズの商品の場合、70mmまたは100mmのレンズを使用する
  • ユニークな詳細やテクスチャの写真を余分に撮影する
  • 写真ファイルのタイトルをblue vase - topblue vase - leftのように明確にして、はっきりとラベル付けされたフォルダーに保管する

商品の寸法

Shopify エキスパートが正確な3Dモデルを作成するためには、商品の詳細な測定が必要です。測定を行う場合、以下のガイドラインに従ってください。

  • 明確かつ簡単な用語で商品の寸法を説明する
  • mm単位で測定する
  • 測定値がどの部分に対応しているかを示す図を含める
  • 商品に関連する技術図面あるいはCADファイルがある場合は含める

3Dモデルを取得する例

Naomiは青い花瓶を販売しています。

花瓶

彼女は3D Warehouseアプリをインストールし、Services Marketplaceを使用してShopify エキスパートを見つけ、花瓶の3Dモデルを作成します。Naomiは70mmレンズのカメラで撮影した高画質の写真を、エキスパートに6枚提出します。

商品の写真の角度

商品の寸法をミリメートル単位で測定した図をエキスパートに提出します。

花瓶

  • 花瓶の高さ (1) は____mm
  • 花瓶の上部から首の下部まで (2) は____mm
  • 首の下部から花瓶の底部まで (3) は____mm
  • 花瓶の口の直径 (4) は____mm
  • 口の幅 (5) は____mm
  • 首の下部の口径 (6) は____mm
  • 花瓶には六角形の面が8つある
  • 六角形の面の高さ (8) は____mm
  • 六角形の面の幅 (9) は____mm
  • 花瓶の最も広い口径 (10) は____mm
  • 花瓶の底部の口径 (11) は____mm
  • 発泡体の足の直径は____mm

Shopify エキスパートはこのような写真や寸法を使用して、青い花瓶の3Dモデルを作成します。エキスパートは.glbファイルと.usdzファイルをNaomiに送信し、3D Warehouseアプリに追加します。

ステップ3: モデルの品質を確認する

Shopify Expertによって3Dモデルが提供されたら、その品質に満足できるかどうかを確認する必要があります。エキスパートはモデルをプレビューするための指示を提供する必要があります。

モデルをすべての側面から確認します。その際に、以下の質問について考えてみます。

  • モデルの形状が、エキスパートに提供した商品リファレンス写真と一致しているかどうか
  • モデルのすべての部分が残りの部分に比例しているかどうか
  • 拡張現実でモデルをプレビューすることができる場合、残りのシーンと比較してモデルのスケールが正しく見えるかどうか
  • モデルが商品と同じマテリアルから作られているように見えるかどうか
  • モデルのマテリアルが伸びたり、ぼやけたり、歪んで見えないかどうか
  • モデルのマテリアルをより現実的に見えるようにするための擦り傷やかすり傷などの詳細があるかどうか
  • 商品の一部が透明、反射、または光を放つ場合、それらは正しく表現されているかどうか
  • エッジがすべて現実的に見えるかどうか、また、そのうちに鋭すぎてやわらげる必要があるものがあるかどうか
  • ロゴやテキストのような装飾的な詳細がある場合、それらが見やすいかどうか
  • ないはずの隙間や穴がないかどうか

Shopify Expertは、特定の基準に従って3Dモデルを構築する必要があります。モデルをよりよくレビューできるように、これらの基準の詳細については、『マーチャント向け3Dモデルの作成』をご覧ください。

モデルの品質が十分でないと思われる場合は、Shopify Expertに連絡し、問題を説明してください。

ステップ4: 3D Warehouseアプリに3Dモデルを追加する

3D Warehouseアプリをインストールして3Dモデルのソースを取得したら、そのモデルを3D Warehouseアプリに追加する必要があります。

手順:

  1. 管理画面から [アプリ管理] をクリックします。
  2. [3D Warehouse] をクリックします。
  3. [Add 3D Model] をクリックします。
  4. [Title] フィールドに、3Dモデルのタイトルを入力します。
  5. [Linked Product] フィールドで、この3Dモデルと関連付けられている商品やバリエーションを選択し、[Select product] をクリックします。
  6. [Upload File] をクリックし、Shopify エキスパートにより提供されている.usdzファイルを選択します。
  7. [Save] をクリック

Shopify エキスパートが提供した.gltfファイルまたは.glbファイルのアップロード処理を繰り返します。ファイルが同じ商品にリンクされていることを確認してください。これにより、商品と関連付けられている3Dモデルのファイルタイプができます。

受け入れ可能なファイルタイプ

Shopify Expertでは、3Dモデル用に.usdz.gltf/.glbの2つの異なるファイルタイプが利用可能です。それぞれのファイルタイプは、それぞれのプラットフォームや機能で使用されます。たとえば、iOS 12がインストールされたデバイスのSafariブラウザーで商品を3D表示するには、.usdzファイルをアップロードする必要があります。オンラインストアが将来の拡張現実や3D機能と互換性があるかどうかを確認する最も良い方法は、両方のファイルタイプをアップロードすることです。

ステップ5: AR Quick Lookを有効にするためにテーマを編集する

テーマコードを編集してAR Quick Lookを有効にする必要があります。これは、iOS 12がインストールされたデバイスのSafariブラウザーで、お客様が商品を3D表示できる機能です。

手順:

  1. 管理画面から [オンラインストア] をクリックします。
  2. 現在のテーマの横で、[アクション] > [コードを編集する] の順にクリックします。
  3. レイアウトフォルダーで、[{/} theme.liquid] をクリックします。
  4. <head>タグを探します。ファイルの上部にあります。
  5. 次の行に、以下のコードを貼り付けます。
<script
  src="https://cdn.shopifycloud.com/ar-quicklook-js/assets/v1/shopify3d.js"
  crossorigin="anonymous"
></script>
  1. [Save] をクリック

  2. セクションフォルダ―で、[{/} product-template.liquid] をクリックします。

  3. ファイルの上部に以下のコードを貼り付けます。

<script>
  (function(s3d) {
    if (!s3d) {
      console.warn('"window.Shopify3d" does not exist. Please ensure you\'ve added the <script> to your theme');
      return;
    }
    {% for variant in product.variants %}
      s3d.mapMetafieldAssets('{{ variant.id }}', '{{ variant.metafields.shopify3d['assets'] }}');
    {% endfor %}
  })(window.Shopify3d);
</script>

商品テンプレートが追加されたQuick Lookライブラリー

  1. [Save] をクリック

複数の商品テンプレートを使用する場合、テンプレートファイルにそのコードを追加します。

ステップ6: 3D商品にARバッジを追加する

iOS 12デバイスを使用しているお客様には、ARバッジオーバーレイが表示される際に、商品が3Dで表示されます。

ARバッジオーバーレイ

商品画像にARバッジを表示するには、テーマコードを編集する必要があります。

手順:

  1. 管理画面から [オンラインストア] をクリックします。
  2. 現在のテーマの横で、[アクション] > [コードを編集する] の順にクリックします。
  3. セクションフォルダ―で、[{/} product-template.liquid] をクリックします。
  4. 商品の写真と関連のあるテンプレートのセクションを探しください。ProductPhotoまたはfeatured_imageといったキーワードを探します。
    商品写真のLiquid
  5. 商品写真セクションの中で、最初の<img... >タグをみつけます。
  6. そのタグの上の行に、以下のコードを貼り付けます。
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>

商品写真のLiquidとコード

  1. [Save] をクリック
  2. テーマのCSSが含まれているファイルを開きます。このファイルは通常 [アセット] フォルダーにあり、ほとんどの場合{/}theme.scss.liquidのようなタイトルがあります。
  3. ファイルの最下部に、以下のコードを貼り付けます。
.ar-quicklook-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 2;
  }
  1. [Save] をクリック

3Dモデルをテストするには、iOS 12がインストールされたデバイスのSafariブラウザーで自分のオンラインストアを開き、商品ページに移動します。商品画像のARバッジをタップして、3Dで表示します。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す