mcpField
V
video-to-gif

video-to-gif

github.com/cognyaiクリエイティブ・メディア11148 回インストール2 週間前に更新
リポジトリ

video-to-gif について

video-to-gifは、MP4、MOV、WebMを共有先に合わせたGIFへ変換するスキルです。FFmpegのパレット生成と用途別プリセットで、画質とファイルサイズを調整します。

主な機能

  1. 01共有先別のサイズ・フレームレート設定
  2. 02FFmpegによる2パスのパレット描画
  3. 03ffprobeでの動画情報確認
  4. 04出力サイズと寸法の検証
  5. 05変換前のトリミング

活用シーン

  1. 01Slackスレッド向けのループ動画作成
  2. 02GitHub READMEへのアニメーション掲載
  3. 03メールやソーシャルカード用GIFの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/cognyai/claude-code-marketing-skills --skill video-to-gif

インストール後、Claude Code で/video-to-gifを入力して読み込まれたか確認します。

詳細

動画を GIF に変換

動画(MP4、MOV、WebM)を、投稿先の表示環境で実際にファイルサイズが小さく、実際に見栄えのよい GIF に変換します。/tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video と組み合わせることで、MP4 に対応していない場所(Slack のスレッド、X のカード、GitHub の README、トランザクションメール)でレンダリング結果を共有できます。

GIF は動画形式としてはひどいものですが、至るところで使われているため、FFmpeg の 2 パス palettegen/paletteuse フローを使い、この形式で可能な限り見栄えよく仕上げます。

使用方法

/video-to-gif launch.mp4 — 対話形式で、投稿先を尋ねます /video-to-gif launch.mp4 slack — Slack 向けに調整します /video-to-gif launch.mp4 reddit — Reddit のコメント欄向けに調整します /video-to-gif launch.mp4 github — GitHub の README 向けに調整します /video-to-gif launch.mp4 twitter — X/Twitter 向けに調整します /video-to-gif launch.mp4 email — トランザクションメール/ニュースレター向けに調整します

前提条件

ffmpeg -version | head -1   # must exist
ffprobe -version | head -1

FFmpeg がインストールされていない場合:

# macOS
brew install ffmpeg
# Debian/Ubuntu
sudo apt install ffmpeg

手順

1. ソースを確認する

ffprobe を実行して、ソースの長さ、サイズ、フレームレートを取得します。適切なプリセットを選び、生成したファイルが上限に収まらない場合は事前にユーザーへ警告するために必要です。

ffprobe -v error -show_entries stream=width,height,r_frame_rate -show_entries format=duration -of default=noprint_wrappers=1 <input>

取得する情報:ソースの幅、高さ、長さ(秒)、fps。

2. プリセットを選ぶ

ユーザーが投稿先を指定した場合は、対応するプリセットを使います。指定がなければ尋ねます。各プリセットは、投稿先ごとの実際のサイズ上限と見た目の慣習に合わせて調整されています。

プリセット幅FPSループ理由
slack48012はいアップロード上限は50MB。スレッドはすばやくスクロールされるため、滑らかさより読みやすさを優先
twitter48015はいGIF の上限は15MB。上限を超えると自動的に MP4 に変換され、ループ再生が失われる
reddit60015はい上限は100MBだが、画像ホスティングのサイドバーは20MBを超えると表示されなくなる
github72015はいREADME の上限は10MB。超過すると GitHub はファイルを通知なく破棄する
email48010はいGmail のクリップ上限は5MB。多くの ESP は1MBを超えるとアニメーションを除去する
web80018はいランディングページや製品ブログ向けの汎用フォールバック

目安:

  • ソースが6秒未満なら、サイズ上限を超えずに fps を約3上げられることがほとんどです。
  • ソースが12秒を超えるなら、fps を2~3下げ、トリミングも検討してください。
  • 拡大はしないでください。ソースの幅がプリセットの幅より小さい場合は、ソースの幅を維持します。
  • 音声は除去してください(GIF には音声を含められません)。手順を省けるうえ、画面キャプチャに意図せず入ったノイズも取り除けます。
3. 2 パスでパレットを使ってレンダリングする(これが唯一の正しい方法です)

1 パスだけで GIF をレンダリングすると、縞模様やディザが発生し、ファイルサイズも過大になります。正しい方法は 2 パスです。

  1. ソースから最適な256色のパレットを生成します。
  2. Floyd-Steinberg ディザリングを適用して、そのパレットを使います。

FFmpeg の palettegen フィルターから paletteuse フィルターへ渡すパイプラインを使います。フィルタースプリットを使い、1つのコマンドとして実行してください。

ffmpeg -y -i "<input>" \
  -vf "fps=<FPS>,scale=<WIDTH>:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff[p];[s1][p]paletteuse=dither=floyd_steinberg" \
  -loop 0 \
  "<output.gif>"

フィルターチェーンについて:

  • まず fps=<FPS> を指定します。これにより、実際に残すフレームからパレットが生成されます。
  • scale=<WIDTH>:-1 はアスペクト比を維持し、-1 は高さを丸めます。偶数寸法が必要なコーデックでは -2 を使います(GIF には不要ですが、使っても問題ありません)。
  • flags=lanczos は汎用のダウンスケーリングに最適です。
  • stats_mode=diff はパレットの色を選ぶ際、動きのある領域をより重視します。テキストがより鮮明になり、UI が見やすくなり、縞模様も減ります。
  • dither=floyd_steinberg が最適なデフォルト設定です。グラデーションのない UI やシャープなエッジでは、代わりに dither=bayer:bayer_scale=3 を試してください。ファイルはやや大きくなりますが、ベタ塗り部分にディザノイズが発生しません。
  • -loop 0 は無限ループです。1回だけ再生するには -loop 1 を使います(Slack と Twitter では無限ループが一般的です)。
4. レンダリングして確認する

コマンドを実行します。その後、次を確認してください。

# Check the file size
ls -lh "<output.gif>"

# Check the GIF's actual dimensions and frame count
ffprobe -v error -count_frames -select_streams v:0 \
  -show_entries stream=width,height,nb_read_frames \
  -of default=noprint_wrappers=1 "<output.gif>"

ファイルが投稿先のサイズ上限(上の表を参照)を超える場合は、次のいずれか1つを行います。

  1. FPS を2~3下げて再レンダリングします(品質を最も保ちやすい方法です)。
  2. 幅を約80px小さくして再レンダリングします(テキストが読みにくくなる場合があります)。
  3. まずソースをトリミングし(-ss <start> -t <duration>)、再レンダリングします。

3つすべてを同時に行わないでください。何が効果的だったか分かるよう、一度に1つの変数だけを変更します。

5.(任意)変換前にトリミングする

ソースが長い場合は、パレット処理の前にトリミングします。パレットの精度が高まり、ファイルサイズも小さくなります。

# Take 8 seconds starting at 2.5s in
ffmpeg -y -ss 2.5 -t 8 -i "<input>" -c copy "<input>.trimmed.mp4"
# then run the two-pass palette command on .trimmed.mp4

-ssを-iより前に指定すると、キーフレーム単位で高速にシークできますが、精度はやや低くなります。フレーム単位で正確にトリミングするには、-ssを-iの後に指定します(処理は遅くなります)。

6. ファイルを返す

以下を出力します。

  1. 出力 GIF のパス
  2. 最終的なディスク上のサイズ
  3. 最終的な寸法とフレーム数
  4. 容量上限の状態:「Slack の上限(50MB)以内 ✓」/「GitHub README の上限(10MB)超過。fps=12 で再試行 ✗」

ワンライナー(希望が決まっている場合)

# Slack-tuned (480px / 12fps)
ffmpeg -y -i in.mp4 -vf "fps=12,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff[p];[s1][p]paletteuse=dither=floyd_steinberg" -loop 0 out.gif

# Twitter-tuned (480px / 15fps)
ffmpeg -y -i in.mp4 -vf "fps=15,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff[p];[s1][p]paletteuse=dither=floyd_steinberg" -loop 0 out.gif

# GitHub README-tuned (720px / 15fps)
ffmpeg -y -i in.mp4 -vf "fps=15,scale=720:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff[p];[s1][p]paletteuse=dither=floyd_steinberg" -loop 0 out.gif

# Email-tuned (480px / 10fps, single loop)
ffmpeg -y -i in.mp4 -vf "fps=10,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen=stats_mode=diff[p];[s1][p]paletteuse=dither=floyd_steinberg" -loop 0 out.gif

よくある間違い

  1. GIF を単一パスでレンダリングする — ffmpeg -i in.mp4 out.gifでは、見栄えが悪くサイズの大きい出力になります。必ずパレット処理を使用します。
  2. アップスケーリングする — GIF を拡大してはいけません。「悪い」から「非常に悪い」状態になります。同じサイズを維持するか、縮小してください。
  3. トークヘッド動画で高 FPS にする — 18fps を超えると GIF では無駄です。12~15fps に下げ、その分の容量を解像度に回してください。
  4. 音声を含める — GIF には音声を含められません。音声が必要で、利用先が MP4 に対応している場合は、代わりに MP4 を使用してください。
  5. 長い GIF(15 秒超) — 30 秒以上必要な場合は、GIF ではなく MP4 または WebP が適している可能性があります。別の形式で問題ないかユーザーに確認してください。
  6. 40MB の GIF をメールで送る — 多くの ESP は 1MB を超えるアニメーションを削除するため、受信者には最初のフレームだけが静止画として表示されます。メール用プリセットを使用するか、リンク付きの静的な PNG のヒーロー画像に切り替えてください。

関連項目

  • /tiktok-launch-video、/reddit-launch-video、/linkedin-launch-video — このスキルで変換するソース MP4 を作成します
  • /welcome-series、/winback-engine — 小さな埋め込み GIF でエンゲージメントを高められる場所です

コメント