1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

公式キャラクターをAIで3D風にして動かすまでにやったこと全部

1
Last updated at Posted at 2026-05-29

はじめに

私が所属するリビン・テクノロジーズには、不動産査定マッチングサービス「リビンマッチ」の公式キャラクターの「ター坊」がいます。
基本.jpg
【ター坊の元イラスト 出典 https://www.lvnmatch.jp/turbo/】

このキャラクターをアニメーションで動かしたいと思い立ち、試行錯誤した記録をまとめました。
結論から言うと、完璧な仕上がりではありません。
ただ、「2Dイラストをそのままアニメーション化しようとするとなぜうまくいかないか」「どう工夫すれば改善するか」について具体的な知見が得られたので共有します。

STEP 1:最初の失敗

まず、元の2DイラストをそのままAI動画生成サービスに読み込ませて動かそうとしました。
結果:うまくいきませんでした。
原因として考えられるのは、ター坊が架空のキャラクターである点です。

  • 頭の角のようなものが何なのかAIが判断できない
  • どこからが足なのかシルエットで読み取りにくい
  • 2Dイラスト特有のべた塗り・線画ではAIが奥行きや体の構造を推測しにくいのではないか

「AIが体の構造を正しく認識できていないから動きがおかしくなる」という仮説を立て、先に3D風の画像にしてから渡す方針に切り替えました。

STEP 2:3D風画像を作る

「3D風画像を中間ステップに挟む」方針に決めたものの、ここでもすぐにはうまくいきませんでした。

まずFireflyで試みる → 失敗

最初にAdobe Fireflyで3D風に変換しようとしました。結果がこれです。おそらくプロンプトが良くなかったとは思うのですが、なんで?という感じの仕上がりです。

【Fireflyでの失敗例】使用モデル:Nano Banana 2

注釈:「Nano Banana 2」はAdobe Firefly上で選択できる画像生成モデルです。

プロンプトをいくつか変えて試しましたが、いずれもター坊らしさが失われたり、立体感が出なかったりと思うような結果が得られませんでした。

プロンプトの精度の問題なのか、そもそも2Dイラストからの3D風変換がFireflyの得意領域ではないのか、判断がつきませんでした。

easemate.aiで突破口

Fireflyでの行き詰まりを受け、キャラクターを3D風に変換することに特化したサービスを探し、easemate.ai というサービスを試しました。

スタイルの選択肢がいくつかあり、その中からクレイピクサーの2種類を試しました。

【クレイスタイルの出力結果】 【ピクサースタイルの出力結果】

ピクサースタイルが最もター坊らしさを保てていました。

Fireflyで出なかった立体感が自然に表現されており、これを次のステップの素材として使うことにしました。
ただし、いくつかの箇所に問題が残っていました。

  • 膝から上の足の形がおかしい
  • ルーペを持つ手の指が5本にならない
  • 肘のジョイント部分の形が不自然

STEP 3:修正作業(FireflyとPhotoshop)

これらの問題箇所をAIを使って修正しようとしましたが、思った通りには直してくれませんでした。指示した箇所は直してくれないのに、別の箇所を意図しない形にしてくれたり。
例えばショートパンツの丈を長くしたり、脚を短くしようとしただけなのに↓こんな感じにしてくれたり

指示を変えながら試行しましたが、AIによる部分修正はコントロールが難しいと判断し、Photoshopで手動修正に切り替えました。
この程度の修正であればPhotoshopの方が思い通りに修正できます。

【Photoshopで修正した最終的な3D風画像】
なお、肘のジョイント部分だけは何度試みても納得のいく形にならなかったため断念しました。
どういうことかというと、肘部分に肘関節の白い球を当てがうのですが、動画にした時に関節と認識してくれなくうまくいきませんでした。
なので肘関節の白い球なしで、この画像を以降の作業の「基本素材」とします。

STEP 4:キャラクターシートを作る

3D風画像をベースに、正面・側面・背面を並べたキャラクターシートを作成しました。

STEP 5:アニメーション動画を作る

キャラクターシートと3D風画像を素材として、動画生成AIでアニメーションを実験しました。

歩行する動画

画面右端から中央に歩くように指示したのですが、画面の奥からこちらへ小走りに動いてしまいます。そして肘の位置にあった白い球体は、肘関節ではなく「ただの白いボール」と認識してしまいました。

割とうまくいった動画もあります。(ホワイトボードで説明する動画)
white_board.gif
これはあらかじめ動画の初めのコマと最後のコマを用意していたため

最初のコマの画像

最後のコマの画像

こちらの2つの動画は、ター坊の画像だけを使い、プロンプトだけで生成したものです。
Firefly A cute retro-futuristic mascot robot character with a smooth blue head featuring a small ant (1).gif

mp_.gif

やってみてわかったこと

プロンプトだけで動きを指定するのは難しい。
開始フレームと終了フレームの画像を両方指定する方法にしたところ、意図通りに仕上がる確率が上がりました。
終了フレームの画像作成にはFireflyが使えます。
「この姿勢で終わってほしい」というポーズをFireflyで生成し、それを終了フレームとして指定する流れです。
ただし、表情のコントロールは現状難しいです。
笑顔・驚き顔など、細かい表情指定は思った通りにならないケースが多いと感じました。

こちらの動画はfireflyを使ったのですが、ホワイトボードの場合と同じように最初のコマの画像と最後のコマの画像を用意して


プロンプトは以下を使用しました。
「開始画像の微笑んで立っている可愛い青い頭のロボットが、突然何かに驚いて空中に飛び上がり、終了画像のように目と口を大きく開けて手足を広げる。スムーズな3Dアニメーションの遷移。」

これは割といい感じに仕上がった動画です。最後のリビンマッチのロゴは、AIがアドリブで入れてくれたロゴなので、正規のロゴではありませんが。
アイデア_でプロトタイプ動画を生成して (online-video-cutter.com).gif

まとめ:工程の全体像

`元の2Dイラスト
↓ そのままアニメーション化を試みる → 失敗
↓ Firefly で3D風に変換 → 失敗
↓ easemate.ai(ピクサースタイル)で3D風に変換 → 概ね成功
↓ Firefly で部分修正 → 思い通りにならず
↓ Photoshop で手動修正 → 基本素材完成

├── キャラクターシート作成
└── 動画生成AI でアニメーション実験

得られた教訓

課題 対策
Fireflyの部分修正はコントロールしにくい Photoshopで手動修正する
プロンプトだけの動き指定は不安定 開始・終了フレームを画像で指定する
終了フレーム画像の作成 Fireflyで生成するとうまくいきやすい
表情の細かい制御 現時点では困難(断念)

今回の実験を通じて感じたのは、
「AIツールは万能ではないが、組み合わせ方次第でできることの幅が広がる」ということです。

特に2Dイラストを3D風画像に変換してから、次のAIに渡すという中間ステップは、架空キャラクターのAI処理において有効な手法だと感じました。

肘のジョイントや表情制御など、断念した箇所もまだありますが、AIツールの進化とともに再挑戦したいと思っています。
同じような試みをしている方の参考になれば幸いです。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?