WebARとは、Webサイト上でARによる表現を体験するためのサービスです。ユーザーがより簡単にARを体験できるため、さまざまな分野での導入が進んでいます。この記事では、自社サイトにWebARを導入しようか検討している担当者に向けて、WebARの特徴やメリットを解説します。さまざまな活用例も紹介するので、ぜひ参考にしてください。
目次
WebARについて
ここでは、WebARの手間の「AR」とはどのようなものであるのかというところから解説をしていきます。
ARとは？
WebARの前にそもそも「AR」とは、「Augmented Reality」を略した表現であり、日本語で表すと「拡張現実」という意味です。ARは現実世界にデジタル情報をうつしだすもので、まるで実在の世界にデジタルでつくられた画像や映像があるような世界観を味わえます。
ARの代表例としては「PokemonGO」が最もよく知られているところかもしれません。
ただし、PokemonGOは専用アプリで作られたAR体験ですので、今回解説するWebARとは異なります。
VRとは？
ARと似た言葉としてVRというものがあります。VRとはVirtual Realityの略であり、VRゴーグルを装着した向こう側の世界が100%バーチャルな世界になる体験を指し、まるで自分がデジタル世界に入り込んだような感覚になります。VRもデジタルの画像や映像を駆使したものですが、現実世界にバーチャルな視覚情報を重ね合わせるARとは異なる体験といえるでしょう。
ARの開発環境は技術により様々
ARはどの端末で使用するのかによって開発環境は変わります。アプリでARを開発する場合、iOSならARKit、AndroidならARCoreという環境で構築します。そのため、iOSとAndroidの両方の端末でARアプリをリリースしたい場合は、2つの開発環境でそれぞれ実装する必要があります。
一方、WebARやInstagramの開発環境は、アプリ開発ほどの開発環境依存はなくなります。アプリのARよりもWebARやInstagramのAR機能のほうがよりシンプルに開発できます。
WebARの特徴とは？
ここでは、WebARには具体的にどのような特徴があるか解説します。
アプリが要らない
WebARは、ブラウザを使用してWeb上で体験できるARです。専用のアプリを端末にインストールする必要がないため、URLを開くだけでARを体験できます。アプリを使用するARは端末にアプリをインストールする必要があり、それに比べるとユーザーがARを体験するまでのハードルはかなり低くなるでしょう。WebARはWebサイトにアクセスするだけでよく、わざわざアプリをインストールしなくてもARを楽しめます。
また、InstagramやFacebookのような多くの人がインストールをしているSNSのアカウントにオリジナルARをリリースする選択肢もありますが、その場合にはInstagramやFacebookをインストールしている人だけに利用者が限られてしまう制約があります。
そのようなデメリットに対してWebARであれば、アプリの有無を考えることなくより多くの人に対してARを届けることができます。
またWebARのURLをQRコードにした印刷物とスマホさえあれば、店舗空間やイベント会場などで、特別なアプリを必要とせず、誰でも簡単にリッチな3Dの演出を出現させて楽しむことができます。
企画の制約が少ない
先述のInstagramやFacebookのARの場合、どうしてもSNSの規約やルールの中でしか開発ができないという制約があるため、マーケティングを考える上で時にデメリットとなってしまうことも多いです。
例えばInstagramのARでは4.0MB以下のデータ容量に抑えなければならずリッチな3Dを使った演出が難しくなったり、テキストを多く使った表現ができなかったり、業態によってはARのリリースが禁じられているビジネスがあったりなど、さまざまな制約があります。
そのようなデメリットに対してWebARであれば、より企画の幅を広げたさまざまなARにチャレンジすることができます。
WEBサイトと連動可能
また、WebARはAR体験からそのまま自社のWEBサイトへと遷移させるようなシームレスなショッピング体験にも適しています。
実物代の3Dモデルを実際に部屋に試しおきできるようなARをWEBサイトに配置すれば、これまで試着ができなかった商品を購入前にテストすることができます。こういったWEBサイトと連動させたい施策においてはWebARが有効です。
上記のように、アプリの有無や企画の制約のなさ、WEBサイトとの接続など、総じてARを活用したマーケティングにおいてはWebARはメリットが大きいと言えるでしょう。
WebARが注目されている理由
WebARが注目される理由の一つに「ECサイト」との関係性があります。プロモーションの文脈で話題喚起のために活用されるWebARも少なくありませんが、それだけでなく、既存のWEBサイトやECサイトに組み込み可能なWebARはEC市場の伸びを後押しする重要な役割を担っています。
近年、日本のEC市場規模は右肩上がりで成長しており、その中でもスマートフォン経由での購入は40%以上を占めるまで高まってきています。特に、昨年から続く新型コロナによる外出自粛の影響で、今後もスマートフォン経由でのEC販売はさらに高まっていくことが予想されます。
そんな中、実際の店舗に行かなくてもサイズ感や部屋に置いたイメージなどの体験を提供できるARの存在は、ECサイトでの買い物体験向上と、イメージの違いやサイズの間違いによる返品などの損失を減少させるために、大変役立つという数値が出ています。
総務省が公表しているデータによれば、AR の市場規模は2021年中に2018年の3倍にもなるとの予測も立てられており、また、オリジナルのECサイトを立ち上げられるShopifyではARコンテンツを含む製品は含まない製品よりも94％高いコンバージョン率を示したと報告しています。
WebARはECサイトとの連動などで相乗効果が高まりやすく、またアプリのインストールが必要ないことからより多くの人が体験しやすいARとして注目を集めています。
※参考：【3D/ARを含む商品は94％高いCVR】3D/ARを含むECサイトは効果が上がるのか？海外のレポートと国内の先行事例から考察
WebARが活用される場面とは？
ここでは、どのような場面でWebARが活用されているのか解説します。
インテリア
WebARを活用すると、ユーザーの部屋に実際に家具を置いたらどうなるのか、シミュレーションができるようになります。例えば、スマートフォンのカメラを通して部屋の様子をうつすと、画面上で家具を好きな場所に配置できるサイトなどです。実際に自分の部屋に家具を置いているような感覚で、大きさや色合いがマッチするか確かめられます。
バーチャルメイク
WebARで自分の顔にメイクをし、化粧品の色味を試せるサービスも登場しています。ネットショップで化粧品を買うとき、実際の色味がわからず自分にあうか不安に感じる場面もあるのではないでしょうか。WebARであれば、カメラにうつした自分の顔にメイクをのせられるため、化粧品が自分の顔色にあうのかどうかを確認できます。
ゲーム
ARを使い、キャラクターが現実世界に現れたような感覚を味わえるゲームもあります。たとえば、ARマーカーを置いた箇所をカメラにうつすと、その風景のなかにキャラクターが本当にいるような映像を再現できます。ユーザーはゲームの世界観をよりリアルに感じられ、登場するキャラクターに親近感が持てるようになるでしょう。
イベント
一時期だけ開催するイベントでの演出としてもWebARは便利です。アプリをインストールしなくていいので、イベント会場にいる人はQRコードを読み込むだけですぐにARによる演出を楽しめます。実際に飾り付けなどをしていなくても、ユーザーは画面越しにきれいに飾り付けられた店内を楽しめます。
国内外で話題を喚起したWEB ARの事例
ここからは、具体的なWEB ARの活用事例を紹介していきます。
WebARの事例①玩具のグローバルブランド「LEGO」（海外）
LEGOはARを積極的に活用して先行事例を多く生み出しているブランドです。こちらは「レゴシティを生き生きとさせる」というWebAR体験になっており、ユーザーはARで道路を配置したり、レゴの建物を追加したりして、独自のレゴシティを構築するような遊びができます。国内の玩具でもARを活用した事例が出てくるとより一層、盛り上がるでしょう。
LEGO Masters Builder
LEGOは上記の事例以前にも、LEGO Masters Builderという自分のレゴ作品を作成することができるWebARを展開しています。さらに作成したエフェクトはSNSでシェアすることが可能です。玩具の世界最先端をいくブランドのAR活用事例は参考になりますね。
WebARの事例②Adidas（海外）
アディダスは国際宇宙ステーションと協力した新しい限定版シューズを発売しました。そのシューズのプロモーションの一環として、「Goodbye Gravity」と呼ばれるこのAR体験を提供しました。パズルを解いて宇宙船から脱出するような斬新な体験を提供しています。
WebARの事例③シモーン・ロシャとH&M（海外）
イギリスのファッションブランドであるSimone Rocha（シモーン ロシャ）とH＆Mがコラボしたコレクションの発売を記念して、有名な画家Faye Wei Weiの作品をフィーチャーしたARのポップアップブックが作成されました。QRコードをスキャンすると、各ストーリーブックは、コレクションに身を包んだ俳優たちが出現するミニチュアシアターになります。
https://www.youtube.com/watch?v=vryaoJSP9Wk
WebARの事例④ドミノ・ピザ ジャパン（国内）
ドミノ・ピザ ジャパンでは、昨年に発売した新商品「ワールド10チーズ・クワトロ」の発売にあわせてAR開発に特化したOnePlanet社と共にWebARを活用したプロモーションを展開して話題を喚起しました。
QRコードをかざすと地球儀が出現し、世界中のそれぞれの地域のチーズに関する知識を楽しく直感的に得られるようになっています。このARはWebサイトで体験できるWebARであるため、もちろんアプリのインストールなども必要ありません。
こちらのWebARは単なる3Dの演出があるWebARではなく、出現する3Dアイテムをタップすることで詳細情報が見ることができたり、またECサイトの購買ページまで遷移させたりなど、話題性に加えて購買まで誘導する様々な仕掛けを組み込んでおり、新しい広告と楽しい消費者体験を同時に提供することに成功しました。
ARを使用した広告はユーザーも楽しめるところが特徴的です。これまでの広告とはまったく違う印象を与えるため、話題性を呼びやすいでしょう。特にWebARであればそのままWebサイトに誘導するなどの自由度も高く、高い広告効果が期待できます。
WebARの事例⑤BMWの没入型ARショールーム（海外）
BMWは最近、没入型のARショールームをウェブ上で提供を開始しました。
イギリスでBMWがリリースしたARが面白い。アプリなしでブラウザで体験が可能。
車内の細部まで非常に精密に3Dで再現されていて、車の外装・内装の色、ホイール、インテリアなど変更できる他、ドアの開閉、ライトをON/OFF、ステレオで曲の再生などインタラクションも盛り盛り。 pic.twitter.com/T9xHXoDGJH
— Tomohiko Murakami@AR (@can_murakami) April 15, 2021
このAR体験では、バーチャルモデルのサイズを拡大したり、カラーやホイール、インテリアを変更したりすることができます。また、車内を探索し、ドアを開ける、ライトを点灯する、ステレオで曲を再生するなど、車の機能を操作することができます。随所に設置されたホットスポットでは、それぞれのクルマに関する詳細な情報を得ることができます。
また、この体験の特徴は、バーチャルアシスタントが追加されていることです。タッチスクリーンの青いボタンを長押しすると、チャットボットに走行距離などの車の詳細情報を聞いたり、クイズに答えたりすることができます。
WebARの事例⑥米空軍（海外）
米空軍がARを活用したリクルーティングキャンペーンを実施しました。
空軍の制服に試着体験や、普段の仕事の活動の様子がわかるような演出をARで体験することができます。
WebARの事例⑦ワインブランド SANTI（海外）
ボトルについているQRコードを読み取ると、インフルエンサーが、ワインのテイスティングのガイドするARが表示される体験です。
アプリ不要のWebARで商品にQRコードを付帯させてそのまま商品説明を行うAR体験は今後ますます普及するでしょう。
WebARの事例⑧スナックブランド Lay’s®（海外）
世界No.1スナックブランドのLay’s®（レイズ）がUEFAとコラボしてWebARを開発しました。
こちらのARは「サッカーを通じて世界中の人々を結びつけ、喜びを与える」というテーマを中心としたグローバルキャンペーンの一環として、開発されたWebARです。
男子サッカー（UEFA）と女子サッカー（UEFA Women’s）のチャンピオンアバターとリフティングを楽しめるようなARが楽しむことができます。
WebARの事例⑨ANAYI（国内）
日本のアパレルブランド「ANAYI」が、ホログラムWebARを導入してEコマースサイトをリニューアルしました。
ユーザーの購入の安心感を高めるためにAR機能を追加したとのことです。
撮影されたデータは専用のソフトウェアを活用して作成されたとのことで、「ANAYI」ではこちらの2021年春夏コレクションのボリューメトリック映像を2021年8月まで継続して提供するようです。
WebARの事例⑩ピンクフロイド（海外）
こちらのARはこれまでのピンクフロイドのアルバムジャケットの世界に没入できるWebARです。ジャケットにある印象的なアートワークのオブジェを現実世界に表示しながら、ピンクフロイドの音楽を楽しむことが可能です。
WebARの事例⑪ジュマンジ（海外）
このARでは映画ジュマンジの世界に飛び込み、3つのマップを探索することができます。以下の映像だけでもワクワクします。
映画ジュマンジファンの方はきっと楽しめるはずです。映画の世界に没入できるARはファンにとってはとても嬉しいですよね。
WebARの事例⑫シンガー Laura Rizzotto（海外）
Laura Rizzotto（シンガー）による「ワンモアナイト」の全編ホログラフィックパフォーマンスです。どこにいてもLauraが歌ったり踊ったりするパフォーマンスを見ることができます。外出がしにくい中、自宅でもこのような体験が提供されるのはファンとの距離を縮めてくれるはずです。
以下のQRコードから実際に遊べるので、ぜひ試してみてください。
WebARを開発する方法・開発ツールのご紹介
ここからは実際にWeb ARを開発する際に用いる技術・開発プラットフォームをご紹介して、メリットとデメリットを検討していきたいと思います。
8th wall
8th wallは豊富な機能を特徴とする有料のWeb AR開発プラットフォームです。iOS、Androidの両方に対応した表示が可能なため、スマホ所有者のほとんどの方に対してアプローチすることができます。なお、iOSの主要ブラウザはSafari、Androidの主要ブラウザはChromeとFirefoxです。
メリット
- 比較的簡単にARコンテンツを作ることができる
- 機能が豊富なためリッチコンテンツ制作に向いている
- OSではiOSとAndroid両方に対応しており、ブラウザもSafariやChromeなど主要なものに対応している
- 最近のアップデートによりアプリ内ブラウザでも体験ができるようになりARマーケティングに最適化
デメリット
- ビジネス利用の場合で、スタンダードプランで月額3,000USドル（約30万円）が必要
- さらにトラフィック量により従量課金でサーバー代金も発生
事例
アメリカのファストフード「ホワイトキャッスル」では100周年を記念して8th wallを使ったARキャンペーンを実施しました。
1921年の創業以来パートナーであるコカコーラと協力して、3つのARソフトドリンクカップを発表しました。カップを認証すると、動きと音でワクワクするような演出を提供しています。
AR.js
AR.jsは誰でも完全無料でWeb ARを開発することができるjavascriptのライブラリです。AR.jsでマーカーにカメラを向けると、オブジェクトを動かしたり、表示したりすることができます。他にも、360度動画再生やobjファイル表示が可能になります。それぞれを組み合わせてアニメーション制作も可能です。
メリット
- オープンソースのため、完全無料で利用することができる
- 制作事例が多い
- 定期的なアップデートで機能追加が期待できる
デメリット
- 機能が少ない
事例
AR.jsを用いることで以下のようなAR体験を作ることができます。
Amazon Sumerian
Amazon Sumerianは、AWS(Amazon Web Services)でプレビュー公開されている、Amazon製のAR・VR・3Dコンテンツの作成キットです。Web上でARを作成・ビルド・起動することができます。基本的にはプログラミングスキルを必要とせず開発できますが、JavaScriptでの記述も可能です。
メリット
- 非エンジニアでもわかりやすい
- コーディング不要で簡単な体験が実現できる
デメリット
- できることが少ない
- 商用利用については、アクセス数に応じて料金が必要
事例
Amazon Sumerianを使うことで以下のようなコンテンツを作ることができます。
Web ARのコスト・期間・開発方法
ここでは具体的にWEB ARを開発する場合の費用感や開発期間、開発方法についてご説明していきます。
Web ARの開発期間・コスト
開発期間
Web ARの制作内容は主に
- ARの企画（2週間-1ヶ月）
- UIデザイン（2-3週間）
- 3Dモデリング（2週間-2ヶ月）※内容により大きく変動
- AR開発（1ヶ月-3ヶ月）
- クオリティチェック・バグテスト（2週間-1ヶ月）
であり、開発中はこれらが並行して進むため、開発期間はトータルで1.5ヶ月〜3ヶ月程度となります。
開発コスト
コストに関しては、通常のAR開発コストに加えて、3Dモデルの制作内容と、使用する開発ツールの価格に応じて費用が乗るケースも多いです。
具体的な金額面では、シンプルなARであれば100万円台でも開発できることはありますが、様々な端末・ブラウザにおける動作検証をしっかり実施する場合は最低300万円は予算を確保した方が良いでしょう。
3Dモデルにアニメーションをつけて演出をしたり、エフェクトが出てくるような演出をしたり、あるいはタップしたら反応するようなインタラクションを設計したり、WEBサイトと連動させたりなど、リッチなWEB ARを開発したい場合であれば、総額500-1,000万円くらいの予算感となるでしょう。
Web ARの開発方法
Web ARは、基本的には上記の8th wallやAR.jsといったツールを利用すれば、JavaScriptエンジニアがいればどの会社でも開発することが可能です。
ただし、3Dモデルを作成・表示させるなどの基本的なAR体験の開発ひとつ考えるだけでもファイル形式についての知識が求められたりするなど、ARならではのコンテンツの作り方には専門的なノウハウが必要となるため、ARに特化した開発会社に委託するケースも多いです。
弊社、OnePlanetでWEB ARを開発する際には8th wallやAR.jsなどの開発ツールを使いつつ、最適なサーバーを選定しながらARの企画開発するため、コストを抑えながらARならではの空間を生かしたコンテンツを開発・提供することを可能にしています。
またAR開発のみならず、ARをうまく生かしたキャンペーンの設計まで含めて全て提供することができるため、話題を喚起する国内でも最先端のARマーケティングをワンストップで提供いたします。
WebARを導入したほうがいいケース
WebARはどのような場合に導入するといいのでしょうか。ここでは、WebARを導入したほうがいいケースについて解説します。
ECサイトにARを導入したい
既存のWEBサイトやECサイトにARを埋めることで、実際のイメージをつかんでもらい、より購買率を高めたり、返品率を高めたりすることができます。このようなARの活用方法は、専用アプリのARやInstagramのARではなくWebARならではの活用方法ということができます。
多くの人にARを体験してほしい
WebARは特別なアプリが必要ないため、ビジネスのターゲティングの幅が広く、なるべく多くの人に自社の商品やサービスの魅力を伝えたいと考えるなら、WebARの導入はおすすめです。WebARはどの端末でもすぐに利用できるため、多くの人に気軽に体験してもらえます。
自由度の高いARマーケティングを実施したい
WebARよりもさらにお手軽なInstagramなどのSNSのAR機能を使ったマーケティング、プロモーションの事例も増えています。
しかし、どうしてもSNS側の規約やルールに縛られてしまう他、当該アプリをダウンロードしたユーザーに利用者が限定されてしまうデメリットもあるため、より幅広く、より自由にキャンペーンを実施したい場合にはWEB ARが最適と言えるでしょう。
開発コストをおさてリッチなAR体験を提供したい
SNSのAR機能やノンコードでサクっと簡単に作れるARよりは当然コストは高くなりますが、それでもWebARはアプリによるAR開発よりも比較的短期間かつ低コストで開発できます。
高度なAR体験を開発する際には専用アプリの開発も選択肢に入りますが、どうしてもダウンロードのハードルがあり普及は非常に難しいのが現状です。
ある程度高度なARを提供していきたい場合には、専用アプリの前にWEB ARも比較検討のテーブルに乗せてみてはどうでしょうか。
シンプルなARであればInstagramのAR機能などの選択肢もありますが、制約が大きすぎて十分なARを開発できないケースもあるため、最後は専門性の高いAR技術を持った会社に相談して決定することが一番でしょう。
WebARを導入しないほうがいいケース
大量の3Dモデルなど非常に大きなデータ容量を扱いたいケースや、さまざまな機能を盛り込んだAR体験をユーザーに経験してもらいたい場合であれば、WebARではなくオリジナルアプリを開発する方が良いでしょう。
また、ロケーションベースの特別な体験を提供したい場合であれば、スマートフォン以上にリッチな体験を提供できるMRグラスやVRゴーグルで体験を開発するほうが向いていることもあります。
ゲームのような作り込まれた世界を開発したい場合や、ロケーションに紐づくリッチなユーザー体験を提供したい場合にはWEB ARは適しません。
また、100万円以下のコストでARを導入したい場合にはコスト的にInstagramのAR機能を使うなどの選択肢しか残らないため、WEB ARが適さないこともあります。
Web AR導入を検討している企業の担当者様へ
ARはさまざまな活用方法があり、マーケティング戦略のひとつとして導入する企業も増えています。特にWebARはより簡単に利用できるため、多くの人に使ってもらえる可能性が高いです。
本メディア「ARマーケティングラボ」を運営する株式会社OnePlanetでは、WebARについて豊富な実績を有しています。企画や開発はもちろん、拡散、分析、レポーティングまでサービスをワンストップで提供しています。ご興味がございましたら、お気軽に相談してください。
