Peraravatar+で配信用アバターを作る手順

皆さん、めっちゃカメレオンで遊びましたか？このゲームで隠れるために、スポイトで周りの色を取って自分に塗るという『周りに馴染むためのお絵描き』のテクニックを磨いた人も多いかと思います。まさか暗がりに隠れて黒く塗るだけのシャバ僧はいませんよね？ AI で生成した画像に自分で手を加えて違和感が無いように馴染ませるのに、まさにこのテクニックが生きてきます。お絵描きソフトの最低限の使い方さえお勉強すれば、AI + 加筆修正で自分だけのアバターを作り上げるだけの力を、あなたはきっと手に入れています。このゲームで遊んでいない人も、諦めずにチャレンジしてみてください。関係ありませんが、私はこのゲームで観察力があがったので他のゲームでのアイテムの見落としが減りました。ありがとうめっちゃカメレオン。

めっちゃカメレオン 自分を塗って、景色に溶け込め！『めっちゃカメレオン』は真っ白な自分の体に絵を描いてステージに擬態する新感覚かくれんぼゲームです。 Steam (store.steampowered.com)

それでは本題に入ります。

全体の流れ

Peraravatar+ のアバターの作り方は2つあります。

作り方	用意する画像	向いている人
1枚絵から作る	目と口のないベースの画像1枚と、目と口のパーツ	少ない画像で作りたい人。メガネや猫耳などの装飾パーツも使える
各画像を用意する	通常・瞬き・口の形ごとの画像	目と口だけでなく、顔全体を描き分けたい人

この記事は「1枚絵から作る」の手順です。

「1枚絵から作る」では、ベースの画像に目と口のパーツを重ねて瞬きと口パクを作ります。ベースの画像は、目と口を描いていない「のっぺらぼう」がおすすめです。

1. キャラクターを生成する
2. 背景を透明にする
3. 目と口を消して、のっぺらぼうにする
4. Peraravatar+ に入れて動かす

のっぺらぼうを作るところまでは共通です。そこから先は3つに分かれます。

	すること	向いている人
初級編	目と口をプリセットから選ぶ	まず動かしてみたい人
中級編	目と口のパーツを自分で用意する	キャラクターに合った目と口にしたい人
上級編	胸とアクセサリーを揺らす	もっと動きを付けたい人

初級編で一度動かしてから、中級編で目と口を差し替える順番がおすすめです。上級編の揺れは、どちらの後からでも足せます。

用意するもの

• 画像を生成できるもの: ChatGPT、PixAI、SeaArt、自分の PC の ComfyUI など、画像さえ生成してくれるなら何でも構いません
• お絵描きソフト: CLIP STUDIO PAINT、FireAlpaca、アイビスペイント、SAI など、レイヤーと透明を扱えて、psd を開けるものなら何でも大丈夫です
• Peraravatar+: ブラウザで開くだけで使えます

自分の PC で生成する方法は、こちらにまとめています。

自分のPCにAI画像生成環境を構築する手順 Windows の PC に ComfyUI を入れて AI 画像生成を始めるまで。導入の 2通りの方法、モデルの選び方とライセンス、ノードの組み方まで。 GyunGyun×Create (gyungyun.com)

ベースの画像

項目	目安
向き	縦長（2:3）
大きさ	600 × 900 〜 1080 × 1620px
形式	背景が透明な PNG か WebP
顔の大きさ	目の幅が 40px 以上あること。全身の画像では顔が小さすぎるので、胸から上が目安
顔	目と口を描いていない（のっぺらぼう）のがおすすめ

あくまで目安として上記を提示していますが、正方形でも多少横長でもアバターにできます。綺麗に表示できない可能性があるという点だけ留意しておいてください。

キャラクターを生成する

あとで目と口を差し替えるので、正面を向いて、顔がまっすぐの画像を作ります。顔が傾いていたり横を向いていたりしてもアバターは作れますが、左右の目や眉をそれぞれ調整する必要が出てくるので調整の手間が増えます。

入れておきたい指示	文章で書く	タグで書く	理由
胸から上	胸から上を写す	upper body	顔を大きく写す
正面	正面を向いてこちらを見ている	looking at viewer, facing viewer, straight-on	パーツを重ねやすくする
口を閉じる	口を閉じている	closed mouth	閉じた口をそのまま使える
単色の背景	背景は無地の白	simple background, white background	背景を消しやすくする

• ChatGPT のように文章で頼むものは「文章で書く」の列、PixAI や SeaArt のようにタグで書くものは「タグで書く」の列の書き方が効きます
• 手描き調整を可能な限り減らしたい場合はアニメ塗りの絵柄にしておくと、修正が多少楽になります

この記事では、ChatGPT で生成した次の画像を例に進めます。

背景を透明にする

お絵描きソフトで用意した画像の背景を消し、背景が透明な PNG で書き出します。背景が単色の方が作業がしやすいです。

ComfyUI を使っている人は、BiRefNet で背景を消すと少し作業が楽になります。背景を消すワークフローを置いておきます。ダウンロードしたファイルを ComfyUI の画面へドラッグすると開きます。

download JSON 背景を消すワークフロー 画像を読み込んで BiRefNet で背景を消し、透明な PNG で保存します。ComfyUI の画面にドラッグすると開きます bg-remove-workflow.json (3.6 KB)

手で直すときは、画像に使われていない色相の濃いめの色で塗りつぶしたレイヤーを、下に置いて作業します。消し忘れた所や、透明にしすぎた箇所が見えやすくなります。 消しゴムのアンチエイリアスはオンにした方が消したところと線の境目の違和感が少なくなります。

のっぺらぼうにする

お絵描きソフトで、目と口を肌の色で塗りつぶします。元の画像は残しておきます（中級編で、目と口のパーツを作るのに使います）。

1. 元の画像を複製して、複製した方で作業する
2. 目の周りの肌の色をスポイトで取って、目と口を塗る
3. 目に髪の毛がかかっている箇所は、髪の色をスポイトで取って同じように塗る
4. 塗った箇所をぼかして、周りと馴染ませる
5. PNG で書き出す

片目を消すまでの流れです。もう片方の目と口も、同じように消します。

ここまでで、のっぺらぼうのベースの画像ができました。ここから、デフォルトプリセットを使う初級編と、自分でパーツを用意する中級編で分かれます。もっとこだわりたい人は、どちらかの完成後に上級編まで進んでください。

初級編: プリセットで動かす

目と口には、デフォルトプリセットが入っています。ベースの画像を入れて、目と口の位置を指定するだけで動きます。眉は、ベースの画像に描かれたものをそのまま使います。

マイクを許可して声を登録する

1. Peraravatar+ を開き、「マイク許可」を押してマイクを使えるようにする
2. 「自動調整」を押して、部屋の音といつもの配信の声を測る。結果がよければ「適用」を押す
3. メーターの下の「母音の登録」で、自分の声で「あいうえお」を登録する

ベースの画像を入れる

1. 画像タブの「作り方を選ぶ」で「1枚絵から作る」を選ぶ
2. 「ベースの画像」の枠に、のっぺらぼうにする前の元の画像をドロップする。描かれている目と口に合わせて位置を指定してから、のっぺらぼうの画像に差し替えます
3. 「ベースの画像の状態」は「のっぺらぼう」のままにする

目と口の位置を指定する

1. 「眉を別で動かす」のチェックを外す。見出しが「目と口の位置」になり、眉の枠がなくなる
2. 「目と口の位置」の各部位の「再指定」を押す。アバターの上に、最初から置かれている目と口の枠が表示される
3. 枠をドラッグして、元の画像に描かれている目と口の上へ動かす
4. 丸いハンドルで大きさと傾きを合わせる。目なら目頭から目尻までの幅にする
5. 左右の目を指定したら、「左右をそろえる」で大きさと高さをそろえる
6. 眉との位置関係がおかしくないように、目の位置と傾きを調整する。元の絵が少し傾いているときは、眉に合わせて違和感がない程度に傾ける
7. 終わったら「調整を終了」を押す
8. 「ベースの画像」を、のっぺらぼうの画像に差し替える。差し替えても、指定した位置はそのまま残る

「左目」「右目」は、キャラクターから見た左右ではなく、画面を見ているあなたから見た左右です。

プリセットを選ぶ

「重ねるパーツ」の各パーツの「プリセット」を押すと、選べる目と口が並びます。

パーツ	選べるもの
開いた目 / 閉じた目	開いた目と閉じた目 5種ずつ
閉じた口 / 口「あ」〜「お」	16種

• 各パーツの「位置と大きさ」で、位置・大きさ・傾きを調整できます
• 「重ねるパーツ」の先頭の「動きを止めて確認する」で、瞬きや口の形を止めて確認できます。止めている間は、アバターの上の「顔」や「+」で拡大して確かめられます

目の色を合わせる

プリセットの目の色を変更してキャラクターの目の色に合わせます。

1. 「開いた目」の「色」を押して、「色を個別に指定」を選ぶ
2. 色相 (度) を動かして、近い色にする
3. 彩度 (%) と 明るさ (%) で、色の濃さと明るさを調整する

• プリセットの他の目（半開き・閉じた目など）は、デフォルトで「通常の目と同じ」が選ばれるので、自動的に開いた目と同じ色になります
• オッドアイなら「目を左右別に指定する」にチェックを入れて、左右の開いた目にそれぞれ色を指定します

書き出す

1. マイクに向かってしゃべり、口の形が変わるのを確かめる
2. 書き出しタブの「アバターを HTML で書き出し」で保存する

書き出した HTML を OBS に入れる手順は、ドキュメントのOBS への組み込みで確認してください。

中級編: パーツを自分で用意する

プリセットの目と口だと選択肢が少ないです。せっかくなのでそのキャラクター専用のものに差し替えたいですよね？眉もパーツにして、驚いたときに眉を上げるなど、目とは別に動かせるようにします。のっぺらぼうにする前の元の画像から切り出したり加筆したりしてパーツを作ります。

眉も消す

のっぺらぼうのベースの画像から、目と口と同じ手順で眉も塗りつぶします。

用意するパーツ

パーツ	必須	作り方
開いた目	○	元の画像から切り出す
閉じた目	○	開いた目に重ねて描く
閉じた口	○	元の画像から切り出す（口を閉じて生成した場合）
口「あ」〜「お」	○	閉じた口に重ねて描く
眉	○	元の画像から切り出す
半開きの目		瞬きをなめらかにしたいとき。開いた目に重ねて描く
よそ見の目		よそ見を使うとき。開いた目の瞳だけを左右に動かして作る
おねむの目		おねむ状態で瞬きと別の目を使いたいとき。閉じた目に重ねて描く
おねむの口		おねむ状態で閉じた口と別の口を使いたいとき。閉じた口に重ねて描く

• 元の画像に左右の目が描かれているときは、左右の目をそれぞれ切り出して使います。片目を反転して使うより、バランスがよく見えます。眉も同じです
• 目を最初から自分で描くなら、片目だけでもOKです。もう片方は左右を反転して使います
• プリセットの目を使わずによそ見を使うときは、よそ見の目も用意します。よそ見（左）とよそ見（右）のそれぞれに、左目と右目の画像が必要です
• 全部用意するのが面倒な時は、閉じた目や一部の口はプリセットから選んで使うのも手です

作り方は2通り

パーツの作り方は、元の画像から切り出すか、テンプレートに描くかの2通りです。

作り方	使うパーツ
元の画像から切り出す	元の画像があるとき（おすすめ）。閉じた目や口「あ」〜「お」も、元の画像の上に描いてから切り出す
テンプレートに描く	元の画像が無いときや、パーツを最初から自分で描くとき

元の画像から切り出す

元の画像の上で作業します。テンプレートは使いません。開いた目・閉じた口・眉は元の画像に描かれているものをそのまま使い、閉じた目と口「あ」〜「お」は元の画像の上に別のレイヤーで描きます。顔を見ながら描けるので、位置や大きさを合わせやすくなります。わざわざ300 × 300に拡大する必要はなく、パーツが収まる 150 × 150 〜 300 × 300 の正方形で問題ありません。

1. 元の画像のレイヤーで、左目の周りだけを選択範囲でざっくり囲んでコピーし、貼り付ける。元と同じ位置に、別のレイヤーとして貼り付けられます
2. 右目・口・眉も同じように、パーツごとに別のレイヤーにする。眉も左右それぞれ分けます
3. 必要なら、パーツ周辺の肌や髪を、アンチエイリアスをオンにした消しゴム(もしくは描画色を透明色にしたブラシ)で消す
4. 足りないパーツ（閉じた目と口「あ」〜「お」）は、レイヤーを追加して描く
5. 新しいキャンバス（150 × 150 〜 300 × 300 の正方形）を開き、パーツを1つずつコピーして貼り付け、それぞれ透過PNGで保存する

同じ部位のパーツを同じ選択範囲で切り出すと、画像の大きさと位置がそろいます。多少ずれても、「位置と大きさ」で後から調整できるので、厳密に合わせなくても大丈夫です。

元から描かれている目の切り抜きは、色を変更する予定がなければ、周りの肌を綺麗に消さなくても問題ありません。「位置と大きさ」で元の目の位置に合わせて重ねれば、残った肌は下のベースの画像に馴染みます。

テンプレートに描く

パーツの画像は、300 × 300 の正方形の中央にパーツを置くのが目安です。テンプレートに合わせて作れば、Peraravatar+ が目や口の枠の大きさに合わせて配置します。

1. 必要なら「重ねるパーツの画像」の説明の下にある「パーツのテンプレートをダウンロード (psd)」からテンプレートをDLする
2. お絵描きソフトでテンプレートを開き、パーツをテンプレートの中央に描く
3. 透過PNG で書き出す

同じ部位のパーツは、なるべく同じ大きさと位置で作ります。開いた目と閉じた目で大きさがずれると、瞬きのたびに目の位置が動いて見えます。大きさは Peraravatar+ で調整はできますが、元のサイズがあまりに違うと画像の粗さが異なるので気になるかもしれません。1つのファイルの中で部位ごとにレイヤーを分けて、それぞれのサイズを確認しながら描くと大体揃います。

閉じた目・あいうえおの口・よそ見の目を描く

元の画像か、テンプレートの上に新しいレイヤーを追加して描きます。開いた目や閉じた口を下敷きにします。

閉じた目

開いた目のまつげの位置と長さに合わせて、元の目からスポイトで色を取りながら閉じた目を描きます。元の目のまぶた以外を消して、自由変形する方法もあります。元の目の上下中央の位置に置きます。片目だけ描いても、左右とも描いても構いません。片目だけなら、もう片方は左右を反転して使います。

口「あ」〜「お」

閉じた口と同じ位置を基準に、開き具合を変えて描きます。「あ」は大きく、「い」は横に広く、「う」は小さくすぼめ、「え」は「い」より少し開け、「お」は縦に丸くします。最低限でよければ「あ・え」「う・お」を同じ口で代用してもそんなに違和感はないです。口を描く時は、目のレイヤーを表示した状態だと調整しやすいです。

よそ見の目

瞳とそれ以外でレイヤーを分けて、瞳の位置を左右に動かします。白目などの足りない部分は描き足します。

描き終えたら他のレイヤーを非表示にして、パーツごとに PNG で書き出します。

Peraravatar+ に入れる

1. 「ベースの画像」を、のっぺらぼうにする前の元の画像に戻す
2. 「目と口の位置」で「眉を別で動かす」にチェックを入れる。見出しが「目・眉・口の位置」になる
3. 左眉・右眉の「再指定」を押して、元の画像に描かれている眉に枠を合わせる
4. 「ベースの画像」を、眉まで消したのっぺらぼうに差し替える
5. 「重ねるパーツ」の「目を左右別に指定する」にチェックを入れる
6. 「重ねるパーツ」の各パーツの枠に、作ったパーツを入れる
7. 目と眉は、入れるときに「左右どちらの目か」を聞かれるので答える
8. 各パーツの「位置と大きさ」で、ずれを調整する

上級編: 胸とアクセサリーを揺らす

胸は「胸の揺れ」で、ベースの画像そのものを揺らします。イヤリングやチョーカーの飾りなどのアクセサリーは、装飾パーツにして揺らします。

揺らすアクセサリーを消す

装飾パーツで揺らすアクセサリーは、ベースの画像からも消します。消さずに重ねると、揺れたときに下から元のアクセサリーが見えてしまいます。

のっぺらぼうにしたときと同じ要領で、のっぺらぼうのベースの画像から、揺らしたいアクセサリーを塗りつぶして消します。消したら、「ベースの画像」を差し替えます。今回は元の画像サイズだと服の袖が途切れていたので、画像サイズを広げて袖も描き足しました。

ベースの画像の大きさが変わると、確認の画面が表示されます。この例では袖を描き足して画像の幅が 1024px から 1200px に広がり、絵が右に 88px ずれたので、目・眉・口の位置も絵に合わせて動かします。

1. 確認の画面で「まとめて移動」を押す。ベースの画像の上に目・眉・口のパーツが表示され、全体を囲む四角が表示される
2. 今回は高さは変わっていないので → キーで、目・眉・口のパーツが顔の位置に合うまで右に動かす（Shift を押しながらで 10px ずつ）。何 px ずれたのか分かっている場合は「まとめて移動」の下に表示される全体の移動座標で直接入力した方が早いです
3. 終わったら「調整を終了」を押す

胸を揺らす

胸の揺れは、枠の中のベースの画像をゆがめて揺らします。胸の画像を別に用意する必要はありませんが、こだわりがある人は胸を別パーツにして、胸が揺れたときに見え隠れする服を描き込むという手法もあります。

1. 画像タブの「胸の揺れ」で、「左胸」の「指定」を押す
2. 胸の端から端へドラッグして囲む（目や口の位置と同じ）。「左右対称にする」にチェックが入っていれば、右胸の枠も反転した位置にできる。中心線が必ずしも胸の中央にあるとは限らないので場合によっては左右別で調整します
3. 枠の周りに点線が表示される。枠の中は形を保ったまま動き、点線の箇所までが伸び縮みする。揺れてほしくない髪や腕が点線にかからないよう、枠の大きさを合わせる
4. 終わったら「調整を終了」を押す

揺れ方は、次の6つで決めます。

項目	説明	今回
弾みやすさ	大きいほど大きく揺れる	38
揺れの周期 (秒)	1回揺れるのにかかる時間	0.55
揺り返し (%)	最初の揺れのあと、反対側にどれだけ揺れ返すか	30
上への揺れ (%)	上に揺れるときに、下に揺れるときの何割動くか	60
ハリ (%)	上げるほど胸は形を保ったまま動き、下げるほど胸そのものが伸び縮みする	90
左右のずれ (秒)	左右の胸が揺れるタイミングのずれ。どちらが先に揺れるかは、揺れるたびに変わる	0.02

胸が大きいほど、揺れの周期を長く、上への揺れを小さくすると、ゆっくり重たそうに揺れます。

アクセサリーを揺らす

中級編の「元の画像から切り出す」と同じ要領で、揺らしたいアクセサリーを切り出して、装飾パーツに入れます。

1. 元の画像のレイヤーで、揺らしたい箇所（イヤリング・チョーカーの飾りなど）を選択範囲で囲んでコピーし、貼り付ける。パーツごとに別のレイヤーにする
2. イヤリングの前に髪が掛かっているときは、その髪も別のパーツとして切り出す。髪に隠れていたイヤリングの部分は描き足して、1つのイヤリングにする
3. パーツが収まる新しいキャンバスを開き、パーツを1つずつコピーして貼り付け、それぞれ透過PNGで保存する。装飾パーツは基本的に拡大縮小しないので、切り出したままで保存します。今回はどれも中級編と同じ 200 × 200 に収まりました
4. 画像タブの「装飾パーツ」で「+ 装飾パーツを追加」を押し、保存した画像を入れる。「重なり」は「顔のパーツの前」のままにする
5. 前に掛かる髪のパーツは、イヤリングのあとに追加して、イヤリングより手前に重ねる（一覧で下にあるものほど手前）。髪のパーツには動きを付けない
6. 追加したパーツは両目の間あたりに置かれ、そのままアバターの上で動かせる。ドラッグして元のアクセサリーがあった位置に合わせ、赤い十字（動きの中心）を揺れの付け根に動かす。あとから動かすときは「配置」を押す
7. 終わったら「調整を終了」を押す
8. イヤリングとチョーカーの飾りは、「体の動きについてくる（揺れもの）」にチェックを入れる。体が動くと、遅れて揺れる

揺らし方は3通りあり、一緒に使えます。

• 「体の動きについてくる（揺れもの）」: 体の動きに遅れて揺れる。「揺れやすさ」で揺れの大きさを決める
• 「ぽよん（体の動きで弾む）」: 体の動きで弾む
• 「動き」: 体の動きと関係なく揺らす。「ゆらゆら」は左右に揺れ、「くねくね（しなって揺れる）」は先へ行くほど大きくしなる

今回は次のようにしました。

パーツ	揺れもの	ぽよん	動き
イヤリング	揺れやすさ 15	弾みやすさ 20・柔らかさ 0・伸び縮みの強さ 0	ゆらゆら（振れ幅 2 度・周期 2 秒・周期をランダムにする）
チョーカーの飾り	揺れやすさ 45	なし	なし
前に掛かる髪	なし	なし	なし

動きの種類と数値は、ドキュメントの装飾パーツに一覧があります。

動きの中心を揺れの付け根に置く

装飾パーツは、赤い十字の「動きの中心」を軸にして揺れます。揺れもの・ゆらゆらは動きの中心を軸に回り、くねくねは動きの中心を付け根にしてしなり、ぽよんで伸び縮みするときも動きの中心が基準になります。

追加したばかりのパーツは、動きの中心が画像の下の真ん中にあります。イヤリングのように上から吊り下がっているものをそのままにすると、下の端を軸に揺れて、耳に掛かっている箇所が耳から離れてしまいます。

赤い十字をドラッグして、揺れの付け根に動かします。

• イヤリング: 耳に掛かっている箇所
• チョーカーの飾り: チョーカーとの接合部
• 前に掛かる髪: 動きを付けないのでそのまま

さらに作り込む

• カスタム表情: 驚いた目や笑った口を足して、キーを押したときに切り替えます。目は重ねるパーツの目から選ぶこともできるので、片目だけ閉じた目にすればウインクになります
• よそ見: ときどき横を見る目を入れます
• おねむ: 黙っている時間が続いたときの、眠そうな目と口を入れます
• 装飾パーツ: 揺れもの以外に、メガネや猫耳を重ねたり、特定の表情のときだけ「！」や「？」などを追加したりといった使い方もできます

詳しくはドキュメントを確認してください。

まとめ

• 下準備: キャラクターを生成して背景を消し、目と口を塗りつぶしてのっぺらぼうにする。ここまではどの段階でも共通
• 初級編: 目と口の位置を指定してプリセットを選ぶだけで、瞬きと口パクをするアバターになる
• 中級編: 元の画像から目・眉・口を切り出し、閉じた目とあいうえおの口を描き足して、キャラクターに合った顔にする
• 上級編: 胸は胸の揺れで、アクセサリーは装飾パーツで揺らす。装飾パーツはベースの画像から消し、動きの中心を付け根に置く
• 背景が透明の画像に、Windows の「フォト」は使わない。縁が黒ずむ

ぜひ Peraravatar+ を使いこなして、理想の配信用アバターを作ってみてください。

Peraravatar+ 1枚絵から瞬きと口パクを作れる無料の PNGTuber。「あいうえお」で口の形を変える口パク、装飾パーツ、カスタム表情に対応。書き出した HTML を OBS のブラウザソースに入れるだけで使えます。 GyunGyun×Create (gyungyun.com)

他に追加してほしい機能があれば、お問い合わせフォームから気軽にお問い合わせください。