WebARの作り方完全ガイド｜ノーコードツールからコーディングまで

WebARの作り方：基本的な流れ

WebARを作るには、大きく分けて「ツール（サービス）を使う方法」と「コードで自作する方法」の2つがあります。目的・予算・技術レベルに合わせて選びましょう。

方法	難易度	費用	向いているケース
ノーコードツール	★☆☆	月額0〜数万円	簡単な3D表示・ECサイト・展示会
WebAR専門サービス	★★☆	制作費10万〜100万円	ブランドキャンペーン・高品質AR
自前コーディング	★★★	人件費のみ	開発者向け・高自由度が必要な場合

方法①：ノーコードツールで作る

プログラミング知識ゼロでもWebARが作れるサービスが増えています。代表的なツールと特徴を紹介します。

Zappar（ザッパー）

英国発のWebAR/ARプラットフォーム。マーカーAR・フェイスAR・ワールドARに対応し、ドラッグ&ドロップで直感的にコンテンツを作成できます。月額プランは$75〜（約11,000円）から。

テンプレートが豊富
QRコードでの配信が容易
分析ダッシュボード付き

8th Wall（エイスウォール）

Niantic（ポケモンGO開発元）傘下のWebARプラットフォーム。業界最高水準のトラッキング精度を誇り、大手ブランドのキャンペーンにも採用されています。価格は要問い合わせ（月額数十万円〜）。

平面・垂直面・顔・物体認識に対応
Three.js・A-Frameと統合
iOS/Android両対応

STYLY（スタイリー）

日本のPsychic VR Lab社が開発したXRプラットフォーム。WebAR・WebVRコンテンツを作成・配信でき、日本語サポートが充実しています。無料プランあり。

方法②：コードで自作する（開発者向け）

より柔軟なWebARを実装したい場合は、オープンソースのライブラリを使います。

AR.js（最もシンプル）

A-FrameやThree.jsと組み合わせて使う軽量なWebARライブラリ。マーカーARと位置情報ARに対応しています。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  </head>
  <body>
    <a-scene embedded arjs>
      <a-marker preset="hiro">
        <a-box position="0 0.5 0" material="color: #4CC3D9;"></a-box>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

上記のHTMLをサーバーに置くだけで、Hiro（ひろ）マーカーの上に青い3Dボックスが表示されるWebARが完成します。

model-viewer（Googleの公式タグ）

Googleが提供する<model-viewer>はHTMLタグ一行で3Dモデル表示＋ARを実現できます。ECサイトへの埋め込みに最適です。

<!-- CDNを読み込む -->
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.3.0/model-viewer.min.js"></script>

<!-- 3DモデルをARで表示 -->
<model-viewer
  src="./model.glb"
  ios-src="./model.usdz"
  ar
  ar-modes="webxr scene-viewer quick-look"
  camera-controls
  auto-rotate
  alt="3Dモデル">
</model-viewer>

ar属性を付けるだけで「ARで見る」ボタンが自動追加されます。Android端末ではScene Viewer経由、iOSではARKit（Quick Look）が起動します。

WebARで使う3Dファイル形式

WebARで3Dモデルを表示するには、対応するファイル形式の理解が必要です。

GLB（glTF Binary）

Web向け3Dの標準形式。Webブラウザが直接読み込める軽量フォーマットで、Android・PCのWebARで使います。BlenderやMayaからエクスポートできます。

ファイルサイズが小さい
テクスチャ・アニメーションを1ファイルに格納
Three.js・A-Frame・model-viewerが対応

USDZ

Pixar・Appleが策定した形式。iOSのARKit（Quick Look）で使います。iPhone・iPadでネイティブARを表示する際に必要です。

iOSのSafariで直接開ける
Reality Composerで編集可能
macOS上でBlenderプラグインからエクスポート

マルチプラットフォーム対応にはGLBとUSDZの両方を用意するのがベストプラクティスです。

WebAR制作の具体的な手順（ノーコードの場合）

ノーコードツールを使った場合の典型的な制作フローを紹介します。

目的・用途を決める　商品の3D表示？マーカーAR？顔にエフェクト？
3Dモデルを準備する　既存モデルを購入するか、3Dスキャン・CGで制作
ツールにアップロード　GLB/USDZをツールに読み込む
シーンを設定　スケール・位置・アニメーションを調整
QRコード・URLを生成　配信用のリンクを取得
テスト・公開　実機で動作確認してキャンペーン等に展開

WebAR制作にかかる費用の目安

制作方法	初期費用	月額費用	3Dモデル制作費
ノーコードツール（自社運用）	0円	1万〜5万円	5万〜30万円
WebAR制作会社に依頼	15万〜100万円	0〜3万円	別途
開発者が自作	0円	サーバー代のみ	10万〜50万円

詳しい費用感は「AR制作費用の相場まとめ」で解説しています。

WebARをうまく作るための3つのポイント

① 3Dモデルの軽量化が最重要

WebARの最大の課題はファイルサイズです。3Dモデルが重いと読み込みに時間がかかり、ユーザーが離脱します。目安はGLBで5MB以下。ポリゴン数の削減・テクスチャ圧縮（Draco圧縮）を行いましょう。

② HTTPSが必須

カメラへのアクセスにはHTTPSが必要です。httpのサイトではWebARは動作しません。Let’s Encryptなどで無料SSL証明書を取得してください。

③ iOS/Android両対応を確認する

iOSとAndroidでARの動作方式が異なります（Quick Look vs Scene Viewer vs WebXR）。必ず両方の実機でテストし、体験に差が出ないよう調整しましょう。

WebAR制作のご相談はこちら

ツール選びから3Dモデル制作・制作会社の選定まで、プロが無料でアドバイスします。

無料相談する →

よくある質問

Q WebARはアプリなしで動きますか？

Q プログラミングの知識がなくてもWebARは作れますか？

Q WebARの制作期間はどれくらいですか？