概要

ECサイトで商品を販売していくなかで、近年はメタバース内で商品を展示し、ECサイトに誘導する手法が増えています。ここでは、簡単な手順で済むようにコンテナを使ってECサイトを構築し、メタバース内で、商品の３Dデータにタッチ（クリック）すると、ECサイトの商品ページに誘導するような仕組みの作り方を説明します。

ECサイト以外では、Webマガジンをオウンドメディアとして構築させてメタバースを組み合わせる、オウンドメディア x メタバース もあります。

ECサイトの用意

メタバースに着手する前に、ECサイトがないと話になりませんので、ハンズオン用のECサイトを構築しましょう。手軽に用意したいので、コンテナを使います。また、今回は学習環境なので、とりあえず起動できれば良いため、安定稼働に用いるKubernetesやOpenShift、Rancherといったコンテナオーケストレーションツールを使っていません。

コンテナ実行環境の用意

AWS等を使っていれば、AWS側でコンテナを実行すれば良いのですが、クレジットカード等を持っておらずAWS等を使えない場合は、パソコン上でコンテナ実行環境を用意します。パソコン上でDocker Desktop環境、もしくは仮想マシンを用意してください。仮想マシンを用意する場合は、参考として次のスペックのような構成です。

コンテナ稼働用仮想マシンの用意

例として、仮想環境としてVirtualBoxを使っていますが、他の仮想環境でも構いません。仮想マシンの構築方法は、https://mydocument.atlassian.net/wiki/spaces/support4textbook/pages/1651671321 を参考にしてください。

< 以下は、VirtualBoxを使った場合の例 >

仮想サーバーのスペック

• OS：Ubutnu Server 22.04 もしくは、20.04

• 仮想CPU割り当て数 : 1

• 仮想メモリ割り当て：4096MB(4GB)以上

• 仮想ディスク：64GB以上

• ネットワーク設定：NAT + ホストオンリーアダプタの構成。ホストオンリーアダプタには、固定IPを割り当てること。

• デスクトップ環境：なし

• SSH接続：必須 ( ユーザー名 + パスワードでもOK )

仮想サーバー の設定

• ホストオンリーアダプタの固定IP例：192.168.125.20

• Your server’s name (ホスト名)：nodetest

• ユーザー名 : vboxuser

• パスワード：任意のもの

仮想マシンにDocker Engine および Docker Composeのインストール

次のコマンドを実行します。

sudoなしで実行できるように、作業用ユーザーをDockerグループに所属させます。

再起動します。

ECサイト（EC-Cube）の構築

Githubからソースコードの取得

git コマンドを使って取得する。

取得したソースコードのディレクトリに移動

コンテナによるECサイトの起動

docker compose コマンドを使って、Prestshopのコンテナを起動する。

EC-Cubeの初期設定用コマンドを実行

ECサイトの設定

Webブラウザで、http://仮想マシンの固定IPアドレス:8080（例 http://192.168.125.20:8080 あるいは、http://localhost:8080 ）にアクセスする。EC-Cube4のサンプルサイトにアクセスすることができる。

Open

ngrokによるECサイトの公開

https://mydocument.atlassian.net/wiki/spaces/support4textbook/pages/1744076801 の「トークンによるアカウント接続」まで終わらせておく。その後、以下のコマンドを実行する。

次のように表示される。なお、ngrokにより一時的に公開している間は、ngrokコマンドを実行したターミナル画面を閉じてはいけない。

Open

Forwarding」に表示された、ngrok-free.appで終わるURLをコピーし、Webブラウザでアクセス。
( 例 https://xxxx-xxx-xxx-xxx-xxx.ngrok-free.app )

画面に表示される「Visit Site」をクリック。ローカルではなく、一時的とはいえ公開URLから、EC-Cube4のサンプルサイトにアクセスすることができる。

商品ページの確認

サンプルサイト内の「ジェラート」>> 「彩のジェラートCUBE」の順にクリックする。

商品サンプルとしてあらかじめ登録されている商品ページが表示される。表示されたURLをメモアプリ等に控えておく。
( 例 https://xxxx-xxx-xxx-xxx-xxx.ngrok-free.app/products/detail/1 )

管理画面へのアクセス方法

商品情報を増やしたり、商品ページの画像を変えるなど、ECサイトに手を入れたい場合は、管理画面にアクセスする方法を知っておきましょう。EC-Cube4では、ECサイトのURLの後ろに、admin をつければ管理画面が表示されます。
( 例 https://xxxx-xxx-xxx-xxx-xxx.ngrok-free.app/admin )

コンテナで起動している場合の管理画面ログインに必要な初期値は次のとおり。

管理画面が表示される。画面左側で、商品情報含めて変更ができる。>> マニュアル https://www.ec-cube.net/manual/ec-cube4/admin/home.php

メタバース（仮想空間）の構築

ここでは気軽に使えるように、Microsoft EdgeやGoogle ChromeといったインターネットにアクセスするためのWebブラウザさえあれば使用可能なメタバースサービスを用いる。Webブラウザを前提にすることで、スマートフォンやほとんどのパソコンでメタバースサービスを利用することができる。
反面、映画のような高精細なものは望めない。映画のようなものを望む場合は、専用グラフィックス搭載や独立GPU搭載と記載されているゲーミングPCを前提としたメタバースサービスを選定すること。

ここでは、2023年4月現在で無料で使えるものとして、Spatial（スペイシャル）を使用する。

Spatial、無料プランの契約

にアクセスし、画面右上の「Log In」をクリック。表示される、Google、Metamask、Apple、Microsoftといったソーシャルログインのうち１つをクリックして、アカウント登録を行う。アカウントを行うことで、無料プラン契約となる。アカウント登録から、アバター作成までの手順は下記のPDFを参照のこと。

スペース（空間）の作成

にアクセスし、ログインしている状態で、「+CREATE A SPACE」をクリック。

「Create New Space」の画面で、テンプレートを選択。この教材では「Outdoors」を選択。メタバースと連携させるECサイトの商品に合わせてコーディネートすれば良い。自分でスペースを作りたい場合は、「Upload Custom Space」を選んで、Unityを使って作ったものをアップロードして、テンプレートにはないスペースを作ることができる。

「Outdoors」のテンプレートを使って作ったスペース。テンプレートを使うことで、すぐに使える状態になる。

メタバース（仮想空間）に、ECサイトの商品ページに誘導する仕組みの実装

メタバース内に、商品の3Dモデルを設置

Spatialの場合は、画面中央下の「＋」をクリック。「+」は、Add Content のことで、スペース（空間）内に3DCGモデルや動画、NFT等を配置する際に用いる。

「Content」画面が表示される。ここでは、「SKETCHGAB」で、「gelato」を検索し、表示された3DCGモデル「Gelato」をクリックする。

スペース（空間）内に選択したコンテンツが配置される。

Information Panelに、ECサイトの商品ページのURLを設置

配置されたコンテンツ、3DCGモデル「Gelato」をクリック。画面下に編集メニューが表示されるので、「 i 」と表示されている「infoボタン」をクリックする。「infoボタン」は、Information Panel を呼び出し、編集することができる。

Information Panel では、「Name」の欄を「ジェラートを購入する」に変更する。「Link」の欄をECサイトの商品ページのURLに変更する。変更後、「SAVE」をクリック。

「Lock」をクリックして、コンテンツをその場に固定。

Information Panelから、ECサイトの商品ページに遷移する

「ジェラートを購入する」と表示されている箇所の下の「View on Sketchfab」をクリックする。

ECサイトの商品ページに移動して良いか確認画面が表示される。「YES, LET’S GO」をクリックする。

Webブラウザで新しくタブが開き、ECサイトの商品ページが表示される。

自分で作成した3DCGモデルや画像を使った場合

自分で作成した3DCGモデル(GLB形式)や画像をアップロードし、Information Panel にURLを設置した場合は、「View」と表示される。「View」をクリックすることで、ECサイトの商品ページに移動して良いか確認画面が表示され、「YES, LET’S GO」をECサイトの商品ページに遷移する。
Information Panelで表示されるボタンが「View on Sketchfab」よりも「View」の方がまだマシであるため、可能であれば、自分でコンテンツ（画像や3DCGモデル）を作れた方が良い。

コンテンツの設置位置やサイズを変更する場合

コンテンツの位置や大きさを変更したい場合は、「Lock」後の場合は、「Unlock」をクリックした後、「infoボタン」の左隣のペン型アイコンの「Editボタン」をクリックすることで、コンテンツの設置位置やサイズを変更することができる。

「Postion」画面が画面右側に表示され、位置や大きさを変更することができる。変更後は「DONE」をクリックする。

スペースに他の人にアクセスしてもらう方法

画面上部に「Share」と表示されているので、クリックすることでスペースを他の人と共有するための情報が表示される。

「Can View」と表示されている場合、スペースを作った人以外は、スペースに手を加えることはできないという意味になる。今回のECサイト連携の場合は、「Can View」となっていれば良い。「COPY」をクリックして、他の人にスペースにアクセスしてもらうためのURLを取得する。その後、取得したスペースのURLを他の人と共有しよう。

自分以外の他人、もしくは作業を行っているパソコンとは別のスマートフォンやタブレット、パソコンからアクセスし、別人ということで動作を確認しよう。

ビジネス要素

下記を組み合わせることで、ビジネスが展開できる。

• ECサイトに合わせたメタバース空間の構築

  • 作成ツールとしては、無料のものであれば、Blender（ ）やUnity（ ）がある。

• メタバース空間に用いるアイテムの3DCGモデルデータの作成

  • アイテムから、ECサイトの商品ページに誘導するため、3DCGモデルデータの作成は、非常に重要。

  • 作成ツールとしては、無料のものであれば、Blender（ ）やUnity（ ）がある。

• 商品ページで、人を登場させたい場合は、AI画像生成による人物モデルの作成

  • 作成ツールとしては、Stable Diffusion web UI（ ）や などがある。

    • 人物モデルの画像生成モデルとしては、「RealDosMix」や「ChilloutMix」、「Realistic Vision」がある。

    • Google Colaboratoryの無料プランで、Stable Diffusion 系の画像生成AIを無で使えないようになっているので、画像生成AIを使う場合は、ローカル（パソコン）上で実施するか、Google Colaboratoryに課金する必要があるので注意されたい。

• ECサイトの構築

  • 今は、 や 等のECサイト専門のSaaSがあるので、ECサイトを一から構築する機会はあまりないかもしれない。

• ECサイトやメタバース、電子書籍、書籍を用いたキャンペーン実施

  • Google Adwords を用いたオンライン広告

  • AI画像生成した人物モデルのアバター化、アバターをメタバースに登場させて、PRを行う。

  • 商品紹介用にAI画像生成で作成した人物モデルを用いて、商品と組み合わせた写真集の販売による、商品の宣伝