image

Frame Animator

複数のJPEG・PNG・静止WebPを並べ、各コマの表示時間を調整してGIF・Animated WebPを作成します。

ローカル処理
ファイルについてこのツールで選択したファイルや入力内容は、Browser Kittyのバックエンドへアップロードせずブラウザ内で処理します。
操作デモ 実際の操作の流れを短い動画で確認できます。

このツールについて

Frame Animatorは、複数のJPEG・PNG・静止WebP画像をコマとして並べ、動くGIFやAnimated WebPを作るツールです。フレームの順番と表示時間を個別に調整し、順方向・逆方向・往復の動きをプレビューしてから保存できます。

写真を順番に切り替える簡単なアニメーション、撮影した連続画像のコマ送り、画面操作の静止画をつなぐ説明用GIFなどに使えます。画像の読み込みからエンコードまでブラウザ内で処理し、元画像は外部サーバーへアップロードしません。

こんなときに便利

  • 何枚かのPNG・JPEG画像を順番に表示するGIFアニメにまとめたい
  • 撮影した連続写真をフレーム順に並べ、表示時間を変えてコマ送りアニメーションを作りたい
  • 複数の静止画像から容量や画質を調整したAnimated WebPを作りたい
  • 動画を用意せず、操作手順などの画像を切り替える説明用GIFを作りたい

できること

このツールで利用できる主な機能です。

使い方

  1. JPEG・PNG・静止WebP画像を複数選択して追加します。画像のドロップや貼り付けでも追加できます。
  2. カードのドラッグハンドルや前へ・後ろへボタンでコマ順を整え、必要ならフレームを複製・削除します。
  3. 全体の表示時間を設定し、動きを調整したいコマだけ20〜10,000msの範囲で個別に変更します。
  4. キャンバスサイズ、収める/切り抜く、背景色を設定し、順方向・逆方向・往復とループ回数を選びます。
  5. プレビューを確認してGIFまたはAnimated WebPを選び、色数・ディザリングまたは画質・Losslessなどを設定して生成します。
  6. 完成したGIF/WebP自体を結果画面で再生し、再生時間や容量を確かめて保存します。

対応範囲

  • 入力形式: JPEG/JPG、PNG、静止WebP。画像の複数選択、ドロップ、貼り付けに対応。
  • 枚数・容量: 最大200フレーム、1枚50 MiB、合計500 MiB、1枚50メガピクセルまで。
  • 時間・再生: 各フレーム20〜10,000ms(10ms刻み)。順方向・逆方向・往復。1回/無限/2〜100回ループ。
  • 画像配置: 出力幅・高さ各16〜4096px。収める/切り抜く、透明・白・黒・任意の背景色。
  • GIF: 64/128/256色、ディザリングのON/OFF。WebP: Quality、Lossless、Effort。
  • 保存: GIFまたはAnimated WebP。書き出し進捗表示とキャンセル、生成ファイルのプレビュー。日本語/英語、PC/スマートフォン対応。

制限・注意点

  • 入力できるのは静止JPEG・PNG・WebPです。動画、既存のアニメGIF、Animated WebP、APNG、SVG、AVIF、HEIC/HEIF、PDF、PSDは読み込めません。
  • 画像自体に描き込むピクセル編集、コマ間のトランジション、音声追加、MP4書き出しには対応しません。
  • 高解像度や大量フレーム、Lossless WebPなどは処理時間やメモリ消費が増え、端末性能によっては上限内でも失敗する場合があります。
  • 完成したAnimated WebPはMP4動画ではありません。表示ソフトによっては静止画としてしか見えないため、対応ブラウザで再生を確認してください。
  • 画像は作業中だけブラウザに保持し、再読み込みやページを閉じると消えます。作業中画像の自動復元には対応しません。
  • 現行Chrome・Edgeを主に検証しています。Firefox・Safari・Android/iOSのブラウザはベストエフォートです。

よくある質問

複数のPNGやJPEGをGIFアニメにできますか?

はい。JPEG・PNG・静止WebPを追加し、順番と各フレームの表示時間を指定してAnimated GIFとして保存できます。

GIFとAnimated WebPはどう違いますか?

GIFは最大256色のパレットを使うため互換性を優先する用途向きです。Animated WebPはより多くの色やLossless設定に対応しますが、閲覧環境によっては静止画として表示されることがあります。

動画ファイルや既存GIFを読み込めますか?

いいえ。入力はJPEG、PNG、静止WebPのみです。動画からGIFを作りたい場合は別ツールの「動画→GIF / WebP」を利用してください。

フレームごとの表示時間やループを変えられますか?

はい。各フレーム20〜10,000msで調整でき、順方向・逆方向・往復、1回・回数指定・無限ループを選べます。

追加した画像はサーバーへ送信されますか?

いいえ。Web版では最初にアプリのHTMLを取得しますが、画像の読み込み・編集・GIF/WebP生成・保存はブラウザ内で行い、画像を変換サーバーへ送信しません。

オフライン版・ソースコード

frame-animator.htmlはGIF/WebP生成に必要なJavaScriptやWebAssemblyを含む単一HTMLです。保存したHTMLを対応ブラウザで直接開けば、実行時CDNや外部変換APIへの接続なしで画像をアニメーション化できます。CSPは `connect-src 'none'` を含みます。

GitHubでソースを見る