非エンジニアがClaude Codeで口パクアバターを自作｜TikTokライブで使えるアプリが無料でできた体験談
こんにちは！マカロン屋4年目・Claude Code歴5か月のいろはです🍰
この記事は、コードを1行も書けない私が、AI（Claude Code＝話しかけるとコードを書いてくれる開発ツール）に「音声に合わせて口パクするアバターのアプリって作れる？」と聞いてみたら、TikTokライブで実際に使えるアプリが2〜3時間でできてしまった——その全記録です。
きっかけは前向きな理由ではなく、「顔出し配信をやめたかった」という小さな不安でした。でも作ってみたら、途中で何度もつまずいて、あきらめかけて、最後に「できた！」と声が出るくらい嬉しくて。技術記事というより、非エンジニアがAIと二人三脚でものを作った”体験談”です（完全な作り方マニュアルではなく、非エンジニアがどこまでできたかの記録として読んでもらえたら嬉しいです）。
- 顔出しをやめてアバター配信に切り替えた理由と、そのときの正直な気持ち
- 非エンジニアがAIに「どう頼んで」「何につまずいて」「どう直したか」の全工程
- できあがったアプリの機能と、TikTok LIVE Studioで映すまでの手順
- 自作と、無料のPNGTuberツール、あなたにはどっちが向いているかの判断材料
- AIでアプリを作るときに大事だと感じたコツ
💡実際に作ったアバターアプリはこれです↓（動画になっています）
- 記事に出てくる「Fable」「Opus」はAIモデルの名前です。配信に登場するキャラの名前ではありません。
- ここに書くのは私の環境での体験で、同じ結果を保証するものではありません。
- アバターにしても身元が完全に隠れるわけではありません（声・話し方・配信時間などから特定される可能性は残ります）。
- 「無料」はできたアプリのことです。Claude CodeなどのAIツールの利用料やパソコン代は、別にかかります。
▼顔出し配信からアバター配信に変えた理由
もともと私は、顔を出して配信していました。
でもあるとき、配信画面の顔をスクリーンショットして、自分のプロフィール写真にしている人（！？）がいることに気づいたんです。
誰かを責めたいわけではありません。
ただ、自分の顔写真が、自分の管理できない場所で使われる
——それが少し怖く感じました。
「これからも安心して配信を続けたい」と思ったとき、アバターに切り替えるのがいちばん自然な答えでした。
もうひとつ理由があって。私はゲーム配信もするのですが、画面に「誰かが喋っている」感じを出したかった。
声だけより、口が動くキャラがいると、配信がぐっとにぎやかになるんですよね。
いろはさんまた何か新しいことしてる（笑）
アバターって、専用のソフトとか高い機材がいるんじゃないの？
私もそう思っていました（笑）
でも今回は、無料で・自分のパソコンの中だけで・AIに頼んで作れちゃったので、順番に話しますね🙂↕️
▼今回のアプリ制作で用意するもの
- パソコン（いろははMacBookを使ってます）
- Claude Code（有料版）
まだパソコンやClaude Codeを使ったことのない人はこの記事からへーこんなもんなんだくらいでもわかるようになってます。どんな感じで作れるのか雰囲気だけでも感じ取ってもらえればと思います。
パソコン何を買って良いのかわからない人向けいろはのおすすめのパソコン↓（※この記事の作業だけなら、高性能なパソコンが必須とは限りません。これから買う方向けに、この作業なら十分なスペックの一例です）
※ ひとつ先に確認を。PCからのTikTokライブには、フォロワー数などの条件がある場合があります。作り始める前に、自分が配信できる状態か公式で確認しておくと安心です（条件は変わることがあります）。
▼AIに「口パクアプリってできる？」と頼んでみた
私が最初にClaude Codeへ送った言葉は、たったこれだけです。
「アバターに音声に合わせて口パクさせるアプリってできる？」
専門用語はゼロ。作りたいことを、そのまま日本語で伝えただけです。
手元にあったのは、口の形が少しずつ違うイラストが数枚（メガネの男の子のキャラ）。
実はこの「口違いの複数枚」があとで大活躍します。
AIからは、作り方の方向性として3つの選択肢を教えてもらいました。
ライブ配信で、無料で、リアルタイムに動かしたい。
私の希望に合うのは②でした。
ちなみにこの方式は「PNGTuber（ピングチューバー）」という、Vtuberの簡易版のような作り方だと、あとから知りました。できあがったアプリはMacの中（ブラウザ）だけで動きます。
▼一度詰まって、成果物を整理してFableで仕切り直した
ここが今回いちばん正直に書きたいところです。
最初はClaude OpusというAIモデルにお願いしていました。
でも、私の伝え方が悪かったのか、なかなか意図を汲み取ってもらえず、思うように進まなくて。正直、途中で「私にはやっぱり無理かも……」とあきらめかけました。
そこで、モデルをFableに切り替えて、ここまで作った成果物（作りかけのファイル）をいったん読み直してもらってから、もう一度お願いしてみたんです。
すると今回はスムーズに形になって——画面の中でキャラの口が声に合わせて動いた瞬間、思わず「できた！」と声が出ました。
念のため補足を。Fable（Claude Fable 5）は、執筆時点（2026年7月）でAnthropicの上位モデルのひとつです（※Fable 5は6月に輸出規制の影響で一時停止され、2026年7月1日に提供が再開されました。私が作業したのはその後です。無償枠の扱いや料金は時期によって変わるため（有料プランでの期間限定の無償枠なども案内されていました）、Opus 4.8より枠の消費が速い点も含め、最新は必ず公式でご確認ください）。ただ、今回うまくいった理由はそれだけではないと思っています。作りかけの成果物をいったん読み直してもらってから再挑戦したこと、私の指示との相性、切り替えたタイミングなど、いくつかの条件がかみ合った結果です。「このモデルにすれば誰でも必ずできる」というものではありません。詰まったら、モデルを変えてみる・前提を整理して仕切り直す——その両方が効いた、というのが正直なところです。
「モデルを変える」って素人でもできるの？
うん、設定で選んで相談するだけです。
難しく考えず「今のがしっくりこないな」と思ったら別のに変えてみる、くらいの感覚で大丈夫だったよ！
▼2〜3時間の試行錯誤で「配信できる形」になった
「一度で完成」ではありませんでした。
使ってみる→ここを直したい→直してもらう、の往復を何度も繰り返して、だいたい合計2〜3時間ほどで配信に使える形になりました。
印象に残っているつまずきを正直に3つ。
①動いているのに、動いて見えなかった
最初の版は「動かない」と感じました。
でも原因は、口の絵が切り替わるたびに画像を毎回読み込み直していたせいで、切り替わる一瞬だけ絵が消えてチラついていたからです。
最初に全部の絵を重ねておいて、表示だけを切り替える方式に変えてもらったら、ぬるっと動くようになりました。
→教訓：「動かない」ときは”どこで止まっているか”を見える化すると、一発で直ります。
②口の動きがカクカクした
なめらかさは、3つの合わせ技で出ました。
(1)隣り合う口の絵をふわっと混ぜる
(2)速く開いて・ゆっくり閉じる
(3)待機中もほんの少し揺らす。
人が喋るときの口に寄せると、一気に”生きてる感”が出ます。
③全画面にすると、口や目がズレた
これは「画面の枠」を基準に口や目を置いていたのが原因。基準を「絵そのもの」に変えてもらったら、全画面でもウィンドウを変えてもピタッと追従するようになりました。
ついでに目を左右べつべつに大きさ・回転で調整できるようにもしてもらって、つり目・たれ目のキャラにも合わせられます。
そして——実際の配信で使ってみたら、リスナーさんがすごく喜んでくれました。「口が動いてる！」って。作ってよかったな、と心から思えた瞬間です。
※実際はこんな感じでゲーム配信ができました↓
▼完成した機能と、TikTok LIVE Studioで映す手順
できあがったのはHTMLファイル（＝ブラウザで開ける、ページを表示するためのファイル）1枚だけ（口の絵などの画像は、このHTMLに読み込ませて使います）。
インストール不要で、ブラウザ（Chromeなど、ネットを見るソフト）だけで動きます。
外部のサービスにデータを送らない作りにしていて、私はセキュリティの専門家ではないので断言はできませんが、私が見た範囲では通信は確認されませんでした（＝基本は自分のパソコンの中だけで完結）。大事な素材を扱うときは念のため確認してください。主な機能はこんな感じです。
私はPCからの配信にTikTok LIVE Studio（TikTok公式のPC配信ソフト）を使っています（私はMacで使えています＝2026年7月時点。Mac版の提供状況は変わることがあるので、利用前に公式でご確認ください）。アバターを画面に乗せる流れはこうです。
- アプリをChromeで開き、背景を緑色にする
- TikTok LIVE Studioで「ウィンドウキャプチャ」（パソコンの画面を配信に取り込む機能）を追加し、Chromeの画面を選ぶ
- そのソースを右クリック→「クロマキー」（緑色を透明にしてアバターだけ残す機能）で緑色を透過
- アバターだけ残るので、配信画面で位置と大きさを調整
※ 背景を緑にして透過する都合上、緑色の服や小物は一緒に消えてしまうので避けてください。また、スマホだけのTikTokライブでは、こうした自作アバターは基本的に出せません（PCからの配信が必要です）。TikTok LIVE Studioの利用条件や機能は変わることがあるので、始める前に公式のヘルプで確認してください。
▼Geminiで作ったイラストを使うときの注意
今回のアバター画像は、私自身がGemini（画像生成AI）で作った素材を使っています。自分で生成した素材ですが、それだけで第三者の権利を侵害しないと保証されるわけではありません。公開前に、既存のキャラクターやロゴに似ていないかも確認しています。ここは正直にお伝えしたいのですが——
▼自作と、無料PNGTuberツール、どっちがいい？
あとから知ったのですが、口パクアバター（PNGTuber）を作る無料ツールは、すでにいくつもあります（PNGTuber Plus、Veadotube miniなど）。なので「とにかく早く始めたい」なら、正直そちらのほうが近道です。私の体験を踏まえて、ざっくり比べるとこう。
| 自作（今回） | 無料ツール | |
|---|---|---|
| 始めやすさ | 作る時間が必要 | すぐ使いやすい |
| 自由度 | 高い（欲しい機能を足せる） | ツールの範囲内 |
| 修正 | AIに頼んで変えられる | 仕様の範囲で |
| 費用 | 今回は無料 | 無料のものがある |
| 向いている人 | 作る過程も楽しめる人 | すぐ配信したい人 |
※無料ツール側は、私が実際に使って比べたものではなく、一般的な特徴を整理した表です。使うときは各ツールの最新情報も確認してください。
結論はシンプルで、「すぐ配信を始めたいなら既存ツール、自分専用の動きや画面がほしいなら自作」。そして「AIと一緒に作る過程そのものを楽しみたい」なら、今回みたいな自作はとても面白い体験になります。
- うまい指示文より、「試して直す」往復のほうが大事。使ってみて気づいたことを、そのまま伝えるのが近道でした。
- 詰まったら、前提と成果物を整理して仕切り直す。今回のOpus→Fableの切り替えが、まさにそれ。
- AIに任せる部分と、自分で確認する部分を分ける。「動いているか」「変な表示がないか」は、最後は自分の目で。
▼まとめ｜顔出しの不安をきっかけに、配信の楽しさを残せた
顔を出したくない、という小さな不安から始まったのに、気づけば自分だけの口パクアバターが、声に合わせて喋っていました。しかもコードは一行も書かず、AIとの会話だけで。
一般的な「PNGTuberの作り方」を知りたいだけなら、無料ツールのほうが早いです。でも、非エンジニアでもAIを使って、自分の配信に必要な道具を自分で作れる——それを試してみたい人には、今回の体験がきっと参考になるはず。詰まっても、あきらめず仕切り直せば、ちゃんとゴールにたどり着けました。あなたも、作りたいものを一度そのままAIに聞いてみてください🍰
▼よくある質問（FAQ）
Q.どのくらいの時間で作れましたか？
A. 使ってみて直す往復を含めて、だいたい合計2〜3時間ほどでした。ただし作りたい機能や進め方で変わります。
Q.OpusとFable、どちらが優秀ですか？
A. Fable（Claude Fable 5）は執筆時点でAnthropicの上位モデルのひとつで、私の環境では切り替えたらうまく進みました。ただ、作りかけの成果物を読み直して再挑戦したことも大きかったので、「モデルの優劣」だけの話ではないと感じています。進め方や相性もふくめた結果です。
Q.Geminiで作った画像は配信に使えますか？
A. 私は自分で生成した素材を使っています。ただし生成AI画像がいつでも自由に使えるとは限らないので、サービスの利用条件と配信先のルールを、利用する時点で必ず確認してください。
Q.アバターにすれば身元は完全に隠れますか？
A. いいえ。顔は映らなくなりますが、声・話し方・配信時間・背景などから特定される可能性は残ります。過度に安心しすぎないのが大切です。
▼あわせて読みたい
- Claude Fable 5を非エンジニア店主が使ってみた｜何が変わった？
- Claude Code × Cloudflare｜マカロン店主がLINEアプリを作った実装記
- Claude Codeの推奨Macスペックは？非エンジニア目線で解説
ご質問・ご相談はお気軽にどうぞ
お問い合わせはこちら
