A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】

A-Frameは、HTMLタグを書くだけでWebブラウザ上のVR・AR体験を作れるオープンソースフレームワークです。3D描画ライブラリのThree.jsを土台にしており、WebGLやWebXRのコードを直接書かずに立体空間を組み立てられます。この記事では「A-Frameとは何か」から、v1.8.0（2026年6月公開）を前提にしたCDN 1行での導入、コンポーネントによる拡張、Inspectorでの編集、対応ヘッドセット、Three.jsやUnityとの使い分けまでを順に解説します。

まとめ

• A-FrameはThree.js上に構築されたHTMLファーストのWebXRフレームワーク。元Mozilla発で、現在は共同作者らのSupermediumが維持するMITライセンスのOSS。
• 最新はv1.8.0（2026-06-23公開）。Three.js r184に追従し、旧WebVR APIを完全に削除、WebXR Layers対応を修正した。
• 導入はCDNのscriptタグ1行だけ。<a-scene>と<a-box>などのプリミティブを置けば即3Dシーンが動く。
• 拡張はエンティティ・コンポーネント・システム（ECS）。AFRAME.registerComponentで独自の振る舞いを部品化して再利用する。
• 単純なVRマーケティングや3Dビューアの高速試作はA-Frameが有利。重い物理演算や大規模ゲームはUnityやThree.js直書きが向く。

A-Frameの正体：Three.js上のHTMLフレームワーク

A-Frameは2015年にMozillaのVRチームが公開し、現在は共同作者のDiego MarcosとKevin Ngoが所属するSupermediumが独立プロジェクトとして開発を続けています。ライセンスはMITで、商用利用も無償です。名称の「A-Frame」はWebのフレームワークを指し、建築のAフレーム構造や帽子・器具の同名製品とは無関係です。

最大の特徴は、3DシーンをJavaScriptではなくHTMLの独自要素（カスタムエレメント）として宣言的に書ける点にあります。内部ではThree.jsがWebGLを呼び出してGPU描画し、VR・AR表示はブラウザ標準のWebXR Device APIに委ねます。つまりA-Frameは、低レイヤーのボイラープレートを隠す「薄いがよく設計された糖衣」です。

Three.js・WebGL・WebXRとの関係

役割は明確に分かれています。最下層で実際にピクセルを描くのがWebGL、それを扱いやすいシーングラフに抽象化するのがThree.js、VR/ARのヘッドセットや入力を扱う標準APIがWebXRです。A-Frameはこの3つをHTMLの語彙でまとめ上げる最上位レイヤーに位置します。したがって、Three.jsの知識があればA-Frameのobject3D経由で直接オブジェクトを操作でき、逆にA-Frameだけで完結する軽い用途なら描画APIを意識せず済みます。

導入：CDN 1行で動く最小構成

インストールは不要です。HTMLのheadにv1.8.0のスクリプトを読み込み、bodyに<a-scene>を置くだけで、マウスドラッグで見回せる3D空間が立ち上がります。ビルドツールもフレームワーク設定もいりません。

<script src="https://aframe.io/releases/1.8.0/aframe.min.js"></script>

<a-scene>
  <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
  <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

<a-box>や<a-sphere>のように、よく使う形状はプリミティブとして用意されています。v1.8.0時点でa-camera・a-light・a-text・a-image・a-gltf-model・a-videoなど20種類以上が公式ドキュメントに揃い、外部3Dモデル（glTF）の読み込みも<a-gltf-model src="model.glb">の1行で済みます。positionはX・Y・Z（メートル単位、右手系でZ手前がプラス）、色や大きさもすべてHTML属性で指定します。

ECSによる機能拡張の仕組み

プリミティブだけでは静止した置物にしかなりません。動きやインタラクションを足す仕組みが、A-Frameの核であるエンティティ・コンポーネント・システム（ECS）です。空の器である<a-entity>に、機能を持つコンポーネントを属性として貼り付けて振る舞いを合成します。プリミティブ自体も、実体はコンポーネントを事前合成したa-entityにすぎません。

独自の振る舞いはAFRAME.registerComponentで部品化します。下は毎フレーム回転させるspinコンポーネントの例です。tickが描画ループごとに呼ばれ、this.el.object3DからThree.jsのオブジェクトに直接触れる点がポイントです。

AFRAME.registerComponent('spin', {
  schema: {speed: {type: 'number', default: 30}},
  tick: function (time, deltaTime) {
    var rad = this.data.speed * (deltaTime / 1000) * Math.PI / 180;
    this.el.object3D.rotation.y += rad;
  }
});

// HTMLでの利用: <a-box color="#4CC3D9" spin="speed: 45"></a-box>

この設計のため、機能をコンポーネント単位で切り出して別プロジェクトへ流用でき、GitHubには物理演算（aframe-physics-system）や環境生成（aframe-environment-component）などコミュニティ製コンポーネントが多数公開されています。既存資産を組み合わせる前提で設計するのが、A-Frameを速く回すコツです。

A-Frame Inspectorでの可視化編集

A-Frameには、稼働中のシーンをブラウザ上でGUI編集できるInspectorが標準搭載されています。シーンを開いた状態でCtrl+Alt+I（Macは Ctrl+Option+I）を押すと、階層ツリーと3Dギズモが現れ、オブジェクトの位置・回転・スケールをドラッグで調整できます。値を確定すると対応するHTML属性が画面に表示されるので、GUIで当たりを付けてからコードへ書き戻す往復開発が可能です。

Inspectorが開かない場合は、外部CDN（aframe-inspectorスクリプト）をブラウザが取得できているか、拡張機能が読み込みをブロックしていないかを確認します。ローカルのfile:直開きではなく、簡易サーバー経由でページを配信すると安定します。

VR・ARへの対応とv1.8.0の最新動向

A-Frameの実行環境はブラウザとWebXRに依存します。ここではv1.8.0時点の対応状況と、2026年6月アップデートの要点を分けて押さえます。

対応ヘッドセットとブラウザ

公式ドキュメントは、Vive・Rift・Meta Quest・Windows Mixed Reality・Apple Vision Proの各コントローラー、およびデスクトップとスマートフォンを対応環境として挙げています。ヘッドセットが無くても、PCブラウザではマウスとキーボード、スマートフォンではジャイロで視点を動かせるため、開発中の確認に実機VRは必須ではありません。VRモードへの切り替えは、シーン右下に自動表示されるゴーグルボタン（WebXRのrequestSession）から行います。

v1.8.0（2026年6月）の変更点

WebVRはすでに主要ブラウザで廃止済みの旧規格で、現行のVR/AR表示はWebXRに一本化されています。v1.8.0でWebVR依存が消えたことは、A-Frameが完全にWebXR時代へ移行したことを意味します。ARを扱う場合はA-Frame単体ではなく、マーカー型・位置型ARを提供する外部ライブラリAR.jsと組み合わせるのが定番で、スマートフォンのカメラ映像に3Dを重ねる用途で使われます。なお仕様追従が速い領域のため、対応の細部は公式リリースノートで確認してください。

A-Frameを選ぶべき場面・避けるべき場面

A-Frameは万能ではありません。HTMLで宣言的に書ける手軽さと、Three.jsを隠す抽象化はトレードオフの関係にあります。用途で判断軸を持っておくと選定を誤りません。

向いているのは、Webサイトに埋め込む3D製品ビューア、展示会やキャンペーン用の簡易VR、教育・可視化コンテンツなど、短期間で作って公開したいケースです。URLを開くだけで動きインストール不要なWeb配信の強みが、そのまま集客・共有のしやすさになります。プロトタイピングの速さは、同じ表現をThree.js直書きやUnityで組むより明確に上です。

逆に避けるべきは、複雑な物理挙動や大量オブジェクトの最適化、緻密なレンダリング制御が要る本格ゲームです。この領域ではHTML属性経由の抽象化がむしろ足かせになり、Three.jsを直接使うかUnityのWebGLビルドに寄せた方が制御性とパフォーマンスで有利になります。DOM要素として3Dを管理する構造上、数千〜数万エンティティ規模ではDOM操作のオーバーヘッドも無視できません。「Webで手早く3D/VRを見せたいか、作り込んだリアルタイム3Dを突き詰めたいか」が分岐点です。

よくある質問

A-Frameは無料で商用利用できますか？

できます。A-FrameはMITライセンスのオープンソースで、ライセンス表記を残せば商用サイトでも無償で利用可能です。

「A-Frame」「aframe」の読み方とスペルは？

読みは「エーフレーム」です。パッケージ名やCDNパスではaframe（ハイフンなし）、要素名やブランド表記ではa-frameと書き分けます。npmの配布パッケージ名はaframeです。

iPhoneのSafariでVRは動きますか？

3Dシーンの閲覧やジャイロでの見回しは動きます。没入型VRはWebXRの対応状況に依存し、Apple Vision ProのSafariが対応環境として公式に挙げられています。iPhone単体の没入VRは限定的なため、まずは3D表示＋ジャイロ操作を基本と考えてください。

A-FrameとThree.jsはどちらを学ぶべきですか？

目的次第です。HTMLでVR/ARを手早く形にしたいならA-Frameから、描画やアニメーションを細かく制御したいならThree.jsを学ぶのが近道です。A-Frameは内部でThree.jsを使うため、両方を理解しておくと拡張時に強みになります。

A-Frame Inspectorが起動しません。

Ctrl+Alt+I（Mac: Ctrl+Option+I）で起動します。開かない場合は、Inspector本体を配信する外部CDNへの接続がブロックされていないか、ページを簡易サーバー経由で開いているかを確認してください。

関連記事

• Three.jsとは？ – Three.jsの概要とその魅力について徹底解説
• WebXRのデモ・サンプル集｜対応ブラウザ・使い方・実装を2026年最新で解説
• WebGLとは？仕組み・対応ブラウザ・Unityビルドまで解説