スマートフォンアプリを介さずにウェブサイト上で直接AR（拡張現実）技術を体験することができる”Web AR”は現在さまざまなところで活用されています！
今回はそんなWeb ARに関してご紹介していきます！
Web ARとは？
「Pokemon GO」で一躍有名になり、最近では「マリオカート ライブ ホームサーキット」に活用され、ますます私たちの身近になってきているAR（拡張現実）技術。
Web ARはそんなARを、専用アプリのインストール・起動無しにURLから直接ウェブサイト上（ブラウザ起動状態）で体験できる技術です。
ARの体験に際して従来は専用のアプリや機器を必要とすることが多かったですが、Web ARはスマートフォン/タブレットのURLひとつで使える手軽さが特徴です。
アプリとの比較（メリット・デメリット）
次に、Web ARとアプリを比較し、それぞれのメリット・デメリットを見ます。
アプリと比較して、機能に制限がある点がデメリットであり、比較的低コスト・短期間で手軽に利用できるコンテンツを開発できる点がWeb ARのメリットと言えます。
Web ARはどのような用途に向いているのか？
ではWeb ARはどのような用途に向いているのでしょうか？
アプリと比較して、それぞれ次のような場合に活用するのが推奨されます。
上記のように、「多くの人に手軽に体験してもらうこと」に向いており、特にイベント・キャンペーンのプロモーションや商品のお試しシミュレーションを得意としています。
Web ARはイベント・キャンペーンのプロモーションでは、ARによるリッチな体験を通して、認知を拡大・認識を深化し、イベントへの参加/商品の購入へ繋げることが期待できます。また、Web ARはURLひとつで気軽にシェアすることが可能なため、TwitterやInstagramなどのSNSで拡散されやすいです。
商品のお試しシミュレーションでは、ユーザーが自分の持っているスマートフォンを使ってARを体験することで写真や映像のみでは把握が難しい、色合いやサイズ感、他の服や部屋とのフィット感などのイメージを得ることができるため、購買率向上や実際の商品がイメージと違った際の返品を減らす効果が見込めます。
国内活用事例3選
Web ARが実際にどのように活用されているのか、国内の活用事例を3つ紹介します。
#スターバックスさくら2020 -飲食チェーンでのプロモーション-
#スターバックスさくら2020は、Web ARの強みが飲食店の店舗におけるプロモーションで活用された事例です。
2020年2月15日から3月12日までスターバックスの店舗内で「#スターバックスさくら2020」というキャンペーンが行われ、その中でARで桜を見ることができる体験が第一弾と第二弾の2回実施されました。
第一弾では、店内POPにあるQRコードをスマートフォンで読み取ると、画面越しに、店内に満開の桜が現れるARコンテンツが提供されました。「ソメイヨシノ」、「八重桜」、「しだれ桜」の3種類が用意され、そのうちどの桜が咲くかはお店によって異なります。ARの桜は操作により自由に大きさ・場所を移動することができ、好みの位置で写真撮影を楽しむことができます。
スターバックスから桜のGIFT🌸#スターバックスさくら2020 をいつでもどこでもお楽しみいただけるようになりました。満開のARさくらの下で、心あたたまるコーヒーブレイクを☕️https://t.co/0cB7rTTPLS pic.twitter.com/EEQzsbJSps
— スターバックス コーヒー (@Starbucks_J) March 23, 2020
第二弾は、レシートのQRコードをスマートフォンで読み取ると、動く桜のジオラマの世界が現れるというものでした。コードがレシートに記載されているため、自宅やオフィスでも世界観を楽しむことができます。
#スターバックス のレシートのQRコードで表示できる #AR 楽しい！ アプリのインストール不要のWebAR です。出てくる3Dモデルは複数種類あります。#スターバックスさくら2020 pic.twitter.com/fMUMLpWHXE
— Tomoki Itamiya 板宮 朋基 (@t_itamiya) February 28, 2020
#スターバックスさくら2020 のAR体験は、桜がリアルに再現されているのはもちろんのこと、花びらが舞い落ちるアニメーションもあり、本当に目の前に満開の桜が咲き誇っているようで、思わず写真に撮って他の人とシェアしたくなるような美しさです。
Web ARの特徴である、アプリダウンロードの手間が必要ない手軽さもあり、TwitterやInstagramなどのSNSで多くの人に #スターバックスさくら2020 というタグで拡散されました。
#スターバックスさくら2020 はWeb ARを使うことにより、各店舗での装飾などの手間やコストをかけることなく、現実ではありえないような演出を施し、多くの人にシェアされるようなプロモーションを行うことができることを示した好例であると言う事ができるでしょう。
#スターバックスさくら2020 のプレスリリースはこちらから
NIGHT SYNC YOKOHAMA -屋外イベントでの演出-
Web ARは屋外の夜間イベントでの演出にも活用されました。イベントの演出においても、Web ARの特徴が活かされています。
NIGHT SYNC YOKOHAMAは、横浜のナイトエコノミー活性化を目的として、昨年のラグビーワールドカップ2019™日本開催をきっかけに実施された、光と音で夜の横浜を演出したイベントです。
2019年11月1日から12月27日にかけて行われ、新港中央広場でのデジタルコンテンツ投影やライトアップの常設展示のほか、毎日計4回の特別演出と各種の特別コラボレーションイベントが実施されました。この中の特別演出でWeb ARが活用されました。
Web ARは特別演出において、実際の風景にスマートフォン越しにデジタル映像を重ね拡張する演出をすることに用いられ、現実とAR空間が一体となったリッチな体験が提供されました。
イベントでのAR体験では、通信環境の良くないところでもダウンロードせず使えるWeb ARの長所が発揮されました。
NIGHT SYNC YOKOHAMAのイベントページはこちらから（イベントは終了）
シュウ ウエムラ -コスメECでのバーチャルメイクアップ-
Web ARはコスメティックのお試しに活用することもできます。
メイクアップアーティスト植村秀が創業したブランド「シュウ ウエムラ」が運営するシュウ ウエムラ公式オンラインショップでは、オンラインでコスメティックのタッチアップをすることができるバーチャルメイクアップ機能を人気リップアイテム全150色以上に搭載しています。現在はリップの他、ファンデーションやアイメイクでも機能を利用することができます。
公式オンラインショップでは、
- 気になる商品とカラーを選択する
- 「カメラで試す」を選択する
- 自分の顔でシミュレーションする
の3ステップで簡単に利用することができます。
ユーザーが余計な手間をかけることなく、自動的に唇などを認識しメイクアップされた姿を見ることができます。
通常、コスメのお試しは店頭で施した後に落とし、再度お化粧を直さなければならない手間があるため女性にとってコストがかかることです。
しかし、Web ARを用いれば店頭に行くことなくオンラインショップからシームレスにシミュレーションをすることができ、タッチアップをする度に直す必要もありません。実際に塗る必要が無いため、店頭で施すよりも多くの種類・色を試すことができるというARそのものの長所も活かせています。
オンラインでのメイク試用は、消費者だけでなく提供者側にとっても、
- 商品の価値を気軽に体験してもらいたい
- 顔のパーツの色を変えるなどは、相対的にシンプルなインタラクションである
という点で、Web ARに向いています。
COVID-19の影響で消費者の購買行動が変容し実店舗で行うことが厳しくなる中、バーチャルメイクアップはタッチアップの新しい形となる可能性があります。
シュウ ウエムラ公式オンラインショップ「バーチャルメイクアップ」はこちらから
海外活用事例3選
スパイダーマン Into the Spider-Verse -新作映画でのプロモーション-
海外では、Web ARは新作映画のプロモーションにも活用されています。
2018年に公開されたスパイダーマンシリーズの映画「Spider-Man Into The Spider-Verse」のウェブページには、Web ARで3DCGのスパイダーマンを現実の風景の中に召喚できるWeb ARコンテンツが搭載されました。
スマートフォンやタブレットでウェブページにアクセスしカメラを起動すると、ほぼ等身大の3DCGのリアルなキャラクターが登場し、アニメーションをARで楽しむことができます。
現れたキャラクターを角度を変えて見たり、写真を撮影することができ、SNSでもシェアされました。
Web ARは利用ハードルの低さから多くの人に届けることが得意であり、SNSでの拡散にも向いているので映画のプロモーションでもWeb ARが活用されるようになっています。
最近では、「ラ・ラ・ランド」でアカデミー賞最優秀監督賞を受賞したダミアン・チャゼル監督の新作映画「First Man」でもプロモーションの一環で、映画の舞台となる月面を体験できるWeb ARが配信されました。
今回のコンテンツは、例えアプリで制作した場合、スパイダーマンのためだけにアプリをダウンロードする人はいると思いますが、手間を惜しまないコアなファン以外は流入しないかもしれません。その点、Webであれば利用障壁が低いため、より多くのカジュアル層を取り込むことが期待できます。
キャラクターや世界観を味わうことができるWeb ARを用いたAR体験は映画に留まらず、あらゆる作品のプロモーションに利用できるでしょう。
Shopify AR -Eコマースでの商品シミュレーション-
Shopify ARは、Web ARがネットショップでのバーチャルな商品お試しに活用された事例です。
Shopifyはカナダ発の世界シェア1位のECサイト制作プラットフォームで、オンラインストア管理経営に必要な機能を一元的に管理できることを強みとしています。そんなShopifyが、プラットフォームを利用しているEC事業者に対してARを利用して商品を販売できるShopify ARの提供を始めました。
ウェブサイト上でARボタンを押すとカメラが起動し、対象の商品を目の前に配置することができます。ECでの購入を検討しているユーザーはARでサイズや質感を感じることができ、オンラインで商品のお試しをすることが可能になります。
Shopifyは、Shopify ARの導入により、
- ユーザーが場所を問わず商品のサイズやディテールを正確に把握できるようになることで、CV向上や返品低減する
- まるでそこに実在するかのようにプロダクトに命を吹き込み、購買体験を豊かにする
- iOSとAndroidのユーザーを対象にあらゆる環境を独自のショールームに変える機能を提供し、買い物客を引き付ける
ことが期待できるとしています。
ここでもウェブサイトから直接利用できるWeb ARの強みが活きています。
2020 年はCOVID-19の影響で、自店舗での買い物と近い体験を提供するECでのAR活用はますます注目の分野になっています。
Shopify ARについての公式ページはこちらから
AR in Google Search -検索サイトでのAR利用-
Web ARはプロモーションや商品のお試しのほかに、検索サイトにおいても活用されています。
グーグルはスマートフォン・タブレットからの検索サービスで、動物などの名前を検索するとARで楽しむことができる機能を提供しました。
スマートフォン・タブレットからGoogleで「トラ」「コウテイペンギン」など対応している動物の名前を検索し、「3D表示」を押し「AR」を選択すると、現実の風景の上に精緻な3DCGの動物が映し出されます。
ARの動物は自由に大きさや位置を変えることができ、現実の風景と一緒に写真を撮ることができます。
現在は29種類の動物の他にも、恐竜や昆虫、そして非公開の洞窟までもARで体験することができます。Google検索の設定を英語にして英単語で検索するとさらに、人体や細胞組織、アポロ11号なども見ることができます。
検索サイトでは、情報を知りたい人に対して、視覚的に素早く届ける用途にWeb ARが向いていると言えます。
Googleへの搭載により、Web ARはますます私たちの日常的に身近なものになっています。
Web ARのための開発ツール
ここからは実際にWeb ARを開発する際に用いる技術・開発プラットフォームをご紹介して、メリットとデメリットを検討していきたいと思います。
8th wall
8th wallは豊富な機能を特徴とする有料のWeb AR開発プラットフォームです。
メリット
- 比較的簡単にARコンテンツを作ることができる
- 機能が豊富なためリッチコンテンツ制作に向いている
- OSではiOSとAndroid両方に対応しており、ブラウザもSafariやChromeなど主要なものに対応している
デメリット
- ビジネス利用ですとスタンダードプランで月約30万円であり、ランニングコストが必要かつ高額
事例
上記でご紹介したスパイダーマンの他、2019年に公開された映画『ジュマンジ ネクスト・レベル』のプロモーションAR体験にも8th wallが使われています。
AR.js
AR.jsは誰でも完全無料でWeb ARを開発することができるjavascriptのライブラリです。
メリット
- オープンソースのため、完全無料で利用することができる
- 制作事例が多い
- 定期的なアップデートで機能追加が期待できる
デメリット
- 機能が少ない
事例
AR.jsを用いることで以下のようなプロダクトを作ることができます。
Amazon Sumerian
Amazon Sumerianは、Web上でARを作成・ビルド・起動できるAWSのサービスです。
メリット
- 非エンジニアでもわかりやすい
- コーディング不要で簡単な体験が実現できる
デメリット
- できることが少ない
- 商用利用については、アクセス数に応じて料金がかかる
事例
Amazon Sumerianを使うことで以下のようなコンテンツを作ることができます。
Amazon Sumerianのページはこちらから
Web ARの開発方法・コスト・期間
Web ARの開発方法
Web ARは、基本的には上記の8th wallやAR.jsといったツールを利用すれば、JavaScriptエンジニアがいればどの会社でも開発することが可能です。
ただし、ARコンテンツの中身の3Dモデルの作成や更新などは開発会社の開発力・運用力に依存するところが大きいため、ARに強い他社に委託するケースも多いです。
弊社、プレティア・テクノロジーズで開発する場合は、AR.jsを使いつつ、クラウドの利用やコンテンツ企画開発をすることができるため、ランニングコストを抑えながらも Pretia ならではの価値を提供することができます。
Web ARの開発期間・コスト
開発期間
Web ARの制作内容は主に
- 企画（2週間-1ヶ月）
- UIデザイン（2-3週間）
- 3Dモデリング（2週間-2ヶ月）※素材の物量に大きく依存します
- 開発（1ヶ月-3ヶ月）
- QA・デバッグ（2週間-1ヶ月）
であり、開発中はこれらが並行して進むため、開発期間はトータルで1.5ヶ月-3ヶ月程度となります。
開発コスト
コストに関しては、通常の開発コストのほか、使用する開発ツールの価格に応じて費用が乗るケースも多いです。
具体的な金額面では、100万円台でも開発できることはありますが、様々な端末・ブラウザにおける動作検証をしっかり実施する場合は最低300万円は予算を確保した方が無難であると言えます。
リッチな体験を提供したい場合は、その分の開発コストが重なり、開発コストは平均的に総額500-1000万円くらいになります。
Web AR導入を検討している企業の担当者様へ
本WEBメディア「AR TIMES」の運営元であるプレティア・テクノロジーズ株式会社は、「ARクラウド」をはじめとしたアルゴリズム開発、および「AR謎解きゲーム」をはじめとした各種エンターテイメント及びソリューションを提供するスタートアップ企業です。
弊社はWeb ARに関しても様々な知見と技術を有しております。
- 自社のWebサイトにARのページを追加して顧客に新たな体験を届けたい
- Web ARを用いたプロモーションを行いたい
- その他Web ARを用いた企画を検討している
といった企業のご担当者様は是非、下記のページからお問い合わせください。
お問い合わせはこちらから
