用語集A〜Z

GIF

よみ: ジフ

1987 年に開発された、Web 上で古くから使われている画像フォーマットです。

最大 256 色しか使えないため「写真」には不向きですが、可逆圧縮(元の画質を落とさずに圧縮できる仕組み)や、数秒の短い「アニメーション」を作れるのが最大の特徴です。※背景を透過できますが、半透明の表現はできません。

実務における画像フォーマットの使い分け

現代の Web 制作では、GIF は「短いアニメ用途」に限定し、以下のように役割を分けるのが標準です。

  • 写真JPGWebP
  • アイコン・ロゴ:SVG
  • 数秒の短い動き:GIF
  • 長い動画:MP4、WebM、または YouTube の埋め込み

担当者が押さえるべき実務のポイント

SNS のタイムラインやメルマガ、操作マニュアル(ハウツー記事)など、パッと見て動きを伝えたい場面で非常に重宝します。ただし、長さは数秒程度に抑えるのが基本です。

初心者が陥りがちな「表示速度悪化の落とし穴」

「GIF は画像だから軽い」と勘違いし、大容量のアニメーション GIF をトップページなどに配置して、サイトの読み込み速度を大きく悪化させてしまう失敗がよくあります。実際には、GIF はファイルサイズが大きくなりやすいため、1MB を超えるようなアニメーションは動画形式(MP4 や WebM)に置き換える方が、かえって読み込みが速くスムーズになります

言葉をよく利用する人

  • デザイナー
  • Web 担当者(発注側)
  • マーケター
  • コーダー / フロントエンドエンジニア

会話上での使用例

SNS 投稿で操作手順を動きで見せたいとマーケターから相談された場面

  • マーケター
    管理画面の操作手順を、動きで分かるように見せたいんです。
  • Web 担当者
    短い動きなら GIF アニメが手軽ですね。ただ長くなると容量が一気に増えるので、5 秒くらいに収めましょう。それ以上になりそうなら動画形式に切り替えます。

トップページの表示が遅い原因を SEO 担当者と調べる場面

  • SEO 担当者
    トップページの表示がどうも遅いんですよね。
  • Web 担当者
    画像を確認しましょう。重い GIF が混じっていると一気に遅くなります。1MB を超えているものがあれば、MP4 に変換したほうが読み込みは速くなりますよ。

関連 Lesson(本書本文)

Lesson 5-3 写真・動画素材の選び方