GIFアニメ作成

GIFは1989年に生まれた形式で、当時の設計がそのまま受け継がれています。1フレームで使えるのは256色まで。しかもその範囲の中で、画質と引き換えに容量を減らす非可逆圧縮の仕組みがありません。さらに、多くのGIFはフレームごとに画面全体をまるごと保存し直しています。写真10枚でGIFを作れば、実質的に写真10枚分のデータを1つのファイルに詰め込むことになります。

動画のコーデックは正反対の考え方をします。mp4の多くに使われているH.264は、前のフレームから変化した部分だけを記録し、人の目では見分けられない細部を思い切って捨てます。同じ映像をmp4にするとGIFの10分の1から50分の1の容量になることも珍しくないのは、このためです。たしかに技術的には古い形式ですが、GIFが生き残っているのには理由があります。画像ファイルなので、動画プレーヤーなしで、音も出さず、止まることもなく、どこでも自動で再生されるのです。

数秒の短い場面を延々とループさせるなら、今でもGIFが手軽です。チャットで送るリアクションGIF、ブログ記事に入れる短いデモ、掲示板の署名やバナーなど、画像を置く場所に動きがほしいときはGIFの出番です。画像として扱われるので添付でブロックされることはほとんどなく、見る人が再生ボタンを押す必要もありません。

数秒を超えたり、場面の数が増えたりするなら、動画にしましょう。写真30枚を1秒間隔で見せるなら、それはもうスライドショー動画です。無理にGIFにしても、容量がふくらみ画質が落ちるだけです。音が必要なら、そもそもGIFは選択肢に入りません。この形式には音声を入れる仕組みがないからです。このツールは、その境界の内側、つまり数枚から十数枚の写真を短くループさせる用途に合わせて調整しています。

256色という制限は、グラフィックにはやさしく、写真には厳しいものです。ロゴやスクリーンショット、シンプルなイラストは使っている色が数十色ほどなので256色に余裕で収まり、元の画像とほとんど見分けがつきません。ところが、空・夕焼け・肌のようななめらかなグラデーションは話が別です。何万もの中間色を256色に押し込むため、近い色どうしがまとめられ、なめらかだった空に等高線のような縞が現れます。この現象をバンディングと呼びます。

このツールは劣化をできるだけ抑えるため、フレームごとに最適な256色のパレットを個別に計算していますが、形式そのものの限界は避けられません。照明の違う環境で撮った写真を並べると、フレームが切り替わるたびに色がわずかにちらつくことがあるのも同じ理由です。写真が中心のGIFでざらつきが気になるなら、動画形式に切り替えるのが根本的な解決策です。どうしてもGIFにしたい場合は、出力サイズを小さくするとザラザラした粒も目立ちにくくなります。

間隔が0.1秒なら1秒に10フレーム、0.5秒なら1秒に2フレームです。手でめくるスライドショーのような雰囲気なら0.5〜1秒が自然で、連写した写真から動きを出したいなら0.1〜0.2秒が向いています。なめらかさは結局フレーム数で決まるので、同じ長さなら、間隔が短いほどフレームが増え、そのぶんファイルも大きくなります。

速くするにも限度があります。GIFは時間を100分の1秒単位で記録しますが、間隔が0.01秒近くまで短くなると、多くのブラウザはその値を無視して0.1秒で再生します。初期のWebで、激しく点滅する迷惑な広告を防ぐために生まれた慣習の名残です。そのため、このツールでは0.02秒より短い間隔にはしません。1秒に50フレームあれば、動きはもう十分なめらかに見えます。

GIFの容量がどこまで許されるかは、投稿先しだいです。メッセージアプリでは動く画像の上限が数十MB程度のことが多く、超えると動画に変換されるか、送信を断られます。Discordの無料アカウントのアップロード上限も、長年の8MBから何度か変わってきました。ブログサービスは画像1枚あたり数MB〜数十MBまでが一般的で、掲示板はサービスによってまちまちです。上限は各サービスの方針しだいで変わるので、実用上のルールはシンプルです。10MB未満に収めれば、ほぼどこにでも投稿できます。

容量を減らす順番は決まっています。まずサイズ、次にフレーム数、最後に間隔です。ピクセル数は縦と横の掛け算なので、長辺を半分にするとファイルはおよそ4分の1になります。元のサイズではなく480pxを標準のおすすめにしているのは、まさにこのためです。それでも大きければ、ほとんど同じに見えるフレームを省いて枚数を減らし、最後に間隔を少し長くして全体の長さを保ちます。

動きを出すのに、何枚も撮った写真が必要なわけではありません。「1枚の写真を動かす」モードでは、静止画1枚にゆっくりしたズームイン、横方向のパン、ドキドキと脈打つような動きを加えて、GIFアニメに仕上げます。サムネイル、商品や人物を目立たせたいとき、チャットに投げるとっておきの1コマなど、視線を引きつけたい場面に向いています。なお、写真の人物が実際に動き出すAIアニメーションとは別物で、カメラのように画面全体が動くだけです。

GIFの容量が大きすぎる

出力サイズを確認してください。「元のサイズ」のままだと、スマホで撮った写真ならフレーム1枚だけで数MBになることがあります。長辺480pxに縮小すれば容量は劇的に減りますし、チャットやブログ記事なら480pxでも十分な大きさです。それでも大きい場合は、次にフレーム数を減らしてみてください。

色が元の写真と違って見える

GIFの256色制限によるもので、特にグラデーションの多い写真では縞やまだらが出やすくなります。形式そのものの性質なので完全には避けられません。色の再現性が大事なら、動画形式を検討してください。

設定した速さより遅く再生される

間隔をごく短くしたときに起こります。ブラウザは慣習的に0.02秒より短い間隔を無視して0.1秒で再生するため、このツールでは最初から0.02秒未満を指定できないようにしています。それ以上の値でも遅い場合は、端末の処理が追いついていない可能性が高いので、フレームのサイズを小さくしてみてください。

写真のまわりに余白ができる

GIFは、すべてのフレームが同じサイズでなければなりません。このツールは1枚目のフレームのサイズを基準にして、ほかの画像を縦横比を保ったまま収まるように縮小し、中央に置いて、余ったスペースを余白の色で埋めます。切り取りはしないので内容が欠けることはありませんが、余白が気になる場合は、読み込む前に写真を同じ縦横比にトリミングしておいてください。

ファイルはサーバーにアップロードされますか？

いいえ。画像の読み込みもGIFのエンコードもすべてブラウザ内で行われ、インターネットを切断しても同じように動きます。タブを閉じれば何も残りません。そのため、ページを再読み込みすると最初からやり直しになります。

ダウンロードしたファイル名がanimation.gifになる

意図的な仕様です。ファイル名に特殊な文字が含まれていると、何も知らせずにダウンロードを中止してしまうブラウザがあるため、どこでも通用する半角英数字だけのシンプルな名前で常に保存しています。必要に応じて、ダウンロード後に名前を変更してください。