MENU
Language
AIを学び、探究し、未来を創る。AIエンジニアのためのAI情報解説サイト。AIと未来を創る、ゼロからの一歩 / Building the new world from zero with AI.
  1. ホーム
  2. プラットフォーム
  3. CMS
  4. WordPress
  5. 自分の VRoid（VRM）アバター をワードプレスのホームページ上に表示する方法

自分の VRoid（VRM）アバター をワードプレスのホームページ上に表示する方法

WordPress アバター
hara | ai0w監修

以下は、最小構成（three-vrm公式対応）＋WordPress設置例＋iframe埋め込み例を含む、ガイドです。

目次

全体の流れ（概要）

ステップ内容
①VRMモデルを準備（例：avatar.vrm）
②表示用HTMLファイル（vrm-viewer.html）を作成
③2つのファイルを /wp-content/uploads/vrm/ にアップロード
④WordPressの記事や固定ページに <iframe> で埋め込む

VRMモデルを準備する

VRoid Studioで作成したモデルを .vrm 形式でエクスポートします。

  • ファイル名は英数字推奨（例：avatar.vrm）
  • サイズは数十MB以内が望ましい（圧縮で高速化）

参考：VRoid Studio 公式
https://vroid.com/studio

VRoid を作成してエクスポートする手順は下記の記事で解説しています↓

Ai0w.com
VRoid Studio とは？pixiv が提供する「3Dアバター制作ソフト」 | Ai0w.com VRoid Studio とは？ VRoid Studioは、pixiv が提供する「3Dアバター制作ソフト」で、絵が描けなくても直感的に「オリジナルの3Dキャラクター（VRM）」を作成できます。 無…

HTMLファイルを作成する

ファイル名：vrm-viewer.html

下記コードをコピーしてメモ帳やVSCodeで作成し、UTF-8で保存してください。
このHTMLファイルは avatar.vrm と同じフォルダに置きます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>VRM表示（three-vrm 最新API対応）</title>
  <style>
    html,body { margin:0; height:100%; background:#111; color:#ddd; font-family:system-ui,sans-serif; }
    #app { width:100%; height:100%; display:block; }
    #ui {
      position: fixed; inset: 12px auto auto 12px; background: rgba(0,0,0,.55);
      padding: 8px 10px; border-radius: 10px; font-size: 12px; line-height: 1.4;
      backdrop-filter: blur(4px);
    }
    #ui b { color:#fff; }
  </style>

  <!-- Import Map: three / addons / three-vrm を名前で解決 -->
  <script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.167.1/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.167.1/examples/jsm/",
      "@pixiv/three-vrm": "https://unpkg.com/@pixiv/three-vrm@3.4.2/lib/three-vrm.module.js"
    }
  }
  </script>
</head>
<body>
  <canvas id="app"></canvas>
  <div id="ui">
    <div><b>VRM</b>：./avatar.vrm（同フォルダ）</div>
    <div>操作：ドラッグ回転／ホイールズーム／右クリック平行移動</div>
    <div id="log">Loading…</div>
  </div>

  <script type="module">
    import * as THREE from 'three';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';

    const log = (msg)=>{ const el=document.getElementById('log'); if(el) el.textContent=msg; };

    // Renderer（軽量化：AAオフ、ピクセル比上限）
    const canvas = document.getElementById('app');
    const renderer = new THREE.WebGLRenderer({ canvas, antialias:false, powerPreference:'low-power' });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 1.5));
    renderer.setSize(window.innerWidth, window.innerHeight);

    // Scene / Camera
    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x111111);
    const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 1.35, 2.4);

    // Light（軽量な組み合わせ）
    scene.add(
      new THREE.HemisphereLight(0xffffff, 0x222233, 0.6),
      new THREE.DirectionalLight(0xffffff, 1.0)
    );
    scene.children.at(-1).position.set(1,1.5,1); // DirectionalLight 位置

    // Controls
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.target.set(0, 1.35, 0);

    // Loader（three-vrm v3 方式）
    const loader = new GLTFLoader();
    loader.register(parser => new VRMLoaderPlugin(parser));

    let currentVRM = null;

    // ▼ VRM の読み込み（同フォルダに avatar.vrm を置く）
    const VRM_PATH = './avatar.vrm'; // もし年月フォルダにあるなら絶対パスに変更してください
    log('Loading: ' + VRM_PATH);

    loader.load(
      VRM_PATH,
      (gltf) => {
        const vrm = gltf.userData.vrm;

        // ★ 新API：非推奨 removeUnnecessaryJoints の代替
        VRMUtils.combineSkeletons(vrm.scene);

        if (currentVRM) scene.remove(currentVRM.scene);
        currentVRM = vrm;
        scene.add(vrm.scene);
        log('Loaded: ' + VRM_PATH);
      },
      (ev) => {
        if (ev.total) {
          const p = (ev.loaded / ev.total * 100).toFixed(0);
          log(`Loading: ${p}%`);
        }
      },
      (err) => {
        console.error(err);
        log('読み込みに失敗しました。ファイルの場所/名前/拡張子とCORS設定を確認してください。');
      }
    );

    // Render loop（非アクティブタブでの無駄描画を軽減）
    const clock = new THREE.Clock();
    const animate = () => {
      requestAnimationFrame(animate);
      if (document.hidden) return; // タブ非表示時は省エネ
      const dt = clock.getDelta();
      if (currentVRM) currentVRM.update(dt);
      controls.update();
      renderer.render(scene, camera);
    };
    animate();

    // Resize
    addEventListener('resize', () => {
      renderer.setSize(innerWidth, innerHeight);
      camera.aspect = innerWidth / innerHeight;
      camera.updateProjectionMatrix();
    });
  </script>
</body>
</html>

/wp-content/uploads/vrm/ に配置する

WordPressにFTPまたはホスティングのファイルマネージャーでアクセスして、次のように配置します：

/wp-content/uploads/vrm/
　├ vrm-viewer.html
　└ avatar.vrm

筆者の環境では、「WP File Manager」プラグインで新規フォルダvrmを作成して、ファイルを追加しました。

完成後、ブラウザで以下にアクセスして動作確認：

https://あなたのドメイン/wp-content/uploads/vrm/vrm-viewer.html

お疲れさまでした。VRMモデルが表示されればOKです！

WordPress記事・固定ページに埋め込む

WordPressのブロックエディタ（Gutenberg）で「カスタムHTML」ブロックを追加し、以下を貼り付けます。

<iframe src="https://あなたのドメイン/wp-content/uploads/vrm/vrm-viewer.html"
        width="100%" height="600" style="border:none;"></iframe>

これでページ内にVRMモデルが軽量に埋め込まれます。（PCでもスマホでもOK）
実際に埋め込んだ例が下記です。

操作方法：
・マウスの右クリックを押しながら移動すると、VRoidが回転します
・マウスの左クリックを押しながら移動すると、VRoidが移動します

パフォーマンスと安全性のポイント

項目推奨設定
CORS同一ドメイン内に置いているため安全。サブドメインには置かない。
キャッシュLiteSpeedやAutoptimize使用時は /uploads/vrm/ を除外対象に。
ファイルサイズ10〜30MB以下推奨。必要ならglTF圧縮（Draco）も検討。

まとめ

目的やること
表示/wp-content/uploads/vrm/vrm-viewer.html ＋ avatar.vrm
記事に埋め込み<iframe> で貼る
WordPress側設定キャッシュ除外・MIME許可
将来拡張音声連動や表情変更も three-vrm で可能

参考：公式ドキュメント

WordPress アバター
VRoid
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

hara | ai0w監修のアバター hara | ai0w監修

AIアーティスト | エンジニア | ライター | 最新のAI技術やトレンド、注目のモデル解説、そして実践に役立つ豊富なリソースまで、幅広い内容を記事にしています。フォローしてねヾ(^^)ﾉ

関連記事

コメント

コメントする

目次