GIFから動画へ変換：MP4およびWebMのワークフロー

最終更新日: June 28, 2026

Animated GIFは共有が簡単ですが、ウェブサイト、製品デモ、ヘルプセンター、または有料のソーシャルプレビューにとって、通常は適切な最終フォーマットではありません。短いMP4やWebMを使用することで、実際のビデオ圧縮を活用しつつ、同じループを維持でき、再生コントロール、ポスターフレーム、ブラウザのビデオ動作を利用できます。

本ガイドでは、GIFを動画に変換すべきケース、どのフォーマットを選ぶべきか、ループをきれいに保つ方法、そして公開前に確認すべき事項について解説します。

この書き直しにあたり、アップロード前の1400 by 788 WebPの記事グラフィックを4点測定しました。これらは20 KBから31 KBの範囲で、記事画像全体の合計転送サイズは約104 KBでした。

簡単な回答：GIFは動画に変換すべきか？

はい、ファイルがページコンテンツ、製品デモ、チュートリアルループ、ソーシャル投稿、または繰り返しアニメーションとして使用される場合は、animated GIFをMP4またはWebMに変換してください。元のGIFは、プラットフォームが特定のGIFアップロードを要求する場合、またはアニメーションが非常に小さく動画への変換が問題にならない場合にのみ保持します。

最も幅広いアップロードと再生サポートが必要な場合はMP4を使用します。ウェブページを制御しており、効率的なブラウザ再生を望む場合はWebMを使用します。本番環境のウェブサイトの場合、<video>要素内にWebMとMP4の両方のソースを提供することが通常最もクリーンなオプションです。

Googleのweb.devガイダンスでは、大きなanimated GIFを動画に置き換えることを推奨しています。なぜなら、GIFは同等のビデオファイルよりもはるかに重くなる可能性があるからです。同じガイドでは、Replace animated GIFs with videoにて、<video>要素におけるautoplay、loop、muted、playsinline属性を使ったGIFのような動画パターンを紹介しています。

なぜGIFファイルはこれほど重いのか？

GIFはアニメーションを画像フレームとして保存するものであり、現代のインターフレームビデオ圧縮ではありません。これは小さなステッカーやアイコンには問題ありません。しかし、900pxの製品デモ、画面録画、または数秒間再生されるミームスタイルのクリップになると、大きな問題となります。

コストは以下の3つの場所で現れます：

• GIFは、同じ動きがMP4またはWebMとしてエンコードされた場合よりも多くのバイトを転送する可能性があります。
• ブラウザはGIFを画像として扱うため、通常のビデオコントロールやソースフォールバックを失います。
• ページ上部にある大きなGIFは、知覚される読み込み速度を低下させる可能性があります。
• GIFの透過性と限られたカラー処理は、リサイズ後に粗いエッジを生み出すことがあります。
• エディターは、書き出し前にデッドスペースをトリミングし忘れることが多く、これがすべてのフレームで無駄を積み重ねてしまいます。

ソースがすでに画面録画、UIデモ、カメラクリップ、製品スピン、またはチュートリアルループである場合、動画がより自然な最終フォーマットです。静止画像から始める場合は、まずアニメーションを作成し、その後最終的なループを変換します。そのワークフローの場合、ビデオをエンコードする前にGIF Maker from Imagesを使用してください。

品質を失わずにGIFをMP4に変換する方法は？

まず、ソースのGIFを検査することから始めます。寸法、期間、フレームレート、可視テキストサイズ、透過性が重要かどうかを確認します。次に、変換前にトリミングとリサイズを行います。書き出し後にトリミングを行うと時間が無駄になります。なぜなら、エンコーダーはすでに送信されるべきではないピクセルを処理しているからです。

以下の順序を使用してください：

1. GIFを開き、ループポイントを確認します。
2. 余白、ブラウザのクローム、デッドなUIを取り除きます。
3. ソースキャプチャサイズではなく、最大の実際の表示サイズにリサイズします。
4. 一般的な共有にはMP4を、制御されたウェブページにはWebMを選択します。
5. 自動再生が予想される場合は、クリップをミュートに保ちます。
6. ビデオがコントロールを表示したり、ゆっくりロードしたりする可能性がある場合は、ポスターフレームを追加します。
7. 公開前にモバイルでテストします。

FFmpegを使用する場合、実用的なMP4コマンドは以下の通りです：

ffmpeg -i source.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -movflags faststart -pix_fmt yuv420p output.mp4

このクロップ式は、奇数寸法を偶数にすることで、一般的なH.264のエクスポート問題を回避します。yuv420pピクセルフォーマットはMP4再生のための互換性選択です。faststartフラグはメタデータを移動させるため、ネットワーク経由でより早く再生を開始できます。

WebMの場合：

ffmpeg -i source.gif -c:v libvpx-vp9 -b:v 0 -crf 36 output.webm

CRF値を低くするとファイルサイズが大きくなり、品質が高くなります。値が高いほど小さく、粗くなります。UIのテキストの場合、一つの数値を信頼するよりもいくつかのエクスポートを比較することをお勧めします。

どのフォーマットを選ぶべきか？

フォーマットの選択は、ループがどこで公開されるかによって異なります。MP4は通常、より多くのアップローダーや再生コンテキストで機能するため、実用的なデフォルトです。WebMは複数のソースを提供できるウェブサイトで役立ちます。

MDNの<video>リファレンスでは、ソースフォールバックパターンとHTML video要素で利用可能なブラウザ属性がthe video element docsに文書化されています。変換されたループがアップロードされたソーシャルアセットではなくウェブページの一部である場合は、このパターンを使用してください。

同じ資産パイプラインにおける静止画像フォーマットの決定については、Image Formats ExplainedとAVIF vs WebP Comparisonを読んでください。これらのガイドは、変換されたビデオがポスター画像、サムネイル、またはOpen Graph画像を必要とする場合にも役立ちます。

きれいなループにとって最も重要な設定は？

最高の変換設定とは、ループの目に見える作業を保護するものです。製品デモには読みやすいテキストが必要です。リアクションクリップにはスムーズな動きが必要です。チュートリアルループには、視聴者が何を見るのかを説明する最初のフレームが必要です。

自動再生には特別な注意が必要です。Chromeのautoplayポリシーは、多くのケースでミュートの自動再生を許可しますが、ユーザーが操作を行った場合やその他の条件が適用されない限り、音声付きの自動再生は制限されます。製品表面でのサイレントループに依存する前に、Chrome's autoplay policyで現在のブラウザ動作を確認してください。

ポスター画像、サムネイル、またはGIFソースフレームも圧縮する必要がある場合は、Image Compression Deep Diveを使用してください。配信とキャッシュヘッダーについては、Image CDN Guideを使用してください。

透過性、キャプション、アクセシビリティはどうですか？

GIFの透過性は、MP4に自動的にはマッピングされません。MP4は通常不透明です。アニメーションが変化する背景の上にアルファ透過性を必要とする場合は、ターゲットブラウザでWebMのアルファサポートをテストするか、固定背景でアニメーションを再設計してください。

キャプションはaltテキストとは異なります。画像として埋め込まれたGIFにはaltテキストを設定できますが、ビデオには周囲のテキスト、音声がある場合のキャプション、そして役立つポスターフレームが必要です。変換されたループがUIステップを実演する場合は、読者が動きだけに依存しないように、近くの本文にそのステップを記述してください。

以下のアクセシビリティと公開リストを使用してください：

• 必須の指示はアニメーション内だけでなく、テキストでも保持する。
• 点滅する動きや急激な色の変化は避ける。
• 長いデモの場合は一時停止コントロールを提供する。
• 再生前にクリップを説明するポスターフレームを使用する。
• クリップに音声がある場合は、キャプションまたはトランスクリプトテキストを含める。
• 音声付きのビデオを自動再生しない。
• 重要なサポート資料である場合は、ユーザーがクリップをダウンロードまたは開けるようにする。

ビデオが純粋に装飾的なものである場合、コンテンツフローから削除するか、静止したWebPに置き換えすることを検討してください。動きはタスクを明確にするべきであり、注意をそらすものであってはいけません。

ウェブサイトで変換されたビデオをどのように公開すべきか？

ウェブページの場合、GIFのような動画パターンはシンプルです：

<video autoplay loop muted playsinline poster="/demo-poster.webp">
  <source src="/demo-loop.webm" type="video/webm">
  <source src="/demo-loop.mp4" type="video/mp4">
</video>

その後、エディター内のファイルだけでなく、実際にレンダリングされたページを確認してください。レイアウトシフト、ぼやけたテキスト、遅延するポスター、モバイルの再生動作に注意を払ってください。最初のフレームが重要である場合は、WebPのポスターとしてエクスポートし、CSSでアスペクト比を確保してください。

出荷前に、このチェックリストを実行してください：

• 最終的なビデオがソースGIFよりも小さい。
• 動きが始まる前に最初のフレームに意味がある。
• テキストが390px幅のスマートフォン画面で読みやすいままである。
• ループポイントがジャンプしない。
• MP4とWebM MIMEタイプが正しい。
• ポスター画像が圧縮され、キャッシュ可能である。
• 可能性のあるLargest Contentful Paintアセットが不必要に遅延していない。
• 自動再生が予想される場合はビデオがミュートになっている。
• ビデオの読み込みに失敗してもページが機能する。
• CDN URLがHTTP 200を返す。

より広範な公開前のチェックを行うには、Complete Image Optimization Checklistを使用してください。同じ規律が適用されます：適切な寸法、適切なフォーマット、クロール可能なアセットURL、そしてテンプレート内に隠された過剰なメディアがないこと。

代わりにGIFを保持すべきなのはどんな時か？

ターゲットプラットフォームがGIFのみを受け入れる場合、アニメーションが小さなインラインのリアクションである場合、またはビデオアップロードがユーザーエクスペリエンスを変えてしまうチャットツールでループが使用される場合は、GIFを保持してください。単に動画の方がモダンに聞こえるからといって変換しないでください。

実用的なルールは、最終アセットを配信先に照らしてテストすることです。MP4の方がシャープに見え、高速にロードされ、正しく動作する場合は、それを使用します。プラットフォームがMP4を不格好なプレイヤーで囲んだり、ループ動作を取り除いたりする場合、そのチャネルではGIFを保持し、他の場所で動画を使用してください。

ウェブページの場合、大きなGIFは稀であるべきです。ループを変換し、ビデオを公開し、元のGIFは本番アセットとしてではなく編集可能なソースファイルとして保持します。