デモ動画をGIF・MP4に変換するツールをGoogle Colabで作りました。

このサイトがお役に立ったら🌟で応援お願いします🙏

Star on GitHub

開発したツールやプロダクトをGitHubのREADMEやSNSで紹介するとき、デモ動画やGIFを添付すると伝わり方が全然違いますよね。 でも、いざ動画を変換しようとすると「SaaSはサブスクが必要」「ローカルツールは重い」という壁にぶつかります。

そこで、Google Colabの無料環境でffmpegを動かして、画面録画をそのままGIF・MP4に変換できるツールを作りました。ブラウザだけで完結するので、環境構築もソフトのインストールも不要です。

【新機能】 画面録画の特定箇所をズームアップするオプション機能を追加しました。デモ動画で重要な操作を強調したいときに便利です。

作ったもの

🚀 今すぐ試す

面倒な環境構築は不要です。以下のリンクからブラウザ上ですぐに実行できます。

• ⚡️ Google Colab で実行する
  Make Demo GIF / MP4（日本語版）
  クリックして再生ボタンを上から押すだけで動きます。

• 🐙 GitHub でコードを見る
  hiroaki-com/colab-video-converter
  ソースコードの確認や、Star / Fork はこちらから。

なぜこれを作ったのか

GitHubのREADMEにGIFを貼ると、プロジェクトの第一印象がぐっと良くなります。動いている様子が一目でわかるので、読んでもらえる確率も上がる気がしています。

ただ、画面録画をGIFに変換する作業が地味に面倒でした。

SaaSツールはブラウザで完結して便利だけど、品質設定を細かく触ろうとすると有料プランが必要だったりする。ローカルのGUIツールはOSのアップデートのたびに動かなくなったりして管理が煩わしい。

エンジニアとしては、動画変換ツールの使い方をキャッチアップすることは学習の本質ではないし、SaaSにお金を払い続けるのも気が引けます。どうせなら自分で作って、好きなように使い回せるものにしようと思いました。

Google Colabなら無料でffmpegが動かせるし、UIをノートブック上に作れば設定もGUIで完結する。そういう発想でこのツールを作りました。

使い方

セルを上から順に実行して、UIを操作するだけです。Pythonのコードを書く必要はありません。

① セットアップ

最初のセルを実行すると、ffmpegが自動でインストールされます。

② 動画をアップロード

ファイル選択ダイアログが開くので、変換したい動画を選択します。複数ファイルを選択すると結合できます。

対応入力形式: .mov .mp4 .avi .mkv .webm

③ 結合順を指定（複数ファイルの場合）

複数の動画をアップロードした場合、ドロップダウンで結合順を指定します。1本の場合は自動的にスキップされます。

④ 出力形式・品質・速度を設定

ラジオボタンで出力形式と品質を選択します。

出力形式の選び方

形式	特性	向いている用途	向かない用途
GIF	自動再生・ループ・あらゆるMarkdownで動く。256色・ファイル大	GitHub README・Zenn / Qiita	ファイルサイズが厳しい場面
MP4 (H.264)	高品質・小容量・フルカラー。再生にはプレイヤーが必要	X / Slack / GitHub README（クリック再生）	自動再生・ループが必須の場面

GIF品質プリセット

プリセット	横幅	FPS	色数	用途
GitHub README用	960px	15fps	256	README埋め込み（推奨）
SNS・軽量用	640px	10fps	128	ファイルサイズ重視
高品質	1280px	20fps	256	品質重視
カスタム	任意	任意	任意	細かく調整

MP4品質プリセット

プリセット	CRF	備考
高品質	18	ファイル大きめ
標準	23	バランス重視（推奨）
軽量	28	ファイル小さめ
カスタム	0–51	細かく調整

再生速度も調整できます。長い録画を1.5〜2.0倍速にすると、よりコンパクトなデモ動画になります。

⑤ プレビュー生成

再生ボタン（▶）を押すとプレビューが生成されます。最終出力と同じ解像度・フレームレートのプレビュー動画が作成されるので、ズーム設定のためのタイムスタンプを確認できます。設定を変更してプレビューを再生成したい場合は、④の設定を変更してこのセルを再実行するだけです。最初からやり直す必要はありません。

プレビューは高速プリセットを使い、音声なしで生成されます。

⑥ プレビュー確認

プレビュー動画がノートブック内で再生コントロール付きで表示されます。再生・一時停止を使って、ズーム効果を適用したい正確なタイムスタンプを確認してください。次のステップでズームを追加する場合は、ここで確認した秒数をメモしておきます。

⑦ ズーム設定（任意）

新機能: デモ動画の特定箇所を強調するズーム効果を追加できるようになりました。

使い方：

1. 「ズームを追加する」にチェックを入れるとズーム機能が有効になります
2. 「＋Zoomイベント追加」をクリックして新しいズーム設定を追加
3. 各ズームイベントで以下を設定：
   • ズームエリア: 3×3グリッドから選択（左上、中央、右下など）
   • 最大倍率: ズームのピーク倍率（1.1倍〜5.0倍）
   • 開始(秒): ズームを開始する時刻
   • イン(秒): 等倍から最大倍率まで拡大する時間
   • キープ(秒): 最大倍率を維持する時間
   • アウト(秒): 最大倍率から等倍まで縮小する時間

タイムラインの例: 開始=5.0、イン=0.3、キープ=1.0、アウト=0.3と設定すると：

• 5.0秒で開始
• 0.3秒かけて等倍から最大倍率へズームイン（5.0 → 5.3秒）
• 1.0秒間最大倍率をキープ（5.3 → 6.3秒）
• 0.3秒かけて最大倍率から等倍へズームアウト（6.3 → 6.6秒）
• 6.6秒以降は通常再生に戻る

ヒント:

• 複数のズームイベントを追加可能 — 重要な場面を複数強調できます
• ズームイベントが時間的に重複しないよう注意してください
• 3×3グリッドで画面上の特定のUI要素に簡単にズームできます
• 「ズームを追加する」のチェックを外すとすべてのズーム効果が無効になります

活用例:

• UIウォークスルーでボタンクリックに注目を集める
• エディタでのコード変更を強調表示
• ダッシュボードデモで特定データを拡大
• フォーム入力のデモで入力フィールドにズーム

⑧ 最終出力

再生ボタン（▶）を押すと、すべての設定（ズーム効果を含む）を適用した最終出力が生成されます。ズーム設定を調整して再出力したい場合は、⑦を変更してこのセルを再実行します。

最終出力では：

• GIF: 選択したディザリング方式による完全なパレット生成
• MP4: 最大圧縮効率を実現するスロープリセット（音声有効の場合は含まれます）

⑨ 保存

ラジオボタンで保存先を選択してセルを実行します。

保存先	説明
ローカルにダウンロード	ブラウザのダウンロードダイアログで保存
Google Drive に保存	指定パスに自動コピー（マウント処理含む）
両方	両方の処理を同時実行

主な機能と技術的なポイント

いくつか工夫した点を紹介します。

• 高品質なGIF変換

  GIFの変換品質はffmpegのフィルター設定に大きく依存します。このツールではpalettegen + paletteuseの2パスアプローチを採用しています。

  [0:v] fps=15,scale=960:-1:flags=lanczos,split [a][b];
  [a] palettegen=max_colors=256:stats_mode=full [p];
  [b][p] paletteuse=dither=floyd_steinberg:diff_mode=rectangle

  lanczosフィルターでリサイズ品質を上げ、floyd_steinbergディザリングで色のグラデーションをなめらかに表現します。カスタム設定ではbayerディザリングも選べるので、ファイルサイズと品質のトレードオフを調整できます。

• ファイルサイズの自動警告

  GIFが15MBを超えた場合、ノートブックが自動で警告を表示して軽量化の手順を案内します。GitHubのGIFサイズ上限は10MBなので、READMEに貼る前に気づけるようにしています。

• 再生速度変更

  setptsフィルターで速度を変えています。長めの操作録画を1.5〜2.0倍速にするだけで、ファイルサイズもぐっと小さくなります。

  speed_filter = f'setpts={1/speed:.4f}*PTS,'  # 1.5倍速なら setpts=0.6667*PTS

• 複数動画の結合

  ffmpegのconcatを使い、-c copyでコーデックを再エンコードせずにコピーするので結合は高速です。ドロップダウンUIで結合順を自由に指定できます。

• プレビューと最終出力の分離

  ワークフローをプレビュー生成（⑤）と最終出力（⑧）に分離しました。これにより、ズーム効果を設定する前に高品質プレビューで正確なタイムスタンプを確認でき、ベース動画を再生成せずにズーム設定だけを繰り返し調整できます。

• FFmpeg zoompanフィルターによるズーム機能

  ズーム機能はFFmpegのzoompanフィルターを使い、なめらかで動的なズーム効果を実現しています。各ズームイベントは、フレームごとにズームレベル、x座標、y座標を制御する数式に変換されます：

  # 例: 中央（エリア5）に最大2.0倍でズーム
  # タイムライン: 開始=5.0、イン=0.3、キープ=1.0、アウト=0.3
  # → 0.3秒で等倍から2倍へ、1.0秒間2倍をキープ、0.3秒で等倍に戻る
  
  zoompan=z='if(gte(on,150),if(lt(on,159),(1+(2.0-1)*(on-150)/9),\
              if(lt(on,189),2.0,\
              if(lt(on,198),(2.0-(2.0-1)*(on-189)/9),1))),1)':
          x='if(between(on,150,198),max(0,min(iw-iw/zoom,480-iw/(2*zoom))),0)':
          y='if(between(on,150,198),max(0,min(ih-ih/zoom,270-ih/(2*zoom))),0)':
          d=1:s=960x540:fps=15

  ツールは自動的に：

  • タイムスタンプを動画のFPSに基づいてフレーム番号に変換
  • 3×3グリッドの位置からズーム中心座標を計算
  • ズームイン・アウトの遷移用になめらかな補間カーブを生成
  • 複数の重複するズームイベントを適切な優先順位で処理

• 速度変更時の音声テンポ調整

  音声有効のMP4出力で再生速度を調整する際、FFmpegのatempoフィルターを使用します。atempoは1つのフィルターインスタンスで0.5倍〜2.0倍しかサポートしないため、この範囲外の速度には複数のフィルターを連鎖させます：

  # 例: 3.0倍速には2つのatempoフィルターが必要
  # 3.0 = 2.0 × 1.5
  speed_filter = 'atempo=2.0,atempo=1.5'

• 効率的なプレビューワークフロー

  プレビュー（⑤）はfastプリセットで生成されるため、繰り返しの調整が高速です。最終出力（⑧）ではslowプリセットを使用して最大の圧縮効率を実現します。ズーム効果が設定されていない場合、⑧ではプレビューの映像ストリームを-c:v copyで直接再利用できるため、最終出力がほぼ瞬時に完了します。

サービス別のサイズ制約

貼り先によって上限が異なるので参考までに。Zennの3MB制限はかなり厳しく、SNS・軽量プリセット（640px / 10fps / 128色）＋1.5倍速の組み合わせが現実的なラインです。

プラットフォーム	対応形式	サイズ上限
GitHub README	GIF / MP4 / MOV	100 MB（動画）/ 10 MB（GIF）
Zenn	GIF	3 MB
Qiita	GIF / MP4	100 MB
X（標準）	MP4 / MOV	512 MB
Slack	GIF / MP4 / MOV 他	1 GB

まとめ

「変換ツールのサブスクを払いたくない」「ローカルに余計なソフトを入れたくない」、その二つが揃ったので自作しました。

Google Colabのノートブックという形にしたことで、ブラウザさえあればどこでも使えて、設定もGUIで完結します。新しいズーム機能により、重要な操作を強調したプロフェッショナルなデモ動画の作成がより簡単になりました。個人的には、これ以降READMEへのGIF添付が格段に楽になりました。

同じように「デモ動画の変換、毎回面倒だな」「画面録画の特定箇所を強調したい」と感じている方の参考になれば幸いです。

このサイトがお役に立ったら🌟で応援お願いします🙏

Star on GitHub

参考文献

• FFmpeg Documentation
• FFmpeg Filters: palettegen
• FFmpeg Filters: paletteuse
• FFmpeg Filters: zoompan
• Google Colab
• ipywidgets Documentation