これまでStamp Studioでは、生成AIで作った動画やスプライトシート、連番画像からコマを取り出し、アニメーションスタンプへ仕上げる方法を用意してきました。
今回は、そこにもうひとつの作り方を加えてみることにしました。文字をぽんっと跳ねさせたり、ハートを揺らしたり、星をふわっと舞わせたり。グラフィックそのものに動きを付けて、キャラクターの画像と組み合わせる方法です。
まだ試験的な機能なので、本体の制作画面とは別に、「秘密のラボ」として実装しています。まずは気軽に触っていただき、使い勝手や動作に問題がなければ、本体の機能にも組み込んでいきたいと考えています。
動画から動きを取り出す。文字や図形から動きを作る。
動画を使う方法では、すでに映像の中にある動きをコマとして取り出し、背景や再生時間を整えてAPNGにします。言い換えると、フレームをもとに組み立てるアニメーションです。キャラクターが手を振る、振り返るといった動きを素材にできます。
ラボで試しているのは、文字や図形に動きを付けるモーショングラフィックスという考え方です。文字や形、色、大きさ、動き方などの設定から、アプリの中でアニメーションを組み立てます。
文字の動きに注目すると「キネティック・タイポグラフィ」、設定やルールから動きを作る仕組みに注目すると「プロシージャル・アニメーション」とも呼べます。この記事では、文字や図形を動かす表現として「モーショングラフィックス」と呼んでいきます。
たとえば、同じキャラクター画像に、跳ねる「ありがとう」と舞い落ちるハートを重ねる。「おつかれさま」の文字をゆっくり揺らす。キャラクターの絵を毎回描き直さなくても、言葉や装飾の動きで気持ちを表せそうです。
動画から作る方法と、グラフィックから作る方法は、組み合わせることもできます。ラボには動くAPNGも取り込めるので、すでに動いているキャラクターへ文字やエフェクトを重ねる使い方もできます。
秘密のラボには、3つの実験室があります
「文字の実験室」では、文字とフォントを選び、一文字ずつ登場させたり、跳ねさせたり、揺らしたりできます。平面の文字だけでなく、厚みと光を付けた立体文字も試せます。言葉の意味に合う動きを探す場所です。
「図形の実験室」では、星やハートなどの素材に動きを付けられます。ひとつの図形を見せるほか、小さな素材をたくさん舞わせる演出も用意しました。文字の周りに少しだけ飾りを足したいときにも使えます。
「合成の実験室」では、キャラクター画像と、保存した文字・図形の素材を重ねます。レイヤーの前後関係、位置、大きさ、再生の繰り返しなどを調整し、ひとつのAPNGへ仕上げられます。
ここでできるのは、画像と文字・図形の動きを組み合わせることです。静止したキャラクターの手足や表情を自動で描き直す機能ではありません。キャラクター自体の動きも欲しい場合は、動くAPNGを素材にしてみてください。
まずは、ひと言の文字を重ねてみてください
最初の実験は、キャラクター画像1枚と短い言葉だけでも始められます。
- 「文字の実験室」で「ありがとう」などの言葉を入力し、フォントと動きを選びます。色や大きさを整え、作品を保存します。
- 「合成の実験室」にキャラクター画像を追加します。「素材を追加」から、先ほど保存した文字の作品を重ねます。文字素材を先にAPNGへ書き出す必要はありません。
- 顔や表情を隠さない位置へ文字を置き、プレビューで読みやすさと動きを確認します。余裕があれば、図形の実験室で作った星やハートも加えてみます。
- 完成したAPNGをダウンロードします。本体のアニメーション素材画面で、各枠の「取込」→「完成APNG」から渡せます。あとでラボで直せるよう、再編集用の制作ZIPも保存しておくと安心です。
文字だけで気持ちが伝わるか、装飾を足すともっと伝わるか。少しずつ重ねていくと、自分のキャラクターに合う動きを探しやすくなります。
本体とは別のラボとして、まずは試してもらいたい
新しい作り方は、実際に使ってみて初めて分かることがたくさんあります。文字は読みやすいか、画像と重ねる操作は分かりやすいか、書き出した動きはイメージどおりか。使う端末やブラウザーによって、動作の重さが変わることもあります。
そのため、まずは本体とは別のラボで試していただき、使い勝手や動作を確かめながら育てていくことにしました。実験中の機能なので、操作や設定は今後変わる可能性があります。立体文字や多数の図形を動かす演出には、WebGLに対応した環境が必要です。重いと感じたら、素材の数を減らしてみてください。
ラボから本体へ完成APNGを渡す流れは、すでに用意しています。そのうえで、この作り方が役立ち、動作にも問題がなければ、文字や図形の制作・合成そのものを本体の機能にも組み込んでいきたいと考えています。
Stamp Studioは、現在無料で公開しています。手元のキャラクター画像や、短いひと言から、ぜひ気軽に遊んでみてください。文字を跳ねさせたり、星をきらめかせたりしながら、自分だけのスタンプ作りを楽しんでもらえたらうれしいです。
私自身も、どんな機能があるともっと楽しく、使いやすくなるのか、まだ手探りです。実際に使っていただく中で、「こんな動きが欲しい」「ここが使いづらい」「こんなこともできたらいいな」と感じたら、どうぞ遠慮なくお問い合わせページからご連絡ください。小さな気付きや、まだまとまっていないアイデアも歓迎です。いただいた声を参考にしながら、少しずつ育てていきたいと思っています。
掲載画面について：この記事に掲載する画面キャプチャや操作動画は、記事作成時点（2026年10月1日）の開発段階の画面です。今後の改善により、画面のデザイン、機能、操作方法が変わる可能性があります。実際のアプリの表示と異なる場合がありますので、あらかじめご了承ください。
アイキャッチは制作の考え方を表したイメージイラストです。LINEへの申請前には、完成したAPNGの仕様や表示を本体で確認してください。用語の参考
文字や図形を動かす表現については、Adobeのモーショングラフィックスの紹介と、文字アニメーション・キネティックタイポグラフィの紹介を参考にしています。
なお、動画の動きをなぞって描いたり、被写体をフレームごとに切り抜いたりする「ロトスコーピング」は別の技法です。動画のコマを抽出してAPNGへ変換すること自体を、その名前で呼んでいるわけではありません。Adobeのロトスコーピングの解説