イベントの入口をWeb ARで提供、スマートフォンだけで体験

(課題)

オンラインのミートアップには、完結したイベントの入口が必要

当時は感染症流行の影響で、多くのチームが対面イベントをオンラインに切り替え、参加者にメールを送り、ビデオ会議やオンラインの交流スペースのリンクを添える方法が一般的でした。

今回の目標は、オンラインイベントを最初から最後まで設計し、同時に参加のハードルを下げ、イベントのためにアプリをダウンロードする必要をなくすことでした。

(アプローチ)

イベントの入口を一つのウェブページに集約し、アプリのようなUIで提供

イベント当日に使うビデオ会議の入口、オンラインのソーシャルスペースの入口、参加者専用のキャラクターを、同一のイベントサイトに統合しました。ユーザーはログイン後、ARマーカーをスキャンするだけでキャラクターを解放できます。この工程はイベント前の最大のサプライズであり、ユーザーが自分のSNSで共有することも期待されています。

UIはアプリを模して設計しました：画面の高さを固定し、シングルページアプリケーションでページを切り替え、一般的なウェブページの読み込み表現をアニメーションに置き換えて、ページ遷移の印象を薄め、体験が途切れないようにしています。入場前にゲームIDでログインすることで儀式感を高め、このサイトが自分専用だと感じられるようにしました。入ると、空のキャラクター画像と感嘆符の案内が表示され、専用キャラクターの受け取りを促します。

ビデオ会議とオンラインのソーシャルスペースの工程はパソコン版を優先し、パソコンでの閲覧を案内します。ARの工程は、スマートフォン版が中心です。

(設計の要点)

二つの設計ポイント

診断カード

診断結果は、ユーザーがすぐに共感できるものでなければなりません。そこで、集団の中での立ち位置と総人口に占める割合（パーセント）を記し、その割合をできるだけ低くすることで、独自性と希少性を感じられるようにしました。情報量が多い場合は、カードのレイアウトで階層を分けます：指数の数字を最上部に置いて他の内容と区別し、最も重要な診断結果は中段に配置しました。カードはAR環境で読むもので、ユーザーは自由に拡大縮小・回転できるため、レイアウトは第一印象を優先しました。

Web ARの実装

ユーザーにアプリをダウンロードさせないために、Web ARを採用しました。3Dオブジェクトとアニメーションは3Dソフトからglbファイルとして書き出し、オブジェクトのサイズは1〜2センチ以内で十分です。ファイルが大きいほど読み込みに時間がかかりますが、10〜15MBであれば許容範囲です。光源はプログラム内で設定するのが最も安定するため、Directional lightを採用し、明るさも調整できます。glbでは一つのオブジェクトにつき一つのマテリアルしか認識されないため、UVマッピングが最も安定します。書き出し前にアニメーションをベイクしておくとより滑らかで、色ずれが出た場合はガンマ値が2.2以上であることを確認します。

(成果)

スマートフォンのブラウザだけで完結するARイベントの入口

イベントの入口には、ビデオ会議、オンラインの交流空間、専用キャラクターを統合し、利用者はスマホでARマーカーを読み取ります。アプリのダウンロードは不要です。当時の台湾では、多くのマーケティング施策がアプリ内ARを中心としており、SNSフィルターなどが代表例でした。Web ARは比較的珍しいものでした。