はじめに

空間コンピューティンググループの松岡です。旅行やお出かけが趣味です。

さて今回、WebARという技術で3Dキャラクターをマーカーの上に召喚し、インタラクションできるデモを制作しました。

（※2025/10/3追記：デモの公開は終了しました）

WebARとはスマートフォンやPCのWebブラウザとカメラを通して、現実世界にデジタル情報を重ね合わせる体験ができる技術です。

アプリをインストールする必要がなく、QRコードやURLなどからサイトに行くだけでARが体験できるため、イベントやプロモーションなどでユーザーに手軽に体験してもらえます。

WebARの制作手段はいろいろありますが、今回はUnityで制作しました。

工夫した点

今回の記事では、技術面の解説はせず、デモ制作にあたりデザイン的に工夫した点を紹介させていただきます。

マーカー読み込みUI

既存のマーカー読み取り式AR系アプリを観察し、マーカー読み込みを促すデザインを作りました。

半透明で画面の真ん中にマーカーを表示することで、どのマーカーを読み込むべきか直観的に理解できると同時に、マーカーをどれくらいのサイズでカメラに写せば認識されるかの目安となります。

出現演出

キャラクターが現実世界に召喚されたようにするため、上からジャンプで降りてきたり、地面からバーチャル感のあるエフェクトと共に出現させてみました。

そしてキョロキョロさせることにより、この世界に召喚されて戸惑っているような演出にしました。

また実際のマーカー画像の上にバーチャルの床テクスチャを表示し、マーカー画像をキャラクターが踏みつけないような見せ方にしました。

キャラクターの出現位置ですが、マーカーの少し手前に出すことにより、キャラクターの全身を映したときに、マーカー画像全体が入るようにして、マーカーのトラッキングが切れにくいようにしました。

目線

キャラクターがしゃべっているときは、基本的にカメラのほうを見てくれます。

これはインタラクションの一つです。目線が合うことによりバーチャルなキャラクターがこちらのことを認識していると感じます。

周りを見ているときなどの、カメラ目線だとおかしいときはカメラ目線をオフにしています。カメラ目線の切り替えは、0-1で顔の向きが変わるのではなく、徐々に頭などの向きが変わるようにしています。

近づきすぎ対策

カメラをキャラクターにめり込むように近づけたとき、そのままだとキャラクターの中身が見えてしまいます。

このような仕様になっているAR・VRアプリも多いですが、今回は近づいたりスカートの中を下からのぞき込むような角度で見たときは、キャラクターを非表示にしつつ、注意書きを出すようにしました。

この方法でキャラクターの見せたくない姿を見せないようにできました。

最後に

イベントやプロモーション用のコンテンツでWebARを使ったものは増えてきましたが、キャラクターとインタラクションできるものはまだ少ないように感じています。

好きなキャラクターとインタラクションできるコンテンツが増えたらうれしいですね。