動画・GIFコマ送りビューア / 書き込みフィードバック

動画・GIFコマ送りビューアについて

動画とGIFをアップロード不要でその場で開き、1フレームずつコマ送りで確認できる無料ツールです。GIFはフレームごとに表示時間が異なる形式ですが、このツールでは指定した基準フレームレート(12/15/24/30/60fps)のグリッドにサンプリングし直すため、フレームレートの異なる複数の動画・GIFでも同じ時間軸・同じコマ数で見比べられます。

読み込んだファイルはステージ上のレイヤーになり、ドラッグで移動、角のハンドルでリサイズして自由に配置できます。枚数の制限はなく、横に並べる・重ねる・大小をつけるなどレイアウトは自由。レイヤーごとに不透明度を変えられるので、2つの動きを半透明で重ねてズレを確認することもできます。コマ送りはすべてのレイヤーに同期します。配置した状態のステージ全体をGIFまたは動画(MP4/WebM)として書き出すこともできるので、比較用GIFの作成や、複数エフェクトを1画面にまとめた確認用動画の作成に便利です。

レイヤーごとのオニオンスキン

レイヤーを選ぶと操作バーに「オニオンスキン」が現れます。オンにすると、そのレイヤーだけ前後のコマを薄く重ねて表示できます。前・後それぞれ何コマぶん重ねるか、重ねたコマの濃さ(不透明度)を指定でき、書き込みレイヤーでは前=青・後=赤の色分けも使えます(動画・GIFはコマ全体が不透明で、色を乗せると画面ごと染まってしまうため色分けは無効です)。動きの軌道・タメ・詰めの確認や、作画の中割りチェックにそのまま使えます。重ねたコマは「濃さ」ぶんを分け合う(近いコマほど濃い)ので、重ねるコマ数を増やすほど1コマあたりは薄くなります。前後1〜3コマ程度がいちばん見やすい設定です。設定はレイヤーごとに独立しているので、比較したい1本にだけ残像をつけて、もう1本は通常表示のまま並べる、といった使い方もできます。オニオンスキンは書き出し(GIF・動画・PNG)にもそのまま反映されます。動画レイヤーの場合は1コマ表示するたびに重ねるコマぶんの頭出しが必要になるため、重ねるコマ数を増やすと表示・書き出しが遅くなります。

コマ単位の書き込みでフィードバックを渡す

「✏ 書き込みモード」に入ると、ステージに直接ペン・直線・矢印で書き込めます。太さは [ ] キーでも増減でき、ペン不透明度を下げれば下の映像を透かした薄い書き込みも引けます(不透明度は線ごとに記録されるので、濃い線と薄い線を混在させられます)。レイヤー不透明度を使えば、描いたあとから書き込み全体の濃さをまとめて調整できます。書き込みは動画やGIFと同じレイヤーの1枚として扱われるので、不透明度・コマずらしを同じように操作でき、レイヤーを分けてラフ用・清書用と使い分けることもできます。書き込みレイヤーはステージ全面に固定され、常に動画・GIFより前面に表示されるため、あとから追加したファイルに指摘が隠れることはありません(書き込みレイヤー同士の重ね順は「最前面へ/最背面へ」で変更できます)。

書き込みは1本ずつ表示区間を持ちます。既定では「描いたコマだけ」に表示され、「このコマ以降ずっと」「このコマから指定コマ数」を選んで描くこともできます。書き込みがあるとシークバーの下に書き込みタイムラインが現れ、どのコマにどの書き込みがあるかがバーで一目でわかります。バーはドラッグで移動、両端のつまみで表示区間の伸縮ができ、動かしている間は現在の区間(開始コマ〜終了コマ/コマ数)が見出しに表示されます。再生ヘッドの近くではバーの端が吸着するので、「いま見ているコマにぴったり合わせる」操作が簡単です。バーをクリックすると選択状態になり、Delete キーで削除できます。描いたあとからでも「この12コマの間だけ、この軌道が気になる」といった時間つきの指摘に調整できます。表示中の書き込みの終わりを今のコマに合わせたいときは「■ 表示をこのコマで終了」が手軽です(表示区間の種類を問わず使えます)。

あわせてコマ単位のテキストコメントを残せます。コメント一覧のフレーム番号をクリックすればそのコマへ一発で飛べるので、指摘の見落としが減ります。書き込みとコメントはGIF・動画(MP4/WebM)・PNGのいずれにも焼き込まれるため、ファイルを1つ渡すだけで相手の環境を問わず指示が伝わります。SNSやチャットで扱いやすいMP4での共有もそのまま可能です。特定のコマだけを指摘したいときは「現在のコマをPNGで保存」が手軽です。

使い方

1. 基準フレームレートとステージのサイズを設定します。
2. ステージに動画・GIFをドロップします(複数可。「＋ ファイルを追加」からも読み込めます)。
3. レイヤーをドラッグして移動、右下の◢ハンドルでリサイズします。動かしている間、辺や中心が他のレイヤーやステージの端・中心と揃う位置で吸着し、ガイド線が表示されます(Alt を押しながらドラッグすると吸着しません)。選択中のレイヤーは不透明度・コマずらし(そのレイヤーだけ±nフレーム前後させる)・オニオンスキン・重ね順の変更・削除ができます(操作バーは画面右のパネルに表示されます。パネルは「»」でたたんで、プレビューを横に広げることもできます)。
4. Shift+クリックでレイヤーを複数選択できます(ステージの空いた場所からドラッグして矩形で囲む、Ctrl+A で全選択も可)。複数選択中はドラッグでまとめて移動し、◢ハンドルで選択範囲の左上を基準に同じ倍率でまとめてリサイズします。不透明度・コマずらし・重ね順・削除も選択中の全レイヤーに効きます。
5. ファイルを配置するとステージの背景が単色になります。「背景色」のスウォッチをクリックすると、カラーサークル・明るさスライダー・HEX・RGB数値入力で好きな色に変更できます(書き出し時の背景にもそのまま使われます)。
6. ◀ ▶ ボタン、スライダー、矢印キー、またはステージ上でマウスホイールを回してコマ送りします(Shift併用で10コマずつ)。「再生」で基準fpsでの連続再生も可能です。「ループ」にチェックを入れておくと(既定でON)、末尾まで再生したあと先頭に戻って繰り返します。
7. 一部だけを繰り返し見たいときは区間ループを使います。シークバーの上の帯がイン〜アウトの区間で、両端のつまみをドラッグして伸縮、帯そのものをドラッグして移動できます(再生ヘッドの近くでは吸着)。「[イン」「アウト]」ボタンまたは I / O キーで現在のコマをイン・アウト点にできます。「区間ループ」にチェックが入っていると再生はその区間だけを繰り返し、Home / End・|◀ ▶| も区間の両端に移動します。この区間は書き出しの「範囲」と同じ値なので、ループで確認した範囲をそのまま書き出せます(「解除」で全体に戻ります)。
8. ステージ左上に全体のフレーム番号、各レイヤーの左上にそのレイヤー自身のフレーム番号(コマずらし反映後)が表示されます。「フレーム番号を表示」のチェック、またはステージ左上のバッジをクリックすると一括で非表示にできます(書き出しへの焼き込みも連動)。
9. 指摘を書き込むときは「✏ 書き込みモード」を押し、右パネルに現れるツール(ペン/直線/矢印/消しゴム)・色・太さ・ペン不透明度・表示区間を選んでステージ上をドラッグします。書き込みたいコマまで送ってから描いてください。表示区間の既定は「このコマだけ」です。太さは [ ] キーでも増減できます。
10. 書き込みがあると、シークバーの下に書き込みタイムラインが表示されます。レイヤーごとに1行のトラックが並び、書き込みが表示区間ぶんのバーとして描かれます。バーをドラッグすると区間ごと移動、両端のつまみで開始・終了コマの調整(右端まで伸ばすと「以降ずっと」)ができ、端は再生ヘッドに吸着します。バーをクリックすると選択+そのコマへジャンプし、選択中に Delete キーを押すとその書き込みを削除できます(誤って消しても Ctrl+Z で戻せます)。
11. コメントは「コメント(コマ単位)」欄に入力して「コメントを追加」(Ctrl+Enter でも可)。表示中のコマに紐づき、一覧の本文をクリックするとその場で編集できます。コメントや書き込みのあるコマは、シークバーの下に印(コメント=藤色 / 書き込み=グレー)が付くので、指摘の場所をすぐに見つけられます。
12. 書き出す場合は「💾 保存」の隣の「📤 書き出し」を押し、形式・フレーム範囲(=区間ループの区間)・出力幅を選んで「書き出す」を押します。GIFは「GIF画質」で標準(速い)/ 高品質(ディザあり)を選べます。「何も配置されていない余白をクロップ」にチェックが入っていると(既定でON)、レイヤーや書き込みのある範囲だけに自動で切り抜いて書き出します。1コマだけ渡したいときは「現在のコマをPNGで保存」、チャットにすぐ貼り付けたいときは「📋 コマをコピー」が手軽です。完了すると自動でダウンロードされます。
13. 作業を中断するときは「💾 保存」を押すと、配置・書き込み・コメント・設定が動画・GIF本体ごと1つの作業データファイル(.fvproj.json)としてダウンロードされます。再開するときは「📂 開く」でそのファイルを選ぶか、ステージにドロップしてください。

よくある質問

ファイルはサーバーにアップロードされますか?

いいえ。読み込み・デコード・書き出しを含むすべての処理はお使いのブラウザ内で行われ、ファイルが外部に送信されることは一切ありません。

「フレームレートを揃える」とはどういう意味ですか?

GIFは1コマごとに表示時間を自由に設定できる形式のため、動画と単純にコマ数を対応させられません。このツールでは各レイヤーを「基準fpsで等間隔にサンプリングした時刻のフレーム」として表示するので、同じコマ番号=同じ時刻として比較できます。書き出しも同じグリッドで行われます。

何枚まで配置できますか?

枚数の制限は設けていませんが、動画はコマ送りのたびに1本ずつシーク(頭出し)を行うため、本数が増えるほど表示・書き出しに時間がかかります。展開済みのGIFは枚数が増えても軽快です。

書き込んだ内容やコメントは保存されますか?

ページを離れると消えますが、「💾 保存」を押すと配置・書き込み・コメント・設定を動画・GIF本体ごと1つの作業データファイル(.fvproj.json)としてお使いのPCに保存できます。「📂 開く」またはステージへのドロップで読み込めば、続きから作業を再開できます。相手に修正指示として渡す場合は、これまで通り「書き出す」でGIF・動画(MP4/WebM)・PNGに焼き込むのが確実です。

作業データファイル(.fvproj.json)には何が入っていますか?

レイヤーの配置・書き込み・コメント・各種設定に加えて、読み込んだ動画・GIFのデータそのものをテキスト(base64)として含む自己完結型のファイルです。元の動画・GIFを選び直さなくても、このファイル1つで作業状態を完全に復元できます。そのぶんファイルサイズは元のファイル合計の約1.3倍になります。保存・読み込みのどちらもブラウザ内だけで処理され、サーバーには一切送信されません。

書き込みを特定のコマの間だけ表示できますか?

できます。書き込みは1本ずつ表示区間を持っており、既定は「描いたコマだけ」です。「このコマ以降ずっと」「このコマから指定コマ数」を選んでから描くこともできます。描いたあとに調整するときは、シークバー下の書き込みタイムラインでバーをドラッグ(移動)、両端のつまみをドラッグ(区間の伸縮)してください。表示中の書き込みは、終わらせたいコマまで送って「■ 表示をこのコマで終了」を押すと、その場で終了コマを現在のコマに合わせられます(「以降ずっと」だけでなく「指定コマ数」で描いたものにも使えます)。

オニオンスキンはどう使いますか?

レイヤーを選んで操作バーの「オニオンスキン」にチェックを入れると、そのレイヤーだけ前後のコマが薄く重なって表示されます。前・後のコマ数と濃さをレイヤーごとに設定でき、書き出しにもそのまま反映されます。色分け(前=青・後=赤)は書き込みレイヤー専用です。動画レイヤーでは重ねるコマの数だけ頭出しが必要になるため、コマ数を増やすと動作が重くなります。GIFと書き込みレイヤーは軽快です。

書き込みの濃さは変えられますか?

2通りあります。描く前に「ペン不透明度」を下げると、その線だけが薄く引かれます(線ごとに濃さを記録するので、濃い線と薄い線を混在できます)。描いたあとにまとめて変えたいときは、書き込みバーの「レイヤー不透明度」(またはレイヤー操作バーの「不透明度」)を動かすと、そのレイヤーの書き込み全体の濃さが変わります。

書き出しの「余白をクロップ」とは何ですか?

ステージのうち、動画・GIFレイヤーも書き込みも無い部分を自動で切り落として書き出す機能です(既定でON)。レイヤーの配置範囲と、書き出し範囲内に表示される書き込みの実描画範囲から切り抜き領域を計算します。ステージ全体をそのまま書き出したいときはチェックを外してください。

消しゴムはどう動きますか?

なぞった位置にある線を1本ずつ丸ごと消します(部分的に削るのではなく、ストローク単位で消えます)。消せるのは、そのコマに表示されている書き込みだけです。誤って消した場合は Ctrl+Z で戻せます。

「コマずらし」は何に使いますか?

選択したレイヤーだけを全体のコマ送りに対して±nフレームずらして表示する機能です。開始タイミングの異なる2つの録画の頭出しを揃えたり、意図的に1コマずらして残像的に重ねたりできます。ずらした状態は書き出しにもそのまま反映されます。

GIF書き出しの画質はどうなりますか?

GIF形式の仕様上、色数は最大256色に減色されます(メディアンカット法)。「GIF画質」が標準のときは範囲内の数コマから色を分析し、ディザなしで速く変換します。グラデーションの多い実写映像で縞が気になるときは高品質(ディザあり)を選んでください。範囲内のより多くのコマ・画素から色を分析し、Floyd–Steinberg 誤差拡散ディザで減色するため縞が目立たなくなります。そのぶん細かなドット状のノイズが乗り、ファイルサイズは大きく(目安1.5〜2倍)、処理時間も長くなります。また60fps指定時は、GIFのフレーム間隔の最小単位(1/100秒)とブラウザ側の再生仕様により、実際の再生が想定より遅くなる場合があります。

区間ループと書き出し範囲はどう関係していますか?

同じ1つの値です。シークバー上の帯(イン〜アウト)を動かすと書き出しパネルの「範囲」も変わり、「範囲」の数値を打ち替えると帯も動きます。「区間ループ」のチェックは再生をその区間に限定するかどうかの切り替えで、OFFでも範囲の値は書き出しに使われます。区間は作業データファイルにも保存されます。

レイヤーをぴったり揃えて並べたいです

ドラッグ・リサイズ中は、レイヤーの左右端・上下端・中心が、他のレイヤーの辺・中心やステージの端・中心と揃う位置で自動的に吸着し、ガイド線が表示されます。吸着させたくないときは Alt を押しながらドラッグしてください。複数のレイヤーを Shift+クリック(または空いた場所からの矩形ドラッグ)で選んでおくと、まとめて移動・同じ倍率でリサイズできます。

動画(MP4/WebM)書き出しに時間がかかります

動画書き出しはブラウザの録画機能(MediaRecorder)を使うため、書き出す範囲の再生時間と同じだけの実時間がかかります。長い動画は範囲を絞って書き出すのがおすすめです。また、録画中に別のタブへ切り替えると録画が空になるため、書き出し中はこのタブを表示したままにしてください。

MP4で書き出せません(選択肢が選べません)

MP4録画への対応はブラウザによって異なります。Chrome・Edge・Safariの新しいバージョンでは選択できますが、Firefoxなど非対応のブラウザでは選択肢が無効になります。その場合はWebMで書き出すか、対応ブラウザをご利用ください。