MP4をGIFに変換する
MP4・WebM・MOVなどから必要な範囲を切り出し、FPS、サイズ、品質、色数、ループを設定してGIFとして保存できます。
動画GIF変換ツールを開く結論：必要部分、FPS、横幅を決めてから変換する
MP4を読み込んだら、まず開始位置と終了位置で一つの操作へ絞ります。次に掲載先の実寸へ幅を合わせ、10fps前後を基準に動きが伝わるか確認します。GIFは音声を持たず、色数にも制約があるため、変換結果は元動画と同じにならないことがあります。
MP4からGIFを作る基本フロー
| 段階 | 確認 |
|---|---|
| 入力 | MP4を1件読み込み、再生時間・寸法・元fpsを確認 |
| 範囲 | 開始・終了位置で一つの操作へTrim |
| 設定 | FPS、幅・高さ、品質、色数、Loopを選択 |
| 変換 | 概算Frame数と推定容量を確認して実行 |
| 保存 | Previewと実容量を確認してGIFを保存 |
用途別の初期設定候補
| 用途 | 開始候補 | 最終判断 |
|---|---|---|
| READMEの操作デモ | 短い範囲・640px・10fps | Repository上の表示幅と容量 |
| チャット | 数秒・320～640px・5～10fps | Upload上限と文字の可読性 |
| UIの細部 | 必要部分・640～800px・10～15fps | 細い文字とCursorの動き |
DevelopToolsの動画GIF変換で設定できる項目
現行ツールはMP4・WebM・MOV・MKV・AVI・MPEG・MPG・M4Vを1件読み込み、開始位置と終了位置、5・10・15・20・30fps、0.25～2倍速、幅と高さ、縦横比、品質、32～256色、無限または指定回数のループを設定してGIFへ変換します。変換前に出力時間、概算フレーム数、推定容量を確認でき、変換後はGIFのプレビュー、実容量、寸法、fps、フレーム数を確認して保存できます。
| 項目 | 現行ツールの対応 |
|---|---|
| 入力 | MP4・WebM・MOV・MKV・AVI・MPEG・MPG・M4Vを1ファイル |
| 切り出し | 開始秒・終了秒を0.001秒単位で入力。動画の再生位置を開始・終了へ設定可能 |
| 動き | 5・10・15・20・30fps、0.25・0.5・1・1.5・2倍速 |
| サイズ | 幅16～4096px、高さ16～4096px、縦横比維持、元サイズへ復元 |
| 色と品質 | 高画質・標準・軽量、32・64・128・256色。内部でpalettegenとpaletteuseを使用 |
| ループ | 無限、1・3・5・10回 |
| 確認と保存 | 変換前の概算、進捗・キャンセル、変換後のプレビュー・実容量・GIF保存 |
| 処理場所 | 同一サイトに配置したFFmpeg.wasmをブラウザ内で実行。入力と結果を外部APIへ送信しない |
カスタムfps、幅だけのプリセット、Dithering方式の直接選択、透過設定、予測容量の保証、複数動画の一括処理、音声付きGIFは実装していません。品質プリセットはDithering方式を内部で切り替えますが、個別の方式名をUIから選ぶ構成ではありません。記事では実装済みの項目だけを操作手順として案内します。
GIFは「必要な部分を、必要な大きさで」作る
GIFの容量は再生時間、1秒あたりのフレーム数、縦横の画素数、色数、画面内の動きや色変化に左右されます。GIFだからMP4より小さくなるとは限らず、写真や長時間の高解像度映像ではGIFの方が大きくなる場合があります。最初に必要な操作だけへ時間を絞り、掲載先の実寸へ縮小し、その後にfpsや色数を調整します。
固定の「最適値」はありません。5fpsは容量を抑えやすい一方で速い操作が飛びやすく、15fps以上は滑らかでもフレーム数が増えます。320pxは小さなインライン表示、640pxは一般的な記事内デモ、800pxは細かいUIを見せる候補ですが、実際のコンテンツ幅と文字の可読性を基準に判断します。
調整は、時間を短くする、縦横比を保って小さくする、fpsを下げる、色数や品質を調整する、の順で一項目ずつ試すと原因を切り分けやすくなります。
ブラウザで動画をGIFへ変換する手順
- 動画を1件読み込み、ファイル形式、再生時間、解像度、元fpsとプレビューを確認します。
- 再生位置を使うか秒数を入力し、GIFに必要な開始位置と終了位置だけへ絞ります。
- 掲載先の表示幅を基準に幅・高さを決め、縦横比を維持します。
- まず10fps前後、標準品質、256色などの基準設定で出力時間・フレーム数・推定容量を確認します。
- 変換後のGIFを最後まで再生し、動き、文字、色、ループ、実容量を確認して保存します。
推定容量は映像内容から求める目安であり、完成ファイルの容量を保証しません。判断には変換後に表示される実容量を使います。
GIFの色・音声・動画形式の制約
GIFは一般的なMP4動画と同じVideo Codecを持つ形式ではなく、複数の画像FrameをDelayとLoop情報で再生するAnimation形式です。拡張子だけを.mp4から.gifへ変更しても変換にはなりません。GIFは各Frameで使える色に制約があり、写真、半透明、細かなGradientは元動画と同じ色にできない場合があります。
現行ツールは動画からGIF用Paletteを生成し、そのPaletteで各Frameを量子化します。palettegenとpaletteuseはGIFの制約内で色の選び方を改善する手法であり、元動画の全色を保持するものではありません。GIFには音声を保存できないため、音声説明が必要ならMP4・WebMなどの動画形式を使います。
- 色の段差は256色という形式上の制約とDitheringの見え方を確認する
- 動きが粗い場合はfpsだけでなく元動画の動き、Speed、表示環境も確認する
- 縦動画は縦横比を保ち、横長の固定寸法へStretchしない
- 開始・終了場面とLoopの継ぎ目をプレビューで確認する
ブラウザ処理の負荷とプライバシー
DevelopToolsは同一サイトに配置したFFmpeg.wasmを読み込み、選択した動画をブラウザ内の仮想File Systemへ書き込み、解析・変換・読出しを行います。動画と完成GIFをDevelopToolsのサーバーや第三者APIへ送信する処理はありません。公開前の操作録画を扱う場合でも、保存したGIFに氏名、メールアドレス、Token、通知、社内URLなどが写っていないかは利用者が確認してください。
ブラウザ処理では入力動画、変換用Frame、Palette、完成GIFを端末Memory上で扱います。長時間、高解像度、高fpsの動画ほどCPUとMemoryを消費し、端末やBrowserによっては処理を完了できません。長い動画は数秒単位へ分割し、幅とfpsを下げて短い範囲から試してください。自分で作成した動画、または加工・公開の権限がある素材だけを使います。
FFmpegとFFmpeg.wasmの一次資料
CLIのOptionとFilterはFFmpeg公式Documentationを基準にしています。fps、scale、palettegen、paletteuse、-ss、-t、GIFの-loopはVersionやOption配置によって意味を確認する必要があります。業務Scriptへ組み込む場合は利用中のFFmpeg Versionと実データで検証してください。
具体例：8秒の画面操作をREADME用GIFへする
15秒のMP4から実際の操作がある8秒だけを選びます。元動画を残し、必要な操作だけをGIFへする前提で進めます。
640×360、10fps、標準品質、256色、無限ループを基準にします。完成後は文字の可読性、Loopの継ぎ目、実容量、README上の表示幅を確認し、問題があれば一つの設定だけを変更して再変換します。
- 元動画を読み込み、プレビューとMedia情報を確認します。
- 開始・終了位置を決め、出力する時間を短くします。
- 幅、高さ、fps、品質、色数、Loopを設定します。
- 概算値を確認して変換し、完成GIFを最後まで再生します。
- 実容量と表示品質を確認して別名で保存します。
元動画より小さくなることを前提にせず、完成GIFの実容量と掲載先での見え方を確認してください。
よくある質問
- MP4よりGIFの方が必ず小さくなりますか？
- いいえ。時間、解像度、fps、動きによってGIFの方が大きくなる場合があります。
- GIFに音声も保存できますか？
- できません。音声が必要ならMP4やWebMなどの動画形式を使用してください。