動画からサムネイル一覧を作る方法｜コンタクトシートを画像で保存

1. 動画コンタクトシートとは？ 普通のサムネイルとの違い

コンタクトシートは、動画中の複数の静止画を格子状に並べた1枚の画像です。動画ファイルを渡さずに内容の大まかな流れを伝えたり、手元の録画の中から編集したい場面を探したりする際に使えます。

一覧に表示されるのは選ばれた時点の画像だけです。動画のすべてのフレームを掲載するわけではなく、音声や動きそのものも保存されません。特定の一瞬を絶対に見落とせない検査や証拠確認には、元動画の再生による確認が必要です。

2. MP4・MOVなどの動画ファイルを用意する

Video Contact Sheetを開き、ファイル選択かドラッグ＆ドロップで動画を読み込みます。MP4 / MOV、MKV / WebM、AVI、MPEG-TSなどが対象です。形式名だけではなく、動画内部の映像コーデックに対応している必要もあります。

読み込み時の小さなプレビュー画像は、ブラウザ標準の動画再生機能を使う補助表示です。プレビューが出ない場合でも、内包したFFmpegがデコードできれば本番のコンタクトシートは生成できる場合があります。

動画は端末内で読み込んで処理します。長時間の高解像度動画は端末の性能とメモリに影響されるため、まず短い動画と標準設定で手順を確かめると状況を判断しやすくなります。

3. サムネイル数を12・24・48枚から選ぶ

フレーム数を選択します。12枚は4列×3行、24枚は6列×4行、48枚は8列×6行に並びます。最初は24枚で作り、もっとざっくり見たいなら12枚、時間方向の密度を上げたいなら48枚にすると選びやすいでしょう。

枚数を増やせば細かく確認できますが、1枚の画像内に詰め込むコマ数が増えるため、表示上は個々のコマが小さくなります。また、取得するフレームが増える分、処理負荷も高くなります。

4. 解像度と各コマの時刻表示を設定する

出力解像度は「軽量」「標準」「高解像度」「超高解像度」から選択できます。文字が映る画面録画は高解像度が役立つことがありますが、コマの長辺が大きくなるほど画像生成に必要なメモリも増えます。スマートフォンではまず標準を試してください。

「各コマに時刻を表示」を有効にすると、元動画のどのあたりで撮られた場面かを画像上で確認できます。後でその場面を探し直す場合に便利です。時刻表示を後から変えた場合は、生成ボタンで変更を適用します。

「超高解像度」はメモリに余裕のあるPC向けです。超高解像度で端末が重くなる場合は標準または軽量に戻してください。高い出力解像度にしても、元動画にない画質や細部は増えません。

5. 「コンタクトシートを生成」で一覧画像を作る

STEP 3に表示される動画名・枚数・解像度・時刻表示の設定を確認し、「コンタクトシートを生成」を押します。動画の必要な位置へシークして代表フレームを取得し、1枚の一覧画像にまとめます。再生時間のすべてを1コマずつ出力する処理ではありません。

生成中は完了を待ちます。必要なら「生成を中止」で中断できます。新しい生成を中止したり失敗したりしても、前回成功した画像とCSVは保持されるため、結果に表示された元動画名を確認してから保存してください。

設定だけを変更した場合、すぐに現在の結果が置き換わるわけではありません。「未反映の変更があります」という表示が出たら、再度生成して反映させます。時刻表示だけの変更では、保存済みのフレームを再利用して描き直します。

6. 拡大表示して、気になる場面と時刻を確認する

生成された一覧画像をタップまたはクリックすると、全画面で確認できます。スマートフォンではピンチ、PCではマウスホイールなどで拡大・縮小できます。ダブルタップ／ダブルクリックの切り替え、「全体表示」「100%」も利用できます。

時刻ラベルを目印に元動画の該当部分を再生すると、前後の動きや音声を確認できます。時刻は場面探しの目安であり、コマ単位の精密な編集点を示すものではありません。拡大操作は画面での見え方だけを変え、保存画像の画質は変えません。

7. PNG・JPEG画像を保存する

結果がよければ保存ファイル名を入力し、PNGまたはJPEGを選んで「画像を保存」を押します。初期ファイル名は元動画名とフレーム数をもとに作られます。形式を切り替えると拡張子は自動調整されます。

PNGは画面録画や文字を含む画像で輪郭を保ちたいとき、JPEGは写真や映像中心の一覧を比較的軽い画像にしたいときの候補です。どちらもコンタクトシートという1枚の静止画像であり、動画や音声の代わりにはなりません。

生成直後の結果はブラウザ内の一時データなので、必要なものはページを閉じる前に保存してください。元動画は変換後の画像へ埋め込まれません。

8. 各フレームの時刻をCSVでも保存する

一覧画像と合わせて「時刻一覧を保存 (CSV)」を使うと、フレームの位置情報を表として保存できます。列は frame、row、column、actual_seconds、timestamp の5つで、フレーム・行・列は1始まりです。

actual_secondsには実際にデコードされた時刻の秒数、timestampには画像上と同じ秒単位の表示値が入ります。画像の時刻ラベルをオフにしていてもCSVを保存できます。これは取得した代表フレームの一覧であり、動画の全フレームの時刻を記録したものではありません。

設定変更が未反映のときはCSVも最後に生成が成功した結果に対応します。表に記載された位置や時刻は、素材の整理や元動画を再確認する際の手がかりとして使ってください。

9. 画像に場面が写らない・生成できないときの対処

動画からフレームを均等な間隔で取り出す方式なので、一瞬だけ表示された画面や短い動作はサンプルの間に入り、一覧には写らないことがあります。見落としを減らしたい場合は24枚から48枚へ増やせますが、必ず映るようになるわけではありません。

生成が遅い、失敗する、スマートフォンの動作が重い場合は、フレーム数を12枚に減らし、出力解像度を「標準」または「軽量」に変更して再実行します。大きい動画や高解像度の出力はブラウザと端末のメモリを多く使います。

ファイルを読み込めない場合は形式だけでなくコーデックやファイルの状態を確認してください。選択時のプレビューが出ないことと、本生成が失敗することは同じではありません。生成が成功してもCSVの時刻は元動画の厳密なフレーム境界を保証するものではないので、重要な判断では元動画を確認してください。

内包されたFFmpeg WebAssemblyとブラウザのCanvasを使い、処理を端末内で実行します。アプリは実行時のネットワーク通信をCSPで遮断しており、選択した動画を変換用サーバーへアップロードしません。初めてWebページを開くときのHTML取得と、動画のローカル処理は別です。

注意点

• まず24コマ・標準解像度で作り、情報量が足りない場合だけ48コマに増やすと調整しやすくなります。
• 画面録画の細かな文字を見る場合は高解像度を試し、スマホで重くなれば標準に戻します。
• 時刻を手掛かりに編集したいときは、画像と一緒にCSVも保存しておくと元動画を見直しやすくなります。
• 短時間の動作・点滅・異常を探す場合は、一覧だけで判断せず元動画を再生して確認してください。