【Google AI Studio】時短クッキング No.57：LINEアニメーションスタンプ用可変FPSエディター付きアプリ

毎度、rorosukeです。
LINEスタンプ、作ってますか？

今回は、LINEスタンプの中でも「動きのある」LINEアニメーションスタンプの話です。

LINEスタンプクリエイターのurajoさんが、次の記事で、アニメーションスタンプ用のAPNG画像について「フレームごとに切り替えタイミングに緩急をつける」という試みに挑戦されています。

確かに、APNGの仕様としては、各フレームの表示時間を同一にしなければならないという制約はなく、自由に設定できます。

たとえば、

1フレーム目：100ms、2フレーム目：100ms、3フレーム目：100ms

でもいいですし、

1フレーム目：50ms、2フレーム目：50ms、3フレーム目：200ms

でも問題ありません。前者は一定間隔で画像が更新されますが、後者は最初の2枚が素早く表示され、最後のフレームだけ長く表示されるため、動きにメリハリが生まれます。

ただ、これを実現するには対応したツールが必要です。
その流れで、私が以前投稿した「APNG形式の画像をLINEスタンプ審査基準へ自動で最適化するアプリ」を見つけていただき、紹介していただきました（ありがとうございます）。

とはいえ、このアプリはAPNGの内部構造を確認することはできますが、各フレームの表示時間を変更する機能はありません。

そこで今回、かなりやっつけではありますが、各フレームごとの表示時間を設定できる機能を追加してみました。

LINE Animation Sticker Studio

使い方は次の通りです。

１．APNG動画ファイルをアップロードしてください。

画面中央の点線エリアに PNG または APNG ファイルをドラッグ＆ドロップするか、クリックしてファイルを選択してください。読み込むと即座に解析が始まり、詳細情報が表示されます。

２．ファイルのチェックとプレビューエリア

読み込んだファイルの以下の項目を自動チェックします。

• ファイルサイズ: LINEの規定（300KB以下→1MB）を超えていないか。

• 画像サイズ: 幅・高さが偶数か、最大サイズ（320x270）に収まっているか。

• カラータイプ: 推奨されるRGBA形式か。

• 再生時間: 1ループの秒数、ループ回数、総再生時間がLINEの規定内か。

右側のプレビューエリアでは、実際のスタンプの動きを確認できます。

• 再生/一時停止: 設定されたループ回数分だけ再生して自動停止します。

• コマ送り・コマ戻し: 一時停止中に1フレームずつ確認できます。

• フレーム表示: 現在のフレーム番号と全フレーム数が表示されます。

3. 可変FPSエディター（実験版）

ここが、本アプリで更新した部分です。
各フレームの表示時間（ミリ秒）を個別に調整できます。

• ターゲット設定: 1ループを「ちょうど1.0秒、2.0秒...」に合わせるための目標値を選択します。

• プリセットボタン:

  • ターゲットに合わせる: 現在の比率を維持したまま、合計時間を目標値にピッタリ合わせます。

  • 均等配分 / だんだん速く / だんだん遅く: 動きに緩急をつけます。

  • 最後だけ長く: 最後のコマで余韻を残したい時に便利です。

• CSV出力・読込: フレームごとのms設定をCSVファイルとして保存したり、外部で作成した数値を一括反映したりできます。

4. LINE基準での最適化

「LINE基準で修正」ボタンを押すと、以下の処理を自動で行います。

1. リサイズ: 最大320x270の範囲内で、アスペクト比を維持しつつ偶数サイズに調整。

2. フレーム補填: 5枚未満の場合、自動でループさせて規定の5枚以上に増やします。

3. 容量削減: ファイルサイズが300KB→1MBを超える場合、自動で減色処理（256色→128色→64色）を行い、画質を保ちつつ軽量化します。

4. ループパッチ: APNGの内部データを書き換え、設定したループ回数を強制適用します。

5. 書き出し（保存）

• 保存ボタン: 最適化されたAPNGファイルをダウンロードします。

• メイン・タブ画像を生成:

  • main.png: 240x240サイズのAPNG（アニメーションスタンプの看板画像）。

  • tab.png: 96x74サイズの静止画PNG（トークルームのタブ用画像）。
    これらを一括で生成・ダウンロードできます。

制作のヒント

容量オーバーの場合：画像の情報量を減らすか、フレーム数を削減してください。本ツールの減色機能も有効です。

カクつく場合：フレーム数を増やす、または特定フレームを短く（10ms〜）設定すると滑らかになります。

白コマが出る場合：APNGのDisposal Op（破棄設定）が原因のことがあります。「LINE基準で修正」で解消できるケースが多いです。

シェアURL

お試しください。

まとめ：UIが一番むずかしい

この手のツールで一番難しいのは、「使いやすいUI（ユーザーインターフェイス）」です。

今回は、数値入力に加えて「だんだん速く／遅く」といったプリセットを用意し、ざっくりした調整ができるようにしました。

ただ、ブラウザ上で細かく数値を調整するのはやはり手間がかかります。そこでCSV入出力を用意し、Excelなどでの編集にも対応しています。

本来であれば、イコライザー的UIやベジェ曲線による調整が理想ですが、実装コストの関係で今回は見送りました。

というわけで、現状はあくまで実験版ですぅ。

以上！

✨ ポップアップスタンプも作れます

もしよろしければ、その後アップデートをしています。

「アニメーションはできた。次はポップアップもやってみたい」 そう思った方には、こちらが続きになります。