🌀 動画を GIF に
一部を切り出してアニメ GIF に
開始位置を動かすとプレビューがそのコマに移動し、どこから切り出すか確認できます。
ℹ️ GIF は 256 色までのため、グラデーションや実写ではバンディングが出ます。これは形式そのものの制約です。エンコードはブラウザ内で行われ、動画は送信されません。
🔒 すべての処理はブラウザ内で完結します。ファイルがサーバーに送信されることはなく、私たちが中身を見ることもありません。タブを閉じれば何も残りません。
使い方の手順
- 動画を選ぶ MP4・WebM・MOV に対応します。動画はアップロードされません。読み込み・コマ抽出・エンコードのすべてがブラウザ内で行われます。
- 開始位置と長さを設定 プレビューがそのコマに移動するので、どこから始まるか確認できます。2〜4 秒が実用的な長さです。GIF はフレーム間圧縮がないため各コマが完全な画像であり、長さに比例してファイルが増えます。
- fps と幅を選ぶ この 2 つがファイルサイズを決める主要な調整項目です。10 fps・480px が good な出発点です。重すぎる場合はまず幅を(もっとも効きます)、次に fps を下げてください。
- 実行する コマを順に抽出し、共通の 256 色パレットを算出してから GIF にエンコードします。進捗はステータス行に表示されます。コマ数が多いと少し時間がかかりますが正常です。
- ダウンロード チャット・SNS・記事にそのまま貼れる GIF が得られます。大きすぎる場合は、完成した GIF を圧縮するより、幅を下げて作り直すほうがはるかに効果的です。
こんなときに使えます
ミーム・リアクション素材
動画から面白い動きを切り出せば、LINE・Discord・掲示板にそのまま貼れます。GIF が today まで生き残っている主な理由がこれで、どこでも再生され、クリックも不要です。
記事内での操作解説
チュートリアルで「ここをクリックしてこうドラッグ」を示すなら、GIF 1 枚がスクリーンショット 5 枚に勝ります。記事内で自動再生されるため、読者が何も押す必要もありません。画面を録画してここで変換するだけです。
GitHub や技術文書でのデモ
README や技術文書に GIF を置くのはほぼ慣例です。動画プレーヤーが不要で、Markdown が描画される場所ならどこでも動きます。幅は 640 以下が目安です。GitHub の本文カラムはさほど広くありません。
動画を置けない場所
一部のプラットフォーム、メールマガジン、社内システムは動画の埋め込みに対応していなくても画像は扱えます。GIF は「画像」の資格を保ったままアニメーションできる唯一の形式です。
GIF の 2 つの本質的な制約
GIF がなぜ大きく、そしてしばしば見栄えが悪いのかを理解すると、設定を的確に決められます。
最大 256 色。1987 年の設計上の決定で、1 コマに使える色は最大 256 種類です。実写の動画には数十万色が含まれ得るため、そこまで圧縮すると空・肌・影といった連続的な部分に段差の縞が現れます。
フレーム間圧縮がない。現代の動画コーデックは前のコマからの差分だけを保存するため、静止した背景はほとんど容量を使いません。GIF にはその仕組みがなく、各コマが完全な画像です。5 秒 500KB の動画が 8MB の GIF になるのはこのためです。
小さく、かつ見られる状態にするには
3 つの調整項目は効き方が大きく異なります。次の順に調整してください。
- 幅 — 圧倒的に効きます。幅を半分にすればピクセル数は 4 分の 1。480 → 320 でファイルが半分以下になることも珍しくありません。
- 長さ — 線形に効きます。時間を半分にすればファイルも半分。多くの GIF は実際に動きのある 2〜3 秒だけで足ります。
- フレームレート — こちらも線形ですが、下げすぎると紙芝居になります。10 fps が一般的な下限で、8 fps ではカクつきが分かります。
GIF に向く素材・向かない素材
向いている:画面録画、UI 操作のデモ、イラストやアニメ、ベタ塗り中心の映像。もともと色数が少ないため 256 色で十分足り、圧縮も効きます。
向いていない:実写映像、風景、人物のクローズアップ、グラデーションやノイズの多い映像。バンディングとファイルサイズの両方の問題を同時に抱えることになります。
素材が後者に当てはまり、掲載先が動画に対応しているなら、素直に MP4 を使うことを真剣に検討してください。GIF の価値は品質ではなく互換性にあります。
よくある質問
GIF の色が変で、階段状の縞が出るのはなぜ?
なぜファイルがこんなに大きいの?
もっと良い選択肢はありますか?
動画はアップロードされますか?
<video> と canvas で行い、パレットの算出と LZW エンコードもこのページ自身の JavaScript が処理します。外部ライブラリは一切使わず、ネットワーク通信も発生しません。次に使いそうなツール
画像の作業は一度で終わらないことがほとんどです。「動画を GIF に」とよく一緒に使われるのはこちら:
- 🎬 動画からコマ抽出 — 任意の時点をカバー画像に
- 📐 サイズ変更 — 幅・比率・指定サイズで変更
- 🎯 指定サイズに圧縮 — 2MB と指定すれば 2MB 以下に
仕上げたものをそのまま共有しますか?アップロードなら画像・写真・動画を短縮リンクにでき、パスワード・有効期限・閲覧回数の上限も設定できます。ツール一覧もどうぞ。
ほかのツール
画像を圧縮
画質を保ったままファイルを縮小
指定サイズに圧縮
2MB と指定すれば 2MB 以下に
HEIC を JPG に
iPhone の写真を汎用形式へ
EXIF の確認・削除
写真に含まれる情報を確認して削除
証明写真サイズ
パスポート・証明写真、印刷用シートも
サイズ変更
幅・比率・指定サイズで変更
画像を拡大
最大 4 倍まで拡大
画像を切り抜き
ドラッグで残す範囲を選択
画像を回転
一括で回転・反転
透かしを追加
位置と透明度を調整できる文字透かし
ぼかし・マスク
顔・ナンバー・個人情報を隠す
JPG に変換
PNG・GIF・WebP を JPG へ
JPG を PNG に
可逆圧縮の PNG または WebP へ
PNG を WebP に
ファイルサイズを 3 割以上削減
グリッド分割
3×3 に分割して Instagram へ
画像を連結
複数画像を 1 枚の長い画像に
ファビコン作成
各サイズと .ico を一括生成
カラーパレット抽出
主要な色を HEX・CSS 付きで抽出
SVG を PNG に
ベクターを任意サイズのラスターへ
画像を Base64 に
Data URI・CSS・HTML を生成
動画からコマ抽出
任意の時点をカバー画像に
単色背景を除去
白背景・グリーンバックの商品写真向け
画像から文字起こし
スクリーンショットの文字を抽出
画像を PDF に
複数の画像を 1 つの PDF に
PDF を画像に
各ページを JPG / PNG に変換