Shopify で3Dモデルを有効化する

こんにちは。大野です。

「Shopify AR」ってかっこいいなあ、響きが。などとARという単語に憧れを抱いていたのですが、再現できるか実際にやってみようかと思い立ち、見事表示に成功したため以下に内容をまとめます。

ARを非常に身近に感じられたとともに、この技術は今後ますます必要になってくると確信しましたのでぜひ一度お試しください。

ARとは？

「現実世界の情報に、何か別の追加情報を加えて表現・利用する」
この文章からも分かるように、Shopifyでは3Dモデルを商品ページの商品画像とともに入れることでその商品を上下左右360度確認できるだけでなく、今いる世界にその商品があるかのような体験ができるという素敵な世界です。

1. ソファーを買いたい　→　2. サイトでソファーを探す　→　3. ARの技術で今いる空間にソファーを仮想的に置いてみる事ができる　→　4. 置きたい場所とのマッチングを確認でき、より効果的に商品訴求が可能！
みたいな流れです。

具体的にソファーのデータがないのでShopifyから共有されている腕時計のサンプルデータで出してみると以下のような感じです。

なんか出し方がいまいちですが、あくまで私の操作の問題です。
違和感なく表現できてしまうのでここは敢えてわかりやすい下手くそな出し方にしてみました。

こんな感じで実際の世界に欲しい商品を呼び出すことができるため、購買意欲を高めたり、商品の買って良かった満足度をあげられることもできるなんとも素敵な世界です。

四の五の言わずに実装方法は以下！

商品ページに表示できる条件

3Dモデルや動画を商品ページに表示できる条件は以下です。

1. 無料テーマのバージョン16.0.0以降を使用する
　※ただし、テーマは Brooklyn , Debut , Narrative のいずれか 
2. 3Dモデルのデータの準備
　※今回は Shopify が提供しているサンプルデータをダウンロードして使用
3. Snippets/media.liquid のコードを編集
{% case media.media_type %} から {% endcase %} までを以下のコードに変更

{% case media.media_type %}
{% when 'image' %}
{% capture zoom_media_id %}ImageZoom-{{ section.id }}-{{ media.id }}{% endcapture %}
{%- assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style', height: height, wrapper_id: media_wrapper_id, img_id: media_id, image: media.preview_image %}
<div
id="{{ zoom_media_id }}"
style="padding-top:{{ 1 | divided_by: media.preview_image.aspect_ratio | times: 100}}%;"
class="product-single__media{% if product.media.size > 1 %} product-single__media--has-thumbnails{% endif %}{% if enable_image_zoom %} js-zoom-enabled{% endif %}"
{% if enable_image_zoom %} data-image-zoom-wrapper data-zoom="{{ media | img_url: image_zoom_size, scale: image_scale }}"{% endif %}
data-image-loading-animation>
<img id="{{ media_id }}"
class="feature-row__image {{ media_class }} lazyload{% unless featured_media == media %} lazypreload{% endunless %}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ media.preview_image.aspect_ratio }}"
data-sizes="auto"
{% if enable_image_zoom %} data-image-zoom {% endif %}
alt="{{ media.alt | escape }}"
{% if featured_media == media and request.page_type == 'product' %} onload="window.performance.mark('debut:product:image_visible');"{% endif %}>
</div>
{% when 'external_video' %}
<div class="product-single__media" style="padding-top: {{ 1 | divided_by: media.aspect_ratio | times: 100}}%;" data-media-id="{{ media.id }}">
{{ media | external_video_tag }}
</div>
{% when 'video' %}
<div class="product-single__media" data-media-id="{{ media.id }}">
{{ media | video_tag: controls: true }}
</div>
{% when 'model' %}
<div class="product-single__media" style="padding-top: 100%" data-media-id="{{ media.id }}">
{{ media | model_viewer_tag }}
</div>
{% else %}
<div class="product-single__media" style="padding-top: 100%;" data-media-id="{{ media.id }}">
{{ media | media_tag }}
</div>
{% endcase %}

参考にしたページはこちらですが、そのとおりやってもうまく動かなかったため、上記コードに変更しています。

上記のような感じでグイグイできます。楽しいです。

コードを変更したら、3Dモデルの動作確認だけでなく画像も表示・切り替えされることも確認しましょう。

今後こういう表現をするサイトはどんどん出てくると予想されるため、3Dデザインは未踏の地ですが、少し学習してみなければと思いました！（そんな軽い気持ちでできないほど高い技術が求められると思いますが）

今後も購入者が想像しやすい状況を作れるように、商品に対してより愛着のわくコンテンツをお客様と作れるように情報収集と発信をしていきます！

アプロ総研では『はじめてEC』というサービスを運営しています。
EC初心者に向けて、初期構築を弊社が行いすぐに販売可能なサイトをお作りいたします。月々のサポートやウェビナーも開催されますのでEC初心者にも安心してご利用いただけます。

ご契約やサービス内容を詳しく知りたい場合は以下のお問合せページよりご連絡をお待ちしております！

はじめてECの説明ページ