PNGやJPGを何枚か並べれば、パラパラ漫画のようなGIFアニメを作れます。画面操作をコマ送りで説明したり、連続写真を動かして見せたりしたいときに便利です。
Browser Kittyの「Frame Animator」では、画像の順番や1コマごとの表示時間を調整し、GIFまたはAnimated WebPとして保存できます。
アプリのインストールや会員登録は不要です。画像の変換もブラウザ内で行うため、元画像を外部サーバーにアップロードする必要はありません。
GIFにしたい画像を用意する
まずは、GIFに使う画像を用意します。少しずつ動きを変えたイラストや連続写真、操作手順のスクリーンショットなどが使えます。
対応している形式は、JPG（JPEG）・PNG・静止WebPです。GIFや動画をそのまま読み込むことはできません。
画像が多い場合は、step-01.png、step-02.pngのようにファイル名に連番を付けておくと、あとで順番を整理しやすくなります。
1. Frame Animatorに画像を追加する
Frame Animatorを開き、「画像を選択」から使いたい画像をまとめて追加します。PCならドラッグ＆ドロップや、クリップボードからの貼り付けでも追加できます。
読み込んだ画像は、フレーム一覧にサムネイルで表示されます。
追加できるのは最大200枚まで。1ファイル50MiB、合計500MiBなどの上限もあります。大きな画像を大量に使うと、端末のメモリ不足で処理できないことがあるので注意してください。
2. 画像を再生したい順番に並べる
GIFは、フレーム一覧に並んでいる順番で再生されます。
順番を変えるには、各画像のドラッグハンドルを動かします。スマホなどでドラッグしにくい場合は、「前へ」「後ろへ」ボタンでも移動できます。
連番の画像なら、ファイル名順に並べ替えると簡単です。不要なコマの削除や、同じコマの複製もできます。
並べ間違えたときは「元に戻す」も使えるので、まずは大まかに順番を整えてみてください。
3. 画像の表示時間を調整する
GIFの動く速さは、1枚の画像を表示する時間で決まります。
たとえば、500msなら0.5秒、200msなら0.2秒ごとに次の画像へ切り替わります。数字を小さくするほど、動きは速くなります。
すべての画像を同じ速さで切り替えるなら、「全フレームの表示時間」で一括設定できます。
操作説明などで特定の画面を長く見せたいときは、そのコマだけ表示時間を延ばすと見やすくなります。
表示時間は1コマ20〜10,000msの範囲で、10ms刻みで設定できます。
また、「0.5× ゆっくり」「2× はやく」を使えば、設定済みの表示時間をまとめて変更できます。
4. GIFのサイズと画像の配置を決める
画像のサイズや縦横比が違う場合は、出力キャンバスの設定で見た目を揃えます。
画像を切らずに全体を表示したいなら「収める」、余白を作らず画面いっぱいに表示したいなら「切り抜く」を選びます。
「切り抜く」では画像の端が見えなくなることがあるので、文字や大事な部分が欠けていないか確認してください。
背景色は透明・白・黒・任意の色から選べます。出力サイズを細かく指定したい場合は、幅・高さをそれぞれ16〜4096pxの範囲で設定できます。
5. 再生方向とループを設定する
画像の順番と表示時間が決まったら、プレビューで動きを見てみます。
再生方向は次の3種類です。
順方向（Forward）：先頭から最後まで再生
逆方向（Reverse）：最後から先頭へ再生
往復（Ping-pong）：最後まで進んだあと、逆方向に戻る
ループも、1回だけ・回数指定・無限から選べます。
たとえば、前後に揺れるような動きなら往復再生、繰り返し見せたい短いアニメなら無限ループが使えます。
プレビューでは一時停止やコマ送りもできるので、動きが不自然な部分があれば、順番や表示時間を調整します。
6. GIFとAnimated WebPを選ぶ
一般的なGIFアニメを作るなら、書き出し形式で「GIF」を選びます。
GIFは使える色数が最大256色に限られるため、写真やグラデーションの多い画像では、元画像と色合いが変わることがあります。
Frame Animatorでは、GIFの色数とディザリングを調整できます。ディザリングは、限られた色で階調を表現するための処理です。写真によっては自然に見えますが、ざらつきが目立つこともあります。
もう一つの選択肢がAnimated WebPです。こちらは画質やLossless（可逆圧縮）などを設定でき、写真のように色数の多い画像にも向いています。
ただし、Animated WebPはアプリによって再生できないことがあります。共有先でGIFが指定されているなら、GIFを選んでおくのが確実です。
7. GIFを生成して保存する
設定が終わったら、書き出し画面で「GIFを作成」を押します。Animated WebPを選んだ場合は「WebPを作成」です。
生成が完了すると、実際にできあがったファイルをプレビューできます。
ここでは、コマの順番や切り替わる速さ、画像の切れ、画質などを見ておきます。ファイル容量や再生時間も確認できます。
問題がなければ「GIFを保存」からダウンロードします。
なお、生成後に表示時間やサイズなどを変更した場合は、もう一度生成してください。設定を変えただけでは、すでに生成したファイルには反映されません。
GIFのファイル容量が大きいときは？
GIFは、画像の枚数や出力サイズによってファイル容量が大きくなりがちです。
容量を抑えたい場合は、まず出力サイズを小さくしてみてください。不要なコマを減らすのも効果的です。
GIFの色数を減らしたり、ディザリングの有無を切り替えたりする方法もあります。ただし、設定によっては画質が変わるため、生成した画像を見比べながら調整するのがよいでしょう。
共有先がAnimated WebPに対応しているなら、WebPでも書き出して容量を比較してみる方法があります。
作ったGIFが動かない・画像を追加できないとき
保存したGIFやAnimated WebPが静止画として表示される場合は、開いているアプリがアニメーション再生に対応していない可能性があります。まずはブラウザでファイルを開き、動くか確認してみてください。
画像を追加できない場合は、ファイル形式を確認します。Frame Animatorに読み込めるのはJPG・PNG・静止WebPです。既存のGIFや動画は入力できません。
また、高解像度の画像や大量のフレームを扱うと、メモリ不足で処理に失敗する場合があります。そのときは、画像の枚数やサイズを減らすか、PCのブラウザで試してみてください。
画像は外部サーバーにアップロードされる？
Frame Animatorでは、画像の読み込みから編集、GIF・WebPの生成まで、ブラウザ内で処理します。選択した画像を外部の変換サーバーへ送信することはありません。
また、画像や編集内容は自動保存されません。ページを再読み込みしたり、タブを閉じたりすると作業内容が失われるため、完成したファイルは忘れずにダウンロードしてください。
オフラインで使いたい場合は、実行に必要なコードが含まれた単一HTML版も利用できます。
まとめ
複数の画像からGIFアニメを作るなら、まずは画像を並べて表示時間を設定し、プレビューで動きを確かめてみてください。
最初から細かく設定しなくても、一度作ってみてから速さやサイズを調整する方が進めやすいと思います。
Frame Animatorなら、同じ画像を使ってGIFとAnimated WebPの両方を試せます。使う場所に合わせて、動きやファイル容量を見比べてみてください。
Frame Animator
複数のJPEG・PNG・静止WebPを並べ、各コマの表示時間を調整してGIF・Animated WebPを作成します。
よくある質問
PNGとJPGを混ぜてGIFを作れますか？
はい。JPG・PNG・静止WebPを混在させて追加できます。画像のサイズが違っていても、出力キャンバスに合わせて配置できます。
画像は何枚まで追加できますか？
最大200枚です。ただし、画像のサイズや端末のメモリによっては、上限より少ない枚数でも処理できない場合があります。
すでにあるGIFアニメを編集できますか？
いいえ。Frame Animatorは静止画像から新しくGIFを作るツールです。既存のGIFアニメを読み込んで編集する機能はありません。
MP4などの動画からGIFを作れますか？
Frame Animatorでは動画を直接読み込めません。動画からGIFを作りたい場合は、Browser Kittyの別ツール「動画→GIF / WebP」を使ってください。