diff --git a/docs/ar-xr.md b/docs/ar-xr.md
new file mode 100644
index 0000000..78fcdb8
--- /dev/null
+++ b/docs/ar-xr.md
@@ -0,0 +1,246 @@
+# [開発]AR/XRの利用ガイドライン
+
+## AR/XEについて定義
+
+空間の概念
+
+* 空間の中に仮想オブジェクトが配置
+* ユーザーが空間内を自由に移動または視点操作できる
+
+## 利用例と対応技術
+
+1. **GPS、カメラなどのセンサ情報と連動**
+ - 仮想オブジェクトを現実に重ねる
+ - 例：ポケモンGOのように位置情報と連動して表示される仮想キャラクター。
+2. **ユーザーとのインタラクション**
+ - タップ、ジェスチャー、視線、音声などを通じた操作が可能。
+ - 例：展覧会アプリでアート作品に近づくと詳細情報が表示される。
+3. **空間認識 / 環境マッピング**
+ - ARKitやARCoreなどで現実の床・壁・物体を認識して、仮想オブジェクトを自然に配置。
+ - 例：家具ARアプリが部屋の床にテーブルを正確に置く
+4. **空間を活かしたUX設計**
+- 単なるUI配置ではなく、「空間に存在する意味」を考慮した設計。
+- 例：不動産カタログがモデルルーム内を歩き回るUXで部屋の広さや窓の位置を体験できる。
+
+| 利用例 | 空間性 | 使用技術 | 特記事項 |
+| ---------------- | -------- | ----------------- | -------------------------------- |
+| 歩行型Web展覧会 | あり | WebXR + A-Frame等 | 空間移動・近接操作あり |
+| ポケモンGO | あり | ARKit/ARCore | GPS連動・カメラ合成あり |
+| 商品カタログ(3D) | 条件付き | WebAR / Unity等 | 操作・空間性の有無で評価分かれる |
+
+### 類似技術(ARではない例)
+
+| 例 | 理由 |
+| -------------------------------------------------- | -------------------------------------------------------- |
+| カメラ映像の上にキャラクターを表示するだけのアプリ | 空間と連動していないため「ただの合成」 |
+| 背景がカメラ映像の3Dゲーム | 現実との関係がないのでARではない |
+| Instagramのエフェクトの一部（目に星を重ねるなど） | 空間ARというよりはフェイストラッキング or エフェクト処理 |
+
+## スタック
+
+### フロントエンド(AR体験を提供する側)
+
+| デバイス | 技術・ライブラリ |
+| -------- | -------------------- |
+| iOS | ARKit(Apple純正) |
+| Android | ARCore（Google純正） |
+
+**（Web向けAR）**
+
+| ライブラリ | 特徴 | 難易度 | 拡張性 | 主な用途 |
+| ---------- | --------------------------------------------- | ------ | -------- | -------------------- |
+| A-Frame | HTMLベースで簡単に3Dコンテンツ。初心者向き | 低 | 中 | プロトタイピングなど |
+| Three.js | 高機能3Dライブラリ。低レベル制御が可能 | 中〜高 | 高 | 複雑な3D表現 |
+| AR.js | WebAR用ライブラリ。Three.js/A-Frameと併用可能 | 中 | 中 | マーカーAR、GPS AR |
+| 8thWall | 高精度WebARプラットフォーム（有料） | 低 | 高 | 実用ARアプリ |
+| WebXR API | ブラウザ標準のAR/VR API | 高 | 非常に高 | 本格的なAR/VRアプリ |
+
+
+
+ * iOSの制約ポイント(2025年)
+ * カメラアクセス Safariのみが原則的に対応(PWAやChromeは制限あり)
+ * WebXR API:サポートされていない（2025年現在）
+ * WebRTC/MediaDevices getUserMediaはOK。(AR.jsの一部機能が動作不安定)
+
+その他の仕様する技術について
+
+| Flutter | |
+| ------- | --------------------------------------------- |
+| Unity | AR Foundation（ARKit + ARCoreの抽象化） |
+| Flutter | ar_flutter_plugin(公式ARSDKのFlutterラッパー) |
+| | |
+
+
+### バックエンド
+
+必要な場合のみ実装
+
+＊クラウド処理
+ * 画像認識AI
+ * 地図情報
+ * マルチユーザー同期
+
+WebSocketやMQTTでリアルタイム連携する
+
+
+### A-Frame（エーフレーム）
+
+Webブラウザ上で3DコンテンツやVR/AR体験を作れるHTMLベースのフレームワーク
+JavaScriptが得意でなくても、**HTMLタグ感覚で簡単に使える**
+
+* 公式チュートリアル: https://aframe.io/docs/master/introduction/
+
+#### 使用方法について
+
+A-FrameはCDNで使えます。
+HTMLのに以下を追加する
+
+```html
+
+```
+
+## Three.js + AR.js
+
+Three.jsは WebGLを抽象化し、高機能な3D描画をJavaScriptで行える軽量ライブラリです。
+ARやVRだけでなくゲームやインタラクティブなグラフィック表現にも使われます
+
+
+- 公式: https://threejs.org/
+- GitHub: https://github.com/mrdoob/three.js/
+
+
+AR.jsは、Three.jsベースで動作する**WebARライブラリ**。
+マーカー認識や位置情報を使ったAR体験を提供。
+
+- 公式: https://ar-js-org.github.io/AR.js-Docs/
+
+#### 特徴
+
+**Three.js**
+- カスタマイズ性が高く、細かい3D制御が可能
+- WebAR/VR対応にも拡張しやすい
+- A-Frameに比べて**記述量は多め**だが、**柔軟性が高い**
+
+**AR.js**
+- モバイルブラウザでも軽快に動作（60fpsも実現可能）
+- **マーカーベースAR**（Hiroマーカーなど）と**位置情報ベースAR**の両方に対応
+- **A-Frameとも連携可能**
+
+---
+
+### 使用方法について（Three.js + AR.js）
+
+Three.jsのシーンを作成し、AR.jsと連携してカメラ映像と重ねて表示します。
+主に以下のステップで構成されます：
+
+1. カメラの取得（`ARjs.Context`）
+2. Three.jsのシーン、カメラ、レンダラーの準備
+3. マーカー検出（`ARjs.MarkerControls`）を使って3Dモデル表示
+
+#### サンプルコード（マーカーベースAR）
+
+```html
+
+
+
+
+ AR.js マーカーベース サンプル
+
+
+
+
+
+ 「Hiroマーカー」をカメラにかざしてください
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+* Webカメラ対応のPCまたはスマホのブラウザ
+*
+
+## A-Frameの基本
+
+### A-Frameの導入
+A-FrameはCDNで使えます。HTMLの``に以下を追加するだけ：
+
+```html
+
+```
+
+| タグ | 説明 |
+| -------------- | ------------------------------------------ |
+| `` | A-Frameの世界のルート（必須） |
+| `` | 箱を表示（位置、回転、色、サイズを指定可） |
+| `` | 球体 |
+| `` | 円柱 |
+| `` | 平面。地面に使われることが多い |
+| `` | テキスト表示 |
+| `` | 視点を定義。省略すると自動的に追加される |
+| `` | 光源。明るさや影の描画に必要 |
+
+
+## サンプルコード
+
+### A-Frameで作る歩行型Webページ
+
+```html
+
+
+
+ 歩行型Webページ
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+#### 特徴
+- **マウス視点移動**：マウスで見回せます。
+- **WASDキーで歩行**：前後左右に移動できます。
+- **HTMLだけで構成**：JavaScriptなしでA-Frameがほとんど自動処理。
+
+#### 移動の制御
+
+- `wasd-controls`: W/A/S/Dキーで歩けるようにする
+- `look-controls`: マウスで視点を変える
+
+#### 応用例
+
+* [ホバーイベント:](../src\front\ar\afreame\aframe-hover.html)
\ No newline at end of file
diff --git a/src/front/ar/afreame/aframe-hover.html b/src/front/ar/afreame/aframe-hover.html
new file mode 100644
index 0000000..ca6d37e
--- /dev/null
+++ b/src/front/ar/afreame/aframe-hover.html
@@ -0,0 +1,48 @@
+
+
+
+
+
+ ホバーで説明表示
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/front/ar/afreame/aframe-three.html b/src/front/ar/afreame/aframe-three.html
new file mode 100644
index 0000000..991ac5a
--- /dev/null
+++ b/src/front/ar/afreame/aframe-three.html
@@ -0,0 +1,44 @@
+
+
+
+
+
+ AR.js マーカーベース サンプル
+
+
+
+
+
+
+ 「Hiroマーカー」をカメラにかざしてください
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+F
\ No newline at end of file
diff --git a/src/front/ar/aframe.html b/src/front/ar/afreame/aframe.html
similarity index 100%
rename from src/front/ar/aframe.html
rename to src/front/ar/afreame/aframe.html
diff --git a/src/front/ar/hover.html b/src/front/ar/hover.html
deleted file mode 100644
index 0d17263..0000000
--- a/src/front/ar/hover.html
+++ /dev/null
@@ -1,48 +0,0 @@
-
-
-
-
-
- ホバーで説明表示
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file