3D WarehouseによるShopify AR
iOS 12がインストールされたデバイスでSafariブラウザを使用するお客様は、Shopify ARによって現実的でインタラクティブなバージョンの商品を拡張現実で表示できます。拡張現実により、お客様は商品のサイズ、スケール、および詳細をよりよく理解できるようになります。3D Warehouseアプリに3Dモデルをアップロードして、ストアの商品にリンクすることで、拡張現実の体験を有効にできます。
お客様が商品を拡張現実で表示できるようにするには、3D Warehouseアプリをインストールして、商品の3Dモデルを取得し、3Dモデルをアプリに追加し、AR Quick Lookを有効にするためにテーマを編集して、3D商品に拡張現実バッジを追加してください。
目次
ステップ1: 3D Warehouseアプリをインストールする
ステップ2: 商品の3次元モデルを取得する
お客様が商品を拡張現実で表示できるようにするには、商品の3次元モデルが必要です。3次元モデルは、3次元で物体 (外観) を仮想的に表現したものです。これにより、どの角度からでも物体を見ることができます。
Shopify Expertから有料サポートを受け、商品の3Dモデルを作成できます。Shopify エキスパートマーケットプレイスでは、3Dモデル作成サービスを提供しているExpertを探して、選択した後に問い合わせることができます。
Expertお問い合わせフォームを使用して、プロジェクトの詳細を提供します。商品の写真や商品の寸法を提供する場合、リンクされているガイドラインに従っているかどうか確認します。
Expertに問い合わせたからといって、Shopify Expertを雇わなければならないわけではありません。この手順では単に、確認できるExpertにリクエストを送信するだけです。Expertがあなたに協力することを決定した場合は、手数料と連携を開始する方法についての詳細を連絡します。
商品の写真や商品の寸法をジョブリクエストの一部として提示していない場合、その情報についてエキスパートからリクエストがあります。写真撮影と測定に関して、以下の仕様に従ってください。
商品の写真
3次元モデルは写真に基づいて作成されます。Shopify Expertが3次元モデルを作成するためには、複数の角度から撮影された商品の写真が必要です。
商品の写真を撮影する場合、以下のガイドラインに従ってください。
- 商品が十分に明るい場所にある
- 商品全体に焦点が合っている
- 可能であれば、携帯電話のカメラの使用を避けてください。家具など大きい商品の場合、50mmレンズのカメラを使用する。小サイズまたは中サイズの商品の場合、70mmまたは100mmのレンズを使用する
- ユニークな詳細やテクスチャの写真を余分に撮影する
- 写真ファイルのタイトルを
blue vase - topやblue vase - leftのように明確にして、はっきりとラベル付けされたフォルダーに保管する
商品の寸法
Shopify Expertが正確な3Dモデルを作成するためには、商品の詳細な測定が必要です。測定を行う場合、以下のガイドラインに従ってください。
- 明確かつ簡単な用語で商品の寸法を説明する
-
mm単位で測定する - 測定値がどの部分に対応しているかを示す図を含める
- 商品に関連する技術図面あるいはCADファイルがある場合は含める
3次元モデルを取得する例
Naomiは青い花瓶を販売しています。
彼女は3D Warehouseアプリをインストールし、Expertsマーケットプレイスを使用してShopify Expertを雇い、花瓶の3Dモデルを作成します。Naomiは70mmレンズのカメラで撮影した高画質の写真6枚を、Expertに提供します。
商品の寸法をミリメートル単位で測定した図をエキスパートに提出します。
- 花瓶の高さ (1) は____mm
- 花瓶の上部から首の下部まで (2) は____mm
- 首の下部から花瓶の底部まで (3) は____mm
- 花瓶の口の直径 (4) は____mm
- 口の幅 (5) は____mm
- 首の下部の口径 (6) は____mm
- 花瓶には六角形の面が8つある
- 六角形の面の高さ (8) は____mm
- 六角形の面の幅 (9) は____mm
- 花瓶の最も広い口径 (10) は____mm
- 花瓶の底部の口径 (11) は____mm
- 発泡体の足の直径は____mm
Shopify Expertはこれらの写真と寸法で青い花瓶の3Dモデルを作成します。Expertは.glbファイルと.usdzファイルをNaomiに送信し、3D Warehouseアプリに追加します。
ステップ3: モデルの品質を確認する
Shopify Expertによって3Dモデルが提供されたら、満足できる品質かどうかを確認する必要があります。Expertはモデルをプレビューするための指示を提供する必要があります。
すべての角度からモデルを確認してください。glTF Viewerを使用して、3Dモデルのプレビューを行うことができます。モデルを確認している間に、以下の質問を検討してください。
- モデルの形状が、Expertに提供した商品リファレンス写真と一致しているかどうか
- モデルのすべての部分が残りの部分に比例しているかどうか
- 拡張現実でモデルをプレビューすることができる場合、残りのシーンと比較してモデルのスケールが正しく見えるかどうか
- モデルが商品と同じマテリアルから作られているように見えるかどうか
- モデルのマテリアルが伸びたり、ぼやけたり、歪んで見えないかどうか
- モデルのマテリアルをより現実的に見えるようにするための擦り傷やかすり傷などの詳細があるかどうか
- 商品の一部が透明、反射、または光を放つ場合、それらは正しく表現されているかどうか
- エッジがすべて現実的に見えるかどうか、また、そのうちに鋭すぎてやわらげる必要があるものがあるかどうか
- ロゴやテキストのような装飾的な詳細がある場合、それらが見やすいかどうか
- ないはずの隙間や穴がないかどうか
- 3次元モデルは、Shopifyプラットフォームの技術的な要件を満たしていますか?
- 3次元モデルはGLBファイルである必要があります。
- GLBファイルは約4MBである必要があります。
- GLBファイルは15MBを超えることはできません。
Shopify Expertは、特定の基準に従って3次元モデルを構築する必要があります。モデルをよりよくレビューできるように、これらの基準の詳細については、「マーチャント向け3次元モデルの作成」をご覧ください。
モデルの品質が十分でないと思われる場合は、Shopify Expertに連絡し、問題を説明してください。
ステップ4: 3D Warehouseアプリに3次元モデルを追加する
3D Warehouseアプリをインストールして3次元モデルのソースを取得したら、そのモデルを3D Warehouseアプリに追加する必要があります。
手順:
管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。
[アプリと販売チャネル] ページで、[3D Warehouse] をクリックします。
[アプリを開く] をクリックします。
[3次元モデルを追加する] をクリックします。
[Title] フィールドに、3次元モデルのタイトルを入力します。
[Linked Product] フィールドで、この3Dモデルと関連付けられている商品やバリエーションを選択し、[Select product] をクリックします。
[Upload File] をクリックし、Shopify Expertにより提供されている
.usdzファイルを選択します。[保存] をクリックします。
Shopify Expertが提供した.gltfファイルまたは.glbファイルのアップロード処理を繰り返します。ファイルが同じ商品にリンクされ、両方の3Dモデルのファイルタイプが商品と関連付けられていることを確認します。
受け入れ可能なファイルタイプ
Shopify Expertは、各3Dモデル用に.usdzファイルと.gltfあるいは.glbファイルの2つの異なるファイルタイプを提供します。それぞれのファイルタイプは、それぞれのプラットフォームや機能で使用されます。たとえば、お客様がiOS 12のデバイスのSafariブラウザで商品を3次元表示するには、.usdzファイルをアップロードする必要があります。オンラインストアに将来の拡張現実や3次元機能との互換性があることを確認する最も良い方法は、両方のファイルタイプをアップロードすることです。
ステップ5: AR Quick Lookを有効にするためにテーマを編集する
テーマコードを編集してAR Quick Lookを有効にする必要があります。これは、iOS 12がインストールされたデバイスのSafariブラウザで、お客様が商品を3D表示できる機能です。
手順:
管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。
[アプリと販売チャネル] ページで、[Online store] をクリックします。
[販売チャネルを開く] をクリックします。
現在のテーマの横で、[...] > [コードを編集する] の順にクリックします。
レイアウトフォルダーで、[{/} theme.liquid] をクリックします。
<head>タグを探します。ファイルの上部にあります。次の行に、以下のコードを貼り付けます。
<script
src="https://cdn.shopify.com/shopifycloud/ar-quicklook-js/assets/v1/shopify3d.js"
crossorigin="anonymous"
></script>- [保存] をクリックします。
- セクションフォルダ―で、[{/} product-template.liquid] をクリックします。
- ファイルの上部に以下のコードを貼り付けます。
<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>- [保存] をクリックします。
複数の商品テンプレートを使用する場合、テンプレートファイルにそのコードを追加します。
ステップ6: 3次元商品に拡張現実バッジを追加する
iOS 12デバイスを使用しているお客様には、ARバッジオーバーレイが表示される際に、商品が3Dで表示されます。
商品画像に拡張現実バッジを表示するには、テーマコードを編集する必要があります。
手順:
管理画面から、[設定] > [アプリと販売チャネル] の順にクリックします。
[アプリと販売チャネル] ページで、[Online store] をクリックします。
[販売チャネルを開く] をクリックします。
現在のテーマの横で、[...] > [コードを編集する] の順にクリックします。
セクションフォルダ―で、[{/} product-template.liquid] をクリックします。
商品の写真と関連のあるテンプレートのセクションを探しください。
ProductPhotoまたはfeatured_imageといったキーワードを探します。
商品写真セクションの中で、最初の
<img... >タグをみつけます。そのタグの上の行に、以下のコードを貼り付けます。
<div class="ar-quicklook-overlay" data-shopify-3d-variant-id="{{ product.selected_or_first_available_variant.id }}" style="display: none;"></div>- [保存] をクリックします。
- テーマのCSSが含まれているファイルを開きます。このファイルは通常 [アセット] フォルダーにあり、ほとんどの場合{/}theme.scss.liquidのようなタイトルがあります。
- ファイルの最下部に、以下のコードを貼り付けます。
.ar-quicklook-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 2;
}- [保存] をクリックします。
3Dモデルをテストするには、iOS 12がインストールされたデバイスのSafariブラウザで自分のオンラインストアを開き、商品ページに移動します。商品画像の拡張現実バッジをタップして、3次元で表示します。