【XR Kaigi 2022レポート】3Dアバター試着サービス「じぶんランウェイ」で実践した、XRによる顧客体験クリエイティブ
国内最大級のVR/AR/MRカンファレンス「XR Kaigi 2022」が2022年12月に開催されました。「XRを活用した顧客体験クリエイティブ ～3Dアバター試着『じぶんランウェイ」』を事例に～」と題したオンラインセッションでは、XR領域における博報堂ＤＹグループ横断プロジェクト「hakuhodo-XR」が開発したアプリ「じぶんランウェイ」について、その特徴や構想の経緯、実装の過程などについて博報堂と博報堂アイ・スタジオ、VRCのメンバーが紹介した内容をレポートいたします。
講演では博報堂アイ・スタジオの石割が進行役を務め、「じぶんランウェイ」について3つのテーマで開発メンバーと語り合いました。
- 石割
- hakuhodo-XRは、VR/AR/MRといったXR領域での体験設計に取り組む博報堂ＤＹグループ横断のプロジェクトチームです。XRによって新たなマーケティング領域を拡張し、ビジネスにおいて今までになかった付加価値を提供することを目指して活動しています。
我々は業界に囚われず、さまざまなクリエイティブを創出しておりまして、本日ご紹介する「じぶんランウェイ」もそのうちの1つです。まずは、博報堂の汪から「じぶんランウェイ」を紹介いたします。
- 汪
- 「じぶんランウェイ」は「試着をもっと、自由に、楽しく。」をコンセプトに掲げる３Dアバター試着サービスのプロトタイプです。異なる服装を着た複数の自分（アバター）がランウェイを続々と歩く、というバーチャル空間ならではの新しい試着体験を提供するものです。
体験の流れとしては、まずアバターを作るためにブース型のスキャナーで自身を撮影します。次にアプリ上で試着したい服を選択すると、服を着た「複数人の自分」がランウェイに登場します。この画像はいろいろな角度から見ることができます。さらに、気になる商品の詳細を確認したり、ECに接続して購入したりすることもできるように設計しています。
じぶんランウェイは生活者と事業者の両方にメリットをもたらすサービスだと考えています。生活者には、リアルの試着室とECの限界を同時に突破し、もっと便利で楽しい試着体験を提供できます。事業者にとっては、OMO時代のインターフェースとなり得ると考えています。具体的には、リアル店舗に設置したスキャナーで生活者が一度アバターを作ると、それ以後は自宅からECで試着を楽しめるようになるので、EC経由での注文の増加が期待できます。また生活者がECを介して自身に適したサイズの服を注文するようになれば、需要予測が立つため、服の過剰生産を防ぐことにもつながるはずです。
2022年2月に実施したサービス体験会では、体験者の80.0％がバーチャル試着体験を高く評価し、73.4％が「購入時のサイズズレや自分に似合うかどうかの不安を解消できた」と回答しました。さらに、7割以上が「バーチャルで試着したアイテムの購買意欲が高まった」と回答しました。
XRは「リアルとバーチャルのいいとこどり」ができる
- 石割
- 1つ目のトークテーマは「構想と発想」です。「じぶんランウェイ」の開発に至った経緯について改めて説明をお願いできますか。
- 汪
- まず前提としてあったのが、新型コロナウイルスの感染拡大により、アパレル店舗での試着体験が難しくなったことです。アパレルの購入は試着体験が重要なので、ECの推進が他の商材より難しいということも以前からの問題としてありました。こういったアパレル業界ならではの課題解決には「リアルとECをXR体験で繋ぐことで、リアルとバーチャルのいいとこどりをできるのではないか」と考えました。
アパレル領域でのXR体験の拡張を考えるに当たって、バーチャル出店やバーチャルウインドウショッピングなどさまざまなアイデアがありました。その中で生活者の悩みが最も多かった試着体験にスポットを当てました。ECで購入する場合の「サイズが合っているか」「似合っているか」という不安や悩みがありますが、店舗での試着についても「店員の目線を気にせず沢山試着したい」「後ろ姿を見たい」「他の店舗の服も試着したり、見比べたりしたい」「挑戦的な服は試着すると購入が必須な雰囲気になるので、気軽に試着できない」といった不満があることが分かりました。そのため、こういった課題を解決できるサービスを作りたいと思いました。
サービス開発においては、「ワクワク感」や「おしゃれさ」といった気持ちを作ることと、「同時に何着も着られる」「見比べできる」といった機能拡張をコアアイデアとしました。その掛け合わせから思い付いたのがランウェイです。複数人が同時に試着できる形であることに加え、ファッションショーのような高級感とおしゃれさを担保できます。自分がランウェイに出てくるようにすれば、びっくり感も演出できます。こうして「じぶんランウェイ」の構想が固まっていきました。
- 石割
- 「じぶんランウェイ」ではアバターが歩きますよね。静態のアバターに服を着せることもできたと思うのですが、そうとしなかったのはなぜでしょうか。
- 汪
- 歩いている方が、服の動きだったり、生活の中で着ているイメージが湧きやすいと考えました。リアルの試着室でも歩いた際のイメージは湧きづらいので、サービスの体験会では「動いている中で服がどう見えるかをイメージできる」という声を多くいただきました。
世界観とUX/UIを上手く融合した
- 石割
- 2つ目のトークテーマは「世界観とUX/UI」です。どのように世界観を作ったのか、デザイン面について博報堂の永野がお話します。
- 永野
- このサービスはユーザー体験を起点にプランニングしたので、アプリ以外にもブラウザなどいろいろな実装の可能性がある中でのスタートでした。最終的にどのような形になるにしろ、1つのブランディングでサービス全体の世界観を決めることが重要だと考え、まずビジュアルアイデンティティの作成からスタートしました。ロゴについては、静止画として使えると同時に、アプリ内でモーションで動くことも想定して作りました。
アプリ内では、「ロゴのラインが伸びてランウェイが形作られる」というモーションを印象付けるようにしました。カラーはネオングリーンを選択し、エネルギッシュさを感じさせることと、サステナブルな意味も持たせることを意識しました。
プランニング段階から、「ランウェイから自分が歩いてくる」というコアなキービジュアルを作り、ランウェイが伸びるモーションというUIの世界観も作っていました。自分がぞくぞくとランウェイを歩くことや、その後の購買体験に繋げる、といった部分もこの時点で構想していました。
- 石割
- では、UIやUXに具体的に落とし込むために心がけていたことについて、博報堂アイ・スタジオの蔵城がお話します。
- 蔵城
- 今回の構想には、大きく3つの事項がありました。「自分のアバターが6人でランウェイを歩くこと」「ランウェイでは複数の洋服を比較できること」「ランウェイで着た洋服を購入できること」です。
この3つのポイントを整理し、全体のユーザー体験に当てはめると、「ダウンロード」「3Dスキャニング」「洋服を選択してランウェイを開始する」「ランウェイの退場やフィナーレ」「ランウェイ動画の保存・シェア」など、まだまだ考えるべき部分が残っていることが分かりました。このスタートからゴールまでの体験を一本の道をつないで全体のUX/UIを作り、実装に渡すのが私たちの役割でした。
特に力を注いだのが、メインであるランウェイの体験を際立たせることです。話し合いを重ね、「観客がいた方が盛り上がりやすいが、アバターと洋服を際立たせるために観客がいなくても成立する世界観にしよう」「登場シーンは緊張感とワクワク感を出す演出にしよう」「色々な服が並ぶのでランウェイ自体のカラーはシンプルにしよう」「カメラワークは360度どの角度からも見えるようにしよう」といった方針を決めていきました。
実際のUIでは、ランウェイ全体を白からグレーで配色し、等間隔に並ぶ上を向いたライトの当たり方によって服の質感が際立つようにするなど、ただウォーキングしているだけでもずっと見ていられるような世界観を追求しました。ランウェイの前後で体験が分断しないよう、ロゴのコの字の部分がぐーんと伸びてランウェイになるアニメーションの演出は、何度も検証を重ねて完成させました。
- 永野
- 今回は蔵城さんをはじめUX/UIをメインに担当されている方と早い段階から一緒に取り組むことができたことで、世界観とUX/UIを上手く融合できたかなと感じています。
- 蔵城
- 普段は役割を分断して一方向で動くことが多いのですが、今回はUX/UIにも踏み込んだ世界観を作っていただき、実際にUX/UIを作る段階でも永野さんと頻繁にやり取りできたことで、より世界観を盛り上げる体験設計ができたのではないかと思っています。
実装でスピードとクオリティを両立
- 石割
- 最後のテーマは「技術と実装」です。実装面で最も力を入れて取り組んだことについて、博報堂アイ・スタジオの成岡とVRCの清末さんに伺います。
- 成岡
- 実装面では大きく2つのポイントがあったと思っています。1つ目が技術の選定です。全てのフェーズで体験を最大化させるために、それぞれで異なる技術を選定しました。その中でも肝と言えるのが自分そっくりのアバターです。これはVRCの技術です。詳細についてVRCの清末さん、お願いします。
- 清末
- 当社の3Dアバター作成技術は、ワンショットであらゆる情報を取得し、一瞬でデータ化できることが特徴です。今回のプロジェクトはUX/UIが素晴らしいので、3Dスキャンの部分でもエンドユーザーのストレスをいかに下げるかが重要でした。アプリ側に使いやすいSDKを提供し、データはリアルで高精細に、個人情報は独自の暗号化技術でセキュリティを高めています。
- 成岡
- 試着機能はVRCの技術がコアであり、ランウェイ部分はユニティ・テクノロジーズ社の3Dゲーム開発プラットフォームである「Unity」で実装しています。服を選ぶ画面では、直感的なUIを自由にカスタマイズできるグーグルのフレームワーク「Flutter」を採用しました。それぞれ単体では実績のある技術ですが、横断的に掛け合わせるのはチャレンジでした。
もう1つの実装面のポイントがリアリティの追求です。自分がアプリに登場するので、ユーザーに「何かおかしいな」と違和感を感じさせてしまうと使ってもらえません。そのため、アバターが動いたときのリアリティにはかなりこだわりました。例えば、アバター全員の歩くタイミングをバラバラにする、といったことです。タイミング揃うと、行進のように見えて違和感を感じてしまいます。こういった細かいこと一つひとつに徹底して向き合っていきました。結果として、洋服のサイズの見え方の違いや細かな洋服の質感、布の揺れ感なども再現できるようになったと感じています。
- 石割
- 今日はUX/UIという言葉が何度もキーワードになっています。改めて今回、顧客体験を最大化する上で実装の最大のポイントは何だったのか。博報堂アイ・スタジオの星野、猪塚からお話します。
- 星野
- 処理スピードが早くユーザーにストレスを感じさせないことと、高いクオリティでの表現を両立できたことです。このアプリの処理の特徴として、一般的に行われているアプリ側でリアルタイムのシミュレーションではなく、クラウド側であらかじめ計算したものをアプリ側で表示するという処理を行なっています。。こうした切り分けが上手く行った事が、顧客体験を最大化する上で非常に大きく寄与していると思います。
- 猪塚
- クオリティ面では、技術的な要素だけでなく、アプリの世界観を感じさせる演出にもこだわって実装していることが重要なポイントだと思います。具体的には、ロゴのアニメからランウェイを映すところまでシームレスにカメラワークがつながるようにしたことや、思う存分ランウェイを見てもらえるように無限にランウェイを歩けるようにしていることなどですね。ランウェイには等間隔でライトがあるのですが、無限にライトを置くと処理が重くなってしまうので、見える部分だけにライトを配置するなど、処理面での細かな工夫も随所で重ねています。
- 石割
- 皆さん、ありがとうございました。hakuhodo-XRでは、プランニングから制作開発、運用まで、幅広く対応しています。XRの技術を広く活用して、皆さまのマーケティングやビジネスをご支援できたらと考えておりますので、ぜひお声がけいただけたらと思います。
この記事はいかがでしたか？
-
博報堂
-
株式会社博報堂 生活者エクスペリエンスクリエイティブ局 プラナー中国・北京生まれ。大学から日本へ留学、東京大学工学系研究科建築学専攻（隈研吾研究室）修了後、2020年博報堂入社。プラナーとして、アクティベーション、映像、言葉、テクノロジー、空間、サービス、商品開発など手法を問わずブランド体験を企画。
-
株式会社博報堂 hakuhodoDXD アートディレクター東京藝術大学美術学部デザイン科卒業後、2016年博報堂入社。広告グラフィック、ブランディング業務、サービス開発、D2Cブランドの立ち上げ、UI/UX領域の業務などに従事。
-
株式会社博報堂アイ・スタジオ プランナー／ディレクター入社後、国内外の様々なクライントのWEBサイト、SNSの企画／制作／運用を担当。近年はIoT、AI、XR領域を中心としたテックトレンド施策の企画・サービス設計にも従事し、活動領域の幅を広げている。
-
株式会社博報堂アイ・スタジオ マネージャー・プロデューサー2016年入社後、WEB・アプリなどの制作ディレクションを担当。その後、国内外ブランドのSNSを戦略から運用まで複数担当し、近年ではメタバース・ブロックチェーン等の領域での新規サービス設計に携わるなど領域を拡大。
-
株式会社博報堂アイ・スタジオ デザイナー・プランナー2018年入社後、オウンドメディア構築・デジタル施策などのデザイン・アートディレクションを担当。近年はXR領域でのUXUI体験設計から業務に従事。受賞歴にAwwwards、w3 Awardsなど。
-
株式会社博報堂アイ・スタジオ コミュニケーションプランニンングセンター テクニカルディレクター2017年博報堂アイ・スタジオに入社。サーバサイド領域からアプリ・インタラクション領域の開発、運用、ディレクションやライブ配信等の映像配信、そのほかAI技術や自社サービス系の研究開発までという幅広い領域での業務に従事。現在では大規模な映像演出やライブ配信をはじめとしたインタラクション領域を中心に担当している。
-
株式会社博報堂アイ・スタジオ テクニカルディレクター /インタラクションエンジニア2019年入社後、イベント施策の体験システムやハードウェア連携のアプリケーション、XR領域の開発などに従事。日本VR学会認定 Virtual Reality Specialist。
-
清末 太一郎株式会社VRC 取締役複数ベンチャー経験後、2010年よりグリー株式会社に参画、ゲームプラットフォーム事業の推進・スタートアップ企業への投資・XR事業部門の立ち上げ・マーケティング部門の統括などを経験後、2019年より株式会社VRCへ参画。
