QRコードでARを表示する方法｜作り方・設計・効果測定まで完全ガイド

スマートフォンでQRコードを読み取り、ブラウザ上でAR（拡張現実）を表示する手法は、印刷物や店頭POPとデジタルコンテンツをつなぐ手段として広く使われています。専用アプリのインストールを求めないため、利用者の手元ですぐに体験を始められる点が特徴です。

この記事では、QRコードを使ったWebARの仕組み、具体的な作成手順、印刷時の注意点、効果測定の考え方を解説します。

QRコードでARを表示する仕組み

QRコードを使ったAR表示の多くは、ブラウザ技術を活用したWebARによって実現されています。QRコード自体に3Dデータが格納されているわけではなく、WebARページのURLが記録されています。

一般的な表示の流れは次の通りです。

スマートフォンの標準カメラなどでQRコードを読み取る。
ブラウザでAR表示用のWebページが開く。
画面上に3Dモデルが読み込まれ、Web上で360度回転や拡大ができる。
「ARで見る」等のボタンをタップすると、カメラの起動確認を経て現実空間にモデルが重なって表示される。

アプリ型ARとWebARの比較

従来の専用アプリを必要とするARと、QRコードから直接ブラウザで起動するWebARには、運用の面でいくつか違いがあります。

項目	QRコード × WebAR	アプリ型AR
アプリのダウンロード	不要（ブラウザで表示）	必要（数十〜数百MB）
体験開始までの手順	スキャンしてページを開くだけ	ストア検索、ダウンロード、初期設定が必要
印刷物への展開	共通のWeb URLをQR化して印刷	アプリの誘導リンクやマーカーを印刷
対応環境	iOS（Quick Look対応端末）/ Android（Scene ViewerまたはWebXR対応端末）	アプリの対応OS・端末仕様に依存
導入コスト	既存のWebARツールを利用する場合は無料〜数万円/月	専用アプリの開発が必要（開発要件により数百万円〜）

WebARは利用開始までの手順が少ない一方、端末側の対応状況（iOSのQuick LookやAndroidのARCore対応状況）によってAR表示機能の挙動が異なります。Web上での3Dプレビュー表示と、現実空間に配置するAR起動は別の処理として動作します。

QRコード×ARを作成する5つの手順

WebAR作成ツールを使って、3Dモデルの準備からQRコードの印刷テストまでを行う手順を解説します。ここではPitat-ARの手順を例に説明します。

1. 3Dモデル（GLBファイル）を用意する

Webブラウザ上で広く扱われている3Dファイル形式はGLB（glTFのバイナリ形式）です。まずは表示したいアイテムのGLBファイルを用意します。

主な入手方法	コストの目安	特徴
外部の配布・販売サイト（Sketchfab等）	無料〜数千円程度	既存の家具や汎用小物をすぐに試せる
3Dモデリングソフト（Blender等）で自作	自社制作の工数	自社製品の形状や寸法を正確に再現できる
外部クリエイター・制作会社への委託	仕様に応じた個別見積もり	高品質なモデルが手に入るが、納期と費用が必要

WebARでスムーズに表示させるには、データ容量の軽量化が欠かせません。ファイルサイズは数MB程度、ポリゴン数は5万以下、テクスチャサイズは1024×1024ピクセル程度を目安に最適化しておくと、モバイル回線でも安定して読み込めます。詳細はGLBファイルの作り方完全ガイドをご覧ください。

2. モデルをアップロードして表示を確認する

ツールのアカウントを作成し、GLBファイルをアップロードします。

Pitat-ARでは、アップロード時にiOS端末向けのUSDZ形式への自動変換が行われます。変換完了後、画面上の3Dプレビューでモデルの向き、テクスチャの質感、サイズ感に問題がないか確認します。自動変換処理では、特殊なシェーダーや一部のアニメーションが元データ通りに再現されない場合があるため、表示確認は必須です。

3. 公開設定を有効にして共有URLを取得する

モデルの詳細設定画面で、公開状態を「公開」に切り替えます。

このとき発行される「AR公開ページの共有URL」を確認してください。管理画面のURLではなく、一般の利用者がアクセスできる公開ページURLであることを確認することが重要です。ログインしていない別のブラウザやプライベートウィンドウで共有URLを開き、第三者から正しくページが表示されるか検証します。

4. QRコード画像を書き出す

管理画面から、共有URLが埋め込まれたQRコード画像を保存します。Pitat-ARでは512×512ピクセルのPNG形式でダウンロードできます。

外部のQRコード生成ツールを利用する場合は、必ずStep 3で取得した公開用URLを指定してください。なお、ここでのQRコードは「ページを開くためのURLリンク」です。印刷された画像自体をカメラで認識してその上にモデルを固定する「画像認識AR（マーカー型AR）」とは仕組みが異なります。

5. 実寸で印刷して読み取りテストを行う

本刷りを行う前に、実際の配布時と同じサイズと用紙で1枚印刷し、検証を行います。

QRコードに十分なピントが合い、数秒でURLが認識されるか。
ログイン不要で3D表示ページが開くか。
手持ちのiOS端末およびAndroid端末で、それぞれAR起動ボタンから床面や机の上にモデルを配置できるか。
想定される設置場所の照明や反射の影響を受けていないか。
「QRコードを読み取ると、商品を部屋に試し置きできます」など、利用者が何を体験できるのかを伝える説明文が添えられているか。

トラブルシューティング

症状	主な原因と確認事項
QRコードが認識されない	印刷サイズが小さすぎる、余白（クワイエットゾーン）が不足している、背景とのコントラストが低い。
ログイン画面が表示される	管理画面のURLをQRコード化していないか、モデルの公開ステータスが「非公開」になっていないかを確認する。
ページは開くが3Dが表示されない	3Dモデルの変換が完了しているか、ファイルの容量制限や配信量上限に達していないかを確認する。
3Dは見えるがARが起動しない	端末がAR機能に対応しているかを確認する。SNSアプリやメッセージアプリの内蔵ブラウザではARが制限される場合があるため、SafariやChromeで開き直す。

手元に実機がある場合は、まず登録不要のARサンプルを開いて動作仕様を確認できます。

主な活用分野

QRコードを介したWebARは、物理的なスペースや紙面の制約を補う手段として活用されています。

小売・EC

店頭のPOPやカタログ、製品の外箱にQRコードを印刷し、カラーバリエーションの確認や設置シミュレーションを提供できます。店頭に展示しきれない大型商品でも、実寸大のモデルを空間に配置してサイズ感を把握してもらえます。

関連解説: AR×EC完全ガイド、AR家具シミュレーション導入ガイド

飲食

メニュー表や卓上POPにQRコードを掲載し、料理の立体的な盛り付けやボリューム感を実寸大で確認できるようにします。写真だけでは伝わりにくいサイズ感を視覚的に把握できるため、注文時のイメージの不一致を減らす目的で導入されます。

不動産・インテリア

間取り図やチラシの図面横にQRコードを配置し、完成予想モデルや家具のレイアウト例を3Dで提示します。平面図だけでは把握しにくい天井高や部屋の広がりを、現場や自宅で立体的に確認できます。

製造・BtoB製品

展示会のパネルや総合カタログにQRコードを掲載し、実機を会場に持ち込めない大型工作機械や精密機器を実寸大で表示します。客先への訪問営業時にも、スマートフォンやタブレットを使ってその場で設置イメージを共有できます。

イベント・施設案内

会場案内図やポスターにQRコードを配置し、スタンプラリーや展示物の補足解説コンテンツを展開します。専用端末の貸し出しを行わずに、来場者の端末を利用した情報提供が可能です。

関連解説: AR販促・マーケティング完全ガイド

教育・研修

教科書や作業マニュアルの紙面にQRコードを刷り込み、構造図や分解手順を立体的に確認できるようにします。紙面の情報量を抑えつつ、直感的な補助教材として利用できます。

関連解説: AR×教育・研修ガイド

QRコードを印刷・配置する際の注意点

QRコードを正しく読み取ってもらうためには、視認性と印刷仕様に配慮した設計が必要です。

印刷サイズの目安

読み取り距離とQRコードの大きさには相関関係があります。一般的には「読み取り距離の1/10程度」を一辺の長さの基準とします。

掲載媒体	想定読み取り距離	推奨サイズ
名刺・卓上POP	15〜20cm程度	15mm × 15mm 以上
チラシ・パンフレット（A4）	20〜30cm程度	20mm × 20mm 以上
ポスター・パネル	50cm〜1m程度	30mm〜50mm 以上
看板・壁面サイン	1m以上	設置距離(cm) ÷ 10 を基準に調整

極端に小さいサイズや、折り目・曲面にかかる配置は読み取り精度の低下を招きます。

余白とコントラスト

クワイエットゾーン（余白）: QRコードの四方には、セル（黒い四角の点）幅の4倍以上の余白を必ず設けます。余白部分に文字や装飾が重なると読み取れなくなります。
コントラスト: 背景色とコード色の明度差を十分に確保します。淡い色のコードや、写真・グラデーションの上に直接配置することは避けてください。
印刷解像度: 印刷データを作成する際は、300dpi以上の解像度を確保し、拡大縮小によるぼやけを防ぎます。

誘導文（CTA）の明記

QRコード単体のみを配置すると、利用者は何のためのコードか判断できません。スキャン後に得られる体験を端的に記載します。

記載例:「カメラで読み取ると、実寸大の3Dモデルを部屋に試し置きできます」
記載例:「QRコードをスキャンして、製品の立体構造を360度確認する」

効果測定と運用のポイント

WebARはWebサイトと同様の仕組みで配信されるため、アクセス状況を客観的な数値で測定できます。

測定する主な指標

指標	内容	確認方法
ページ閲覧数（PV）	QRコード経由でAR表示ページが開かれた回数	WebARツールのダッシュボード、GA4等のアクセス解析
流入経路別の判別	チラシ、POP、ポスターなど掲載媒体ごとの閲覧比率	URLにUTMパラメータ（`?utm_source=flyer`等）を付与して分類
AR起動数	3Dプレビュー画面から空間表示を実行した回数	ページ内のイベントトラッキング設定（カスタムイベント）
目的達成（コンバージョン）	AR体験後に商品購入や問い合わせ、予約ページへ遷移した数	遷移先リンクへのパラメータ付与やコンバージョン測定

Pitat-ARのダッシュボードで記録される「閲覧数」は、対象モデルのWebARページが開かれた回数（PV）を指します。実人数（ユニークユーザー数）や、空間にカメラを向けてARを起動した回数そのものではない点に注意してください。正確な起動数や遷移率を計測したい場合は、独自ドメインやWebサイトへの埋め込みを行い、アクセス解析ツールでイベントを設定します。

数値を改善するための着眼点

アクセス数が少ない場合: QRコードのサイズが小さくないか、配置場所が目線から外れていないか、体験内容を伝える誘導文が魅力的かを見直します。
離脱が多い場合: 3Dモデルのデータ容量が重く、ページの読み込みに時間がかかっていないかを確認します。モデルを数MB以内に軽量化することで初期表示の待機時間を短縮できます。
AR起動に至らない場合: 画面上にAR起動ボタンがあることが分かりやすいか、対応端末についての案内が記載されているかを確認します。

費用面の詳細な試算については、AR導入コスト完全ガイドも参照してください。

よくある質問

Q. QRコードの読み取りに専用アプリは必要ですか？

A. スマートフォンの標準カメラアプリでそのまま読み取れます。読み取り後は端末の標準ブラウザ（iOSのSafari、AndroidのChromeなど）でWebARページが開きます。現実空間へのAR表示には、iOSのQuick Look機能、またはAndroidのScene Viewer / WebXRに対応した端末が必要です。

Q. QRコードの作成に費用はかかりますか？

A. QRコード自体の生成は無料で行えます。Pitat-ARでは、無料アカウントで1個人スペース、3プロジェクト、最大10個のモデルまで登録でき、追加料金なしでQRコードを発行できます。なお、無料利用には保存容量（全体で500MiBまで）や配信データ量（直近24時間で500MiB、月間2GiBまで）の上限が設定されています。

Q. 発行したQRコードに有効期限はありますか？

A. QRコード自体に期限はありません。ただし、コードが参照しているWebページのURLが無効になったり、配信ツール側でモデルを削除・非公開に設定したりした場合は、読み取っても表示されなくなります。

Q. 大人数が同時にアクセスしても表示されますか？

A. コンテンツは配信サーバー（CDN等）から読み出されるため、複数端末からの同時アクセスに対応可能です。ただし、各ツールで定められた転送量や配信制限の上限に達した場合は、一時的にコンテンツの配信が停止することがあります。大規模なイベントなどで利用する場合は、3Dモデルのファイルサイズを十分に小さく抑えておくことが重要です。

Q. GLB以外の3Dファイル形式も使えますか？

A. WebARで広く使われている形式はGLBです。FBXやOBJ形式のモデルがある場合は、Blenderなどの3Dソフトウェアを用いてGLB形式に変換・出力してから登録します。Pitat-ARではGLBファイルをアップロードするとiOS用のUSDZ形式へ自動変換されますが、材質やアニメーションの完全な再現を保証するものではないため、変換後のプレビュー確認が必要です。

まとめ

QRコードとWebARを組み合わせることで、アプリのインストールを介さずに、手元のスマートフォンで直感的な3D・AR体験を提供できます。

軽量化したGLB形式の3Dモデルを用意する。
ツールにアップロードし、自動変換結果と表示を確認する。
公開設定を行い、共有用のURLとQRコードを取得する。
読み取り距離に適したサイズ・余白・案内文を添えて印刷する。
実機でページ表示からAR起動まで動作テストを行う。

モデルのファイルサイズや印刷仕様に配慮しながら、用途に合わせたAR表示を設計してみてください。

著者・参考情報

著者: Pitat-AR編集部
WebAR・3Dコンテンツ配信技術に関する技術情報および導入手順を検証・発信しています。

参考文献:

関連記事:

更新履歴:

2026年9月18日: 実装仕様と動作検証条件に合わせて手順とFAQの数値を整理
2026年9月15日: 公開設定・PNG出力に合わせて作成手順を更新し、印刷前の確認とトラブル対処を追加
2026年8月15日: 業界別事例の記述を整理し、QR設置場所の図版を追加
2026年3月10日: QRコード設計の基準と効果測定の項目を追加
2024年12月22日: 初版公開

この記事では、QRコードを使ったWebARの仕組み、具体的な作成手順、印刷時の注意点、効果測定の考え方を解説します。