こんにちは、いっとんです。

普段は保育士として働きながら、CodexなどのAIを使ってWebサイトや仕事を楽にするツールを作っています。

今回は、「AIで何か作りたいけれど、作り方もプロンプトも分からない」という人に向けて、自分がアバターカメラを作ったときの話を書きます。

制作にはFable 5を使いました。

先に結論を言うと、作りたいものを文章だけで完璧に説明する必要はありませんでした。

自分がAIに渡したのは、参考にしたい画面のスクショと、動きが分かる動画です。

あとは「これを作りたい」と伝えて、出てきたものを見ながら直していきました。

Xで見かけたアバターカメラがきっかけ

きっかけは、Xでアバターカメラを作っている人の投稿を見たことでした。

自分が話すと、画面のキャラクターも口を動かす。瞬きもする。

「動画講義で、スライドと一緒に使ったら面白そう」と思いました。

ただ、その時点では詳しい仕組みも、どう作ればいいかも分かっていません。

そこで投稿のスクショを撮り、動きが伝わるように動画も用意して、AIへ「こんなのを作りたい」と渡しました。

最初に渡したのは、長いプロンプトではなかった

AIへ細かな仕様書を書いたわけではありません。

「この見た目にしたい」

「話したら口が動くようにしたい」

「動画講義で使いたい」

言葉で伝えたのは、このくらいの完成イメージです。

説明しにくい部分は、スクショと動画に任せました。

自分は、文章を長く書くより、見本を見せた方がAIに伝わりやすいことが多いと思っています。

最初にできたものは、四角い枠付きだった

もちろん、最初から思いどおりの形になったわけではありません。

最初のアバターカメラは、キャラクターの周りに四角い枠が付いた状態でした。

自分が欲しかったのは、スライドの上にキャラクターだけが浮いているような見た目です。

そこで、完成した画面を見ながら修正を伝えていきました。

「これじゃないねん」を繰り返した

アップデートするときにしたことは、難しい技術指示ではありません。

「これじゃないねん」

「枠をなくしたい」

「キャラクターだけ浮かせたい」

出てきたものを見て、違うところをそのまま伝えました。

一度の指示で完成させるのではなく、AIが作ったものを見ながら、自分のイメージへ少しずつ近づける。

この進め方で、四角い枠をなくし、キャラクターが浮いて見えるところまで改善できました。

音を拾って口が動く仕組みにした

作ったアバターは、自分が話している音声を拾うと口が動きます。

音量に反応して口を開き、瞬きもします。

仕組みとしては、何枚かのキャラクター画像を重ね、状態に合わせて切り替えてアニメーションさせています。

今の状態でも話している雰囲気は出ますが、音量によって口が開きすぎることがあります。

口の開き方が違う画像を増やせば、もう少し細かな動きも作れそうです。ここは今後さらに試したいところです。

ブラウザ版ではなく、自分専用アプリにした

最初はブラウザで動かす方法も考えました。

ただ、Chrome上で実現しようとすると、使いたい機能に制限がありました。

そこで「自分しか使わない」「パソコンで動けばいい」と用途を絞り、デスクトップアプリにしてもらいました。

今はアイコンをクリックすれば起動できます。

多くの人が使えるサービスにする必要はありません。自分の目的を満たすだけなら、最初から小さく作った方が早いこともあります。

完璧な指示より、完成イメージを見せる

今回の制作で一番感じたのは、AIに伝える方法は文章だけではないということです。

作りたいものを見つけたら、まずスクショを撮る。

動きが重要なら、動画も見せる。

最初にできたものが違っていたら、「どこが違うか」を伝える。

専門的な仕様を最初から全部決めなくても、この繰り返しで形にできます。

自分が決めたことと、AIに任せたこと

今回、自分が決めたのは次の部分です。

  • 目的: 動画講義でスライドと一緒に使う
  • 見た目: 四角い枠をなくし、キャラクターだけを浮かせる
  • 動き: 音声に合わせて口を動かし、瞬きさせる
  • 使い方: 自分のパソコンだけで動けばよい

一方、具体的な実装やアプリ化はAIに任せました。

人が完成イメージと判断を持ち、AIに作業を渡す。この分担が、自分には一番やりやすいです。

まとめ

スクショと動画をAIへ渡し、「これを作りたい」と伝えるところから、アバターカメラを作りました。

最初は四角い枠付きでしたが、「これじゃないねん」と修正を重ね、キャラクターだけが浮く形までアップデートできました。

AIでものを作るとき、最初から完璧なプロンプトを書く必要はありません。

見本を見せる。まず作ってもらう。違うところを伝える。

この進め方なら、作り方を知らないものでも形にしていけます。

次は口の動きをもう少し細かくして、実際の動画講義で使ってみようと思います。

ではまた。