MouthLoop 口パク(リップシンク)するキャラクターを作る無料Gemini Canvasアプリ
お知らせ
2026/7/29:解説動画を追加しました
2026/7/28:一部修正しました。当記事のリンクからアクセスできます。
iPadでWebPのエンコードができないというご報告をいただきました。ありがとうございます🙇🏻♂️いろいろ調べた結果、iPadではWebPの書き出しができないことが判明しました。APNGなど別の方法の書き出しにも対応することは可能ですが、iPadではSlideCast Studio上でAPNGも動きません。iPadで利用する場合(PCでも)は、WebPやAPNGよりも、6枚のPNGのZIPを音声連動にアップしてご利用いただく方が品質の高いリップシンクになるのでおすすめです。初期のMouthLoopでは6枚のPNGのZIPのダウンロード動線がいまいち分かりにくかったので修正版を出しました。この記事のリンクからアクセス可能です。それ以外にも分かりにくかった部分を改修委しています。
キャラクターにしゃべらせたい。でも口パク素材を1枚ずつ用意するのは大変…そんなときに使えるのが今回ご紹介する MouthLoop です。
画像1枚(またはAI生成)から、口と目の動きを揃えた PNG 6枚 と アニメーションWebP を作れます。作った素材は、そのまま SlideCast Studio にアップロードして使えます。
Gemini Canvasアプリなので共有リンクからアクセスしすぐに利用可能。作業もブラウザだけで完結します。インストールもアカウント登録も、APIキーの入力も不要です。
実際の使い方は以下の動画をご参照ください。

🎬 MouthLoopで作れるもの
MouthLoopのゴールは、次の2つのファイルです。
🖼 1. PNG 6枚セット(lipsync-pngs.zip)
「口を閉じる/半分開ける/開ける」×「目を開く/閉じる」の6パターンです。6枚すべてがまったく同じ位置・同じ構図に揃っているので、切り替えてもキャラクターがずれません。
音声に合わせて口を動かしたいときは、こちらを使います。
ZIPをそのままアップロード可能なので手間もかかりません。
こちらの方がより高品質なリップシンクが可能なので、基本的にはこちらがおすすめです。

🔁 2. アニメーションWebP(lipsync.webp)
口パクと瞬きが入った、24コマのアニメーション画像です。そのまま貼るだけで動きます。
アバターをループで動かしたいときはこちらを使います。
⚠️ iPadではWebPの書き出しができませんのでご注意ください

✅ 使う前に知っておきたいこと
🧰 必要なもの
Googleアカウント
元になる画像(なくてもOK。ツール内でGeminiに作ってもらえます)
下の共有リンクを開くだけで、すぐ使い始められます。
⚠️ 保存されないので注意
MouthLoopは、画像も入力内容もどこにも保存しません。ブラウザの中だけで処理しています。
そのぶん安心して使えますが、画面を閉じると作業内容はすべて消えます。完成したファイルは、必ずその場で保存してください。
🌐 日本語/英語を切り替えられます
画面右上と画面下部の JA / EN ボタンで表示言語を切り替えられます(既定は日本語)。

📱 スマホで使うときの注意点
スマホの場合は、Chromeブラウザ版のGeminiを使ってください。Geminiアプリの中だと、ファイルの保存がブロックされてしまいます。
🚀 使い方:全5ステップ
画面上部にステップの案内が出るので、上から順に進めていくだけです。

1️⃣ ステップ1:マスター画像を用意する
すべての元になる1枚(=マスター画像)を決めます。方法は2つです。
🅰 Geminiで新しく作る

フォームを埋めて生成ボタンを押すだけです。指定できるのは主にこのあたり。
キャラクター:大まかな種類(人/動物など)、性別・雰囲気、年代、髪型、髪色、肌の色、見た目の自由記述
服装・画風
参照画像(最大4枚):画像ごとに「見た目/服装/画風/配色」のどれを参考にするか割り当てられます
構図:顔・頭だけ/バストアップ(既定)/全身
表情:真顔/やさしい笑顔/自由指定
背景色:キャラクターに使われていない色を選びます
「プロンプトを表示」を押すと、実際にAIへ送られる文章をそのままコピーできます。他のAIサービスで画像を作りたいときにも使えます。
🅱 手持ちの画像を使う

自分で用意した画像を読み込む方法です。ドラッグ&ドロップや貼り付けにも対応しています。
読み込むと「この画像をどう使いますか?」と聞かれるので、3つから選びます。
そのまま使う:背景が透過、または外周がはっきりした単色のときに選べます
背景だけ整える:表情・角度・構図はそのままに、背景だけを単色に変えます
マスター向けに整える:正面向き・目を開く・口を閉じる、といったマスター向けの調整まで行います
写真や風景など複雑な背景の画像は「そのまま使う」を選べません。下の2つで背景を整えてから進んでください。
なお、AIで整える場合は顔・服・アクセサリーの印象が変わることがあります。元画像と並べて比較してから採用できるので、気に入らなければ元に戻せます。
✂️ 最後に、使う範囲を正方形に切り抜きます

枠をドラッグして位置を決め、四隅で大きさを調整します。中央に近づくと自動で吸着し、ガイドが緑色になります。矢印キーでの微調整もできます。
「この範囲で確定」を押せばステップ1は完了です。
2️⃣ ステップ2:口と目の表情をつくる
ボタンを1回押すだけで、必要な表情パターンがまとめて生成されます(最大3枚ずつ同時に処理されます)。

作り方は2種類から選べます。
通常(既定):5パターンを生成し、そのまま使います。まずはこちらでOKです
ちらつき修正(詳細):3パターンを生成し、口と目の範囲だけを差し替えます。仕上がりがちらつくときに切り替えます
生成中はいつでも「生成を中止」で止められます。画面にはこれまでの画像生成リクエスト数が表示されるので、どれくらい使ったかが分かります。
生成が終わったら、各プレビューで「口はちゃんと開いているか」「左右両方の目が閉じているか」「眉や髪、アクセサリーが変わっていないか」を目視で確認してください。気になるものは、カードごとの「再生成」で作り直せます。
3️⃣ ステップ3:6フレームを作る
「6フレームを作成・検証」を押すだけです。背景が透過処理され、6枚のPNGが組み上がります。

「ちらつき修正(詳細)」を選んだ場合は、その前に口・左目・右目の範囲を指定します。顔の上をドラッグして囲むだけです。小さめに囲むほど、顔まわりが安定します。

全身の構図では顔が小さくなるので、拡大表示(300%)を使うと合わせやすくなります。
4️⃣ ステップ4:6つの表情を確認する
できあがった6枚が並びます。ここで、表情がおかしくないかを目で確認します。

このステップでPNG 6枚のZIPを保存することもできます。
5️⃣ ステップ5:アニメーションを作って保存する
最後にアニメーションWebPを作ります。
PNG 6枚のZIPで十分という人はこのステップは不要です。

口パクの速さ:速い/標準/ゆっくり
保存品質:高いほどきれいですが、ファイルサイズも大きくなります
「WebPを作成」を押すとプレビューが表示されます。3ループ再生して、ずれや点滅がないかを確認してから保存してください。
問題なければ、lipsync.webp と PNG 6枚のZIP をそれぞれ保存します。
🎥 SlideCast Studioで使う
MouthLoopで作った素材は、SlideCast Studio にそのままアップロードして使えます。

SlideCast Studioは、スライドとナレーションから解説動画を作るツールです。そこにキャラクターを立たせて、しゃべっているように見せられます。MouthLoopは、そのキャラクター素材を用意するための道具、という関係です。
アップロード先は、SlideCast Studioの「キャラ設定」の中にあります。
🔁 アニメ画像として使う(lipsync.webp)
「キャラ設定」→「アニメ画像」にアップロードします。

こちらは常にループして動き続けるタイプです。ナレーションの内容に関係なく、一定のリズムで口パクと瞬きを繰り返します。
設定がいちばん簡単(1ファイル入れるだけ)
画面の隅にキャラを置いて、ずっと動かしておきたいときに向いています
🎙 音声連動として使う(PNG 6枚のZIP)
「キャラ設定」→「音声連動」にZIPのままアップロードします。

こちらはナレーション音声に合わせて口が動くタイプです。しゃべっているときは口が動き、黙っているときは口が閉じます。
「本当に話している」感が出る
解説動画やセリフの多い動画に向いています
より自然なリップシンク
MouthLoopのPNG 6枚は6枚とも位置が揃っているので、切り替わってもキャラクターの顔がガタつきません。
🤔 どちらを使えばいい?
迷ったら、次の基準で選んでください。
とにかく手軽に動かしたい → アニメ画像(WebP)
セリフに合わせて口を動かしたい → 音声連動(PNG 6枚)
MouthLoopは両方を同時に出力できるので、両方保存しておいて後から選ぶのがいちばん無駄がありません。
MouthLoopでは最後にアニメ画像(WebP)も音声連動(PNG 6枚ZIP)も両方ダウンロードできるので、基本はより自然なリップシンクとなる音声連動(PNG 6枚)の方が良いでしょう。

🔧 うまくいかないときは
🖼 背景が複雑で先に進めない
写真のような背景の画像は、そのままでは使えません。ステップ1で「背景だけ整える」または「マスター向けに整える」を選んでください。

✨ 仕上がりがちらつく
ステップ2で「ちらつき修正(詳細)」に切り替えて、口と目の範囲を指定し直してみてください。囲む範囲を小さめにすると安定します。


👀 目が片方しか閉じていない/表情が崩れる
そのカードの「再生成」を押してください。MouthLoopは表情の出来映えを理由に勝手に作り直すことはしません(勝手にAPIを何度も呼ばない設計です)。作り直すかどうかは、あなたの判断で決められます。

⏳ 生成に失敗する
しばらく時間をおいてから、もう一度試してください。利用上限に達している場合は、繰り返し押しても改善しません。
📐 出力サイズを大きくすれば高画質になる?
なりません。出力サイズ(512/768/1024px)は切り抜いた後の保存サイズを決める設定です。元画像や切り抜き範囲が小さい場合は引き伸ばしになるだけで、情報量は増えません。
小さいサイズを選ぶと、その分メモリとファイルサイズを節約できます。
📋 使うときの注意
画像はAI(Google Gemini)が生成します。生成結果をどこまで使ってよいかは、Googleの利用規約とご自身の用途に照らして確認してください
実在の人物になりすます目的での利用は避けてください
前述のとおり、画面を閉じると作業内容は消えます。完成ファイルは必ず保存してから閉じましょう
🎁 まとめ
MouthLoopは、「画像1枚 → 口パク素材」を5ステップで終わらせるツールです。
インストール不要・APIキー不要
アニメーションWebPとPNG 6枚を同時に出力
SlideCast Studioの「アニメ画像」「音声連動」にそのままアップロードできる
実際に作ってみると、数分で1キャラの素材が完成します。
いくらでも量産可能です。
SlideCast Studioをご利用いただいている方で、キャラの素材の準備に困っていた方は是非ご活用いただければと思います。
もちろんSlideCast Studio以外でも活用できるシーンがあれば利用してみてください。
いいなと思ったら応援しよう!
創作活動の継続のために
よろしければ応援お願いします!
いただいたチップはクリエイターとしての活動費に使わせていただきます!