Web ARの開発方法を解説

この記事ではWebARの開発方法を解説します。

Web ARの解説は以下の記事をご覧ください。

Web ARとは?アプリとの比較やメリット作り方を事例で解説

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コンテンツを簡単に制作できるツールも同時に提供しており、自分たちでARコンテンツを制作できるようにするご支援も同時にしております。

OnePlanetへ相談する 資料請求する

8th wall

8th wallは豊富な機能を特徴とする有料のWeb AR開発プラットフォームです。iOS、Androidの両方に対応した表示が可能なため、スマホ所有者のほとんどの方に対してアプローチすることができます。なお、iOSの主要ブラウザはSafari、Androidの主要ブラウザはChromeとFirefoxです。

メリット

  • 比較的簡単にARコンテンツを作ることができる
  • 機能が豊富なためリッチコンテンツ制作に向いている
  • OSではiOSとAndroid両方に対応しており、ブラウザもSafariやChromeなど主要なものに対応している
  • 最近のアップデートによりアプリ内ブラウザでも体験ができるようになりARマーケティングに最適化

デメリット

  • ビジネス利用の場合で、スタンダードプランで月額3,000USドル(約30万円)が必要
  • さらにトラフィック量により従量課金でサーバー代金も発生

事例

white castle 1
IMAGE CREDIT:8th wall

アメリカのファストフード「ホワイトキャッスル」では100周年を記念して8th wallを使ったARキャンペーンを実施しました。

1921年の創業以来パートナーであるコカコーラと協力して、3つのARソフトドリンクカップを発表しました。カップを認証すると、動きと音でワクワクするような演出を提供しています。

関連記事

【解説】8th Wallとは?WebARの開発支援ツールの解説と最新動向

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を使うことで以下のようなコンテンツを作ることができます。

ロケーショナー(LocationAR)

こちらの「ロケーショナー」は写真や動画をアップロードするだけで、簡単にARマーカーをブラウザ上で作成することができるサービスです。簡単・気軽にARコンテンツを制作することができます。

こちらの男子プロバスケットボールリーグ、Bリーグ所属の広島ドラゴンフライズの事例は、静止画だと思っていたコンテンツがカメラをかざすと突如動き出す!といったWowな体験をプログラミングなしで制作した事例です。

AR導入事例|プロスポーツチーム 広島ドラゴンフライズ様

もちろんWebARという特性上ユーザーに専用アプリをインストールさせる必要がないため、QRコードさえ読み取れば誰でもストレスなくAR体験ができるという特徴も強みになっており、こちらのLocationAR(ロケーショナー)を利用することで、イベント制作会社や広告代理店が「ARを活用したプロモーション」を自社の広告商品に取り入れていくケースも増えています。

さらに、先ほどの相模鉄道の「ARスタンプラリー」の事例のように、外部の制作会社に開発を依頼せずに自分達だけでARを使ったイベントまで開催することができます。

すでに様々な業界やビジネスで活用事例が豊富にあることも安心できます。

公式サイト:LocationAR(ロケーショナー)

メリット

メリットはやはり低価格なシステム利用料のみで、制作会社に頼らずともARコンテンツを制作できてしまう手軽さにあります。アイデア次第では簡単なARコンテンツでもとても良いユーザー体験を作り出すことも可能です。

また、GPS機能なども搭載されており、プログラミングをせずにAR体験ができる場所を限定させるような位置情報の制御も可能です。

デメリット

高度なARの演出は、やはりどうしても専門業者に制作をしてもらう必要があります。

リッチな3Dモデルが出現するようなAR体験であれば、ARに最適化したコンテンツ制作が可能なパートナー企業やARコンテンツの制作スタジオと共に開発を進めると良いでしょう。

事例

こちらは長野県のスキー場&雪山エンターテインメント「NINJA SNOWHIGHLAND」でLocationAR(ロケーショナー)を使ったARコンテンツが導入された事例です。

10メートル級の3D制作された巨大忍者がスキー場現地に出現するという大変ダイナミックなAR体験をすることができます。こちらのコンテンツは3D制作はAR専門のコンテンツスタジオ「spark studio」が担っていますが、コンテンツを表示する部分はLocationARの仕組みで実装されています。

参考:峰の原高原スキー場×雪山エンターテイメント「REWILD NINJA SNOW HIGHLAND」に超巨大ARニンジャが出現!

WebARの開発期間

Web ARの制作内容は主に

  • ARの企画(2週間-1ヶ月)
  • UIデザイン(2-3週間)
  • 3Dモデリング(2週間-2ヶ月)※内容により大きく変動
  • AR開発(1ヶ月-3ヶ月)
  • クオリティチェック・バグテスト(2週間-1ヶ月)

であり、開発中はこれらが並行して進むため、開発期間はトータルで1.5ヶ月〜3ヶ月程度となります。

Web AR導入を検討している企業の担当者様へ

ARはさまざまな活用方法があり、マーケティング戦略のひとつとして導入する企業も増えています。特にWebARはより簡単に利用できるため、多くの人に使ってもらえる可能性が高いです。

本メディア「ARマーケティングラボ」を運営する株式会社OnePlanetでは、WebARについて豊富な実績を有しています。企画や開発はもちろん、拡散、分析、レポーティングまでサービスをワンストップで提供しています。ご興味がございましたら、お気軽に相談してください。

ARを使った広告やプロモーションにご興味のある方は、ぜひお気軽にご相談ください。

OnePlanetへ相談する 資料請求する