仮想空間でショッピングを楽しめるバーチャルブティックの開発話
こんにちは、GENEROSITYでCTOを務めている平沼真吾です。
久しぶりの投稿となりましたが、皆さんいかがお過ごしでしょうか？
今回は、過去に海外ハイブランド向けに制作した、仮想空間でブランドの世界観とリアルなショッピング体験を楽しめるバーチャルブティックの開発話と使用技術を紹介します。フロントエンドのキャリアを目指すエンジニアの皆さんにとって、有益な情報になるかと思いますのでぜひご覧ください。
バーチャルブティックとは
一時、コロナ禍の影響でリアルイベントが全て中止になってしまいましたが、依然として多くのブランドが顧客と緊密なコミュニケーションをとり、ブランドの魅力を知ってもらう機会を求めていました。このニーズに目をつけた我々は、リアルイベントに匹敵するような体験をデジタルで実現しようと試行錯誤を繰り返し、最終的に3D空間上でブランドの世界観を表現した仮想店舗「バーチャルブティック」の制作に行き着きました。
2021年、イブ・サンローランビューティーからギフト需要の高まるホリデーシーズンに向けて、「来訪者がショッピングだけでなく世界観を楽しめるようなオンラインイベントを開催したい」との依頼をいただき、弊社でバーチャルブティックを制作することが決まりました。バーチャルブティックでは、質問に回答するとオススメのギフトを選んでくれる「ギフトコンシェルジュ」や、クーポンやホリデー限定ギフトを賭けた「ペアリングゲーム」など、来訪者が楽しめるコンテンツを複数用意しました。
ユーザーがスムーズにコンテンツを楽しめるように、3D空間内の操作性や回遊性を改善し、YSLの提案するホリデーシーズンの世界観とバーチャルストアにおけるユーザビリティの両立を叶えることができました。以下では、このプロジェクトを成功させるにあたって開発チームが注力したポイントや、苦労した点を紹介させてください。
操作性を上げて、ユーザーがストレスなく回遊できる空間を実現
このプロジェクトで最も注力したポイントは、ユーザビリティの向上です。全てのコンテンツを楽しんでもらうには、ユーザーをスピーディーかつ効率的にコンテンツに導くことが重要です。たとえコンテンツが充実していても、サイトの操作性が悪いと、ユーザーは体験し終わる前にストレスでサイトを離れてしまう恐れがあります。実際、過去に別のバーチャルブティックを制作した際には、ユーザーがサイト内の全方位を自由に回遊できるようにしていましたが、空間の移動が煩わしい、体験コンテンツが見つかりにくい、3Dモデルデータやテクスチャを大量に準備するのでウェブページの読み込みに時間がかかるなど、ユーザビリティに問題が生じ、コンテンツ誘導に苦戦した経験があります。
そこで今回は、過去の反省を活かし、ユーザーがサイト内で通るルートをあえて限定することで、操作性向上とデータ容量削減をすることを考えました。具体的な実装方法は以下の通りです。
ルートを限定する方法
ルートを限定するために、まずは空間を回遊する仕組みを再検討しました。360度全方位に移動できるのも面白いですが、操作性が複雑になるため、操作をシンプルにするために動ける方向や位置を限定するという方法を考えました。基本的な空間移動の操作はパソコンでは上下マウスホイールの移動かキーボードの上下キー、スマホでは上下のスワイプ操作のみに絞りました。それだけでは分かりづらいので、画面隅に操作方法が簡易的にわかるアイコンをアニメーションで表示したり、全コンテンツを順路通りに進んでいけるようにコンテンツのタイトルリストを常に表示して現在地と次のステップがわかりやすいようにUIを工夫しています。リストの名称をマウスでクリックしたり、指でタップしたりしてもそのコンテンツが楽しめる空間に直接移動することもできるようにしています。
次に、バーチャル空間を表示する仕組みを再検討しました。バーチャル空間を表示するには3D CGデータを仮想空間に配置してブラウザ上で表示する方法が考えられます。この方法は3D CGデータやそれに紐づくテクスチャの画像ファイルを多くダウンロードする必要があるため、データ容量やリクエスト数が多くなってしまう問題と、ブラウザ側のレンダリング性能によっては多くのデータを表示すると処理が重たくてカクつきが大きくなる問題があります。ルートを限定するのなら必ずしも3D CGデータをウェブブラウザで表示する必要はないと考え、3D CGデータをウェブブラウザでレンダリングするのではなく、事前に空間の移動のカメラワークも含めた3D CG空間の回遊のシーンをプリレンダリングして動画にし、その動画の再生位置をウェブブラウザで制御することで実質一つの動画のみで3D空間っぽく見せています。動画はフルHDの画面のパソコンのウェブブラウザで表示しても画質には耐えられるようにしつつもビットレートやコーデックを試行錯誤してなるべくファイルサイズを軽量化することとカクつきをなるべく感じさせないファイルにしています。3D空間内に置いてあるギフトボックスがパーティクル表現のようにキラキラ光る効果などもあるのですが、こちらはCSSで描画するなどなるべく軽量な仕組みで実現できる方法を組み合わせてもいます。
＋α サイトの読み込み速度を上げる方法
その他にもサイトの読み込み速度を上げるためにソースコードのminifyや画像データの圧縮、リソースファイルのバンドル化で通信量やリクエスト数を減らすことなどはもちろん、すぐに必要ではないリソースを遅延ロードするようにしたり、画像合成などの処理も全てフロントエンドで処理することでCDNを使った配信をできるような作りにしました。
このバーチャルブティック内では、パーティ感を演出するために金の紙吹雪が3D空間に舞っているのですが、こちらも3D CGモデルデータや物理シミュレーターを使わずにWebGLのプログラミングだけで紙吹雪の3次元的にひらひら舞うパーティクルアニメーションを実現することで、ウェブサイトの軽量化を図っています。
このように操作性とサイトの読み込み速度を改善したことで、結果的にユーザーが回遊しやすいサイト環境を実現すると共に、「沢山のコンテンツに触れてもらい、ブランドの世界観を知ってもらう」という目的を果たすことができたと感じています。
エンジニアに求められるのは、ユーザーの使い勝手を考え、目的を叶える力
これまでの説明で伝わったかと思いますが、エンジニアに求められるのは単に技術力だけではありません。開発の「目的」に立ち返り、お客様の要望を叶える力、「ユーザーの立場」に立って考える力が求められます。圧倒的なグラフィックを突き詰めるのも一つの作品や制作の手法としては良いのですが、このウェブサイトを見に来てくれる方は必ずしもみんながファイルサイズが重たいCGや画像を高速でダウンロードできるネットワーク回線や、サクサク動かせる高スペックのパソコンやスマートフォンを持ってくれているということはありません。
ウェブサイトをなるべく軽量化して比較的短い時間でウェブページのロードを完了させ、回遊時も迷わずにサクサク進めるような作りにすることで、お客様が求めている「沢山のコンテンツに触れてもらい、ブランドの世界観を知ってもらう」と「ショッピングの体験を向上させる」という「目的」を達成できたと思います。
ブランドが求めるクオリティとコンテンツ量を短時間で実現
プロジェクトで最も苦戦した点は、スケジュール調整と制作の進行管理でした。以前にもバーチャルブティックの制作経験はありましたが、わずか1ヶ月の短い開発期間で、10個ものコンテンツを詰め込む案件は今回が初めてでした。また、グラフィックデザインやUIデザイン、コーディングに加えて、空間のCG制作や映像制作もしなければならず、作業工程は正直カオスそのものでした（苦笑）コンテンツの仕様を決めるのにも時間がかかって開発着手が遅れたり、効率的な順番で進められなかったり、著名人の方の撮影や音声収録の日程も限られているなど、日々様々なハプニングに見舞われ、スケジュールのやりくりに奮闘していました。
しかしながら、フロントで全体のプロジェクトマネジメントを担うチームが制作スケジュールに合わせて素材の調達やテストを進めてくれて、開発チームやCGモデリングチーム、デザインチームも夜遅くまで頑張ってくれたおかげで、チーム全体で制作を進めることができました。その結果、なんとか期限内に制作を終えることができました。
エンジニアにも求められるプロジェクトマネジメント力
エンジニアはものづくりに特化したイメージがありますが、実際は納期に間に合わせるためのスケジュール管理や全体像を把握するマネジメント力も必要とされます。私自身も過去に何度も制作進行を経験してきましたが、今回のプロジェクトを経験して、営業チームやデザインチームとの連携やコミュニケーションの難しさと大切さに再度気づかされました。
さまざまなチームに負担がかかり、反省点も多いですが、地道で泥臭い作業を乗り越えて、自分自身も成長したような気がしています。
お客様からの喜びの声
バーチャルブティックが世に出ると、お客様はもちろんサイトを体験していただいたユーザーからも多くの反響がありました。制作したサイトから想像以上の売上が出たことや、ブランドの世界観を存分に表現したコンテンツを用意できたことで、お客様からは高い評価をいただくことができました。また、社内外のエンジニア仲間からも「どうやって作ってるの？」と不思議に思ってもらえてその方たちの興味が生まれたり、自分がこだわったポイントを感心してもらえたりしたので、挑戦した甲斐があったと感じています。
さいごに
今回も最後までご覧いただきありがとうございました！
次回は特別編として、自身が受けたインタビューの紹介や、過去noteに掲載した中からおすすめの記事を紹介します。ぜひ、ご覧ください。
次回もお楽しみに！
現在募集中のポジション
Twitterもやっているので、是非フォローお願いします！https://twitter.com/waka_405
この記事が気に入ったらサポートをしてみませんか？