ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
| この記事の要点 |
|
概要
GIF (Graphics Interchange Format、発音は「ジフ」または「ギフ」で長らく議論が続いた) は、1987 年に CompuServe が策定した可逆圧縮のラスタ画像形式である。インターネット黎明期の事実上の標準で、Web ブラウザ Mosaic / Netscape Navigator が両対応していたため、初期ウェブのほぼすべての画像が GIF だった。当時の電話回線では、画像サイズを 256 色に絞ること自体が実用上の必須条件だった。
後年、アニメーション (複数フレームを 1 つのファイルに連結し、各フレームに表示時間を持たせる仕組み) が拡張仕様 GIF89a で加わり、これがミーム・リアクション動画文化を生んだ。Twitter / Discord / Slack で動く絵文字や反応画像のほとんどは、技術的には GIF か MP4 ループのいずれかである。
内部構造とマジックナンバー
GIF は ASCII で読めるシグネチャから始まる珍しい形式で、テキストエディタで開いても先頭の 6 バイトは判読できる。
| 場所 | HEX / ASCII | 意味 |
|---|---|---|
| 先頭 6 バイト | 47 49 46 38 37 61 = GIF87a | 1987 年版 (透過なし、アニメなし) |
| または | 47 49 46 38 39 61 = GIF89a | 1989 年版 (透過、アニメ、コメント等) |
| 7-10 バイト目 | 2 バイトずつ | 論理画面の幅・高さ (リトルエンディアン) |
| 11 バイト目 | パックドフィールド | グローバルカラーテーブル有無、色解像度 |
| 区切り | 2C | イメージブロック開始 |
| 区切り | 21 F9 | Graphic Control Extension (透過色・遅延) |
| 末尾 | 3B | トレイラー (ファイル終端) |
1 つのファイルに複数のイメージブロックを並べることでアニメーションを実現する。各フレームの直前に Graphic Control Extension を置き、表示時間 (1/100 秒単位) と透過色のインデックスを指定する。
主な用途
- SNS のリアクション・ミーム画像: Slack / Discord / Twitter で「うけた」を表現する短いループ動画。
- UI のローディングインジケータ: クルクル回るスピナー画像。現在は CSS アニメや SVG にほぼ置換された。
- チュートリアル動画の短いキャプチャ: 操作デモを 5-10 秒のループに収める用途。GitHub の README で頻出。
- 初期ウェブのバナー広告・ボタン: 90 年代〜2000 年代前半は GIF アニメ広告が氾濫した。今は CSS / Lottie / 動画に置換。
関連形式との比較
| 形式 | 色数 | 透過 | 圧縮 | アニメ | 同尺のサイズ感 |
|---|---|---|---|---|---|
| GIF | 256 色まで | 1bit | LZW 可逆 | あり | 1.0 (基準) |
| APNG | フルカラー | 8bit α | Deflate 可逆 | あり | 0.7〜1.2 |
| WebP | フルカラー | 8bit α | 非可逆/可逆 | あり | 0.3〜0.5 |
| MP4 (H.264) | フルカラー | なし | 非可逆 | あり (動画) | 0.05〜0.15 |
| WebM / AV1 | フルカラー | あり (一部) | 非可逆 | あり (動画) | 0.04〜0.10 |
「アニメ GIF」を実装したい場合、ウェブの今の常識は <video autoplay muted loop playsinline> で MP4 / WebM を再生するアプローチで、ファイルサイズが桁違いに小さくなる。GIF を直接配信するのは互換性のためだけ、と割り切ってよい。
編集・閲覧ツール
- ImageMagick:
magick -delay 10 -loop 0 frame*.png out.gifで連番画像から GIF アニメを生成。 - FFmpeg: 動画 → GIF。
ffmpeg -i in.mp4 -vf "fps=15,scale=480:-1" out.gif。palettegen / paletteuse を使うと品質が大幅に上がる。 - gifsicle: GIF 専用の最適化・編集 CLI。フレーム削除、パレット最適化、サイズ削減に強力。
- ScreenToGif (Windows): 画面キャプチャを直接 GIF / APNG / MP4 で吐ける軽量ツール。
- Photoshop: タイムラインパネルでフレーム単位編集。「Web 用に保存 (従来形式)」で GIF 書き出し。
注意点・落とし穴
- 256 色制限による色破綻: 写真や複雑なグラデーションを GIF にすると、ディザリングしてもバンディング (色の段差) が目立つ。動画 → GIF 変換時は palettegen で各クリップ最適パレットを作るのが定石。
- 1bit 透過の縁ガビガビ問題: 半透明が使えないので、丸いアイコンの縁が背景色と完全に切り替わる。背景色が決まっているなら同色で縁を作る、決まっていないなら PNG / WebP に切り替える。
- 巨大化しやすい: 30 秒のループで 20MB 超の GIF が珍しくない。SNS / Slack の添付サイズ制限を超える。
- LZW 特許 (歴史的事情): かつて Unisys 特許でフリーソフトに使用料を求める動きがあり、これが PNG 誕生の直接の動機。特許は失効済み なので現在は気にしなくてよい。
- アクセシビリティ: 自動再生 GIF は前庭障害・てんかんの誘因になり得る。重要な情報は GIF だけで伝えず、代替テキストを必ず添える。
- フレーム重ね合わせモード: 各フレームを「直前にどう重ねるか」(restore previous / restore background / do not dispose) の設定を誤ると、残像が積み重なる事故が起きる。
関連リンク
- 画像形式 — 本カテゴリの親ページ
- ファイル拡張子とは — 拡張子全般の概論
- PNG (.png) — 静止画では GIF の上位互換
- WebP (.webp) — アニメ用途で GIF の置換候補
- AVIF (.avif) — さらに高効率な次世代形式
- アニメーション コンテンツでの動画フォーマットの使用 — GIF を MP4 / WebM に置き換える具体的な実装ガイド
- 次世代フォーマットでの画像の配信 — <picture> での切り替え
ページの作成
親となるページを選択してください。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球
子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール
親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
子ページはありません
人気ページ
- 1 Eclipseで「サーバーに追加または除去できるリソースがありません。」の原因と対処法
- 2 tomcat の起動 / 停止ログと catalina.log・catalina.out の違い
- 3 JavaScript base URL 取得方法|window.location.origin と SSR/Node.js 対応
- 4 YouTube Data API v3 エラー一覧|403/400/404 の主要原因と切り分け
- 5 Spring Frameworkのアノテーション一覧
- 6 Laravel エラー一覧|500/Blade/DB 接続/ルーティングの代表エラー
- 7 3Dグラフィックスとは|モデリング/レンダリング/主要ソフトウェア (Blender / Maya)
- 8 【Spring】@Valueアノテーションとは
- 9 CATALINA_HOME の確認方法 (Linux / Mac)
- 10 【Spring】@Autowiredアノテーションとは
最近更新/作成されたページ
- IPv6とは|128bitアドレス・コロン16進表記/::省略・リンクローカル・SLAAC・デュアルスタック NEW 2026-06-22 12:34:44
- MAC アドレスフィルタリングの仕組みと限界 | ネットワーク入門 NEW 2026-06-22 12:19:10
- VPNとは|暗号トンネル・サイト間/リモートアクセス・IPsec/SSL-VPN/WireGuardを解説 NEW 2026-06-22 12:19:10
- Web通信プロトコル入門 HTTP/2・HTTP/3・WebSocket・gRPC・WebRTC | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/2 とは 多重化・HPACK・バイナリフレーム | ネットワーク入門 NEW 2026-06-22 12:17:25
- HTTP/3 (QUIC) とは UDP ベースの低遅延 Web 通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebRTC とは ブラウザ間 P2P の音声・映像・データ通信 | ネットワーク入門 NEW 2026-06-22 12:17:25
- gRPC とは HTTP/2 + Protocol Buffers の高速 RPC | ネットワーク入門 NEW 2026-06-22 12:17:25
- WebSocket とは 全二重リアルタイム通信 ws/wss | ネットワーク入門 NEW 2026-06-22 12:17:25
- HAProxy とは frontend/backend と設定例 | ネットワーク入門 NEW 2026-06-22 12:17:24
- TLS/SSLの仕組み|ハンドシェイク・暗号スイート・前方秘匿性・証明書検証をわかりやすく解説 NEW 2026-06-22 12:17:24
- CDN とは エッジキャッシュ・TTL・Cloudflare/CloudFront | ネットワーク入門 NEW 2026-06-22 12:17:24
- iptables/nftablesとは|テーブル・チェーン・ルール例・永続化をLinux視点で解説 NEW 2026-06-22 12:17:24
- ファイアウォールとは|パケットフィルタ・ステートフル・DMZ・次世代FW(L4/L7)を解説 NEW 2026-06-22 12:17:24
- 証明書と認証局(CA)とは|X.509・信頼チェーン・DV/OV/EV・失効(CRL/OCSP)を解説 NEW 2026-06-22 12:17:24
コメントを削除してもよろしいでしょうか?