ARのQRコードでインタラクティブな製品デモを起動する方法

顧客は購入前に製品がどのように見え、フィットするかを視覚化するのに苦労していませんか？平坦な製品写真は、明確な期待を設定できないことが多く、チェックアウト時のためらいや返品率の上昇につながります。クイックレスポンス（QR）コードをブラウザベースの拡張現実（AR）に接続することで、買い物客は別のアプリケーションをダウンロードすることなく、自分の物理的な空間でインタラクティブな3Dプレビューを見ることができます。

顧客のジャーニー：カメラスキャンからライブ3D配置まで

AR製品デモンストレーションの開始は、ユーザーからの最小限の労力で済むはずです。最新のスマートフォンにはカメラアプリにQRスキャンが直接組み込まれているため、全体のプロセスはわずか数秒しかかかりません。

• コードをスキャン：顧客はスマートフォンのカメラを、AR対応のQRコードが印刷された 商品パッケージ、店頭ディスプレイ、または開封用インサートに。
• ウェブリダイレクトを開く：ネイティブの通知バナーが表示され、ユーザーはSafariまたはGoogle Chrome内で直接宛先リンクを開くことができます。
• 3Dキャンバスを検査する：モバイルブラウザは応答性の高い3Dビューアを表示し、顧客は製品を360度回転させたり、製造の詳細をズームインしたり、色のバリエーションを切り替えたりできます。
• AR配置をアクティブ化：「自分の空間で表示」などの画面上のボタンをタップすると、カメラフィードがアクティブになり、モーションセンサーを使用してモデルを実世界で1:1のスケールで表面に配置します。
• コンバージョンアクションを完了する：物理的な空間で製品を見た後、画面上の行動喚起ボタンを使用すると、買い物客は商品をカートに追加したり、ドキュメントを閲覧したり、アクセサリーを注文したりできます。

このゼロフリクションなワークフローは、WebAR（ウェブベースの拡張現実）に依存しています。標準的なモバイルウェブブラウザ内でARセッションを実行することで、顧客にアプリストアからネイティブアプリをダウンロードさせることによる離脱を排除できます。

技術的なセットアップ：モバイルブラウザがARをレンダリングする方法

モバイルオペレーティングシステムは、2つの異なるネイティブビューイングエンジンを通じてARレンダリングを処理します。iOSとAndroidの両方でシームレスなデモを提供するには、Web設定でユーザーのモバイルプラットフォームに応じてトラフィックをルーティングする必要があります。

Apple ARクイックルック (iOS)

Appleデバイスは、SafariとWebKitの組み込み機能であるARクイックルックを使用します。iOSユーザーが`rel="ar"`とマークされたアンカーリンクをタップすると、Safariは標準のWebナビゲーションをバイパスし、リンクされた`.usdz`モデルをAppleのネイティブ3DおよびARビューアで直接開きます。ファイルをホストするWebサーバーは、`model/vnd.usdz+zip` MIMEタイプでHTTPS経由でファイルを提供するように構成されている必要があり、これによりSafariがアセットを正しく解釈できます。

Google シーンビューア (Android)

Android 7.0以降を実行しているAndroidデバイスは、ARCore (Google Play開発者サービス for AR) を利用したScene Viewerを使用します。Scene Viewerは、`.glb`アセットを指すAndroid Intent URLを介して直接トリガーできます。このインテントにより、開発者はセッションが最初に標準3Dモード (`3d`,`preferred`) で開くか、ARカメラ環境にすぐに (`ar`,`preferred`) 入るかを設定できます。デバイスがARCoreサポートを欠いている場合、インテントはフォールバックURL (`S.browser`,`url`) をトリガーし、失敗する代わりにインタラクティブなWebキャンバスを表示します。preferred`) or enters the AR camera environment immediately (`arpreferred`). If a device lacks ARCore support, the intent triggers a fallback URL (`S.browserfallbackurl`) to display an interactive web canvas instead of failing.

統合実装 "

複雑なデバイス検出スクリプトの作成を避けるため、多くのチームがGoogleのオープンソースの「」Webコンポーネントを使用しています。この軽量JavaScriptライブラリは、単一のHTMLタグをサイトに埋め込むことでOSルーティングを自動化します。

“`html

<model-viewer

src=

ios-src=

alt=

ar

ar-modes=

camera-controls>

“`

スキャンされると、ウェブページはモバイルオペレーティングシステムを検出します。訪問者がiPhoneを使用している場合、USDZファイルでQuick Lookを開始します。訪問者がAndroidを使用している場合、GLBファイルでScene Viewerを開始します。

高速読み込みデモのための3Dアセットガイドライン

AR製品デモは、モバイルセルラーネットワーク上で迅速に読み込まれる必要があります。重いファイルは、3Dモデルが表示される前に訪問者がページを離れてしまう長い待ち時間を作り出します。厳格な3D最適化ガイドラインに従うことで、物理的なリアリズムを維持しながらアセットがスムーズに読み込まれることを保証します。

• ファイルサイズをコンパクトに保つ：総アセットサイズを4MBから10MBの間にすることを目指します。Shopifyのようなプラットフォームでは、 Eコマース製品メディアに最大500MBまでのアップロードを許可していますが、コンパクトなファイルはモバイルセルラー接続での高速レンダリングを保証します。
• ポリゴン数を制御する：ジオメトリを50,000から100,000以下の三角形に制限します。ユーザーに見えない内部ポリゴンを排除し、重複する面を削除し、メッシュに非多様体エッジがないか検査します。
• 標準的なPBRテクスチャリングを適用する：物理ベースレンダリングのワークフローを使用して、物理的な素材をリアルに再現します。標準的な設定には、ベースカラーマップ、表面の凹凸を表現するノーマルマップ、そしてアンビエントオクルージョン、ラフネス、メタリックネスを赤、緑、青のチャンネルにまとめたORMマップを含めるべきです。
• テクスチャ解像度を制限する：画像テクスチャのサイズを2048 × 2048ピクセル（2K）に制限します。小さなコンポーネントや二次的な詳細には1024 × 1024ピクセルを使用し、サポートされている場合はファイルを最適化されたJPGまたはWebP形式に圧縮します。
• 実物大スケールを維持する: メートルやセンチメートルなどのメートル法単位を使用して、製品を正確な1:1スケールでモデリングしてください。スケールが不正確だと、ARエンジンがユーザーの部屋でモデルを非現実的に大きく、または小さく投影してしまいます。

スキャン可能なAR QRコードの設計と印刷

ARキャンペーンの成功は、物理的なQRコードが様々な環境で確実にスキャンできるかにかかっています。照明の変化、物理的な表面の湾曲、不適切なサイズは、携帯電話のカメラがデータを読み取るのを妨げる可能性があります。以下の基本的な AR用QRコードをデザインするベストプラクティス を印刷業者に送る前に従ってください。

• 最小サイズに従う: テーブルトップの小売ディスプレイ、チラシ、または インタラクティブなパッケージングに のような腕の長さで見るアイテムの場合、最小1.2 × 1.2インチ（3 × 3 cm）のサイズでコードを印刷してください。遠くから見る大きなサイネージは、それに比例して大きな寸法が必要です。
• 視覚的なコントラストを最大化する: 前景のパターンと背景の間に高いコントラストを保ってください。純粋な白または明るいニュートラルな背景に暗い前景は、カメラによる確実な読み取りを保証し、コントラスト比は4:1を超えるようにしてください。
• クワイエットゾーンを保護する: コードの周囲に、少なくとも4モジュール幅の途切れない空白の境界線を設けてください。これにより、周囲のパッケージアートワークがデコーダーの妨げになるのを防ぎます。
• 高いエラー訂正を設定する: コードの中央にブランドロゴを追加する場合は、レベルH（高）のエラー訂正を設定してください。レベルHは最大30%の視覚的障害に耐えられますが、ロゴはコード全体の面積の15%から20%以内に収めるべきです。
• 明確な指示を出す: コードのすぐ隣に「3Dで見るにはスキャン」や「部屋で試すにはスキャン」といった明確な行動喚起を印刷し、買い物客にどのような体験が待っているかを知らせてください。

ダイナミックQRコードでARキャンペーンを管理する

スタティックQRコードは、固定された宛先URLをそのパターンに直接エンコードします。3Dモデルを交換したり、アセットURLを修正したり、異なるランディングページでA/Bテストを実行したりする必要がある場合、スタティックコードは変更できません。これには物理的な資料の費用のかかる再印刷が必要となります。

印刷なしでARデモを展開および更新する 3Dモデルの更新、新しい製品バリアントのテスト、または顧客スキャンのリアルタイム監視が必要ですか？ ダイナミックQRコード作成ツール を使用して、宛先リンクを完全に制御し、単一のダッシュボードからスキャンパフォーマンスを追跡します。

動的コードを使用すると、ユーザーは短いリダイレクトリンクを介してルーティングされます。この設定は、商用キャンペーンに不可欠なインフラストラクチャを提供します。

• 印刷後に宛先を更新: 物理的なパッケージを再印刷することなく、いつでも基になる3DアセットのURL、季節プロモーション、またはランディングページを変更できます。
• リアルタイム分析を追跡: スキャンの合計数、地理的位置、およびOSの内訳（iOSとAndroid）を測定して、どの印刷配置が最高のエンゲージメントを生み出すかを評価します。
• 競合するランディングエクスペリエンスをテスト: オーディエンスのセグメントを異なるARランディングページに誘導し、即時カメラ配置の起動が探索的な3Dキャンバスよりも良いコンバージョンにつながるかどうかを比較します。

動的コードは、専用の リンクQRコードジェネレーター を使用して作成でき、複数のタッチポイントに適用して、オフラインマーケティングとデジタル製品デモンストレーションを結びつけることができます。

オフラインのタッチポイントをインタラクティブな販売に接続する

拡張現実は、静的な製品パッケージ、小売店の看板、印刷物販促資料をインタラクティブなデジタルショールームに変えます。個別のモバイルアプリを排除し、WebARを通じて軽量な3Dモデルを提供することで、顧客は数秒で素材を検査し、サイズを試し、自信を持って購入を決定できます。

さまざまな分野でスキャン可能なキャンペーンを展開する方法の詳細については、Pageloot’s 業界ソリューション をご覧いただくか、クリエイティブなインタラクティブアプリケーションの例を確認してください AR QRコードが美術館のストーリーテリングをどのように変えるか。すべてのカスタマイズスタイル、ベクター印刷形式、および追跡設定を調べるには、完全な QRコード機能の概要 を参照して、ブラウザベースの製品体験の構築を開始してください。

よくある質問