AR（Augmented Reality・拡張現実）は専用に開発したアプリをインストールして利用するのが一般的でしたが、近年Webブラウザで閲覧できるARが話題になっています。Web ARと呼ばれるこの技術は、現時点ではすべてをカバーすることができていないものの、開発コストや工数の面で、従来のAR開発と比較して大きなメリットを持っており、注目を集めています。
ここでは今後広まっていく可能性が高いと考えられているWeb ARについて、実際の事例や開発に必要となる環境、ライブラリなどを詳しく解説していきます。
Web ARとは
Web AR（Augmented Reality）は、WebブラウザだけでARが使える技術を指し、ブラウザARと呼ばれることもあります。
実行環境がブラウザベースのため、使用する言語はHTMLとJavaScript（AR.jsなど）が主となります。近年では、AR Coreなどの従来のARアプリ開発で使用していたライブラリもWeb ARに対応し始めており、今後Web ARの機能性や拡張性はさらに向上すると考えられます。
開発にかかるコストや工数が従来のARアプリ開発よりも軽いというだけでなく、Webブラウザだけで利用でき、新しくアプリをインストールする手間がかからないので、ユーザーが手軽にARを楽しめるというメリットもあります。
Web ARの種類
Web ARには、大きく分類するとマーカー型とマーカーレス型の2つの種類があります。
マーカー型は設置されているQRコードなどを読み取って、マーカーがある場所でARを発動させる方式です。一方のマーカーレス型は、部屋の間取りや家具、人体などの現実に存在しているものを読み取って、それを基準にARを発動させる方式です。
マーカーレス型の方が開発にややコストがかかるといわれていますが、ケースバイケースです。用途や目的によってどちらが適しているか異なるのは、従来のARと同様といえるでしょう。
Web ARの特徴
Web ARが持つ従来のARと異なる大きな特徴として挙げられるのは、以下の3点です。
・専用アプリのインストールが不要
・URLをシェアするだけで拡散できる
・アプリのARと違い短期間、低コストでの開発が可能
ユーザーにとって、新規に専用のアプリ（ネイティブアプリ）をインストールしなくて良いという点は、ARを利用するハードルを大きく下げます。また、URLをシェアすることで容易に共有できるため、SNSなどで拡散しより広くユーザーを獲得しやすいのも従来のARアプリとの違いといえます。
Web ARの配布方法はとても簡単で、例えば店内のテーブルや壁などにQRを設置したり、レシートに印刷するだけですぐにユーザーがAR体験を楽しめます。
Web ARと従来のAR開発の違いとは
従来のARの多くは、用途に合わせた専用のアプリを開発し、その上で動作させます。しかし近年発達したWeb ARは、前項で解説した通り専用のアプリを必要とせず、ブラウザ上で動作が可能です。そのため、アプリ開発にかかるさまざまな負荷を軽減し、ローンチまでの期間を短縮することができます。
特に開発コストの面では、使用言語がHTMLとJavaScriptであるため、従来のARアプリの開発と比較するとコストと工数の両方を削減することが可能になります。これによって、家具などのカタログにARを添付して配布し、ユーザーに対してARでお試し体験を通した提案をしたり、カフェなどの飲食中に楽しむARをローコストで作成してサービスを提供しやすいという強みを持ちます。
一方で、Web ARはまだ新しい技術であるため、既存のARライブラリがすべてWeb ARに対応しているわけではありません。そのため、従来のAR開発で実現できることが、Web ARですべて再現できるわけではない点に注意が必要です。
また、Web ARは開発プラットフォームの多くが有償であるという点も注意が必要です。ネイティブアプリ向けのARKitやARCoreは無償ですが、例えば8th Wallは月額99ドル～で有償になるため、ランニングコストについて事前にしっかりと検討する必要があります。
なお、AR開発の詳細については、こちらの記事も併せてご参照ください。
AR開発で必要な開発環境やライブラリをまとめて解説！
Web ARの事例
それでは実際にWeb ARを採用した事例を見ていきましょう。Web ARの大きなメリットであるアプリが不要である点を活かし、イベントの演出や購買を検討している際のイメージ確認、購入した商品への演出サービス、検索した結果に拡張現実を添えて表示するなど、ユーザーに利用の負担をかけずにARを提供する事例が多くなっています。
イベントでの活用
ビルなどの壁面にライトアップを行なうプロジェクションマッピングとWeb ARを組み合わせることで、プロジェクションマッピングの演出をWeb ARで拡張し、よりダイナミックでインタラクティブな体験を提供する試みです。
近年の事例では、2019年11月～12月に神奈川県横浜市で行なわれた「NIGHTSYNC YOKOHAMA2019」が大規模なプロジェクションマッピング＋Web ARの事例として知られています。
このイベントでは、まずプロジェクションマッピングを行なったエリアにマーカーを設置しています。そしてユーザーはこのマーカーをWeb ARで読み込むことで、プロジェクションマッピングによる夜景の演出をさらに拡張したものを、スマホを通して楽しむことができました。
プロジェクションマッピングとARは演出として相性が良く、イベントの展示物をマーカーとして利用することでARによるプロジェクションマッピングの拡張ができることから、今後も採用事例が増えていくでしょう。
商品の購入サポートでの活用
身近なARの活用例として挙げられるのが、商品購入を検討中の顧客向けに提供するARです。家具などを購入する際、従来は、自分で部屋のサイズや間取りを測り、配置したイメージを検討する必要がありました。そのため、購入したものの大きさや色のイメージが想像と違った、というトラブルも多くありました。
しかし、最近はWeb ARを利用して、商品を家の好きなところに配置し、実際のイメージを事前に確かめるサービスがでてきています。家具に限らず、Web ARを活用して衣服やメイクなどのコーディネートを検討するサービスもあります。具体的な状態を事前にARで確認できるため購買意欲を高めることが可能です。
動物のAR
Google検索で動物の名前で検索すると、検索した動物を表示させるWeb ARもあります。3Dで作られた動物はリアルで、実際の大きさや動き、鳴き声などもわかるため、検索した動物についてよりリアルに知ることができます。
2020年12月現在では、動物に限らず人体解剖モデル、細胞組織、科学用語、生物用語、物理用語、文化遺産など幅広い分野で利用できるようになっています。
Web ARを開発する際の必要なもの
Web ARの開発にはさまざまな開発プラットフォームがありますが、まずはWeb ARを触ってみたい、という場合は「A-Frame」と「AR.js」の組み合わせがおすすめです。
A-FrameはもともとVR用のフレームワークであり、高品質なVRを作成できるライブラリです。AR.js はWeb AR開発のためのOSS（オープンソースソフトウェア）のひとつで、簡単なコードでWeb ARを作成・実装できるフレームワークです。
この2つを組み合わせることで、簡単にWeb ARの開発環境が整います。使用する言語は前述の通り、HTMLとJavaScriptですが、基本的に必要となる構文は決まっているため、簡単なものであれば多くのコーディングをすることなく試すことができます。例えばAR.jsを利用すると、10行程度の記述でWeb ARが実装できるため、簡易的なARをすぐに開発したい場合も、少ない工数での実装が可能です。
まとめ
Web ARはネイティブアプリよりも手軽に開発して導入でき、ユーザーも簡単に利用できることから、今後さらに広まっていく可能性があります。大規模なイベントでの活用やECサイトにおける商品提案、購入した商品に付随するサービスの一環として積極的に導入を検討するクライアントが増えていくでしょう。
必要となる開発言語もHTMLとJavaScriptであるため、フロントエンドのスキルを活用しての開発が可能です。そのためARへの参入のハードルも下がることが予想され、市場として拡大していく可能性は高いでしょう。すでに注目されているARですが、その中でもWeb ARは特に注目しておくべき技術といえます。
