この記事は202406アドベントカレンダーの12日目の記事です。
【VR未経験エンジニアがメタバースでのWEB申込を実現するための挑戦】シリーズの第１弾として、保険のWeb申込システムをPoCしていたチームが、メタバースプラットフォームのcluster上にWeb申込画面を再現する取り組みを記事にまとめていきます。
メタバースに挑戦しようとした経緯
我々チームのWeb申込画面作成が一段落し、次は何をしようかとアイデア出しをしていた中で、Web申込の画面をメタバースで再現したら映えるのではないかと意見があり、チーム内で本当に実現できるかという不安がありながらもメタバース開発に挑戦してみようということになりました。
メタバースで何を作るかを決めるまでに苦労したこと
当初想定していたのは「Web申込システムの画面をそのままメタバース上に表示し、アバターを使って申し込み完了までできるようになる。」という簡素なものでした。それができればまずは「VR上でWeb申込を実現できた！」と言えるようになる、と思っていました。
実際に技術的に実装が可能かどうかを調査しているうちに、メタバースプラットフォーム上でwebブラウザの画面をそのまま表示させ、入力できる状態にするのは難しいことがわかってきました。（調査した内容は別の記事でご紹介します）
そこでweb申込の画面をそのまま表示するのではなく、メタバースプラットフォーム上でイチからweb申込サイトの画面を再現する方針に切り替えることになりました。
イチから作ることになったため、どのような構成で作成していくかのアイデア出しをすることになりました。チームの誰もメタバースの知見を持っていないため、まずは事例探しから始めることにしたのですが、我々のチームが作りたい申込の入力フォームを作っている事例は中々見つかりません。。
「事例がない」「メタバースでやりたい明確なビジョンがない」という大きな壁に当たり、アイデア出しは難航を極めることになりました。いろんなアイデアを出すものの、実現手段もわからなければ、それで進めようという明確な意思決定がしづらい状況でチームメンバーも混乱してしまいました。
上記のようなアイデア出しでの紆余曲折があったのち、最終的には「現在の申込画面の一部をコピーしたものを実装しよう」という結論に至りました。
短い期間でメタバース開発を行うために決めたこと
申込画面の一部の実装として、まずは個人情報入力画面と保険商品の選択・見積もりをする画面の2つを再現してみようという話になりました。
短期間でメタバース開発という新しいことにチャレンジする上で、何に集中するかを決めるため、やること、やらないことを最初に決めました。
グループワークでホワイトボードに次のようにやること・やらないことを書きだし、整理しましたが、デザイナーがチームに不在で、デザインにこだわると時間がいくらあっても足りないので、UX/UIは除外し、それ以外の機能部分に注力することにしました。
やること
- メタバースでwebにおけるユーザーのインタラクションを再現する（テキスト入力、選択肢、ボタン押下など）
- ユーザーが保険商品を選択し、保険料の計算結果が表示できる
やらないこと
- 自動テストは行わない（手動テストで機能確認する。）
- 探索が目的のため、UIUXの作り込みは行わない
まとめ
メタバースの知見を一切持っていない状態で走り始めた私たちのチームでしたが、実現したいことの類似の事例が見当たらないことや、最初にやろうとしていた「Web申込の画面をそのままメタバース上に表示させる」が出来ないとわかったことで、迷走し始めます。
チームメンバーの中でメタバースでどうしても実現したいビジョンがあるわけでもなかったので、アイデア出しも難航しました。
何も情報がない状態では、どこに進めば良いかわからなくなってしまうので、とりあえずモノを作ってみよう！という結論に至りました。
また、今回の開発では「やること・やらないこと」を決めておくことで、チームメンバーが迷うことなく開発を行うことができました。短期間で新しい技術にチャレンジする上では、「やること・やらないこと」を事前にチーム内で合意しておくことが重要だと実感しました。
ということで、次の記事では「メタバースプラットフォームの選定基準-clusterを選定した理由-」についてご紹介します！
再現する画面を決めた理由
個人情報入力画面
保険商品の選択・見積もりをする画面