• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

WebARで平面認識からインタラクションまで!「AR Quick Look」の新機能を試してみた

2022年11月19日

  • このエントリーをはてなブックマークに追加

こんにちは!
XRクリエイターの伊東(@ALAKIWebVRAR1)です。

※TwitterでもAR/VRの事を中心に情報発信中です。
よかったらフォローお願いします!
Follow @ALAKIWebVRAR1

商品のプロモーションや、イベントのコンテンツ、観光資源の創出など、最近では様々な用途でARが活用される事例を見ることができます。
こういった用途でARを導入する場合、「スマホアプリでARを提供すると、アプリのインストールが高いハードルになる」ケースが非常に多く、大きなコストに見合ったユーザー数を獲得することが難しいです。

そんな中、数年前から「WebAR」というブラウザ上で動作するARが登場し、一気に活用事例が増えてきました。
かつては、その手軽さの反面、技術面でできることがとても限られている印象でしたが、最近ではアプリARと遜色ないようなインタラクティブな体験も提供することが可能になってきています。

そこで、今回はWebAR活用をご検討されている方に向けて、Appleから公開されている「AR Quick Look」という技術についてまとめ、どんな体験を提供することができるのかをご紹介いたします。

この記事の目次

  • 1 AR Quick Lookとは
  • 2 AR Quick Lookでできること(基本編)
  • 3 AR Quick Lookでできること(応用編)
  • 4 さいごに

AR Quick Lookとは

「AR Quick Look」は、ブラウザ上で高度なAR体験を提供することができる技術です。
AR体験のために新たにアプリを開発する必要もなく、あなたが公開している既存のWebサイトに組み込むことが可能です。
例えば、イベントの告知ページや、ECサイトの商品詳細ページや、商品のプロモーションページなどなど、利用シーンは多岐に渡ります。

そして、ユーザー側はとても簡単な手順で手軽にARを体験することができます。

以下のサイトにサンプルがありますので、ぜひ実際に体験してみてください。

https://developer.apple.com/jp/augmented-reality/quick-look/

AR Quick Lookでできること(基本編)

ここから、具体的に何ができるかをご説明しつつ、体験の手順についても見ていきます。

平面認識型WebAR

まずは一番基本的なサンプルをご紹介します。
スニーカーの画像があるので、その画像の右上にあるキューブ状のアイコンをタップしてみてください。

https://alaki.co.jp/blog/wp-content/uploads/2022/11/fa11be903b4bcb41d229dff61e1b52f5-1.mp4

すると、Webサイトからアプリケーションが起動して、カメラの映像と3DCGが表示されました。
現実世界の平面になっているところを、様々な角度からカメラに写し続けると、、スニーカーのオブジェクトが平面上に表示されました!

これは、テーブルの上の平面を認識して、スニーカーがテーブルの上に実際にあるかのようにオブジェクトを配置する技術です。
WebARでよく使われる「ARマーカー」という黒い四角い縁でできたマーカーを使用する必要もありません。

オクルージョン

さらに、ただ単純に平面状にオブジェクトを表示するだけではない、さらにリアリティのある工夫がされています。
それが「オクルージョン」という技術です。

https://alaki.co.jp/blog/wp-content/uploads/2022/11/RPReplay_Final1668807663.mp4

緑色のおもちゃの箱が現実で、スニーカーが3DCGです。(3DCGのクオリティが高すぎてややこしいですね。。)
緑の箱の「裏側」にスニーカーがある時、スニーカーの3DCGが隠れているかと思います。
これ実はとても高度な技術で、緑の箱の形を正確に認識できていないとできない表現です。

オクルージョンが設定されていない場合、常に3DCGが現実よりも手前にくる形になり、没入感に大きく差が出ます。

そんな高度なオクルージョンも、非常に高精度に実現することが可能です。

AR Quick Lookでできること(応用編)

ここからは、さらに詳しくAR Quick Lookdでできる高度な体験について見ていきましょう。

音声の再生

3DCGの表示だけでなく、音声データを組み込むことが可能です。
音声を組み込むことによって、AR体験の操作を音で説明したり、オブジェクトの動きに臨場感をつけたりすることができます。

https://alaki.co.jp/blog/wp-content/uploads/2022/11/RPReplay_Final1668808659.mp4

インタラクション

AR体験の中にユーザーのタップ操作で説明を表示したり、アニメーションを再生させる機能を実装することも可能です。

https://alaki.co.jp/blog/wp-content/uploads/2022/11/7dd4c3f74f006b34bb1d70d7adebd54e.mp4

ハイクオリティな3DCG + 臨場感あふれる音 + ユーザー操作によって情報を得られる、という組み合わせによって、ユーザーが次々と行動したくさせる体験になっています。
このサンプルには、通常のWebサイトでは経験できない体験を提供できる、まさにARの醍醐味が詰まっていると思います!

決済機能の組み込み

最後に、AR体験のゴールとして、決済機能をつけることも可能です。
AR Quick Lookdでは、Apple payでの支払い機能に対応しています。
ECサイトからARに飛ばして商品を3DCGでリアルに紹介しつつ、またECサイトに戻るのではなく、購買意欲が高まっている体験中にすぐに購入ができるという流れを設計することができます。

https://alaki.co.jp/blog/wp-content/uploads/2022/11/RPReplay_Final1668808471-1.mp4

さいごに

いかがだったでしょうか?
WebARって技術的な制約が多いんでしょ?という疑問に対しては、今回ご紹介した内容をご参考にしていただきつつ、何かわからないところがあればお気軽にご相談いただけましたら幸いです。

 

弊社では、日本各地でARを使ったワクワクするプロジェクトをリリースしてまいりました。
ARのパイオニアとして、高い技術力とビジネス提案が可能ですので、以下のサイトよりご連絡ください!

■WebAR開発 特設サイト
https://alaki.co.jp/lp/webar/

また最近では、現実のあらゆる場所からデジタルコンテンツを誰でもAR空間にドロップできる「MUGHEN」というアプリをリリースしました。ぜひインストールしていただき、現実を拡張する感覚を体験してみてください!

■MUGHEN サービス紹介サイト
https://alaki.co.jp/lp/mughen/

ALAKI株式会社では、「MUGHEN」をはじめとする最先端技術を使って世の中に価値を提供するため、一緒に大きな目標に挑戦する仲間を募集中です!興味のある方は、以下のリンクからご応募ください!

■ALAKI リクルートサイト
https://recruit.alaki.co.jp/

  • ツイート
  • このエントリーをはてなブックマークに追加
ALAKI ロゴ
さよなら過去のAR。
WebARがイベント集客に
革命を起こします。
特設サイトはこちら >

You may also like...

  • スクリーンショット 2018-03-16 0.37.47

    WebARはじめてみませんか?〜第2回 A-frameで3Dオブジェクトを自在に操作する〜

    2 2月, 2019

  • main-visual

    実務で使うWebARのチェックポイント

    10 12月, 2021

  • スクリーンショット 2022-11-24 20.18.47

    【Unity】「Shape2D」の角丸がぼやける問題を解決する

    24 11月, 2022

  • Next story 【Unity】オブジェクト間の距離を取得する
  • Previous story 海外向けプレスリリース配信代行サービス7選

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.