見出し画像

【Google AI Studio】時短クッキング No.34:APNG形式のアニメが最短3分で作成できるAIアプリ

以前、LINEスタンプを手軽に作るアプリを公開しました。

こちらは静止画スタンプ用でしたが、いずれはアニメーションスタンプにも挑戦したいと考えていました。そこで今回、そのベースとなるアニメ作成ツールを作りました。
本アプリで生成したデータは、そのままLINEアニメーションスタンプとしては使用できません。




克服すべき3つの問題

AIでアニメを作ろうとすると、次のような問題があります。

  • 同じキャラクターを維持するのが難しい

  • たくさんの動画(フレーム)を生成するのが大変

  • スムーズな動きを付けることができない

「1. 同じキャラクターを維持する」問題については、1枚の画像に複数のバリエーションを描いてもらうことで、統一感を保つことができます。
この方法なら、生成する画像も1枚で済むため、2つ目の問題も同時に解決できます。

一枚の絵に複数バリエーションを描いてもらうことで、統一感のあるイラストが得られます。

スムーズな動きを求める場合は、Sora 2 のような動画専用AIが必要になります。そこで3つ目の問題については考え方を変え、動きが飛んでいる「パタパタアニメ」で十分と割り切ることにしました。
これで、すべての問題が解決です。

パタパタアニメでOK




最短3分でアニメが動きます

この仕組みをアプリ化したのが 「Anime Animator Studio」 です。
最短3分でパタパタアニメを作成でき、ある程度の柔軟性を持った編集も可能です。

Anime Animator Studio全体

主な機能

AIキャラクタージェネレーター
「青い髪の魔法使い」「サイバーパンクな猫」といった言葉を入力するだけで、高品質なキャラクターデザインを即座に生成します。もちろん、自作イラストをアップロードしてベースにすることも可能です。

マジック・スプライトシート生成
「歩く」「食べる」「寝る」といった定番動作から、「空を飛ぶ」「必殺技を放つ」といったカスタム指示まで、キャラクターの個性を保ったまま連続するアニメーションフレームを生成します。

インテリジェント・フレーム抽出
生成されたシートから、AIが各コマを自動検知します。背景の透過処理や、ステッカー向けの美しい白枠(アウトライン)の追加も、スライダー一つで完結します。

リアルタイム・プレビュー&APNG書き出し
調整したアニメーションは、その場ですぐにプレビュー可能です。完成した作品は、透過情報を維持したまま APNG(アニメーションPNG) として保存できます。

サンプル





基本的な操作方法

使い方の詳細です。

❶ キャラクターの登録またはAI生成

右上の「1. キャラクター」枠に、イラスト(PNG / JPG)をドラッグ&ドロップして登録します。
または、AIにキャラクターを生成してもらうことも可能です。
同じキャラクターで複数のアニメを作る場合は、キービジュアルを用意してD&Dするのがおすすめです。

プロンプトでキャラクターを作成した例

❷ 動作の生成と抽出

「2. 動作の生成と抽出」枠で、フレーム数と生成したい動作を選択し、「スプライトシートを生成」ボタンを押します。
動作はプロンプトで自由に指示することもできます。

動画枚数と動作を選択する。動作はプロンプト指示もできる。

❸ キャラクターの分割

画像が生成されたら、「設定を反映して再抽出する」ボタンを押します。
これにより、背景の透明化、白枠の追加、フレーム分割が行われます。

「設定を反映して再抽出する」ボタンを押す。
白枠の幅などの指示も可能。

❹ フレームの選定と並び替え

分割されたフレームはサムネール表示されます。
不要なフレームを除外したり、順番を並び替えたり、位置の微調整が可能です。
右上の3×3ドットボタンを使えば、すべてのフレームをまとめて位置調整できます。

動画の取捨選択と並び替えと位置の微調整などができる。

❺ 動画サイズ・アニメーション設定

サムネール編集は即座にプレビューへ反映されます。
再生速度(SPEED)の調整、動画サイズ、縮小率、余白、上下左右位置の調整が可能です。
また、「文字の挿入」機能では、全フレーム共通の文字を1か所追加できます。

アニメのプレビューと保存を行います。
文字を入れた例

❻ APNGアニメ生成とダウンロード

右下の「APNGアニメ生成」ボタンをクリックするとAPNGが生成されます。
完了後、「APNG保存(透過維持)」ボタンからローカルにダウンロードできます。

サンプル





なぜアニメGIFではないのか?

本アプリで作成できるのは APNG です。
Web用アニメ画像といえばアニメGIFが有名ですが、対応していません。理由は次の2点です。

  • LINEアニメーションスタンプが APNGのみ対応 しているため

  • Google AI StudioでアニメGIFが作成できなかったため

後者については、今後の課題です。

APNG(Animated PNG)とは?

PNG形式を拡張した、アニメーション対応の画像フォーマットです。
高画質・透過対応を維持したまま動かせるのが特徴で、GIFと違い色数制限がなく、輪郭やグラデーションを滑らかに表現できます。

APNGのメリットとデメリット

フルカラー・半透明表現が可能なため、イラストやUI、ステッカー用途に向いています。
一方で、ファイルサイズが大きくなりやすく、GIFほど広く対応していない点には注意が必要です。





スタンプ登録でエラーになる理由

本アプリで作成したAPNGを、そのままLINEアニメーションスタンプとして登録するとエラーになります。
これは、LINEの仕様が非常に厳格だからです。

フレーム数、再生時間、ループ設定、画像サイズ、ファイル構造などが細かく定められており、1つでも条件を満たしていないと登録できません。

LINEスタンプ専用仕様に最適化されたデータであることが、登録の必須条件です。

そのまま登録してもエラーになります。
サンプル(エラーくん)
※記事内で動いている絵はAPNGをGIFに変換したものです。





シェアURL

お試しください。





まとめ:初めて知りました

正直に言うと、APNGの存在はLINEアニメーションスタンプの仕様を調べて初めて知りました(遅い!)。
APNGを作るのも今回が初挑戦です。

どれくらい普及しているのかも正直よく分かっていませんが、主要なWebブラウザは対応しているようです。

ローコストかつ短時間で、サクサク動くアニメを作れるという点では、かなり手応えのある仕上がりになったと思います。

LINE向けに一発対応とはなりませんでしたが、いずれ対応予定です。

以上!

いいなと思ったら応援しよう!

ROROSUKE LABO 記事なり、プログラムなりが役に立ったと思った方は、 チップの応援よろしくお願いいたします。 次の開発もがんばろうかな、という気になりますのだ (笑)