OBSのブラウザソースだけで動作する、軽量アバター表示ツールの解説記事です。
専用ソフト・カメラ不要 です。配布するHTMLファイルを読み込むだけで、声に合わせてイラストを動かせます。
・セキュリティについて： このモード中は、OBS内のブラウザが常にマイクを使える状態になります。本ツールの操作以外で、外部の知らないサイトを閲覧しないようご注意ください。（通常のアバター利用には問題ありません）
・AI補助について： 本ツールのスクリプト作成にはAIによる技術補助を利用しています。抵抗のない方のみご利用ください。
概要
OBSに搭載されたブラウザ機能を利用して、イラストを簡易アバターとして表示し、マイク音声に合わせて口パクやジャンプをさせるツールです。
- 必要なもの： OBS、配布HTMLセット、マイク
- 費用： 完全無料
- カスタマイズ： 自由（個人間共有OK、二次配布はご遠慮ください）
配布ファイルのダウンロード（無料）
2026/03/16 更新版をBOOTHに登録しました。ファイル一枚と、サンプル画像同梱されています。
導入方法（準備）
手順①：OBSを「マイク許可モード」で起動する設定
このツールを動かすために、OBSを特別なモードで起動するショートカットを作成します。
デスクトップにあるOBSのショートカットをコピーします。（通常起動モードと区別するため）
コピーしたアイコンを右クリック ＞ [プロパティ] を開きます。
[リンク先] の末尾に、半角スペースを空けて以下のコードを付け足します。
--use-fake-ui-for-media-stream例：
“C:…\obs64.exe” –use-fake-ui-for-media-stream
⚠️ セキュリティに関する注意点
このモードで起動すると、OBS内のブラウザが「マイクを常に自動許可」する状態になります。
本ツールの操作（対話パネル）を使って、外部の知らないサイトをネットサーフィンしない限り危険はありません。
アバターを使わない普段の配信や作業時は、通常のショートカットから起動することをおすすめします。
OBSへの読み込み方法
作成したショートカットからOBSを起動し、以下の手順で設定します。
ブラウザソースの追加：ソース欄の[＋] ＞ [ブラウザ] を選択し、好きな名前をつけます。
ファイルの指定：ブラウザでHTMLをダウンロードしたindex.htmlを開き、アドレスバーのURLをコピーして貼り付けてください。
※[ローカルファイル] で読み込んでも動作しないのでご注意。
サイズ設定：幅 1920 / 高さ 1080 （お好みで調整可）を入力します。
音声設定：「OBSで音声を制御する」のチェックを外して [OK] を押します。
以上で完了です。OBSのウィンドウ内でアバターが動いているはずです！
うまく動かないときは？
- 起動オプションを確認：ショートカットの末尾に
--use-fake-ui-for-media-streamが正しく入っているか、前後に半角スペースがあるか確認してください。 - マイクデバイスの確認：Windowsの設定で、マイクが「既定のデバイス」になっているか確認してください。
- 対話パネルを開く：ソースを右クリック ＞ [対話] を開き、「THRESHOLD（感度）」のスライダーを左に動かして反応するか試してください。
オリジナル画像への変更方法
同梱されている img フォルダ内の画像を差し替えるだけで、オリジナルキャラクターに差し替えができます。
画像ファイル一覧（以下のファイル名で画像を用意し、img フォルダへ上書きしてください）
- base.png：目と口を含めないベースイラスト（差分を使わない場合は目・口込みでOK）
- eye_1～3.png：目パチ用（1:開く / 2:中間 / 3:閉じる）
- mth_1～3.png：口パク用（1:閉じる / 2:中間 / 3:開く）
- sleep.png：居眠り・離席モード専用（看板などもOK）
画像作成時の注意点
サイズを統一する：すべての画像を同じ大きさ（例：1024×1024px）で作成してください。
位置を合わせる：パーツ画像は「ベースに重ねた時に正しい位置」になるよう、余白を含めた透明なキャンバスで保存するのがコツです！
1枚でもOK：目や口の差分がない場合は、設定で「停止」にすれば1枚絵で運用できます。
画像を入れ替えたら、OBSのソース一覧から「ブラウザソース」を右クリック ＞ [現在のページのキャッシュを更新] をクリックしてください。これで新しい画像に切り替わります。
各種設定（対話パネルから操作）
ソースを右クリック ＞ [対話]（操作） を開くと、リアルタイムで動きを調整できます。
| 設定項目 | 内容 |
|---|---|
| マイク感度 | 声に反応する境界線（赤い線）をドラッグして調整します。 |
| ジャンプ / ふわふわ | 喋った瞬間の「ぴょこっ」と、待機時の「ゆらゆら」の大きさを変えられます。 |
| 動作モード | 用意した画像の枚数に合わせて「3コマ / 2コマ / 停止」を選べます。 |
💤居眠り（無言）設定
設定した秒数、声が入らないと自動的に「居眠り状態」になります。
- 機能を有効にする：チェックを入れるとカウントダウンが始まります。
- 専用画像を使う：ONにすると
sleep.pngに切り替わります。OFFなら「閉じ目（eye_3）」で固定されます。 - 解除方法：マイクに向かって声を出すと、パッと目を覚まして通常モードに戻ります。
画像を入れ替えたら、OBSのソース一覧から「ブラウザソース」を右クリック ＞ [現在のページのキャッシュを更新] をクリックしてください。これで新しい画像に切り替わります。
設定はこれだけ！まずは触ってみて、自分だけのお気に入りの動きを見つけてみてください👍
2026/03/13 とりあえず公開。説明動画の作成・その他いくつかの更新予定ありです。
