ユーザーにとって価値ある情報を繰り返し発信していく「まるログ」

GIFって何？GIF画像のメリットと作り方

GIFって何？GIF画像のメリットと作り方SNS GIF画像Web上で動きがループするアニメーションや動画を見かけたことがあると思います。SNSだと画像の下に「GIF(Graphics Interchange Format)」という言葉が付いているものもありますね。
GIFとは画像形式の一種で、簡易的なアニメーションを表示することができる画像ファイルフォーマットになります。動く画像です。では、静止画でもなく動画でもなく、GIF画像にするメリット・デメリットは何があるのでしょうか。

GIFのメリット

GIFはユーザーの環境を選ばないユーザーの環境を選ばない

比較的早くから使われ出した画像ファイルのフォーマットなので、ほとんどの環境で標準的にサポートされています。PCでもスマホでも環境を選ばずに表示させることが可能です。

再生ボタンを押す必要がない

通常の動画と違って、再生・停止ボタンがありません。勝手に再生してくれてずっとループしてくれます。いちいちボタンを押さなくても勝手に始まるので、ユーザーの手間も省けますね。

比較的簡単に作れる

動画編集よりも簡単です。無料でGIFアニメを作れるツールも出ています。普段紙物のデザインをしている私でも画像が切り替わるGIFアニメは比較的簡単にできました。

GIFのデメリット

GIFは音声が入れられない音声が入れられない

GIFはあくまで画像形式の一種です。したがって、動画のように音声を入れることはできません。

長尺のアニメーションには不向き

時間が長くなればその分、データ容量も大きくなり、表示するのに時間がかかります。長尺の場合、動画ファイルよりもデータ容量が重くなることもあります。また、動画のようにコントロールバーを表示できないため、長尺の場合は利便性の点でも問題が出てきます。GIFの場合は短時間でさっと見られるものが相性が良いと思います。

色数に制限がある

これが大きなデメリットで、表示できる色数に制限があります。最大256色までしか使えないので、複雑なグラデーションや実写の風景等はあまり綺麗に再現されません。

GIFに向いているもの

上記のメリット・デメリットから、GIFに向いている物は以下のように言えます。

  • 色数が少ない（グラデーションがないもの、カラーの風景画は厳しそう）
  • 低解像度
  • 短時間（単純に時間が短いもの、アニメーションのフレームが少ないもの）

「向いていないものだけどGIFにしたい…」そんな時は色数を減らす、画像サイズを小さくする、アニメーションのフレーム数を減らす等である程度は対応できます。それでもダメならGIF以外のものに変えた方がいいかもしれません。

実際に作ってみる

Photoshopを例に作ってみます。パラパラ漫画だと考えれば作り方もイメージしやすいと思います。

1.素材を用意する
写真でも動画でもOKです。今回は写真を読み込みます。

2.連続写真を読み込む
｢スクリプト｣ → ｢ファイルをレイヤーとして読み込み｣ でレイヤーに読み込ませます。
右側のレイヤーにずらっと素材が並びました。これらがつながってGIFアニメになります。
GIFの作り方

GIFの作り方3.タイムラインを開いて、フレームアニメーションに変換する
｢ウィンドウ｣ →｢タイムライン｣ でタイムラインパネルを表示、「フレームアニメーションを作成」を選択します。「レイヤーからフレームを作成」でレイヤーが個別フレームに変換され、下のタイムラインに並びました。再生ボタンをクリックして動きを確認しながらフレーム数や表示時間を調整します。

4.アニメーションのループを「無限」に設定
これでアニメーションがループするようになります。
GIFの作り方

5.GIFに書き出し
｢ファイル｣ → ｢書き出し｣ → ｢web用に保存（従来）｣ でGIFに書き出します。
GIFの作り方

画像がパラパラと切り替わる単純なGIFならこれで完成です。
GIFアニメ花

同じ要領で、動く部分をイラストにすることで簡単なアニメーションを制作することもできます。
GIFアニメヒヨコ

花のGIFとイラストのGIFを比較してみます

花のGIF（使用枚数：10枚）

サイズ：500×281pixcel　938KB
実写で色数が256色よりも多いので、色の再現が綺麗にできていません。細かい色の点が見えると思います。データ容量1MB以下を目標に、色数を200色に減らしてデータを圧縮し、元データから写真サイズを縮小してやっと1MBを切りましたが、代わりに画質が劣化することになります。

イラストGIF（使用枚数：18枚）

サイズ：800×500pixcel　154KB
主線の黒、体の黄色と2色しか使っていないので、色の劣化は見られません。また、色数が少ないことでデータも軽くなりました。18枚もの絵を使用してアニメーションさせているので、滑らかな動きで表現できています。

２種類のGIFを比べてみて、以下のことがわかったと思います。

  • 実写の色数が多い画像は色が綺麗に再現されず、データを軽くすると画質がさらに劣化する
  • 色の少ないイラストは綺麗に再現され、データも軽い

花の画像、イラスト共に極端な例でしたが、実写をGIF画像にする際にはなるべく背景を単色にする等、工夫次第でデータサイズを軽くできます。また、GIFと相性の良い素材や表現というものも存在します。GIFと動画のどちらを採用するかの見極めも気をつけたい点です。

まとめ

GIFアニメGIFは画像形式の一種ですが、静止画一枚よりもたくさんの情報を盛り込むことができます。ただメリットがあればデメリットもあるのが常ですので、素材や見せたいものとの相性を考慮した上で、表現方法の１つとして候補に入れてみてはいかがでしょうか。

グラフィックデザイナー ／ K.Y

デザイン制作に関するお問合せ