はじめに
こんにちは。デジタルエンジニアリング部 Eビジネスエンジニアリング課の亀岡です。
今回は、昨年度に新たなECソリューション創出の一環として作成した、バーチャルストアをご紹介します。
背景とバーチャルストアの概要
既存ECと実店舗が抱える購買体験の課題
消費者が商品を購入する際、大きなハードルとなるのは「利用シーンのイメージ不足」です。
従来のECサイトでは、白背景の商品単体の画像やテキスト情報だけで意思決定を行うことが多く、「空間に置いたときの雰囲気」や「他の家具や生活雑貨などとの調和」が掴みづらくなっています。
一方で、実店舗に足を運べば実物は確認できるものの、移動の手間や時間の制約という壁が存在します。また、店舗の特別な照明や陳列空間で見たイメージと、実際の生活空間での見え方にギャップが生じ、それが購入後の後悔や返品に繋がるケースも少なくありません。 （少なくとも私自身、そういった経験があります。）
解決策としての「バーチャルストア」とは
こうした課題を解決し、新しい購買体験を提供するソリューションとして注目されているのが「バーチャルストア」です。
本記事で言及するバーチャルストアとは、物理的な実店舗ではなく、インターネット上に展開された仮想店舗を指します。Google Mapsのストリートビューのように、店舗内（空間）を自由に探索できるイメージを持っていただければわかりやすいでしょう。 加えて、VR機器などを用いることで、より実店舗さながらの没入感の高い体験を提供することも可能となります。
バーチャルストアがもたらす価値
バーチャルストアを導入することで、ユーザー側・ビジネス側の双方に明確なメリットが生まれます。
- ユーザー体験の向上 商品を「単体」ではなく「空間全体」のコンテキストの中で確認できるため、既存ECの弱点であった「イメージが湧かない」という不安を解消できます。さらに実店舗とは異なり、24時間場所を問わず気軽に来店できる点も大きな魅力です。
- ビジネス面での優位性（ランニングコストの低減） 実店舗を構えるのに比べ、人件費や土地代などの固定費がかからず、ランニングコストが圧倒的に低いことが最大の利点として挙げられます。
加えて、メタバース市場の成長や、高性能なスマートフォン、PC、VR機器の普及により、オンライン上でもクオリティの高い体験が実現しやすくなっている点も追い風になっています。
今回ご紹介するバーチャルストアの概要
従来のバーチャルストアの課題
一般的なバーチャルストアでは、高額な機材が必要であったり撮影スタッフなど、導入コストの高さがネックでした。
また、季節物であれば時間の経過とともに情報が古くなり、流行から外れてしまう問題もあります。そのため、企業の記念イベントの一環や期間限定の開催にとどまりがちでした。
結果として「一度作ったら終わり」という運用に陥りやすく、継続的なビジネス価値を生み出しにくい構造になっています。
本記事で紹介するバーチャルストアの差別化点
1. スマートフォンベースの手軽さ
当社のソリューションが差別化を図っているのは、ミドルスペックの機材でも実現できる 「手軽さ」を重視している点です。
これまでのバーチャルストア構築には高額機材や専門の撮影チームが必須でしたが、近年はスマートフォンのカメラ・センサー性能が飛躍的に向上しています（例：iPhone 12 Pro以降で搭載されたLiDARなど）。
LiDARとは 光を使って物体との距離や形状を高精度に計測するセンサーです。空間の3Dスキャンなどに活用できます。
本取り組みは、このスマートフォン程度のスペックでも十分に空間を構築できる設計にしました。これにより企業側の導入障壁が劇的に下がり、専門知識がなくても、店舗スタッフ自身の手で気軽に撮影や更新を行えるようになります。
2. 継続運用性
撮影時に既に商品が配置されていても、AI画像生成による模様替え機能を用いることで、新しい商品を簡単に提示することが可能です。
そのため、季節物を扱う実店舗であっても、更新のたびに再撮影の手間や大きな費用を抑えられるという運用上のメリットが生まれます。
例えば、冬物家具から春物家具への切り替え時も、わざわざ3D空間全体を再制作する必要はなく、既存のパノラマ画像に対して家具だけを模様替えすれば済みます。結果として、短いサイクルで店舗情報をアップデートし続けることが容易になります。
3. マルチテナント対応設計
バックエンド（API）をマルチテナント前提で設計しており、複数の実店舗クライアントを同一プラットフォーム上で管理できる仕様です。
管理画面を通じた権限分離にも対応し、将来的なSaaS型ビジネスへの拡張性を持たせています。
どのような技術でバーチャルストアは支えられているか？（技術スタック）
全体アーキテクチャ
現在のバーチャルストアは大きく3つのレイヤーで構成されています。
- フロントエンド：ユーザーが見るブラウザ上の3D空間
- バックエンド：データの永続化と認証・認可
- AI画像処理パイプライン：家具の模様替え生成
全てを記載すると長くなるため、ここでは一部を抜粋してご紹介します。
フロントエンド：Three.jsを用いたブラウザ上の空間表現
3D空間について
撮影した360度パノラマ画像（正距円筒図法）は、そのまま球体にマッピングして表示することも可能です。しかし、パノラマ画像の特性上、上下の端付近で歪みが大きくなりがちで、ブラウザでの描画負荷も高くなってしまう欠点があります。
そのため現状では、以下の図のようにパノラマ画像を6つの面（上下左右前後）に展開したキューブマップ形式に変換し、3D空間全体を表現しています。（いわば、サイコロの展開図のような状態です。）
このキューブマップを組み立て、中央にカメラを置くことで、歪みを抑えつつブラウザ上でも軽量な描画を実現しました。
商品配置と3Dギズモ
ユーザーが配置した家具（3Dモデル）は、マウスや指のドラッグ操作で自由にレイアウトを調整できます。この直感的な操作感は、Three.jsの以下の機能を組み合わせて実装しています。
- Raycaster： 画面上のクリック（タップ）位置を、3D空間内の正確な座標に変換し、どの家具を触っているかを判定する機能。
- TransformControls： 選択した家具に対して「移動・回転・拡大縮小」を行うための操作UI（ギズモ）を画面上に表示する機能。
これらを活用することで、複雑なメニュー画面を挟むことなく、ユーザー自身が直感的に思い通りの模様替えシミュレーションを行うことが可能です。
AI画像処理：家具の模様替え
パイプラインについて
家具の模様替えは、大きく「前処理 → AI画像生成 → 後処理」の3フェーズで構成しています。
具体的には、まず前処理でパノラマ画像特有の歪みを補正した後、複数のAIを組み合わせて対象の家具を新しいものに置き換えた画像を生成し、最後に画像の調整・高画質化を行って出力します。
入力画像（変更前）と出力画像（変更後）の比較例は以下のとおりです。
現状の課題
前述のような技術的アプローチにより、手軽に更新可能なバーチャルストアのベースは構築できました。しかし、実際の商環境で利用するには、以下に記載するようにまだいくつか越えるべき技術的な壁があります。
3D空間の再現精度の壁
- スケールの不一致： ユーザーが追加した3Dモデルが、必ずしも空間の実寸に沿っているわけではない。
画像生成AIの精度の壁
- 形状変更の限界： 現状のAIモデルでは、既存家具の「色や素材の変更」は得意だが、家具の「種類や形」を根本的に変えること（例：幅のあるソファーから、高さのある冷蔵庫への変更など）にはまだ対応しきれていない。
まとめ
以上、バーチャルストアの紹介でした！本取り組みは昨年末に発足したばかりのプロジェクトであり、現状ではまだまだ課題が多くあります。
しかし、「スマートフォン一台で始められ、継続的に低コストで運用できる」 という点は、従来のバーチャルストアの常識を覆す大きなアドバンテージになるはずです！
