AR.js studio 簡単ARの作り方

2026年3月2日2026年4月27日

簡単にWeb ARを制作できるとの事でAR.js studioを使ってみました
https://ar-js-org.github.io/studio/
ほんとにサクサクっと作れたのでこちらに作り方をまとめておきたいと思います。

AR.js studio 使い方

1.3Dデータ.glthの準備
2.AR.js studioの画面操作アイコンにする画像の準備
3.AR.js studio3Dファイルのアップロード
4.エクスポートしてサーバーにアップロードするまで

1.3Dデータ.glthの準備

今回は3DCGのデータをアップロードします。
その他にも画像や動画などもアップできるみたいですが、また後で試してみたいと思います。
僕が使用しているソフトはCinema4DなのでここではC4Dでの書き出しになります。
無料の3DCGソフトBlenderでも書き出しは簡単にできます。

3Dデータを読み込みした後、エクスポートからGLTFエクスポートを選びます。
ファイルフォーマットはglTFにしてください。
GLB（バイナリ）というフォーマットだとARに読み込みができませんでした。
リグアニメーションや位置・回転を使ったアニメーションも自動的にベイクして反映できるみたいです。
アニメーション両方とも試しましたがどちらもうまくいきました！

2.AR.js studioの画面操作アイコンにする画像の準備

AR.js studioの画面にログインし、マーカーベースを選択　開始するをクリックします。
位置情報ベースは今回試してません。また次回やってみます。
https://ar-js-org.github.io/studio/

画像をアップロードに好きな画像をアップロードしてください。
ここで注意ですが、ロゴや太文字だけなどはっきりと分かりやすいものでないと読み込みしない場合があります。
QRコードもうまくいきましたが、写真など通常の画像は認識しませんでした。
解像度もあると思うのですが、ロゴなどシンプルな方がAR読み込みとしては良さそうです。
アップロードできたらマーカーをダウンロードしてください。

3.AR.js studio3Dファイルのアップロード

1で作ったglTFファイルをアップロードし、一番下のパッケージをダウンロードをクリックします。

4.エクスポートしてサーバーにアップロードするまで

エクスポートしたファイルを解凍してサーバーにアップロードしてください。
僕はロリポップサーバーを契約しているのでそのサーバーを使っています。
ここでアップロードしたURLがARスタジオを起動するURLになります。

これだけで完成です！
Google等でARを入れたURLを開くとカメラアプリが起動→ARマーカーを読み込むと作ったARが起動する仕組みです。
なんとも簡単でシンプル！
本当はUnityを使ってWEB AR制作してみたかったんですが、まだまだUnity初心者なのでうまくいかず、、💦
ARスタジオでこんなに簡単に作れるならしばらく使っていきたいと思います。

今回作ってみたARはこちらのQRを読み込み→カメラを許可
その後にそのままカメラで下のロゴ[S]を読み込みするとAR恐竜が現れます。