好きな場面を静止画として保存する
動画またはGIFをブラウザ内で読み込み、全フレーム、秒間隔、Nフレームごと、FPS指定でPNG・JPEG・WebPへ抽出できます。
動画・GIFフレーム抽出ツールを開く結論：時刻の前後を短く抽出して1枚を選ぶ
現行ツールはプレビューの停止位置をそのまま1枚保存するUIではありません。まず動画を再生して対象時刻を確認し、開始位置と終了位置をその前後へ設定します。N秒ごと、または1秒あたりN枚で候補を作り、結果一覧から目的の1枚を個別保存します。
例えば12.4秒付近が必要なら、12秒から13秒を対象に1秒あたり数枚で試します。動きが速い場合は枚数を増やし、静かな場面なら範囲を狭くして不要な出力を減らします。
場面を選ぶときの確認順
| 確認 | 見る内容 |
|---|---|
| Preview | 目的の動作が始まる時刻と終わる時刻 |
| Timestamp | 抽出結果に付く時刻が対象区間内か |
| Frame | Blurや目閉じ、暗転、字幕切替の途中ではないか |
| Resolution | 資料やThumbnailに必要な寸法があるか |
1枚へ絞る実践手順
- 動画を読み込み、Previewを再生して対象時刻をメモします。
- 開始・終了位置を対象場面の前後へ設定します。
- 1秒あたりN枚を選び、短い範囲から候補画像を作ります。
- Thumbnailを比較し、必要な1枚だけ個別保存します。
- 時刻がずれて見える場合は範囲を少し前後へ動かして再抽出します。
DevelopToolsのフレーム抽出機能と対応範囲
現行ツールはMP4・MOV・WebM・アニメーションGIFを1件読み込み、FFmpeg.wasmでデコードして静止画像へ変換します。抽出方法は、すべてのフレーム、Nフレームごと、N秒ごと、1秒あたりN枚から選べます。開始位置と終了位置は0.001秒単位で入力できますが、プレビューの現在位置から1枚だけ保存する専用ボタンではありません。対象区間と抽出間隔を設定し、結果一覧から必要な画像を個別保存する構成です。
| 項目 | 現行ツールの対応 |
|---|---|
| 入力 | GIF・MP4・WebM・MOVを1件。AVI、MKV、アニメーションWebPは選択対象外 |
| 抽出 | 全フレーム、Nフレームごと、N秒ごと、1秒あたりN枚、開始・終了秒 |
| 出力 | PNG・JPEG・WebP。元解像度、比率変更、最大幅・高さへ収めるResize |
| 確認 | 動画/GIFプレビュー、時間・解像度・FPS・推定元フレーム数・出力見込み枚数 |
| 保存 | 結果のThumbnail Grid、個別保存、不要画像の削除、ZIP一括保存 |
| 実行 | 進捗表示とキャンセル。500枚以上で確認、2,000枚以上で強い警告 |
Timeline上の現在位置を自動取得する機能、Frame番号やTimestampを直接クリックする一覧、Raw GIF FrameのDelay・Disposal表示、CanvasやWebCodecsによる抽出、複数動画の一括処理は実装していません。記事では実装済みの範囲だけを操作手順として案内します。
枚数と時刻は実行前に見積もる
固定30fpsの動画を1分間すべて抽出すると単純計算で約1,800枚、60fpsなら約3,600枚です。ただし可変フレームレート、欠落フレーム、Timestamp、Decoderの扱いにより、表示FPSを掛けた概算と実際の出力枚数は一致しない場合があります。DevelopToolsの「出力見込み」は作業規模を判断する目安として使い、最終的な枚数は抽出結果で確認します。
時刻指定も、映像内部に10.000秒ちょうどのFrameが存在するとは限りません。開始位置を絞った後、必要なら短い区間で再抽出し、Thumbnailと保存画像を目視確認します。再現性が重要な検証では、元動画、設定値、抽出結果を一緒に記録してください。
全フレーム抽出を長時間動画へいきなり実行せず、数秒の区間で形式・画質・枚数を確認してから対象範囲を広げます。
PNG・JPEG・WebPと画像サイズを選ぶ
元の解像度を選べば、Frameを不要に拡大・縮小せず出力できます。ただし元動画に含まれる圧縮ノイズやMotion Blurまで改善するものではありません。比率変更または指定範囲に収める場合は縦横比を維持して縮小されます。抽出後に別形式が必要になった場合は、動画を再抽出する代わりに画像ファイル変換ツールで変換できます。
| 形式 | 向いている用途 | 確認点 |
|---|---|---|
| PNG | UI、文字、線、後から加工する素材、透明部分 | 可逆圧縮で大量保存時は容量が増えやすい |
| JPEG | 写真系の映像、資料用Thumbnail、大量の確認画像 | 非可逆圧縮。品質と透明部分の背景色を確認 |
| WebP | Web掲載で容量と画質を調整したい画像 | 利用先の対応状況と品質設定を確認 |
ブラウザでフレームを抽出する手順
- 動画またはGIFを1件選び、プレビュー、時間、解像度、FPS、推定フレーム数を確認します。
- 目的に合わせて全フレーム、Nフレームごと、N秒ごと、1秒あたりN枚を選びます。
- 必要な場面だけを対象にする場合は開始位置と終了位置を秒で入力します。
- PNG・JPEG・WebP、品質、画像サイズを選び、出力見込み枚数を確認します。
- 抽出後はThumbnailを確認し、必要な画像を個別保存するか、結果をZIPで一括保存します。
入力ファイル、抽出画像、ファイル名はDevelopToolsのサーバーや外部APIへ送信されません。初回に読み込むFFmpeg.wasm本体もサイト内に配置されています。
保存後に確認する項目
結果名は元ファイル名にframe番号とTimestampを付けた形式です。大量の画像は結果ページを移動して確認できます。ブラウザを再読み込みすると作業結果は保持されないため、必要な画像を保存してからページを閉じます。
- 求めていた場面、時刻、動きの状態が写っているか
- 縦横の向き、解像度、縦横比、透明部分が期待どおりか
- 抽出枚数とファイル名の6桁連番・時刻表記が作業用途に合うか
- JPEG・WebPの品質と容量、PNGの文字や細線が十分か
- ZIPを使った場合は展開でき、必要な画像が揃っているか
大容量動画・プライバシー・利用権限の注意
FFmpeg.wasmはブラウザ内で動くため、会議録画や未公開映像をアップロードせず処理できます。一方で、動画全体と抽出画像を端末のメモリ上で扱うため、長時間・高解像度・高fpsの素材や数千枚の出力はCPU、Memory、Storageを大きく消費します。「何GBでも処理できる」とは限りません。警告が出たら対象区間を短くするか、抽出間隔を長くしてください。
自分で撮影した動画、自作GIF、または保存・加工の権限がある素材を対象にしてください。ストリーミング映像や第三者の著作物を権限なく取得する方法は扱いません。
FFmpegとFFmpeg.wasmの一次資料
コマンド例とOptionの意味はFFmpeg公式Documentationを基準にしています。-ssはSeek位置、-frames:vは出力Frame数、fpsとselectはFilter、image2は連番画像出力に関係します。VersionやOption配置で挙動が変わるため、業務Scriptへ組み込む際は利用VersionのDocumentationと実データで確認してください。
具体例：12秒付近の操作完了画面を保存する
30fpsのMP4を読み込み、Previewで操作完了が12.4秒付近にあると確認します。いきなり全体を処理せず、目的の区間と必要な密度を先に決めます。
開始12秒、終了13秒、1秒あたり5枚、PNG、元解像度で候補を抽出します。抽出後は時刻、カーソル位置、文字の可読性、解像度を確認し、必要なら区間または間隔を一項目ずつ調整します。
- 元動画を残したまま、フレーム抽出ツールへ1件読み込みます。
- プレビューとMedia情報から対象区間を決めます。
- 抽出方法、出力形式、画像サイズを設定し、見込み枚数を確認します。
- 短い区間で試し、結果を確認してから本番の範囲を抽出します。
抽出結果は元動画の代わりになるArchiveではありません。元動画と設定値を保管し、用途に必要なFrameだけを選別してください。
よくある質問
- 再生中の現在位置をボタン1回で保存できますか？
- 現行ツールに現在位置専用ボタンはありません。開始・終了位置と抽出密度を設定し、候補から1枚を選びます。
- 指定した秒と完全に同じFrameになりますか？
- Timestampや可変フレームレートにより厳密に一致しない場合があります。前後を短く抽出して目視確認してください。
- 元解像度のまま保存できますか？
- 画像サイズで「元の解像度」を選択できます。ただし元動画の圧縮による情報以上に高画質化はされません。