Peraravatar+
ブラウザで PNGTuber を作ってOBS用に書き出すツール
オープンソース版の Peraravatar をベースに機能を追加したツールです。ブラウザでアバターを作り、1つの HTML に書き出して OBS のブラウザソースで使います。作り方は「各画像を用意する」と「1枚絵から作る」の2つです。「1枚絵から作る」では、ベースの1枚に目と口のパーツを重ねて瞬きと口パクを作ります。口パクは、「あいうえお」で口の形を変える「母音で決める」と、声の大きさで口の開き具合を変える「音量で決める」から選べます。装飾パーツ、カスタム表情、OBS のホットキー用スクリプトとドック（コントローラー）での表情の切り替えにも対応しています。
※ Peraravatar+ はオープンソース版の Peraravatar をベースに機能を追加したツールです。旧Peraravatarと違い、完成したアバターを1つの HTML にまとめてダウンロードできるので、PC操作に自信がない人でも簡単に OBS への組み込みができるようになりました。
特別な理由がない限り、Peraravatar+ の利用をおすすめします。
使い方の流れ
マイク許可 → 作り方を選ぶ → 口パクの決め方を選ぶ → 画像をアップロード → 母音の登録（口パクを母音で切り替える場合） → 動きを調整 → HTML で書き出し → OBS に組み込む
マイク
- マイク許可: マイクを使い始める。隣のプルダウンで使用するマイクを選ぶ（デフォルトは
既定のマイク） - 書き出した HTML は、ここで選んだマイクを名前で探して使います（見つからなければ Windows の既定のマイク）
- 音量: 今の音量。目盛りはしきい値
- 自動調整: 無音と話し声を測って、しきい値を自動で決める
- 音量テスト: マイクを使わず、手動で音量を動かして口パクを確認（「音量で決める」のときだけ）
- 母音の登録: あいうえおを1音ずつ発声して、自分の声の母音を覚えさせる（口パクを母音で切り替える場合に登録）
- 右端に、今の音量で出る口（
口: 閉じるなど）と今の声の母音（母音: あなど）が出ます
自動調整
- 部屋の音を測ります: 話さずに、そのまま待つ
- 声を測ります: バーが伸びている間、いつもの配信の声で話し続ける
- 結果: メーターの青い目盛りが新しい値。よければ「適用」
口パクの段階・大声リアクション・各表情の発火音量をまとめて変えます。済んだらボタン名が「再調整」になります。
母音の登録
「あー」「いー」「うー」「えー」「おー」と1音ずつ伸ばして発声します。「登録の結果」に発声した声を正しく判定できた割合が出るので、よければ「適用」。済んだらボタン名が「母音の再登録」になります。
作り方を選ぶ
違うのは瞬き・口パク・表情の作り方です。
| 作り方 | 用意する画像 |
|---|---|
| 各画像を用意する | 通常・瞬き・口パク… それぞれ1枚ずつ |
| 1枚絵から作る | ベースの1枚 ＋ 目と口のパーツ |
「1枚絵から作る」では、カスタム表情も目と口のパーツの組み合わせで作れます（表情ごとに1枚の画像を使うこともできます）。装飾パーツ は「1枚絵から作る」だけで使えます。
口パクの決め方
| 決め方 | 説明 |
|---|---|
| 母音で決める | 「あいうえお」で口の形を変えます。口を開けるかどうかは音量で決めます。使う前に、メーターの下の「母音の登録」で自分の声を登録してください（登録するまで口は「あ」の形で動きます） |
| 音量で決める | 声の大きさで口の開き具合を変えます。口の画像を段階ごとに用意し、各段階の値（その口を出す音量の下限）で出し分けます。「自動調整」で段階の値をまとめて決められます |
「画像」タブの「口パク」には、どちらの作り方でも次の数値が並びます。
| 項目 | 説明 |
|---|---|
| 無音とみなす上限 | この値を下回る音量は無音扱いで、口を閉じます |
| 口の形を変える間隔 (秒) | 口の形を変えたあと、この時間は次に変えません |
| 音量への追従 (%) | 音量で決めるときだけ表示。100 なら音量どおりの段階、0 なら話している間はランダムな段階を出します |
音量で決めるときは、段階1 の値が「無音とみなす上限」を兼ねます。これを下回る音量では口を閉じます。
各画像を用意する
用意する画像
推奨画像仕様:
- サイズ: 600 × 900 〜 1080 × 1620px（縦長 2:3 比率）
- 形式: 背景が透明な PNG または WebP（JPEG と BMP は背景を透明にできません）
- PNG / JPEG / BMP は取り込み時に自動で最適化します
- 「位置と大きさ」で、画像ごとに位置と大きさを調整できます
画像をまとめてドロップ
ファイル名に次の語（アンダーバーやハイフンで区切った語）が入っていれば、自動的に割り振ります（大文字小文字は区別しません。複数当てはまるときは、表の並び順で上にあるものから優先されます）。
| 対象画像 | ファイル名の語 |
|---|---|
| 口「あ」〜「お」（母音で決める） | mouth_a / mouth_i / mouth_u / mouth_e / mouth_o |
| 口 段階1〜9（音量で決める） | mouth1〜mouth9（mouth_1 mouth-1 も可） |
| 口 段階1（音量で決める） | mouth_o / mouth_u |
| 口 段階2（音量で決める） | mouth_i / mouth_e |
| 口 段階3（音量で決める） | mouth_a |
| 口 いちばん大きい段階（音量で決める） | open（口を開けた画像） |
| 口「あ」（母音で決める） | open（口を開けた画像） |
| 瞬き（閉じた目） | blink / close / eye_closed / 瞬き / まばたき / 目閉 / 閉眼 |
| よそ見（左） | left / 左 |
| よそ見（右） | right / 右 |
| 通常 | normal / default / base / idle / closed（口を閉じた画像） / 通常 |
| カスタム表情 | 上のどれにも当てはまらないもの（ファイル名が表情の名前になります） |
各画像のボタン
| ボタン | 動作 |
|---|---|
| 位置と大きさ | 画像の位置を調整する |
| クリア | 画像を未設定に戻す |
| プレビュー | 動きを止めて、その画像だけを表示 |
動きを止めて確認する: 並んだボタン（通常・瞬き（閉じた目）・口など）を押すと、動きを止めて、その画像だけを表示します。選んだボタンをもう一度押すか、アバターの上の「プレビューを解除」で解除します。
口パク
- 母音で決める: 口「あ」〜「お」の5つ
- 音量で決める: 口 段階1〜。各段階の値（
音量 ≥）は、その口を出す音量の下限です（小さい順に並びます）。1つの段階に画像を複数入れると、その中から選んで出します。「+ 段階を追加」で増やせます
1枚絵から作る
ベースの画像
この1枚に、目と口のパーツを重ねて瞬きと口パクを作ります。顔が小さい全身の画像では作れません（目の幅が 40px 以上ある画像が目安）。
ベース・よそ見・表情の画像をまとめてドロップ
重ねるパーツ（目・眉・口）はここでは入れられません。下の「重ねるパーツ」に入れてください。left / right / 左 / 右 が入っていればよそ見になります（例: normal_left はよそ見（左））。
| 対象画像 | ファイル名の語 |
|---|---|
| ベースの画像 | normal / default / base / idle / closed（口を閉じた画像） / 通常 |
| よそ見（左） | left / 左 |
| よそ見（右） | right / 右 |
| カスタム表情 | 上のどれにも当てはまらないもの（ファイル名が表情の名前になります） |
mouth や close などの名前の画像は、この作り方では使わず、「各画像を用意する」用の画像として保存します。作り方を「各画像を用意する」に切り替えればそのまま使えます。
ベースの画像の状態
| 状態 | 説明 |
|---|---|
| のっぺらぼう | 目も口も描いていない画像を使います |
| 目と口が描かれている (※非推奨) | 描かれている目と口を肌の色で隠してから、パーツを重ねます。 ※ ベースの画像によっては綺麗に隠せません |
目と口の位置
「眉を別で動かす」にチェックを入れると、見出しが「目・眉・口の位置」になり、左眉・右眉も並びます。
- 「再指定」（未指定なら「指定」）を押すと、アバターの上に枠が表示されます
- パーツを置きたい所を端から端へドラッグします。枠の中心にパーツを置き、幅に合わせて大きさを決めます
- 枠が出ている間は、丸いハンドルで大きさ・傾き・高さを調整できます（Esc で指定を解除）。ホイールで拡大縮小、何もない所のドラッグで画面を動かせます
- 調整が終わったら、アバターの上か、その部位のボタンの「調整を終了」を押して、編集画面を閉じます
- 「左目」「右目」は、キャラクターから見た左右ではなく、画面を見ているあなたから見た左右です
- 編集画面の上の「全体」「顔」「−」「+」で表示の大きさを変えられます（「顔」は顔の位置まで拡大）
眉を別で動かす
- のっぺらぼうのベースに眉の画像を重ねて、表情や瞬きで目とは別に動かします
- 目の画像に眉を描いているとき、ベースに眉が描かれているときはチェックしないでください
左目・右目・口（眉を別で動かすときは左眉・右眉も）
- 「位置と大きさ」で、
位置X (px)/位置Y (px)/幅 (px)/高さ (px)/傾き (度)を数値で直せます - 「削除」でその位置を消します
- 左右をそろえる: 左目と右目（眉を別で動かすときは左眉と右眉も）を左右対称にそろえる。大きさと高さは左右の平均、傾きは鏡写しにし、左右の位置はそのまま
- 位置をすべて削除: すべての位置を消す（パーツの画像とよそ見の設定は残ります）
目と口を隠すときの肌の色
ベースの画像の状態が「目と口が描かれている (※非推奨)」のときに出ます。
- 元の目と口をこの色で塗りつぶしてから、パーツの画像を重ねます
- 髪や眉がかかっていない肌を選んでください（「肌の色」の「指定」を押し、画像の上をクリック）
- 枠の外側は、この色に近いところにだけ塗ります（眉や髪は消えません）
- 縁のぼかし (px) で塗った縁をぼかします
重ねるパーツ
重ねるパーツの画像
- 形式: 透過PNG / WebP
- 大きさ: 150 × 150 〜 300 × 300px の正方形。パーツはだいたい中央に配置
- 指定した枠の幅に合わせて拡大縮小します。引き伸ばすと粗くなります
- 枠に合わせて自動で配置します。左右・上下・大きさは画像ごとに「位置と大きさ」で調整できます
- 目と眉は、画像を入れると「左右どちらの目（眉）か」を確認する画面が出ます。オッドアイや片目が潰れているなどの非対称な目でない限り、片目だけ用意すれば足ります
- 画像が入っていないパーツは使用されません
画面の「重ねるパーツの画像」の説明の下にある「パーツのテンプレートをダウンロード (psd)」から、重ねるパーツの画像を描くための PSD ファイル（300 × 300 の正方形）をダウンロードできます。
| 項目 | 説明 |
|---|---|
| 目を左右別に指定する（オッドアイ・片目が潰れているなど） | チェックを入れると、目が「あなたから見て左の目」と「あなたから見て右の目」に分かれます |
| 開いた目 | 片目ぶんの画像で、両目に使います。ベースの画像の状態が「目と口が描かれている (※非推奨)」のときは、入れなければベースの画像をそのまま使います |
| 半開き | 「+ 目の画像を追加」で増えます。片目ぶんの画像で、両目に使います |
| 閉じた目 | 片目ぶんの画像で、両目に使います |
| 眉 | 「眉を別で動かす」のときだけ表示。片方の眉の画像で、両方に使います |
| 瞬きで眉を下げる (%) | 「眉を別で動かす」のときだけ表示 |
| 閉じた口 | 口を閉じているときの画像 |
| 口「あ」〜「お」 | 「あいうえお」それぞれの口の画像 |
| 項目 | 説明 |
|---|---|
| 目を左右別に指定する（オッドアイ・片目が潰れているなど） | チェックを入れると、目が「あなたから見て左の目」と「あなたから見て右の目」に分かれます |
| 開いた目 | 片目ぶんの画像で、両目に使います。ベースの画像の状態が「目と口が描かれている (※非推奨)」のときは、入れなければベースの画像をそのまま使います |
| 半開き | 「+ 目の画像を追加」で増えます。片目ぶんの画像で、両目に使います |
| 閉じた目 | 片目ぶんの画像で、両目に使います |
| 眉 | 「眉を別で動かす」のときだけ表示。片方の眉の画像で、両方に使います |
| 瞬きで眉を下げる (%) | 「眉を別で動かす」のときだけ表示 |
| 閉じた口 | 口を閉じているときの画像 |
| 口 段階1〜 | 声の大きさごとの口の画像。「+ 口の画像を追加」で増えます |
各パーツのボタン
| ボタン | 動作 |
|---|---|
| プリセット | デフォルトプリセットから選ぶ。半開きでは「元の目を潰す」で、開いた目を潰して半開きにできます |
| 位置と大きさ | 画像の位置を調整する |
| クリア | 画像を未設定に戻す |
| プレビュー | 動きを止めて、その画像だけを表示 |
動きを止めて確認する: 並んだボタン（通常・閉じた目・閉じた口・口など）を押すと、動きを止めて、その画像だけを表示します。選んだボタンをもう一度押すか、アバターの上の「プレビューを解除」で解除します。
重ねるパーツをすべて削除: 重ねるパーツの画像をすべて消す（目と口の位置は残ります）。
口パク
| 項目 | 説明 |
|---|---|
口 段階1〜（音量 ≥） | 音量で決めるときだけ表示。上で入れた口の画像を、どの音量で出すかを決めます |
よそ見
必要に応じて設定してください。「よそ見（左）」「よそ見（右）」にチェックを入れて使います。カードの右上に「プレビュー」があります。
「作り方」で、パーツを組み合わせるか1枚の画像を使うかを選びます。
| 項目 | 選択肢 |
|---|---|
| 目 | そのまま / 目を追加 |
| 左目 / 右目（目を追加） | 瞳の向きがそろうよう、左目と右目（あなたから見た左右）を別々に入れます |
| 口 | そのまま / 口を追加 |
追加した目と口の画像には「プリセット」「位置と大きさ」「クリア」があります。
| 項目 | 説明 |
|---|---|
| 画像 | カードの左の枠に、よそ見の画像をクリックかドロップで入れます |
画像を入れると、カードの右上に「位置と大きさ」「クリア」が出ます。
装飾パーツ
「1枚絵から作る」のときに使えます。
- メガネ・猫耳・ヘアピンなどの画像を、好きな位置に重ねます（8個まで。形式は透過PNG / WebP）
- ベースの画像と同じ大きさの画像は、描いた位置にそのまま置きます
- 「切り替え画像」はその装飾パーツの画像と同じ大きさで用意してください
- 一覧で下にあるものほど手前に重なります（「上へ」「下へ」で並べ替え）
配置
「+ 装飾パーツを追加」で追加するか「配置」を押すと、アバターの上で直接動かせます。
| 操作 | 動作 |
|---|---|
| クリック | パーツを選ぶ |
| ドラッグ | 移動。顔の中心線・目の高さ・他のパーツの中心に近づくとピンクのガイド線が出て、その位置に合わせます |
| 角の四角をドラッグ | 大きさ（縦横比はそのまま） |
| 下の丸をドラッグ | 傾き |
| 赤い十字をドラッグ | 動きの中心（揺れや回転の軸） |
Shift + ドラッグ | 移動は縦か横だけ、傾きは 15° ずつ |
Alt + ドラッグ | ガイドを無視して移動 |
↑ ↓ ← → | 1px 移動 |
Shift + ↑ ↓ ← → | 10px 移動 |
Delete | 選んだパーツを削除 |
Esc | 調整を終了 |
調整が終わったら、アバターの上か、そのパーツのボタンの「調整を終了」を押して、編集画面を閉じます。
カードの項目
| 項目 | 説明 |
|---|---|
| 重なり | ベースの後ろ / 顔のパーツの前 |
| 表示 | 常に / 指定したカスタム表情の間。「指定したカスタム表情の間」にすると、チェックしたカスタム表情の間だけ表示します（怒った表情のときだけ 💢 を出す、など） |
| 左右対称に置く | 対になる位置に配置します |
| 位置と大きさ | 位置X (px) / 位置Y (px) / 大きさ (倍) / 傾き (度) |
| 動き | 動きの表 |
| 体の動きについてくる（揺れもの） | 揺れやすさ |
| ぽよん（体の動きで弾む） | 弾みやすさ / 柔らかさ / 伸び縮みの強さ (%) |
| 切り替え画像 | 「配置」「位置と大きさ」「クリア」「プレビュー」 |
| 切り替え方 | しない / ときどき（平均間隔 (秒)・間隔をランダムにする・表示する時間 (秒)） / 喋っている間 / 指定したカスタム表情の間（カスタム表情） |
動き
| 動き | 動き方 | 数値 |
|---|---|---|
| なし | 動かない | |
| ゆらゆら | 動きの中心を軸に、左右に揺れる | 振れ幅 (度) / 周期 (秒) / 周期をランダムにする |
| くねくね（しなって揺れる） | 動きの中心を付け根にして、先へ行くほど遅れて大きくしなる（しっぽなど） | 振れ幅 (度) / 周期 (秒) / 周期をランダムにする |
| ぴくっ（ときどき） | ときどき、ぴくっと動く | 振れ幅 (度) / 間隔 (秒) / 間隔をランダムにする |
| 声に合わせて揺れる | 声が大きいほど大きく揺れる | 振れ幅 (度) / 周期 (秒) / 周期をランダムにする |
| ぶんぶん（喋ると振る） | 喋っている間だけ振る | 振れ幅 (度) / 周期 (秒) / 周期をランダムにする |
| ぴくっ（指定したカスタム表情になったとき） | チェックしたカスタム表情になったとき、ぴくっと動く | 振れ幅 (度) / カスタム表情 |
| ぴくっ（瞬きのとき） | 瞬きのとき、ぴくっと動く | 振れ幅 (度) |
| ふわふわ（上下に浮く） | 上下にゆっくり浮き沈みする | 上下の幅 (px) / 周期 (秒) / 周期をランダムにする |
| バウンス（軽く上下に弾む） | 上に跳ねては戻るを繰り返す | 上下の幅 (px) / 周期 (秒) / 周期をランダムにする |
| 震える（細かく揺れる） | 上下左右に小刻みにずれる | 動く幅 (px) |
| どくどく（大きさが脈打つ） | 動きの中心を軸に、大きさが脈打つ | 大きさの幅 (%) / 周期 (秒) / 周期をランダムにする |
| くるくる（回り続ける） | 動きの中心を軸に回り続ける | 1周の時間 (秒) / 逆回り |
「指定したカスタム表情」を条件にする選択肢は、画像かパーツの入ったカスタム表情が無いと選べません。
「装飾パーツをすべて削除」で全部消します。
カスタム表情
笑い・泣き・怒りなど、好きな表情を割り当てられます。「+ 表情を追加」で追加します。
- キーのボタンを押してから、割り当てたいキーを押します（Backspace で割り当てなし、Esc で中止）。H（メニューの表示切り替え）と Y（よそ見）は割り当てられません
- ここで割り当てたキーは、OBS のホットキーとは別です
デフォルトでは びっくり（Z・リコイル（後ろに引く））/ 笑い（X・バウンス（軽く上下に弾む））/ 泣き（C・震える（細かく揺れる））が入っています。
カードの項目
| 項目 | 選択肢 |
|---|---|
| 動作（キーのボタンの右） | 動かない / ホップ（上に跳ねる） / リコイル（後ろに引く） / 震える（細かく揺れる） / バウンス（軽く上下に弾む） / ゆらゆら（左右に揺れる） / うなずく（縦に振る） / 首を振る（横に振る） |
| 保持 | 押している間だけ / もう一度押すまで / 指定した秒数だけ（表示する時間 (秒)） |
| 音量で発火 | 発火しない / 超えた瞬間に一度だけ（1秒） / 超えている間ずっと |
| 発火音量 | 音量がこの値を超えると発火 |
| 音声パターン | 「🎤 録音追加」で音声パターンを記録。複数登録可、どれか一致で発火 |
| 一致の厳しさ | 音声パターンを録音したときだけ表示。値が大きいほど、よく似ていないと発火しません |
カードの右上に「プレビュー」「削除」があります。動作の細かい動きは 動きタブ の「表情の切り替えと動作」で調整します。
作り方
「1枚絵から作る」では、「作り方」でパーツを組み合わせるか1枚の画像を使うかを選びます。「各画像を用意する」では1枚の画像だけです。
| 項目 | 選択肢 |
|---|---|
| 目 | そのまま / 通常の目を変形 / 目を追加 |
| 変え方（通常の目を変形） | 大きく開く（びっくり） / 細める（眠い）、変える量 |
| 眉（眉を別で動かす） | そのまま / 通常の眉を変形 / 眉を追加 |
| 変え方（通常の眉を変形） | 上げる / 下げる / 困り眉 / 怒り眉、変える量 |
| 口 | そのまま / 口を追加 |
追加した目・眉・口の画像には「プリセット」「位置と大きさ」「クリア」があります。
| 項目 | 説明 |
|---|---|
| 画像 | カードの左の枠に、表情の画像をクリックかドロップで入れます |
- 画像を入れると、カードの右上に「位置と大きさ」「クリア」が出ます
- 1枚の画像の表情を出している間は、口パクと瞬きが止まります
動きタブ
アバター全体の動きです。装飾パーツの動きは「画像」タブの各パーツで決めます。
| 見出し | 項目 |
|---|---|
| 呼吸 / 揺れ | 呼吸の上下幅 (px) / 呼吸の周期 (秒) / 左右揺れの幅 (px) / 左右揺れの周期 (秒) |
| ぽよん | しない / 喋るたび / 喋っている間ずっと / 声の大きさに合わせて 伸び縮みの強さ (%) / 跳ねる高さ (px) / 柔らかさ |
| 瞬き | 最小間隔 (秒) / 最大間隔 (秒) / 目を閉じている時間 (秒) |
| 喋っている間の首かしげ | 最大角度 (度) / 切り替えの間隔 (秒) / 追従の速さ |
| 何もしていないときの視線の揺れ | 横移動の幅 (px) / 周期 (秒) / 始まるまでの無音 (秒) |
| 大声を出したときのリアクション（一瞬拡大） | 発火音量 / 拡大の強さ (%) |
| よそ見 | 最小間隔 (秒) / 最大間隔 (秒) / 表示する時間 (秒) / 首かしげ角度 (度) |
| おねむ状態 | おねむ開始 (秒) / 完全就寝 (秒) / 呼吸の大きさ (倍) |
| 表情の切り替えと動作 | 切り替えのフェード (秒) 各カスタム表情のカードで選んだ動作の細かい動き: ホップ / リコイル / 震える / バウンス / ゆらゆら / うなずく / 首を振る |
- ぽよん: 喋るとお餅のように伸び縮みして弾みます
- 大声を出したときのリアクション: 大声を出した瞬間、アバターが一瞬だけビクッと大きくなります。発火音量は、ぽよんと装飾パーツの声に合わせた動きにも使います
- よそ見: 黙っている間、ときどき自動でよそ見します。Y キーを押すと、いつでもよそ見します
- おねむ状態: 無音が続くと徐々に瞬きが長くなり、最終的に目を閉じっぱなしになります
- 表情の切り替えと動作: 表情とよそ見に切り替わるとき、前の画像から短くフェードします（0 で一瞬で切り替え）
書き出しタブ
HTML 書き出し
- アバターを HTML で書き出し: 今の状態を1つの HTML（
peraravatar-plus-avatar.html）に書き出します。書き出した後のHTML内では調整できません。OBS への入れ方は OBS への組み込み - 背景をそのまま書き出す: 書き出した HTML の背景は自動的に透明になります。チェックを入れると、ヘッダの「表示設定」で選んだ背景のまま書き出します（単色で書き出して OBS 側で色を抜くときなど）
- 書き出す前に確かめてほしいこと（母音が未登録・見本の画像を使っている・キーの無い表情など）があれば、確認が出ます。確認事項を無視する場合は「このまま書き出し」で書き出せます
配信中に表情を切り替える
OBS のホットキー用スクリプトを書き出し: OBS のホットキーで表情を切り替えるスクリプト（peraravatar-plus-hotkeys.lua）を保存します。使い方は 配信中に表情を切り替える
設定の移行・バックアップ
別の端末に設定を移すときや、ブラウザのデータが消えたときに備えて、設定をファイルに保存できます。
- JSON をファイルで書き出し:
peraravatar-plus-config.jsonを保存。選んでいない方の作り方の画像と設定など、画面に出ていない情報もすべて入ります - JSON / HTML ファイルを読み込み: 保存した JSON か、書き出したアバターの HTML から読み込みます。今の設定と画像を、選んだファイルの内容に置き換えます。HTML から読み込むと、書き出したときの作り方の画像と設定だけが戻ります
URL パラメータ
書き出した HTML の URL の末尾に付けて使います。
| パラメータ | 説明 |
|---|---|
?custom=z | Z キーに割り当てた表情を固定で表示（デフォルトではびっくり） |
?custom=笑い | 表情の名前でも指定できます |
?controller | ボタンで切り替える |
OBS への組み込み
-
HTML を書き出す: 「書き出し」タブの「アバターを HTML で書き出し」
-
OBS の起動フラグ: マイクを使うには、OBS の起動フラグ
--use-fake-ui-for-media-streamが必要です。OBS のショートカット (デスクトップ等) を右クリック → プロパティ →「リンク先」を以下のように編集。"C:\Program Files\obs-studio\bin\64bit\obs64.exe" --use-fake-ui-for-media-stream --autoplay-policy=no-user-gesture-required
「作業フォルダー」が空の場合は
C:\Program Files\obs-studio\bin\64bitを設定。このフラグがないとブラウザソースのマイク許可が降りません。 -
「ブラウザ」ソースを追加: 「ローカルファイル」にチェックを入れず、URL 欄に書き出した HTML の場所を入れます（チェックするとマイクが使えません）
-
URL の書き方:
C:\Users\…\peraravatar-plus-avatar.htmlではなく、先頭にfile:///を付けて\を/にしたfile:///C:/Users/…/peraravatar-plus-avatar.htmlの形で書きます -
大きさ: OBS のブラウザソースの縦横比をアバターと同じにすると、余白のない大きさになります（「書き出し」タブに今の画像の大きさが出ます）。装飾パーツがベースの画像の外まで動くときは、その可動域の分だけ左右と上に透明な余白ができます
マイクは、編集画面で選んだものを名前で探して使います（見つからなければ Windows の既定のマイク）
配信中に表情を切り替える
OBS のブラウザソースはキーボードの入力を受け取らないので、次の方法で切り替えます。
ゲーム中に切り替える
- 「書き出し」タブの「OBS のホットキー用スクリプトを書き出し」で
peraravatar-plus-hotkeys.luaを保存 - OBS の「ツール → スクリプト」で追加すると、「設定 → ホットキー」に表情ごとの項目が並びます。割り当てたキーは OBS を操作していなくても効きます
- デフォルトでは
Ctrl+Shift+1〜8に表情、Ctrl+Shift+9によそ見、Ctrl+Shift+0に表情を解除が入ります（「設定 → ホットキー」で変えられます）
カスタム表情を追加したり削除したり名前を変更した場合は、peraravatar-plus-hotkeys.lua も更新が必要です。再度書き出して古い peraravatar-plus-hotkeys.lua を上書きし、「ツール → スクリプト」で再読み込みしてください（割り当てたキーは残ります）。
ボタンで切り替える
OBS の「ドック → カスタムブラウザドック」に、ブラウザソースの URL の末尾に ?controller を付けたものを入れると、表情のボタンが並んだ操作パネル（Peraravatar+ コントローラー）になります。
file:///C:/Users/…/peraravatar-plus-avatar.html?controller
コントローラーのドックは、通常のドックと同じように好きな位置にセットできます。
- 押すとその表情に切り替わり、もう一度押すと戻ります
- 「表情を解除」「よそ見 (Y)」のボタンもあります
- ドックのエリア内のどこかをクリックしてから、ボタンに書いてあるキーを押しても切り替えられます
- 右上に
アバターに接続済みと出ていない場合は、設定がうまくいっていません - ブラウザで開いても OBS のアバターには届きません。OBS のドックから操作してください
間違ってコントローラーのドックを閉じてしまった場合は、「ドック」メニューの下に追加されているので、そこから開きます。
多言語 / 表示設定
ヘッダ右上から切り替えます (すべてlocalStorageに永続化):
- 言語: 日本語 / English — 画面の文言に反映。書き出したアバターの HTML・コントローラー・OBS のスクリプトは、書き出したときの言語になります
- テーマ: ダーク / ライト / ファンシー / 手芸 — 編集画面自体の配色 (アバターには影響しません)
- 表示設定: 「メニューの表示」に 文字サイズ (90% / 100% / 110% / 125% / 150%) / メニュー位置 (右 / 左)、「背景（透過確認用）」に 背景タイプ (透明（OBS用） / チェッカー柄 / 単色) / 背景色
データ保存
- 設定と画像はブラウザに自動で保存されます
- ↶ 元に戻す / ↷ やり直し:
Ctrl+Z/Ctrl+Y - リセット (初期化): すべての設定（画像を含む）を今の作り方の初期状態に戻します。母音の登録とマイクの選択は残ります
- バックアップは 設定の移行・バックアップ
ショートカット
| キー | 動作 |
|---|---|
| カスタム表情に割り当てたキー | その表情 |
H | メニューの表示切り替え |
Y | よそ見 |
Ctrl+Z / Ctrl+Y | 元に戻す / やり直し |
Esc | 指定を解除・調整を終了・隠したメニューとヘッダを出す |
装飾パーツの配置中のショートカットは 装飾パーツ を参照。
クレジット表記
本ツールを配信や個人プロジェクトで使う場合、クレジット表記は必須ではありません。ですが、表記してもらえると制作の励みになります。
標準フォーマット
Peraravatar+ by Ichigyun https://gyungyun.com/works/peraravatar-plus
短縮フォーマット
アバター: Peraravatar+ (gyungyun.com) / @zkmy_kuro
汎用ガイドは トップページのクレジット表記 を参照。