Web AR

昨今、ビジネスでのAR(拡張現実)の導入事例が増えてきました。

現実世界に情報を付加するAR体験は、ユーザーに大きなインパクトを与えることができます。

今回は、ARの中でも注目を集めている新技術「Web AR」について紹介します。

「Web ARとはどんなもの?」「どのようにして楽しむの?」「メリットやデメリットは?」といったのポイントを整理しましょう。

また、実際にWeb ARを使ったプロモーションやキャンペーンの事例も紹介します。

ARの新技術!Web ARとはどのような技術?

ARで登場したキャラクター

Web ARとは、デバイスにインストールされている「ブラウザ」で楽しめるARの新技術です。

従来のモバイル向けARは、Apple StoreやGoogle Playなどから専用アプリをダウンロードするステップが必要でした。

このダウンロードのステップがユーザーにとっては面倒くさく感じることも多く、AR体験まで至らない可能性がありました。

しかし、ブラウザベースのWeb ARが登場したことで、専用アプリのダウンロードは不要になり、もっと気軽に・すぐにARを楽しめるようになりました。

ブラウザとは、インターネットで情報検索をするときに立ち上げるアプリのことです。

モバイルではGoogle Chrome・Safariなどがよく使われています。

Web ARは、ブラウザを立ち上げてARコンテンツを提供しているWebサイトにアクセスすることで、すぐにARを楽しめるようになったのです。

Web ARの楽しみ方は?

スマホでARを利用している

Web ARは、ブラウザ経由で専用ページにアクセスし、デバイスのカメラを立ち上げて現実世界の情報を読み取ってコンテンツを出現させます。

ARには大きくわけて次の2種類があります。

ARの種類
  • マーカーAR:「マーカー」と呼ばれる画像をカメラで読み取り、現実世界にコンテンツを出現させる
  • マーカーレスAR:「マーカー」を必要とせず、カメラでリアルタイムに現実世界の情報を読み取ってコンテンツを出現させる

    マーカーは、ARコンテンツを呼び出すトリガーの役割を果たします。

    マーカーARは、名刺・ポストカード・展示物などの紙にマーカーを印刷して使用することが多いです。

    一方、マーカーレスARは、マーカー画像は不要。

    Web ARが出始めた当初はマーカーARが主流でしたが、最近は技術が進歩し、どちらのタイプでもWeb ARで体験できるようになってきました。

    顔を認識して動物の耳を着せたり、年齢を変えたりといった変身が楽しめるタイプのARも、マーカーレスARの1つです。

    今回は、マーカーとなる画像を読み込んで表示させる「マーカーAR」を例にして、Web ARを楽しむ手順を紹介しましょう。

    こちらがWeb ARの事例です。

    専用アプリではなく、ブラウザが立ち上がってARコンテンツが現れていることを確認できます。

    Web ARをサービス展開しているオムニバス・ジャパンのサンプルをもとに、楽しみ方を紹介します。

    Web ARを利用する手順
    1. カメラでQRコードを読み取って専用ページへアクセスする
    2. カメラでマーカーとなる画像を読み取る
    3. コンテンツが現れる

    ステップ①:カメラでQRコードを読み取って専用ページへアクセスする

    スマホでQRコードを読み取る

    デバイスのカメラを立ち上げて、専用ページへアクセスするためのQRコードを読み取ります。

    読み取りが成功するとブラウザが立ち上がります。

    ※現在のiOSやAndroidのカメラには、QRコードを読み取る機能がついています。そのため、QRコードを読むための専用アプリは不要になりました。

    ステップ②:カメラでマーカーとなる画像を読み取る

    スマホのアクセス許可画面

    ブラウザが立ち上がると、「Webサイトが動作・方向やカメラへのアクセスを求めている」旨のメッセージが出ます。

    アクセスを許可すると、ブラウザ内でカメラ画面に切り替わります。

    ※デバイスによってはメッセージが出ない場合もあります。

    ステップ③:コンテンツが現れる

    ブラウザ上でARコンテンツが登場

    ブラウザ内のカメラでマーカーをかざすと、コンテンツが出現しました!

    3Dのキャラクターアニメーションのほか、写真や2Dイラスト、YouTubeのにビデオウォールをARコンテンツにすることができます。

    名刺に利用すればより印象深い自己紹介ができますし、展示物をマーカーにすることでより楽しい演出が可能になります。

    Web ARを導入するメリット

    早稲田大学入学式で使用されたWeb AR

    Web ARには、従来のARアプリのデメリットを解消できるポイントがたくさんあります。

    大きく分けて、次の2点がメリットだと言えるでしょう。

    Web ARのメリット
    • 専用アプリのダウンロードが不要
    • 開発コストを抑えられる

    メリット①:専用アプリのダウンロードが不要

    従来のモバイルで楽しむARは、Google PlayやApple Storeから専用アプリをダウンロードする必要がありました。

    専用アプリを用いたARは、通常の動画や広告とは異なるインタラクティブな体験ができます。

     

    一方で、次の3つのデメリットによりユーザーがARを楽しむ機会を損失してしまう可能性がありました。

    専用アプリのデメリット
    • 専用アプリをダウンロードするのが面倒くさく感じてしまう
    • アプリをダウンロードするために通信料が必要
    • デバイスの容量を圧迫してしまう

      Web ARはブラウザで体験できるため、専用アプリのダウンロードが不要です。

      従来の問題点を改善し、よりストレスなくシームレスなAR体験が可能になったのです。

      メリット②:開発コストを抑えられる

      一般ユーザー向けの専用アプリを作る場合、iOS版とAndroid版の2つのアプリ制作が必要でした。

      さらに、iOS版をApple Storeにアップする際にAppleの審査が必須です。

      審査期間は数日から数週間かかることもあり、もし審査で不承認になった場合は公開できません。

      Appleの審査期間を見越した開発スケジュールを組まねばならず、開発側にとって負担が大きいことがデメリットでした。

       

      一方で、Web ARは、従来のように専用アプリを制作する必要がありません。

      iOS版とAndroid版の作り分けも、Apple Storeへ公開するための審査も不要です。

      そのため、開発コストを抑えられます。

      開発スケジュールも従来のアプリ制作よりも短くなるため、公開までの期間を短縮できることがメリットです。

      WEB ARを導入するデメリット

      Web ARを利用した家の内装

      Web ARはまだまだ発展途上の技術です。

      そのため、コンテンツのクオリティが低かったり対応していないデバイスが多かったりといったデメリットがあります。

      大きく分けて、次の3点がデメリットだと言えるでしょう。

      Web ARのデメリット
      • 専用アプリARに比べてコンテンツのクオリティや機能面が乏しい
      • 対応している機種が普及しきっていない
      • ネットワークの通信状況に左右される

      デメリット①:専用アプリARに比べてコンテンツのクオリティや機能面が乏しい

      Web ARは、従来のような専用アプリに比べて出力できるコンテンツのクオリティや機能にはまだまだ制限があります。

      特に、最近のユーザーは4Kテレビや最新ゲームなどでハイクオリティなコンテンツを見る機会が増えています。

      そのため、Web ARのコンテンツを見たときに画質などの粗さが気になってしまうかもしれません。

       

      とはいうものの、Web ARに関する技術の進歩スピードはめざましいものがあります。

      最近では、SNSへの連携機能がついたものや、3Dで現れたキャラクターを指でつつくと倒れてしまうといったインタラクティブ性の高いWeb ARも増えています。

      これからもWeb ARの技術はますます進化し、よりリッチなコンテンツを楽しめるようになるでしょう。

      デメリット②:対応している機種が普及しきっていない

      Web ARが発達したきっかけは、2017年頃にAppleが「ARKit」を、Googleが「ARCore」のARフレームワークをそれぞれリリースしたことが背景にあります。

      ユーザーが持っているデバイスの機種やOSのバージョンが古い場合、カメラやセンサーが対応しておらずWeb ARを楽しめない可能性があります。

      2018年以降に発売されたデバイスであれば多くの端末が対応していますが、念のためWeb ARを展開する際は対象とするデバイスの機種やバージョンを吟味する必要があるでしょう。

      デメリット③:ネットワークの通信状況に左右される

      ブラウザを利用する性質上、ネットワークの通信状況によっては快適にAR体験できない恐れがあります。

      あまり通信状態が良くない場所だと、ユーザーは次のようなストレスを感じてしまいます。

      ネットワーク通信による不具合
      • 専用ページのアクセスがしづらくなる
      • マーカーを読み込んでもコンテンツがなかなか出現しない
      • コンテンツがマーカーと関係なしに出現して現実世界との整合性が取れない
      • コンテンツの再生がブツブツと途切れてしまって最後まで見られない

      もしイベントブースなどでWeb ARを展開する場合は、事前に通信環境を調査しておくことが望ましいです。

      Web ARを活用した事例

      ARで登場した自転車

      Web ARは、専用アプリをダウンロードする必要がないことが大きな魅力です。

      シームレスでAR体験ができるため、店頭でのキャンペーン・Webサービス・ECサイト(ネットショップ)など、さまざまな分野との相性が良いです。

      では、具体的にWeb ARを活用した導入事例を3つ紹介しましょう。

      Web ARを活用した事例
      • スターバックス さくら2020
      • Google 動物検索AR
      • ECサイト「Shopify」

      事例①:スターバックス さくら2020

      スターバックス店内に設置されているARコードをカメラでかざすと、「ソメイヨシノ」「八重桜」「しだれ桜」のいずれか1種類が出現するというARです。

       

      また、レシートに表示されたQRコードを読み込むとブラウザが立ち上がり、ジオラマのような楽しい3Dがランダムで飛び出してくるという演出もありました。

      2020年3月14日までの期間限定キャンペーンでしたが、お店で春らしさを感じられるARとして、多くのスタバファンを魅了しました。

      こちらの記事でも詳しく体験談が掲載されています。

      導入事例②:Google動物検索AR

      Google動物検索AR

      マーカーレスARで最近話題になっているのは、Googleの動物検索です。

      Google検索で特定の動物の名前を入力してボタンを押すと、スマホのカメラが立ち上がり、現実世界に等身大の動物が3Dで表示されます。

      デバイスのカメラが現実空間の距離や奥行を計測し、より現実に近いサイズ感でコンテンツを出現させています。

      こちらでは、Googleで登場する動物の種類について詳しく解説しています。

      事例③:ECサイト(プラットフォーム)「Shopify」

      Web ARは、ECサイト(ネットショップ)との相性が非常に良い技術です。

      Shopify(ショッピファイ)では、いち早くWeb ARをショップサイトに取りいれています。

      ShopifyのAR

      店頭でなければ把握しづらかった商品のサイズ感や細部の確認などが、Web ARによって自宅にいながら簡単に確認できるようになりました。

      専用アプリのダウンロードも不要で、商品ページとのリンクもしやすいことも大きなメリットです。

      EコマースとWeb ARの組み合わせはとても相性が良いため、今後ますます増えていくことでしょう。

      まとめ

      専用アプリ不要でARを楽しめるWeb ARについて紹介しました。

      従来のARのデメリットを解消できる技術として、ますます注目が集まっていくことでしょう。