この記事ではWeb ARの開発方法にフォーカスを当てて解説した記事となっています。
Web ARの全体像や最新事例については、以下の記事をご覧ください。
目次
Web ARの開発プラットフォーム
以下からは、Webブラウザで動作するAR開発プラットフォームやAR制作サービスの代表的なものをピックアップしてまとめています。
①8th wall
「8th wall」は豊富な機能を特徴とする有料のWeb AR開発プラットフォームです。iOS、Androidの両方に対応した表示が可能なため、スマホ所有者のほとんどの方に対してアプローチすることができます。なお、iOSの主要ブラウザはSafari、Androidの主要ブラウザはChromeとFirefoxです。
メリット
- エンジニアが必要だが、ノーコードのプラットフォーム以上にリッチなARコンテンツを作ることができる
- 機能が豊富なためリッチコンテンツ制作に向いている
- OSではiOSとAndroid両方に対応しており、ブラウザもSafariやChromeなど主要なものに対応している
- 最近のアップデートによりアプリ内ブラウザでも体験ができるようになりARマーケティングに最適化
デメリット
- 高度なARエンジニアが必要
- 価格が高い。ビジネス利用の場合、ライセンスだけでスタンダードプランで月額3,000USドル（約30万円）が必要（＋エンジニアの開発費）
- プランによっては、さらにトラフィック量により従量課金でサーバー代金も発生する場合も
事例
先進的なマーケティングの取り組みが有名なドミノ・ピザ ジャパンでは、新商品のプロモーションにARを導入しており、その裏側では8thwallが採択されています。
2021年11月1日にリリースされた「ワールド9チーズ・クワトロ」のプロモーションとしてAR開発企業のOnePlanetをパートナーとして採択し、「ドミノ”チーズの世界をめぐる旅”AR」というユニークなARコンテンツを発表しました。こちらのAR開発は8thwallで実装されています。
チーズでできた世界地図が目の前に出現し、ユーザーはドミノ・ピザのこだわりのチーズを世界地図の上でめぐる旅ができるAR体験となっています。楽しみながらチーズの学習ができるだけでなく、ドミノ・ピザの素材へのこだわりも伝わり、ブランドへのロイヤリティを高めることに貢献しています。
自宅に居ながら、世界中のチーズを知ることができる旅へと出かけられるような非日常のAR体験は、SNSでも話題を集めており、国内でも先進的なARマーケティングの事例と言えるでしょう。
有名Youtuber、SEIKINさんのこちらの動画でも、その楽しいブランドプロモーションの様子が覗けます。
関連記事
②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を使うことで以下のようなコンテンツを作ることができます。
④Planetar（プラネター）
こちらの「Planetar（プラネター）」というWeb AR制作ツールは、写真や動画をアップロードするだけで、ノーコードでブラウザベースのARを作成することができるサービスです。エンジニアでなくとも、誰でも気軽にARコンテンツを制作することができます。
こちらの男子プロバスケットボールリーグ、Bリーグ所属の広島ドラゴンフライズの事例は、静止画だと思っていたコンテンツがカメラをかざすと突如動き出す、インタラクティブなAR体験をプログラミングなしで制作した事例です。
Web ARという特性上ユーザーに専用アプリをインストールさせる必要がないため、QRコードさえ読み取れば誰でもストレスなくAR体験ができるという特徴も強みになっており、こちらのPlanetar（プラネター）を利用することで、事業会社だけでなく、イベント制作会社や広告代理店が「ARを活用したプロモーション」を自社の広告商品に取り入れていくケースも増えています。
こちらの相模鉄道の「ARスタンプラリー」の事例のように、外部の制作会社に開発を依頼せずに自分達だけでARを使ったイベントまで開催することができます。
すでに様々な業界やビジネスで活用事例が豊富にあることも安心できます。
メリット
メリットはやはり低価格なシステム利用料のみで、制作会社に頼らずともARコンテンツを制作できてしまう手軽さにあります。アイデア次第では簡単なARコンテンツでもとても良いユーザー体験を作り出すことも可能です。
プログラミングをせずにARを使ったスタンプラリーを作れたり、AR体験をした先に任意のWebページへ遷移させるなど、ARに追加できる様々な機能が付帯しています。3Dの知識がなくてもARが制作できるようなドキュメントやサポートも魅力です。
デメリット
先述の「8thwall」ではエンジニアがフルスクラッチで開発をするため、ノーコードで制作ができるプラネターは、そこまで高度なARの演出は、できないケースがあります。
ただし、かなり高度な演出でも開発なしでプラネターで簡単に作れるため、8rhwallのライセンス代金と比較すると、ノーコードツールの方がメリットが大きくなるケースも多いのが実情です。
プラネターは2Dデザイナーだけでも十分にリッチなARを制作できますが、高度な3Dモデリングやアニメーションがどうしても必要なAR体験であれば、プラネターの開発元のOnePlanet社など、専門性の高いパートナーと共にプロジェクトを進めると良いでしょう。
事例
こちらは長野県のスキー場&雪山エンターテインメント「NINJA SNOWHIGHLAND」でWeb AR制作ツールのPlanetar（プラネター）を使ったARコンテンツが導入された事例です。
10メートル級の3D制作された巨大忍者がスキー場現地に出現するという大変ダイナミックなAR体験をすることができます。
こちらのケースではリッチな忍者の3Dの一部は専門チームがサポートをしていますが、プラネターでは基本的には2Dのデザイナーがいれば3Dの知識がなくても簡単に立体的なARを作れるようになっていることが大きな利点です。
参考：峰の原高原スキー場×雪山エンターテイメント「REWILD NINJA SNOW HIGHLAND」に超巨大ARニンジャが出現！
Web ARの開発に関連する周辺技術
Web ARは、基本的には8th wallやAR.jsといったツールを利用すれば、ブラウザベースの技術を扱えるエンジニア、特にJavaScriptエンジニアがいればどの会社でも開発することが可能です。
ただし、実際の開発プロセスは単にブラウザベースのAR開発をするだけではなく、3Dモデルを作成・表示に関する知識が求められたり、多岐に渡るWeb ARの開発プラットフォームの各特性も把握する必要があったり、技術選定の難易度は容易ではありません。
3Dモデリング
ARは「拡張現実（Augmented Reality）」という言葉の通り、「現実世界にバーチャルな情報を出現させて、現実を拡張する」というテクノロジーです。単にAR技術だけ扱えても、「出現させるコンテンツ」がなければ、何も飛び出させることができません。
Adobeイラストレーター等で制作される従来の2D画像や、Youtube等で一般化してきた動画コンテンツ以上に、様々なデータや拡張子が存在するため、今までとは異なる新しい知識の学習が必要です。
また、制作した3Dコンテンツを現実世界に表示させる「レンダリング技術」と呼ばれる部分についても知識があれば、さらに高度なWeb ARの体験を開発することができるでしょう。
ただし、Web技術を扱ってきたエンジニアが3Dモデリングやレンダリングの技術・知識を学習しなければいけないという点は、従来の業務とかけ離れた知見が求められるため、かなりハードルが高い部分と言えるでしょう。
先述の「プラネター」のように、3Dの知識がなくてもアプリ不要のWebARを制作できるツールがあれば一気に制作のハードルは下がるでしょう。
ユーザー端末のブラウザ環境
Web ARは「アプリが不要」という大きな利点はありますが、その分「誰の端末でもストレスなく動作してくれること」が期待されてしまうため、ユーザー側の端末環境についても必要な知識となります。
iPhoneであれば「Safari」、Androidであれば「Chrome」など、ブラウザアプリに応じた特性も理解しないと、「誰でもストレスなく体験できるWeb AR」の開発はできません。
例えばiPhoneなのにブラウザアプリは「Chrome」を使っているという人もいるでしょう。そうした時に、予期せぬ挙動が起きてしまうリスクにどう対処するのかなど、専門性が求められる場面も多くなるので、エンジニアのテストの負荷が非常に高まることも念頭におくべきでしょう。
Web ARの技術選定
3Dモデルやブラウザの環境とは別で、本丸のWeb ARの開発プラットフォームやWeb AR SDKにおいても、各サービスやプラットフォームごとに認識の精度やできることもバラバラなので、開発するプロジェクトごとに技術を使い分けしなければいけない点も開発の難しい点と言えるでしょう。
開発プラットフォーム含めて、「Web AR 開発のベストプラクティス」を追求していく必要があり、単にWebで動くARを実験的に開発するだけであれば難易度は低いですが、ビジネスで安定して動作するWeb ARを開発する場合には専門的なノウハウが必要となります。
エンジニアリングの観点からすると、単にWebの知識だけで実装できる訳ではないため、もし分かりにくい際には専門性を有する会社と相談しながらプロジェクトを進めると良いでしょう。
そういった周辺知識の必要なく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ヶ月程度となります。
ただし、先述のノーコードのWeb AR制作ツール「プラネター」のようなプログラミング不要のプラットフォームを使って、動画や画像などの既存のクリエイティブ素材をうまく活用すれば、僅か1-2日で制作してしまうことも可能です。
費用はARの開発会社がエンジニアを稼働させて請負で開発する場合であれば、100万円〜500万円。
ノーコードのWeb AR制作ツールを使えば、カスタマイズ性は多少下がりますが、月額5万円で多数のARを自分で作ることができます。
無駄に高いコストを支払う必要がないケースもあるため、制作するARの内容によって技術を選定することが重要と言えるでしょう。
Apple Vision ProのWeb技術について
2024年2月には、Apple社がiPhoneの次と位置付ける世界最先端の新デバイス「Apple Vision Pro」が発売され、いよいよ大きく世の中を変革するのでは？という機運が高まってきました。
Apple Vision Proにおいても、スマホと同じく「Web」の技術があります。
ご興味のある方は、以下の記事に情報がまとまっているので、良ければご覧ください。
Web AR導入を検討している企業の担当者様へ
ARはさまざまな活用方法があり、マーケティング戦略のひとつとして導入する企業も増えています。特にWeb ARはより簡単に利用できるため、多くの人に使ってもらえる可能性が高いです。
本メディア「ARマーケティングラボ」を運営する株式会社OnePlanetでは、Web ARについて豊富な実績を有しています。
Web ARを開発する際には8th wallなどの開発ツールやブラウザベースのAR専用のライブラリ等を使いつつ企画・開発をしており、コストを抑えながらARならではの空間を生かしたコンテンツを開発・提供することを可能にしています。
また、AR開発の請け負いのみならず、自分で簡単にWeb AR制作ができるツールを提供していたり、単にARを作るだけではなくARをうまく生かしたキャンペーンの設計まで含めて全て提供することができるため、話題を喚起する国内でも最先端のARマーケティングをワンストップで提供いたします。
企画や開発はもちろん、拡散、分析、レポーティングまでサービスをワンストップで提供しています。Web ARの開発にご興味がございましたら、お気軽にご相談ください。
