---
title: "A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】"
url: "https://www.issoh.co.jp/tech/details/3636/"
published: 2024-09-24
updated: 2026-07-21
categories: ["フレームワーク"]
publisher: "株式会社一創"
---

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

A-Frameは、HTMLタグを書くだけでWebブラウザ上のVR・AR体験を作れるオープンソースフレームワークです。3D描画ライブラリの[Three.js](/tech/details/3051/)を土台にしており、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](/tech/details/4884/)、それを扱いやすいシーングラフに抽象化するのがThree.js、VR/ARのヘッドセットや入力を扱う標準APIが[WebXR](/tech/details/7076/)です。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月）の変更点

| 項目     | 内容                     |
| ------ | ---------------------- |
| 公開日    | 2026-06-23（npm latest） |
| 描画エンジン | Three.js r184へ追従       |
| 旧API   | 残存していたWebVRを完全削除       |
| ブランド呼称 | Oculus表記を廃止            |
| WebXR  | Layers要求のバグ修正          |

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の概要とその魅力について徹底解説](/tech/details/3051/)
- [WebXRのデモ・サンプル集｜対応ブラウザ・使い方・実装を2026年最新で解説](/tech/details/7076/)
- [WebGLとは？仕組み・対応ブラウザ・Unityビルドまで解説](/tech/details/4884/)

---

出典: [A-Frameとは？HTMLでWebVR/ARを作る使い方入門【v1.8・2026年】](<https://www.issoh.co.jp/tech/details/3636/>)（株式会社一創）