WebARとは、Webサイト上でARによる表現を体験するためのサービスです。ユーザーがより簡単にARを体験できるため、さまざまな分野での導入が進んでいます。この記事では、自社サイトにWebARを導入しようか検討している担当者に向けて、WebARの特徴やメリットを解説します。さまざまな活用例も紹介するので、ぜひ参考にしてください。
目次
WebARについて
ここでは、WebARとはどのようなものであるか解説します。
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が注目されている理由
ARの技術は実用化のための研究が進められており、さらに発展していくと考えられます。今後はより幅広い分野に応用され、日頃の生活の中においても身近なものになっていく可能性が高いです。
総務省が公表しているデータによれば、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の活用事例を紹介していきます。
玩具のグローバルブランド「LEGO」のWebARの事例（海外）
LEGOはARを積極的に活用して先行事例を多く生み出しているブランドです。こちらは「レゴシティを生き生きとさせる」というWebAR体験になっており、ユーザーはARで道路を配置したり、レゴの建物を追加したりして、独自のレゴシティを構築するような遊びができます。国内の玩具でもARを活用した事例が出てくるとより一層、盛り上がるでしょう。
Adidas（アディダス）が展開したWebARの事例（海外）
アディダスは国際宇宙ステーションと協力した新しい限定版シューズを発売しました。そのシューズのプロモーションの一環として、「Goodbye Gravity」と呼ばれるこのAR体験を提供しました。パズルを解いて宇宙船から脱出するような斬新な体験を提供しています。
<iframe title=”vimeo-player” src=”https://player.vimeo.com/video/434165184″ width=”640″ height=”360″ frameborder=”0″ allowfullscreen></iframe>
シモーン・ロシャとH&Mが展開したWebARの事例（海外）
イギリスのファッションブランドであるSimone Rocha（シモーン ロシャ）とH＆Mがコラボしたコレクションの発売を記念して、有名な画家Faye Wei Weiの作品をフィーチャーしたARのポップアップブックが作成されました。QRコードをスキャンすると、各ストーリーブックは、コレクションに身を包んだ俳優たちが出現するミニチュアシアターになります。
https://www.youtube.com/watch?v=o7f7KVCA9jc
話題を喚起したドミノ・ピザ ジャパンのWebARの事例（国内）
ドミノ・ピザ ジャパンでは、昨年に発売した新商品「ワールド10チーズ・クワトロ」の発売にあわせてAR開発に特化したOnePlanet社と共にWebARを活用したプロモーションを展開して話題を喚起しました。
QRコードをかざすと地球儀が出現し、世界中のそれぞれの地域のチーズに関する知識を楽しく直感的に得られるようになっています。このARはWebサイトで体験できるWebARであるため、もちろんアプリのインストールなども必要ありません。
こちらのWebARは単なる3Dの演出があるWebARではなく、出現する3Dアイテムをタップすることで詳細情報が見ることができたり、またECサイトの購買ページまで遷移させたりなど、話題性に加えて購買まで誘導する様々な仕掛けを組み込んでおり、新しい広告と楽しい消費者体験を同時に提供することに成功しました。
ARを使用した広告はユーザーも楽しめるところが特徴的です。これまでの広告とはまったく違う印象を与えるため、話題性を呼びやすいでしょう。特にWebARであればそのままWebサイトに誘導するなどの自由度も高く、高い広告効果が期待できます。
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を開発する場合の費用感や開発期間、開発方法についてご説明していきます。
” style=”box-sizing: inherit; max-width: 100%; display: block !important; border: 0px solid #e2e8f0;” />
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を導入したほうがいいケースについて解説します。
多くの人に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はより簡単に利用できるため、多くの人に使ってもらえる可能性が高いです。
株式会社OnePlanetでは、ARの企画や開発はもちろん、拡散、分析、レポーティングまでサービスをワンストップで提供しています。先行している海外のARマーケティング事例を検証しているため、効率的に成果を生むARの開発が可能です。ARの導入を成功させるために、ぜひ相談してください。
