「WebARを試してみたいけど、まずはコストをかけずに始めたい」——そんな方に向けて、完全無料でWebARコンテンツを制作・公開するための方法を徹底解説します。AR.jsやmodel-viewerなどの無料ツール、Sketchfabなどの無料3D素材サイト、GitHub PagesやNetlifyの無料ホスティングを組み合わせれば、費用ゼロで本格的なWebAR体験を作ることが可能です。
無料で使えるWebARツール比較
WebARを無料で始める際、まずツール選びが重要です。代表的な無料ツールの特徴をまとめました。
| ツール名 | 主な機能 | 無料枠の制限 | おすすめ用途 |
|---|---|---|---|
| AR.js | マーカーAR・画像認識AR・位置情報AR | 完全無料・オープンソース | マーカーAR入門・開発学習 |
| model-viewer | 3DモデルのAR表示(iOS/Android対応) | 完全無料・Googleが開発 | 商品の3D表示・簡易AR |
| Zappar(無料枠) | 画像認識AR・マーカーAR | 月5,000スキャンまで無料 | 小規模キャンペーン・プロトタイプ |
| MindAR.js | 画像認識AR・顔AR | 完全無料・オープンソース | 画像マーカーAR・フィルター開発 |
| A-Frame | WebXR・WebAR・3D空間構築 | 完全無料・Mozillaが開発 | リッチなAR体験・VR連携 |
AR.jsの特徴と使い方
AR.jsはWebARの定番オープンソースライブラリです。CDNから読み込むだけでHTMLファイルにARを実装でき、サーバー不要でローカルからでも動作確認できます。マーカー型・画像認識型・GPS型の3種類のARに対応しており、学習コストが低いのが特徴です。月間の利用制限もないため、趣味や実験用途に最適です。
model-viewerの特徴と使い方
Googleが開発するmodel-viewerは、GLBファイルをWebページ上に3D表示し、iOSではQuick Look(USDZ)、AndroidではScene Viewerと連携してAR表示できるWebコンポーネントです。たった1行のHTMLタグで3D+ARを実現でき、ECサイトの商品表示に特に向いています。
無料3Dモデルの入手先5選
- Sketchfab:最大規模の3Dモデルプラットフォーム。CC0・CC BYライセンスの無料モデルが数十万点。GLBダウンロードに対応。
- Google Poly(Icosa Gallery):Googleが廃止したPolyの後継。ローポリモデルが豊富でWebARに最適なサイズ感。
- Poly Haven:高品質なCC0(著作権フリー)の3Dモデル・テクスチャ・HDRIを無料配布。商用利用も可能。
- TurboSquid(無料枠):商用グレードのモデルも多数。Free絞り込みで無料モデルを検索可能。
- CGTrader(無料枠):Free Modelsカテゴリから無料モデルを入手可能。GLB形式でのダウンロードに対応。
入手したモデルは、Blenderで軽量化(ポリゴン削減・テクスチャ圧縮)してからWebARに使うと表示速度が向上します。目安はGLBファイルサイズ5MB以下、ポリゴン数50,000以下です。
GitHub Pagesで公開する手順
WebARコンテンツはHTTPSが必須(カメラアクセスにHTTPSが必要なため)ですが、GitHub Pagesは無料でHTTPS対応の静的ホスティングを提供しています。
- GitHubアカウントを作成し、新しいリポジトリを作成(例: my-webar)
- index.htmlとGLBファイルをリポジトリにアップロード
- Settings → Pages → Source を「main branch」に設定
- 数分後に https://ユーザー名.github.io/my-webar/ でアクセス可能になる
- QRコードを生成してスマートフォンでアクセス・動作確認
最初のWebARを30分で作るステップ
model-viewerを使えば、HTMLの基礎知識があれば30分以内に最初のWebARコンテンツを公開できます。
- Step1(5分):Sketchfabで気に入った無料GLBモデルをダウンロード
- Step2(10分):model-viewerのHTMLを作成してindex.htmlとして保存
- Step3(10分):GitHubリポジトリを作成してindex.htmlとGLBをアップロード
- Step4(5分):GitHub PagesをONにして公開URLをQRコード化してスマホで確認
無料の限界と有料移行のタイミング
| 課題 | 無料の限界 | 有料移行の目安 |
|---|---|---|
| アクセス数増加 | Zappar無料枠は月5,000スキャンまで | 月1万スキャン超え |
| 分析・計測 | スキャン数・滞在時間の詳細計測が困難 | CVRを改善したいとき |
| ノーコード制作 | HTML編集が必要 | 非エンジニアが社内運用するとき |
| サポート | コミュニティのみ | 本番運用・商用展開時 |
8th WallやZappar有料プラン、Vossleなどの有料SaaSは月額3,000円〜から利用でき、管理画面・分析機能・サポートが充実しています。まず無料で試し、手応えを感じたら有料ツールへ移行するのがスマートなアプローチです。
商品の3D表示・ARなら設置が1タグで済むmodel-viewerが最も簡単です。マーカーARや画像認識ARを試したい場合はAR.jsを選んでください。どちらもHTMLの基礎知識があれば1日以内に動かせます。
AR.js・model-viewer・A-Frame・MindAR.jsはオープンソース(MIT/Apacheライセンス)で商用利用可能です。3DモデルはCC0またはCC BYライセンスのものを選べば商用利用できます。ライセンス表記が必要かどうか各素材のページで必ず確認してください。
Netlify(無料枠:帯域100GB/月)、Vercel(無料枠:帯域100GB/月)、Cloudflare Pages(無料枠:帯域無制限)が利用できます。いずれもHTTPS対応で、GitHubと連携した自動デプロイも可能です。大量アクセスが予想される場合はCloudflare Pagesが最も安定しています。