Web ARでの統合: 製品に命を吹き込む

Web ARを利用することで、顧客の環境に摩擦なく製品を組み込む機会を提供することができます。

3Dコンフィギュレーター: お客様が製品をカスタマイズできるようになります。

ECサイトにコンフィギュレーターを追加する。これにより、将来の購入者があらゆる角度から製品を見ることができるようになります。3Dコンフィギュレーターには、色の変更、サイズの表示、要素の追加や削除などを行うことができるカスタマイズツールが統合されています。

総合的な専門知識

3Dコンフィギュレーターを、小さなスクリプトを使ってお客様のWebサイトに直接統合します。そして、ユーザーは自分の好きなように製品をカスタマイズし、Web ARを介して(アプリケーションをダウンロードすることなく)拡張現実で表示させることができるのです。

3Dファイル(USDZ & GLB) は、お客様のウェブサイトのSEOに影響を与えないよう、当社のサーバーでホストされています。

お問い合わせ

Web AR:製品を実世界に統合する

Web ARは、あらゆる製品をユーザーの環境に表示することができ、それは新しい消費方法です。これからは、ユーザーは自分の環境で直接製品を試すことができ、もはやショールームに行く義務はありません。

30%への変換率を高める

モバイル版3Dコンフィギュレーターについて。製品の右上にある「AR」のボタンをクリックするだけで、アプリケーションをダウンロードすることなく、製品を拡張現実で表示することができます。 

当社の技術では、AR Kit(Apple)、AR Core(Android)を使って商品を表示します。この技術を可能にするショートコードスクリプトをクライアントのWebサイトに組み込んでいます。

よくある質問

Web ARとは、Webサイト上で現実の映像に2Dや3DのCGをリアルタイムで直接挿入することです。このタイプの体験は、アプリケーションを介するのではなく、ウェブブラウザから直接アクセスするものです。そのため、Google chrome、safari、Mozilla Firefoxからアクセスすることができます。この技術により、ユーザーがモバイルやタブレットのアプリを介することなく、ライブロードが可能になりました。AR Kit(iOS)、AR Core(Android)の2つのシステムにより、より多くの人が利用できる体験が展開されます。WebGL、WebVR、WebRTCを使用しています。アニメーション、映像、3Dモデルなどのシーンをインタラクティブに楽しむことができます。WebARは、画像検出にも対応しています。つまり、障壁を取り除き、QRコードやリンクから拡張現実を利用できるようにするのです。

ARは可能性のフィールドを広げ、すでに多くの人の日常生活の中に存在しています。多くのアプリケーションで使われており、私たちも気づかないうちに使っているのです。これは、InstagramやSnapchatのフィルターやエフェクトだけでなく、IKEA placeやLEGOのようなアプリケーションでも同じことが言えます。しかし、これらのアプリは読み込みが非常に重く、多くのアクションが必要です。そこで、Web ARは、シンプルでありながら、なるべく邪魔にならないような体験を提供します。また、すでにGoogleで(例えばライオンを)検索すると、目の前にある3Dアニメーションのモデルに直接アクセスすることができます。Eコマース、研究、健康、教育、ビジネス&エンターテインメントなど、幅広い分野で活用されています。例えば、メガネを試着して、自分に似合う色を直接変えることができるようになりました。また、販売店に在庫がない場合は、目の前に車を置くことも可能です。医学生向けに、体の部位を直接表現し、その機能をオーバーレイで表示することが可能です。もう一つの例として、少なくないのがゲームです。Web ARのおかげで、スマートフォンから直接現実の要素を操作して遊ぶことができるようになります。

ARCoreはAndroid向けのARフレームワークを指し、ARKitはAppleのiOS向けの同フレームワークを指します。これらのフレームワークにより、開発者は最先端のARツールを活用し、最も没入感のあるリアルな体験を実現することができます。そのため、開発者はこれらのツールを使って、モーショントラッキングなどを追加することができます。これにより、デバイスは環境との関係をより深く理解することができます。同様に、ARCoreやARKitなどのツールは、テーブルや椅子などの物の大きさや位置をスマホに認識させ、どんな環境でもよりリアルに感じられるようにします。これを実現するために、ARCore & ARkitは、スマートフォンの各種センサーで水平面を検出するだけでなく、スマートフォンの動きも考慮し、部屋に入る光を推定して、環境に応じて仮想オブジェクトをリアルに照らすことができるようにしました。

両技術とも、仮想コンテンツを実世界に統合するために、以下のような特徴がある。

  • モーショントラッキング - 現実世界での位置を追跡すること。
  • 環境(大きさ、位置、角度、形、点、面)の把握
  • 光量推定 - 照明情報を検出する。

とはいえ、ARKitとARCoreには違いがあります。

GoogleのSDKはより多くのポイント&フィーチャーを追跡しますが、ARKitはARCoreよりも正確に水平面や垂直面を検出します。また、最新のアップデートにより、ARKitはいくつかの利点(人物オクルージョン、モーションキャプチャ、フロントとリアの同時カメラ、複数の顔トラッキング、コラボレーションセッション)を備えています。

8th Wallは、市場でも有数のWeb ARソリューションです。8th Wallは、代理店、ブランド、コンテンツ制作者向けに、ウェブベースの拡張現実体験を作成・展開するための開発ツールを提供しています。8th Wallは、エディターを通じて、ワールドトラッキング、フェイスエフェクト、画像認識などの強力な機能を提供します。これらは、ユーザーがアプリケーションをダウンロードすることなく、ウェブ上で展開されます。8th Wall FrameworkはJavaScriptとWebGLライブラリを使用し、A-Frame、three.js、babylon.js、Amazon Sumerian、Play Canvasなど最も人気のある3Dフレームワークをサポートしています。8thウォールの可能性は無限大で、ゲームやARアート作品など、複雑で深みのある体験の創造が可能です。8thウォールは最近、Curved Image Target技術も発表しました。この技術は、コップや缶などの曲面やその他多くの物体をウェブベースの拡張現実で実現するための新しいツールを開発者に提供するものです。

ウェブ上で拡張現実の効果を作る場合、価格を見積もるにはいくつかの要素があります。例えば、3Dデザインか2Dデザインか、アニメーションか、パーティクルか、ピッカーか、特殊なアクションか、その他の要素が含まれるかどうかが重要なポイントになります。これにより、正確な見積もりを出すことができます。とはいえ、効果の種類によって、いくつかの価格や範囲を提示することは可能です。

  • 単純な3Dプロダクトインテグレーション→500€~5000€。
  • フェイスアニメーション(8番目の壁)→2000ユーロから3万ユーロ。
  • ARゲーム(8番目の壁)→5000€から50000€の間。
  • 画像認識→4000€から50000€の間。
  • メガネやアクセサリーのリアルタイムフィッティング→1500€から35000€の間。
  • カラー/アーティスティック/照明効果→1500€〜20000€の間。
  • メイクアップ→2500€から30000€の間。

この制作部分とは別に、8th wallでは閲覧数に応じて1250$~5000$の購読料が発生します。また、メンテナンス費用が発生する場合もあります。これらの数値は概算であり、プロジェクトや納期、提供される資産によって異なる場合があります。詳細はこちらをご覧ください。 価格と料金

スマートフォンの可能性が広がる一方で、WebARの体験はかなり限定的なものとなっています。ARの性能は、単純にアプリケーションの方が優れています。しかし、AR画像を表示するWebページのメモリ容量に制限があることが、WebベースのARの性能向上の障害となっています。 また、アプリベースのARと比べると、機能面でも制限があります。例えば、壁に物を置いたり、寸法を測ったりすることが難しくなります。アプリケーションベースのARの開発プロセスと比較すると、WebARの体験の作成中、開発者はそれを設計しているデバイスのすべての機能や性能にアクセスすることはできません。そのため、基本的な機能しか動作させることができません。また、体験の質を左右する要素として、インターネットの速度があります。ブラウザベースのARでは、インターネットに常時接続する必要があるため、できるだけ高速で、中断なく動作することが必要です。しかし、5Gの登場により、この問題はなくなると思われます。

Web ARは、3Dや拡張現実を利用して商品を展示・販売することができます。このような媒体であれば、お客様にまったく新しい体験を提供することができます。また、ワンクリックで、製品を自分の環境に置き換えて、息をのむようなリアルな映像を見ることができ、驚きを与えることができます。これは、彼らの質問に答える機会を与えるものです。

"この家具はうちのリビングルームに合うかな?"

"この色、うちの部屋のインテリアに合うかな?

"この新しいクルマの内装はどんな感じなんだろう?"

これらは、お客様がより良い購買決定をするために答えることができる質問であり、少なくとも50 %の売上を増加させることができます。また、これらの取り組みにより、返品率の低減や物流面での工夫など、環境にも配慮しています。

フィルターメーカーは、製品に関する情報や変数を含むスクリプトスニペット(小さなコードスニペット)を自動的に生成します。ファイルは、すべてのブラウザに対応したUSDZ形式とGLB形式で表示されます。これらは、WebARや3Dコンフィギュレーター/ビューワーとして、あなたのページで見ることができます。これらの機能は、商品ページに数秒で追加することができます。そのため、製品を壁や床、オープンスペースにARで表示する必要がある場合でも、お客様の体験に適したコードを提供します。

Webサイトで3Dモデルを表示するためには、iFrameという技術が一般的です。他のページの中にページを読み込むフレームです。 

現在では、サイトをチェックするGoogleのロボットは賢いので、フレームの中にあるものがウェブサイトとは関係なく、他のウェブサイトの所有物であることを理解します。したがって、コンテンツはコンフィギュレータやビューワの所有者に帰属し、ウェブサイトの所有者には帰属しないと考えています。そのため、3Dモデルはウェブサイトの読み込みやSEOに悪影響を与えることはなく、むしろその逆です。 

3Dビジュアライゼーションにより、あらゆる角度から製品を発見することができます。拡大表示も可能で、細部まで見ることができます。未来のお客様が3Dコンフィギュレーターと対話する時間は平均で20秒以上、そのうち30 %以上が30秒以上です。この高度なインタラクティブ性により、モデルの滞在時間だけでなく、サイトの滞在時間も最大で200%まで増加します。

結論として、Webサイトのページ滞在時間が1秒増えるごとに、直帰率、つまり他のページに進まずにサイトを去る訪問者の割合が減少します。Googleの目には、この種のデータは、コンテンツの関連性が非常に高いことを意味し、したがって、より良い参照元を意味するのです。

コンフィギュレーターの導入は販売面でも良い結果につながり、自分に合った製品を探している消費者にとっては紛れもない主張となる。その期待に応え、より的確な選択を導くために、コンフィギュレーターには様々な機能が開発されています。これらは、特に以下の通りです。

  • 色の選択
  • 3Dモデル(およびそのバリエーション)の選択
  • カスタマイズ可能なオプションの追加
  • ゲームのある部分に関連するテキストや機能の追加
  • 外部ページへのリンク
  • 選択したオプション(色、モデル)をPDFでエクスポートします。
  • ギャラリーに設定を保存する
  • 決済インターフェース(Apple payなど)につながるモジュール

さらに、画面をクリックしたりタップしたりするジェスチャーによる操作にも対応できます。これらのアクションは、ビジュアルアニメーション(パーティクル、アピアランスなど)だけでなく、フィジカルアニメーション(車両のドアを開けるなど)をトリガーすることもできます。これらのアクションはそれぞれカスタマイズ可能で、モデルやエクスペリエンスそのものに依存します。

クイックルックは、Appleが2018年に発表した革新的な機能です。このツールにより、e-tailerは商品のプレビューをAR(拡張現実)で表示することができます。その後、Appleブランドは、2020年初頭に拡張現実(AR)ツールの新機能「クイックルック」を展開しました。iPhoneやiPadのユーザーは、オンラインショッピングをしながら、将来購入する商品が周囲の環境にうまく調和しているかどうか、拡張現実のプレビューを楽しむことができるようになりました。その後、画面下部のボタンをクリックしていただきます。支払い方法が登録されている場合、このボタンで購入内容を確認し、表示された金額を支払うことができます。これにより、購入プロセスが容易になり、製品発見から購入までに必要なアクションの数を減らすことができます。このボタンはカスタマイズが可能で、様々な用途に使用することができます。 また、ライブチャットを追加して、顧客が製品に関する質問を直接販売員にできるようにすることも可能です。

jaJA
ロゴ・サブウェイ・クライアント
イヴサンローランロゴ
ウィックス
UFCロゴ
フォード・ロゴクライアント
サブウェイロゴクライアント
ロゴ・ピザハット・ミン
mac do ロゴ
ロゴ・スターバックス・クライアント
ハーゲンダッツ ロゴ
ロゴクライアントフィルタ・ソーシャルネットワーク・ネスプレッソ
トヨタカスタマーロゴ
ロゴクリネックスカラー
dknyロゴ
netflix ロゴ - フィルタメーカー クライアント
ギャラリー・ラファイエット ロゴ