こんにちは、ツバサです。
ECサイトのセールバナーを制作会社に依頼したとき、「アニメーション用にGIFで作りますね」と言われた。GIFって動く画像のことだろうとは思っていたけど、仕組みや制約をちゃんと理解していなかったので調べてみた。
GIFとは
ひとことで言うと、最大256色の画像を保存でき、アニメーション表示にも対応した画像ファイル形式のこと。GIFは「Graphics Interchange Format（グラフィックス インターチェンジ フォーマット）」の略で、読み方は「ジフ」が正式とされている。
IT用語辞典 e-Wordsによると、GIFアニメーションは1つのGIFファイルの中に複数の静止画像を保存し、それを順番に表示することで動いているように見せる仕組みだそうだ。パラパラマンガと同じ原理で、各コマの切り替え時間やループの有無も設定できる。
GIFの圧縮方式はLZWという可逆圧縮で、画質の劣化はない。ただし、1フレームあたり最大256色という制約がある。武蔵野美術大学の造形ファイルでも、GIFは色数が少ないイラストやロゴに適した形式と説明されていた。写真のようにたくさんの色が必要な画像には向いていない。
Wikipediaの解説を見ると、GIF形式自体は1987年にCompuServe社が開発したもので、アニメーション機能は1989年の拡張仕様（GIF89a）で追加されたとのこと。かなり歴史の長い形式だ。
EC実務で出てくる場面
GIFアニメーションはEC業務でもよく使われている。僕が実際に遭遇した場面を書いておく。
セールバナーやキャンペーン告知
楽天やYahoo!ショッピングのセール期間中、「ポイント10倍」や「タイムセール」の文字が点滅したり切り替わったりするバナーを見たことがあると思う。あれがGIFアニメーションだ。mteamの記事でも、GIFアニメはメールマガジンやバナー広告で視線を引く手段として紹介されていた。
動画と違って再生ボタンを押す必要がなく、画像と同じようにページに表示されるだけで自動的に動き出す。この手軽さがバナーに向いている理由だと思う。
商品の使い方を見せるミニ動画
商品の組み立て手順や、アクセサリーの装着イメージなど、短い動きを見せたいときにGIFアニメが使われることもある。動画ファイルほどのデータ量にならず、ブラウザだけで再生できるので、商品ページに組み込みやすい。
SNS投稿やチャットでのリアクション
これはEC実務とは少しずれるけど、SlackやTeamsなどのビジネスチャットでGIFアニメのスタンプを送ることもある。CyberLinkの記事でも、GIFはSNSやメッセージングアプリで広く使われていると書かれていた。
覚えておきたいポイント
256色の制約を理解しておく
GIFは1フレームあたり最大256色までしか使えない。写真をGIFにすると色が間引かれてザラザラした見た目になることがある。写真ベースのバナーを作りたいなら、静止画はJPEGやPNGで用意し、アニメーションが必要な部分だけGIFにするといった工夫が必要だ。
ファイルサイズに注意
GIFアニメーションはフレーム数が増えるほどファイルサイズが大きくなる。10フレーム程度なら数百KBで済むが、30フレーム以上になると数MBになることもある。ページの表示速度に影響するので、フレーム数は最小限に、画像サイズも小さめにしたほうがいい。
WebPという代替手段もある
最近ではWebP形式がアニメーションにも対応していて、GIFより小さいファイルサイズで同等の表現ができる。ただし、ECモールのバナー入稿ではまだGIF指定のところが多いので、対応状況を確認してから選ぶ必要がある。画像形式の全体像は画像ファイル形式まとめに整理した。
