動画の一部をGIF / WebPにして共有する方法

一番効くのは、必要な場面だけに短くすること

アニメーションの容量はフレーム数が増えるほど大きくなりやすいため、品質を下げる前に再生時間を短くするのが効果的です。たとえば操作説明なら、マウスを動かし始める前の待ち時間や、完了後の静止時間を削るだけでもフレーム数を減らせます。

サムネイル付きタイムラインで開始位置Sと終了位置Eを決め、「選択範囲を再生」で必要な動きが収まっているか確認します。元動画全体をGIFにするのではなく、1つの説明に必要な範囲を1つのアニメーションへ切り出す方が扱いやすくなります。

横幅とFPSは、見る場所に合わせて決める

チャット内の小さな説明やREADMEの補助画像なら、元動画が1920pxや4Kでも同じ横幅を維持する必要はないことが多いです。まず480px前後など実際の表示サイズに近い値から試し、文字が読めなければ720pxへ上げる方が容量を制御しやすくなります。

FPSも同様です。カーソル移動や簡単なUI操作は15fps程度でも内容が伝わる場合があります。動きが速い場面だけ20〜30fpsを検討し、滑らかさの差より容量増加の方が大きいなら低い設定へ戻します。

GIFとAnimated WebPは用途で使い分ける

GIFは対応範囲が広い一方、1フレーム最大256色なので、写真やグラデーションが多い映像では色が減りやすく、Ditherによって粒状感が出ることがあります。同程度の見た目を目指すと、ファイルサイズが大きくなる場合もあります。

Animated WebPは対応している環境ならフルカラーを使え、同じ用途でGIFより小さくできることがあります。ただし、掲載先や閲覧環境がAnimated WebPへ対応しているかは確認が必要です。互換性を優先する資料ならGIF、Web向けで対応環境が明確ならWebPというように決めます。

クロップで見せたい範囲だけ残す

画面録画では、操作に関係のない余白、ブラウザの周辺UI、別のウィンドウなどが含まれていることがあります。1:1、4:3、16:9、9:16のクロップと位置調整を使い、見せたい動きがある領域へ絞ると、同じ横幅でも必要な情報を大きく見せられます。

GIF / WebPには元動画の音声は入りません。音声説明が重要な素材は無理にアニメーションへせず、動画のまま圧縮する方が適しています。また、長時間・高解像度・高FPS・Lossless WebPは端末メモリを多く使うため、特に4K素材では短い範囲・480px・15fps程度から試します。

手順

1. 動画→GIF / WebPを開き、変換したい動画を選択またはドロップします。
2. サムネイル付きタイムラインで開始位置Sと終了位置Eを設定し、「選択範囲を再生」で必要な場面だけになっているか確認します。
3. 必要なら1:1・4:3・16:9・9:16でクロップし、見せたい位置へ調整します。
4. まず480px・15fps程度から試し、用途に応じて横幅とFPSを上げ下げします。
5. 互換性を重視するならGIF、対応環境で色数や容量を重視するならWebPを選び、品質設定を調整して作成します。
6. 完成したアニメーションをプレビューし、動き・文字の読みやすさ・容量を確認して保存します。

注意点

• 容量が大きすぎるときは、品質を大きく落とす前に「再生時間 → 横幅 → FPS」の順で見直すと原因を把握しやすくなります。
• 画面録画は不要な周辺部分をクロップすると、同じ出力幅でも操作部分を大きく見せられます。
• GIF / WebPは音声を持たないため、ナレーションや会話が必要ならVideo Compressorで動画のまま軽くする方が向いています。