Shopifyで実現するECへのAR導入

Published in

EC ARCHITECT

8 min readOct 8, 2018

みなさんはARを使う機会が日常生活の中でありますでしょうか？
ARと言うと2016年 7月にリリースされたアプリ「ポケモンGO」が大ヒットしたことを皮切りに、ARへの注目が相当高まりましたよね。それ以降、様々な分野でARの活用が取りだたされてきましたが 2018 年 9月に入ってShopifyからAR機能をECサイトに簡単実装できるサービスがリリースされたので紹介したいと思います。

もうご存知かもしれませんがShopify とはECに関わる機能をクラウドベースで提供するカナダ発の会社、サービスのことです。2017年から日本にも進出しており、世界的に注目されているECプラットフォームの一つです。

ARとは ”Augmented Reality”の略で「拡張現実」と訳されます。ARは実在する風景にバーチャルな視覚情報をのせることで仮想的に世界を拡張する技術のことです。先ほど紹介した「ポケモンGO」をプレイしたことがある方はイメージしやすいと思います。

ARの技術は様々な分野で実用化されつつありますが、EC業界においてもすでに導入されていたりします。例えば、大手家具チェーン店として知られる IKEAでは “IKEA Place” というというアプリを公開しており、ARを利用した新たな購買体験を提供しています。

https://itunes.apple.com/jp/app/ikea-place/id1279244498?mt=8

UI/UXが秀逸で利用してみるとすごく参考になります。興味がある人はぜひ使ってみてください。

ただ、今紹介したIKEAの事例のようにこれまでAR機能をユーザーに提供するには専用アプリをユーザーにダウンロードしてもらう必要がありました。ここがかなりECへ組込みという点で結構な障壁になっていました。
この課題を解決する為に WebAR というものが今注目を集めています。

WebARは先ほどのアプリのようにユーザーにダウンロードを促す必要がなく、ブラウザ上でAR機能を提供することができる技術です。

なんとそのWebARが iOS12のSafari から標準搭載で機能するようになりました。今回紹介するShopify ARはそのApple が提供する AR Quick Lookという機能を使ってWebARを可能にしています。

それでは早速、Shopify ARの導入方法についてみてきましょう。ShopifyでAR機能を導入するには以下の工程を実施する必要があります。

3D Warehouse appのインストール
3Dモデルの準備
テーマのカスタマイズ

3D Warehouse appのインストール

アプリ管理から3D Warehouseアプリへアクセスします。このアプリをインストールこれだけでOKです。

3Dモデルの準備

Shopify ARを利用するためにはやはり載せたい商品の3Dモデルが必要となります。3Dモデルを自身で作成するスキルがあればいいですが、中々そのリソースや時間が取れなかったりすると思います。
そこでShopifyでは制作を外部にアウトソースするShopifyエキスパートという仕組みがあります。

実際にサンプルでいいから入れてみたいと思われた方は以下のようなオンラインサービスを使うと簡単に用意することができます。

VECTARY

自分で3Dモデルを準備したい場合、注意したいのがファイルの拡張子です。Shopify AR は iOS12から利用できるようになった AR Quick Lookという機能を使う為、拡張子は.usdzでないといけません。
3Dモデルを.objファイルフォーマットなどで用意した場合は変換するのを忘れないようにしましょう。

テーマのカスタマイズ

テーマのカスタマイズとありますが、 AR Quick Lookを利用できるようにするコードを既存テーマに追記するだけです。
Shopify管理画面から利用テーマを開き、アクション＞コードを編集するを選択します。追記が必要なファイルは基本以下の３つになります。

・theme.liquid
・product-template.liquid
・theme.scss.liquid

まずは theme.liquid のheadタグの中に以下のコードを記述し、shopify3d.jsを読み込ませます。

<script src="https://cdn.shopifycloud.com/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>

これでほぼ準備が整いました。少しややこしくなってきたかもしれませんが、後もう少しだけおつきあいください。

次にiOS12の端末を利用するユーザーにARバッジが商品画像にオーバーレイで表示されるようにします。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 モデルの紐付け

以上で実装の準備が整いました。早速、作成した3Dモデルを3D Warehouse appにアップして、商品詳細ページと紐付けていきましょう。
まず、アプリ管理からWarehouse appを開きます。次に”Add 3D Model”を選択し3Dモデルをアップしていきます。

3Dモデル情報のタイトルを入力し、紐付けたい商品を選択します。最後に3Dモデルの拡張子が.usdzであることを確認しアップしましょう。

では実際にiOS12の端末でSafariのブラウザから商品詳細ページを開いて確認してみましょう。

実際にShopify ARが利用されているWebサイト

まとめ

今のところWebARは端末、対応ブラウザがかなり限られていますが、AR機能がWebサービスにおいて標準化されるのは時間の問題だと感じています。特にフィジカルな商材を扱うECでは必須機能になるのではないでしょうか。

Shopifyで実現するECへのAR導入

3D Warehouse appのインストール

3Dモデルの準備

テーマのカスタマイズ

商品と3D モデルの紐付け

まとめ

Written by Kazuki Yonemoto