ARコンテンツとは？業界別の事例と作り方｜Web-AR・マーカー・3Dスキャンの要件【2026年】

ARコンテンツは、スマートフォンのカメラに映る現実の空間へ、3Dモデルや映像を重ねて見せる体験です。家具の試し置き、商品パッケージから起動する販促、災害の疑似体験まで用途は広いものの、作り方は「どの経路で起動するか」で先に決まります。iPhoneとAndroidで必要なファイル形式が違うためです。ここでは公式発表で確認できる事例と、制作会社・ツール・自社開発の3つの作り方、2025年から相次いだ制作プラットフォームの提供終了、そしてマーカー画像やファイルサイズの上限値を、一次情報の数値で整理します。

まとめ

ARコンテンツを企画するとき、最初に決めるのは次の3点です。

常設の販売支援に使うなら、自社ドメインで配信できるWeb-AR（model-viewerとglb・USDZ）を軸にしてください。Meta Spark（2025年1月14日）、Adobe Aero（2025年12月3日）、8th Wallのホスティング（2026年2月28日）と、定番だった制作環境が2年足らずで3つ終わっています。iPhoneのSafariはWebXRを搭載していないため、iOSではOS側のAR Quick LookへUSDZを渡す構成になります。ポスターや商品パッケージを目印にするマーカー型は標準ビューアでは動かず、ARCoreの場合は参照画像に300×300ピクセル以上が求められ、品質スコアは75以上が推奨されています。

ARコンテンツの4類型と向いている用途

ARは、現実空間のどこにデジタル情報を重ねるかで4つに分かれ、類型によって使える制作手段が変わります。

標準ビューアとは、iPhoneのAR Quick LookとAndroidのScene Viewerを指します。Webに埋め込む<model-viewer>の配置指定ar-placementが取る値もfloorとwallの2つだけで、標準の経路はどれも平面に置く方式です。マーカー型やロケーション型は別のライブラリを土台にする必要があり、HTMLで組むならA-FrameにAR.jsやMindARを組み合わせる構成が候補になります（A-Frameの基本はA-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】）。

類型より先に、何で効果を測るかを決めておくと判断がぶれません。販促キャンペーンなら起動数と滞在時間、試し置きなら返品率と問い合わせ数、観光なら滞在時間と回遊率、作業支援なら作業時間とミスの件数です。例えば返品率を下げたいなら、実寸で置ける空間認識型と標準ビューアの組み合わせが第一候補になります。

公式発表で確認できるARコンテンツの事例

家具の試し置き：IKEA PlaceからIKEA Kreativへ

Inter IKEAは2017年9月12日、AppleのARKitで作ったIKEA Placeを発表しました。実物大の3D家具を自宅に仮想配置できるアプリで、空間認識型の代表例です。なおIKEA Placeは2026年10月時点でApp Storeに掲載されていません。2022年6月22日には、最大のIKEA小売事業者であるIngka GroupがIKEA Kreativを米国で公開しています。写真から自室の編集可能な3Dレプリカを作り、既存の家具を消してIKEAの家具を置き換えられる機能です。カメラ映像に重ねるだけのARでは、いま部屋にある家具を消すことはできません。試し置きの体験は、空間そのものを3Dで再現する方向へ広がっています。

検索結果からのAR表示：Google検索の3Dオブジェクト

Googleは2019年5月7日のGoogle I/Oで、検索結果から3Dオブジェクトを操作し、ARで自分の空間に置ける機能を発表しました。同じ発表では、NASA、New Balance、Samsung、Target、Visible Body、Volvo、Wayfairなどの3Dコンテンツにも言及しています。アプリを入れてもらう前に、検索という既存の動線からARへ入れる設計です。

Webページから起動する製品AR：Appleのギャラリー掲載例

AppleのAR Quick Lookギャラリーは、Webから起動する例としてメトロポリタン美術館の「Zemí Cohoba Stand」、ランボルギーニの「Huracán EVO RWD Spyder」、Bang & Olufsenの3つを挙げています。いずれもアプリのインストールを挟まず、SafariのWebページからそのままAR表示に入ります。美術館の例はモデル閲覧中に音声を再生する機能を使っており、同じギャラリーにはAR画面からApple Payで決済させる例やカスタムバナーを出す例も載っており、標準ビューアで動く空間認識型なら、URL1つで購入前の確認から決済まで繋げられます。

防災の疑似体験：大阪府と東京海上日動の「災害体験AR」

大阪府は東京海上日動火災保険との包括連携協定に基づき、同社のWebアプリ「災害体験AR」を紹介していました。府内の河川氾濫による浸水リスクや土砂災害リスクを可視化し、スマートフォンやタブレットで浸水被害を疑似体験できるもので、チラシのQRコードから起動する方式です。ただし府のページ（2026年7月10日更新）には「本サービスは終了しています」と記載されています。印刷したQRコードは終了後も手元に残るため、期間限定の施策では終了後の遷移先まで設計に入れておくべきです。

ARコンテンツの作り方3通りと選び方

作り方は3通りで、違いは公開後に何が手元に残るかに出ます。

制作会社に依頼する場合は、納品物にglbとUSDZの元データを含めることを契約で決めてください。抜けると、モデルを1点差し替えるたびに同じ会社へ発注し直すことになります。制作ツールは、後述のとおり終了とともに公開中の体験まで止まった例があります。

費用をかけずに試すなら、Googleが公開しているmodel-viewer（Apache-2.0ライセンス）でglbをWebページに置く構成が最小です。iPhoneだけで試作するなら、AppleのReality ComposerがApp Storeで無料配布されています（iOS 17.0以降）。ただしアプリ自体は1.6（2023年10月10日）以降更新されていません。ただしiOS・iPadOS 26.4のリリースノートには、iOS版Reality Composerから.realityやUSDZを書き出せない既知の問題が載っているため、書き出しまで試してから採用を決めてください。自己位置推定を伴う体験や業務システムとの連携が要るなら、最初からネイティブアプリとして設計するほうが手戻りは少なくなります。ARCoreを使うAndroidアプリなら、端末の対応判定と配信まで含めてAndroidアプリ開発の範囲で見積もる案件です。仕組みの前提はSLAMとは？仕組みとアルゴリズム3方式・Visual/LiDARの違いを実装目線で解説で扱っています。

提供を終えたAR制作プラットフォーム3つと終了後の扱い

2025年以前の解説で定番として紹介されてきた制作環境のうち、3つが提供を終えています。

InstagramやFacebookのARエフェクトを作るMeta Sparkは、2024年8月27日の公式告知で、サードパーティのツールとコンテンツを2025年1月14日で終えると発表しました。以降、InstagramやFacebookにサードパーティのARエフェクトは公開できません。Adobe AeroはiOS版・Android版・デスクトップ版の配布を2025年11月6日に終了し、2025年12月3日の廃止後はAdobeのサーバー上のファイルにアクセスできなくなっています。

Web-ARの定番だった8th Wallは、ホスティング型の提供と有料サブスクリプションを2026年2月28日に終えました。現在はNiantic Spatialのもとでオープンソースとして公開され、大部分のコンポーネントはMITライセンス、XR Engineのバイナリは限定利用ライセンスで、リポジトリはGitHubの8thwall/8thwallです。使い続けることはできますが、ホスティングと運用は自前になります。

3つに共通するのは、ツールの終了が公開中のコンテンツの停止に直結した点です。常設の用途では特定ベンダーのホスティングに依存しない構成を優先し、SNSフィルタやホスティング型ツールは終わりの決まったキャンペーンに限って使うのが安全です。

Web-ARが端末ごとに別経路で動く仕組み

model-viewerが起動経路を選ぶ順序

Googleが公開しているWebコンポーネント<model-viewer>は、閲覧端末に応じてAR起動経路を切り替えます。npmの最新版は4.4.0（日本時間2026年10月10日公開）で、ソース上の既定値はwebxr scene-viewer quick-look。この順に判定し、最初に条件を満たした経路を採用します。

<model-viewer
  src="/models/chair.glb"
  ios-src="/models/chair.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  ar-placement="floor"
  camera-controls>
</model-viewer>

ar-modesに指定できる値はquick-look、scene-viewer、webxr、noneの4つです。古い解説に残るfallbackは現行版の許容値に無く、指定しても解析段階で捨てられます。ios-srcも必須ではありません。未指定ならタップ時にglbからUSDZをその場で書き出してAR Quick Lookへ渡します。ただし変換はタップのたびに端末で走ります。Apple Payボタンやカスタムバナーは、srcのURL末尾に#checkoutTitle=…などのQuick Lookパラメータを付ければ自動生成のUSDZにも引き継がれます。音声付きモデルのようにUSDZ自体の作り込みが要る場合は、専用のUSDZをios-srcで渡してください。

iOS SafariにWebXRが搭載されていない事実

WebKitのビルド設定PlatformEnable.h（2026年10月12日時点のmainブランチ）では、ENABLE_WEBXR・ENABLE_WEBXR_AR・ENABLE_WEBXR_HIT_TESTがいずれも既定値0です。PlatformEnableCocoa.hでWebXR本体のENABLE_WEBXRを1にしているのはPLATFORM(VISION)の条件だけで、iOS向けのENABLE_WEBXR_ARはその値を引き継ぐため、iPhoneでは0のままです。iPhoneのSafariにはnavigator.xrそのものがなく、MDNの互換性データでもSafari・iOS版SafariともXRSystemは未対応です。iPhoneが主要ターゲットの案件で、immersive-ar前提の自作Web-ARは採用しないでください。iOSはAR Quick Lookへ渡し、WebXRはAndroidの上乗せとして扱う構成が現実的です。WebXRの実装手順はWebXRのデモ・サンプルで試すブラウザXR入門｜対応ブラウザ・使い方【2026年最新】で扱っています。

AR起動ボタンが出ないブラウザとアプリ内ブラウザ

model-viewer 4.4.0のソースでは、iOS上のGoogleアプリ内ブラウザ（ユーザーエージェントにGSA/を含む）だけはQuick Lookの経路から外されています。iOS版のChrome・Edge・Firefox・DuckDuckGoは、4.4.0からios-src無しでもQuick Lookへ進めるようになりました（4.3.1まではios-srcの指定が条件）。Android側はScene Viewerの候補判定がFirefoxとOculusブラウザを除外しています。

取りこぼしが最も大きいのはSNSアプリの内蔵ブラウザです。iOSのSafari本体以外のWebView内では、上記の既知ブラウザを除いてAR Quick Lookの判定が不成立になるとソースコメントに明記されています。SNS広告からの流入が主体のキャンペーンでは、外部ブラウザで開き直す導線と、3D表示だけで完結する見せ方を用意しておくべきです。

マーカー型ARの仕組みとマーカー画像の条件

ARポスターや商品パッケージから起動するARは、マーカー型の仕組みで動いています。あらかじめポスターの図柄を参照画像として登録しておき、カメラ映像の中からその特徴点を探します。見つかった画像の位置と向きに合わせて3Dモデルや動画を重ねるので、ポスターを斜めから見ても演出が紙面に貼り付いたように見えるわけです。

参照画像には、認識されやすい条件が公式に示されています。

• ARCoreのAugmented Imagesは、参照画像に少なくとも300×300ピクセルの解像度を求めます。付属のarcoreimgツールが0〜100の品質スコアを出し、Googleは75以上を推奨しています。1つのデータベースに登録できる画像は最大1,000枚で、同時に追跡できるのは20枚まで。初回の検出には、画像がカメラ映像の25%以上を占める必要があります。
• ARKitは、前処理した画像データと画像の実寸を必要とします。Xcodeでは参照画像ごとに印刷物の物理サイズを指定し、真っ白な画像のように細部の乏しい図柄は追跡できないと公式ドキュメントに明記されています。

デザインの段階で効いてくるのは2点です。ロゴだけを置いた余白の多い図柄は特徴点が足りず、認識が不安定になります。また、ARKitでは実寸の登録が必要なので、ポスターとチラシのように同じ図柄を別の大きさで刷る場合は、サイズごとに参照画像を登録するか、iOS 13以降のautomaticImageScaleEstimationEnabledで実寸を推定させるかを先に決めておきます。入稿前にarcoreimgでスコアを測れば、印刷後の作り直しを避けられます。

Webでマーカー型を作る場合は、ブラウザ用のライブラリを使います。AR.jsは画像追跡・位置情報・マーカー追跡を備えたMITライセンスのライブラリで、最新版は3.4.8（2026年3月16日）です。画像追跡と顔追跡に特化したMindAR（MITライセンス）は、最新リリースが1.2.5（2024年1月16日）で止まっています。長く運用するキャンペーンなら、更新が続いているかを選定の条件に入れてください。描画の土台になる3DライブラリについてはThree.jsとは？r185の導入手順とglTF表示・バンドルサイズ実測まで解説にまとめています。

Object Captureで実物から3Dモデルを作る手順

対応OSと実行時の端末判定

Object CaptureはAppleのRealityKitに含まれる写真測量の仕組みで、複数枚の写真から3Dモデルを再構成します。撮影を誘導するObjectCaptureSessionはiOS・iPadOS 17.0以降でのみ使え、再構成を担うPhotogrammetrySessionはmacOS 12.0以降とiOS・iPadOS 17.0以降で動きます。公式ドキュメントはMacの最低要件を「レイトレーシングに対応し4GB以上のRAMを備えたGPU」とし、iOSはLiDARを備えた一部の端末とだけ書いています。機種リストを決め打ちせず、isSupported（macOSでは13.0以降）で実行時に判定してください。macOS 12も対象にするならif #available(macOS 13.0, *)で分岐します。

guard PhotogrammetrySession.isSupported else {
    // 非対応端末ではユーザーに通知し、再構成へ進まない
    return
}
let inputFolderUrl = URL(fileURLWithPath: "/tmp/MyInputImages/")
let url = URL(fileURLWithPath: "MyObject.usdz")
// detail は Mac 前提。iOS 上で再構成する場合は .reduced のみ指定できる
let request = PhotogrammetrySession.Request.modelFile(url: url, detail: .full)
let session = try PhotogrammetrySession(input: inputFolderUrl)
// 進捗と失敗は outputs を購読して受け取る（process だけでは成否が分からない）
Task {
    do {
        for try await output in session.outputs {
            switch output {
            case .requestProgress(_, let fraction): updateUI(fraction)
            case .requestComplete(_, let result):   handle(result)
            case .requestError(_, let error):       report(error)
            default: break
            }
        }
    } catch {
        report(error)
    }
}
try session.process(requests: [request])

updateUI・handle・reportは自前で実装する処理です。process(requests:)はthrows付きなのでtryを省くとコンパイルが通りません。出力先に.usdzのURLを渡すとUSDZが1つ生成され、OBJで受け取るときはフォルダのURLを渡します。点群からの表現まで視野に入れるなら3D Gaussian Splattingの原理｜3Dガウシアン・微分可能ラスタライズ・最適化の仕組みも比較対象になります。

撮影条件と、スキャンが失敗する被写体

公式ドキュメントが数値で示す条件は写真の重なりです。連続する画像は70%以上重ね、隣接ショットの重なりが50%を下回ると処理の失敗か低品質な結果につながるとされています。深度情報を含む写真なら実寸が計算され、含まない写真から作るとARで置くときに手動で拡大縮小が必要です。深度取得の仕組みはLiDARとは？仕組み・ToF方式・点群処理を実装目線で解説する技術ガイドを参照してください。

公式が避けるべきと名指ししている被写体は、一方向に極端に薄いもの、反射が強いもの、透明・半透明のものです。ガラス製品や金属の鏡面パーツはここに当たるので、撮影で粘るより手モデリングかCADデータの流用へ早めに切り替えたほうが総コストは下がります。照明は拡散光にし、ショット間で焦点距離・絞り・シャッター速度・ISOをなるべく変えないことも推奨されています。単色や表面が極端に滑らかな物体も、形状を組み立てるデータが不足しやすいとされています。

詳細度の選択とファイルサイズの見積もり

再構成の詳細度はDetailで指定します。iOS上で生成できるのは.reducedの1段階だけです。

.rawはARシーンでの利用に適さず、3Dソフトウェアへ書き出す用途に限ると公式に明記されています。Web配信が目的なら、次の章の上限値の都合で.reducedでも重いことがあり、減量工程は避けられません。

配信形式の二重管理と、通すべき上限値

AndroidのScene Viewerが受け付けるのはglTF 2.0とglbで、対応する拡張はKHR_materials_unlitとKHR_texture_transformです。iOSのAR Quick LookはUSDZを扱い、対応OSはiOS 12以降・iPadOS 12以降・visionOS 1以降。model-viewerならglbからUSDZを自動生成できますが、音声やアニメーションなどUSDZ側の作り込みを使うなら、USDZを別に調整して管理することになります。モデルの差し替えが多い商材ほど、2形式の書き出しと実機確認の工数が効いてきます。

Scene Viewerのドキュメントは、推奨値とハードリミットを分けて書いています。

検証ツールは10MB超をREC_INPUT_BINARY_SIZE_EXCEEDEDの警告、15MB超をMAX_INPUT_BINARY_SIZE_EXCEEDEDのエラーとして返します。モーフターゲットと頂点カラーも同じくエラーです。Object Captureの.mediumは推定30MBでエラー線の2倍にあたるため、スキャンしたモデルをそのままWebに載せる前提は成り立ちません。ポリゴン削減とテクスチャ縮小を工程に組み込んでください。

HTMLからインテントでScene Viewerを起動する場合、代替ページの指定が要ります。公式ページのうちGoogle Play Services for AR（com.google.ar.core）向けのパラメータ表はbrowser_fallback_urlと書く一方、同じ節のHTMLサンプルとGoogleアプリ向けの表はS.browser_fallback_urlを使っています。intent:構文では文字列のextraにS.接頭辞が要るため、HTMLからはS.browser_fallback_urlで指定します。

よくある質問

ARとは？VRとの違いは？

AR（拡張現実）は、カメラに映る現実の空間にデジタルの3Dモデルや情報を重ねて表示する技術です。VR（仮想現実）はヘッドセットなどで視界全体を仮想空間に置き換える点が違います。ARコンテンツは現実の床やポスターを土台にするため、スマートフォン1台で体験できるものが中心です。

ARコンテンツの作り方は？

起動経路、認識方式、3Dモデルの出所の順に決め、制作会社への依頼・制作ツール・自社開発のいずれかを選びます。常設で使うなら、glbとUSDZの元データが自社に残る作り方を選んでください。

無料でARコンテンツを作れますか？

作れます。WebならGoogleのmodel-viewer（Apache-2.0）やAR.js（MIT）、iPhoneならAppleのReality Composerが無料です。ただし公開用のサーバーは別に要り、Reality ComposerはiOS・iPadOS 26.4で書き出しの既知の問題が報告されています。

ARに対応しているスマホは？

Androidは、GoogleのARCore対応端末リストに載っている機種で、個別の指定が無ければAndroid 7.0以降が必要です。iPhoneは、ARKitの基本要件がiOS 11.0以降かつA9以降のプロセッサ、Web経由のAR Quick LookはiOS 12以降で動きます。ただしmodel-viewerで作ったページの場合、対応端末でもiOSのGoogleアプリ内ブラウザやSNSアプリの内蔵ブラウザではAR起動ボタンが出ません。

ARポスターはどういう仕組みですか？

ポスターの図柄を参照画像として登録し、カメラ映像の中でその図柄を見つけたら、位置と向きに合わせて3Dモデルや動画を重ねる仕組みです。ロゴだけの余白の多い図柄は認識が不安定になるため、細部のある図柄を選びます。

スマートフォンだけで3Dスキャンから公開まで完結できますか？

iPhone向けのAR Quick Look（USDZ）なら公開まではできますが、Android・Web向けにはglbへの変換が別に必要で、品質にも上限があります。iPhoneやiPad上で生成できるのは推定10MBの.reducedだけで、Scene Viewerの推奨上限と同じ大きさのため、テクスチャを圧縮してから公開します。より高い詳細度はMacで生成します。

関連記事

• WebXRのデモ・サンプルで試すブラウザXR入門｜対応ブラウザ・使い方【2026年最新】
• A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】
• LiDARとは？仕組み・ToF方式・点群処理を実装目線で解説する技術ガイド
• 3D Gaussian Splattingの原理｜3Dガウシアン・微分可能ラスタライズ・最適化の仕組み
• SLAMとは？仕組みとアルゴリズム3方式・Visual/LiDARの違いを実装目線で解説