はじめに（操作の流れ）

1. 画面上部のドロップゾーン（または下の映像エリア）へ動画をドロップするか、ゾーンをクリックしてファイルを選択します（詳細は「動画の読み込みと左右の割り当て」）。
2. Play / Pause とシークバー、またはキーボード（ページ中段のキーボードショートカット）で再生位置を調整します（Play/Stop は [Space]）。動画の同期ズレは Playback Drift 行で確認できます（Auto Play が ON のときは、左右がそろうと自動的に再生が始まることもあります）。
3. トランスポートの 1 段目で Video（Side by Side / Difference / Overlay）、Audio（Both / Older Only / Newer Only / Mute）、Speed を選びます。2 段目で Loop・Auto Play と Export を調整します（詳細は各見出しを参照）。
4. トランスポート 2 段目の Export でモードと焼き込み（Time Code / Current Frame / Total Frame）を選び、Exp WebM で WebM をダウンロードします。書き出し中のオーバレイや Esc キャンセル、出力ファイルの扱いは「書き出し（Exp WebM）とファイルについて」を参照してください。

動画の読み込みと左右の割り当て

• 画面上部のドロップゾーンは、比較したい動画を読み込む入口です。クリックするとファイル選択が開きます。ここへドロップするほか、下の映像エリア（左・右パネル）やページ上のその他の領域へドラッグ＆ドロップしても読み込めます（動画として扱えるファイルのみが対象です）。動画のデコード・送信・対応形式・推奨ブラウザについては「特記事項」を参照してください。
• 動画を２本まとめて選ぶ／ドロップした場合（ドロップゾーン・ファイル選択・ページ上のドロップ）：ファイルの最終更新日時が古いほうを左、新しいほうを右に並べます（同一時刻のときはファイル名順）。
• ドロップゾーン等へ１本ずつ読み込む場合：空いている側（先に左、次に右）へ順に入ります。２本目を入れた時点で、上記の更新日時ルールに基づき左右が並べ替えられることがあります。
• 映像エリアの左・右パネルへ１本ずつドロップした場合：それぞれドロップしたパネル側に配置し、更新日時による並べ替えは行いません。
• すでに左右がそろったあと、ドロップゾーン等から別ファイルを１本だけ追加すると、左だけ差し替えされ、右は未読み込みに戻ります。
• セッションの自動復元（ブラウザの再読み込み時に保存データから左右の動画を戻す）については「特記事項」を参照してください。リロード時は再生位置を先頭に戻し、Auto Play による自動開始は行いません。

パネル情報・タイムコード・FPS

• 各パネル直下の補足行には、最終更新日時、コンテナから読めたときの FPS、および尺が分かるときの総フレーム数（Total: … f）が出ます。FPS が取れない形式では FPS n/a (~60 est.) のように参考表示になります。
• MP4 など ISO ベースのコンテナでは、先頭付近のメタデータから推定した平均フレームレートを FPS に使います。
• 各パネル映像の隅のタイムコードオーバーレイは、その側の FPS に合わせた HH:MM:SS:FF です。
• トランスポートの現在 / 総尺のタイムコード、キーボードの Seek（1f など）、および重ねビュー中央のタイムコードは、左右の表示 FPS の大きい方を整数化したマスター FPS に基づきます。

Playback / Seek（トランスポート）

• 映像の下にあるトランスポート枠は、画面上から現在 / 総尺のタイムコード → シークバーと Play / Pause → Playback Drift →（オプション条・2 段）1 段目：Video → Audio → Speed。2 段目（中央寄せ）：Loop / Auto Play → Export の順です。各オプションの詳細は、このあとの見出しどおりです。
• シークバーの最大値（総尺）は、左右のうち長い方の尺に合わせます。表示中の現在位置は、両方の再生位置の遅い方（大きい方）に合わせて更新されます。
• シークバーをドラッグしている間は、その値に応じて両方の動画へ同時に移動します（画面上のヒントは Scrub）。離したあと、再生中であれば表示の更新が続きます。

同期、Playback Drift、自動補正

• 同期の意味：Seek や Playback では、原則として両方の再生位置を同じ目標値に揃えます。デコードと描画はブラウザ任せのため、報告値がフレーム単位で常に一致するとは限りません。
• トランスポートの Playback Drift 行は、左右の再生位置の差をミリ秒とマスター FPS 換算のフレーム数で示します。色分けは目安で、０に近いほど緑系、大きいほど赤系になります。いずれかが終端に達したときは ---- 表示になります。
• 再生中にズレが約 100ms を超えた場合、短いクールダウンを挟みつつ、両方をマスター側の時刻に合わせて約１フレーム分だけ前進させる自動補正が入ります。尺の短い側が終端に張り付き、長い側だけが進んでいるときの差は同期不良とみなさず、補正しません。
• 補正が走ると、ログに Sync auto-correct: … が間欠的に残ります。
• Difference モードの見え方と同期の関係は、下の「Video」の Difference を参照してください。Playback Drift の表示や自動補正は、重ね表示を読みやすく保つための目安・調整です。

Video

• トランスポート 1 段目の Video プルダウン、または [V] で、次の３モードだけをこの順に循環します。Side by Side（左右並び）→ Difference（差分重ね）→ Overlay（新しい側を上に、不透明度およそ 75% で重ねる）→ 先頭へ戻る、の繰り返しです。プルダウンの値と [V] は常に連動します。
• Side by Side：左が古い動画、右が新しい動画の２パネル表示（既定）。ファイル名・補足行・隅のタイムコードの意味は、上の「パネル情報・タイムコード・FPS」と同じです。
• Difference（差分重ね）：同一タイムライン上の２本を１画面に重ね、CSS の mix-blend-mode: difference で画素ごとに差を取ります。下層が左（古い方）、上層が右（新しい方）です。左右パネルは隠れ、合成ビューだけが表示されます。
• Difference の見え方：２本の画素が一致している領域では差分がゼロとなり、画面は真っ黒に見えます。差異が無い区間では、黒い画面がそのまま続きます。左右で内容が違う箇所だけが、差分として色味の付いた表示で浮かび上がります。
• Difference と同期ズレ（Playback Drift）：この見え方は「同一時刻の同じフレーム同士」を重ねている前提に強く依存します。Playback Drift のフレーム表示が 1 以上 のとき、実際には差の無い静止画でも、前後のフレームが少しずれて重なることで差分が出て、差が無いように見えるべき場所まで色が付いて見えることがあります。ズレを抑えたいときは、一度 Pause してから Seek（1f、[←] / [→]）すると改善する場合があります。上の「同期、Playback Drift、自動補正」もあわせて参照してください。
• Difference では、圧縮ノイズ・解像度差・トリミングのズレがあると、実質同じ内容でも差が広がって見えることがあります（ブラウザの合成に依存します）。
• Overlay（オーバーレイ）：同じく２本を１画面に重ねます。下が左（古い方）、上が右（新しい方）です。上層（新しい側）に opacity: 0.75（およそ 75% 不透明）を当て、通常合成で下の画に重ねます。２本を半透明に重ねて目視比較するモードで、Difference のように一致領域が黒一色になることはありません。左右パネルは隠れ、合成ビューだけが表示されます。
• Difference / Overlay の重ねモードでは、中央のタイムコードオーバーレイはトランスポートと同じマスター FPS（上記「パネル情報」）で、Side by Side 時より大きめの字体です。Video の切り替えは再生中でも可で、通常は再生が継続します（画面上のヒントは Layout）。

Audio

• トランスポート 1 段目のラジオボタン、または [B] / [O] / [N] / [M] で切り替えます。ログや一時ヒントには内部的な説明が出ることがありますが、UI ラベルは Both、Older Only、Newer Only、Mute です。
• Both：各動画の L/R をモノラル化し、古い方を L・新しい方を R にパンして出力します（プレビュー再生時）。
• Older Only：左（古い方）のステレオをそのまま L/R に出力します。
• Newer Only：右（新しい方）のステレオをそのまま L/R に出力します。
• Mute：無音です。WebM 書き出し時も映像のみになります。

Speed

• トランスポート1 段目の Speed 欄で、左右の再生速度をリアルタイムに変えられます。中央には現在の倍率（例：1x、0.5x、2x）が表示されます。
• − / ＋ ボタン、またはキーボードの Slower / Faster / Reset 1x（下記「キーボードショートカット」）で一段階ずつ変更します。通常は 0.25x 刻みで、0.25x より遅い側の先頭だけ 0.1x です。範囲は 0.1x（最大 10 倍スロー）～ 2x（2 倍速）で、既定は 1x です。
• 1.0× 未満のスロー再生では、速度 4 段階に連動して音量を下げます（0.75×→87.5%、0.5×→75%、0.25×→62.5%、0.1×→50%）。1.0× 以上は通常音量です（耳障り対策）。
• 保存されません。ページの再読み込みのたびに 1x に戻ります。
• Exp WebM への反映はありません（常に 1.0× 録画）。詳細は「書き出し（Exp WebM）とファイルについて」を参照してください。

Loop

• Loop にチェックが入っているとき（既定）：長い方の尺の終端に達すると、両方の再生位置を先頭付近へ戻し、再生を継続します（ブラウザ標準のループ属性ではなく、アプリ側で両者を揃えて再開しています）。
• チェックを外したとき：終端で Pause し、トランスポートが止まります。
• On / Off はトランスポート 2 段目のチェックボックスか Loop On/Off [L] です。

Auto Play

• Auto Play にチェックが入っているとき（既定）：ドロップまたはファイル選択で左右の動画がそろって再生可能になったタイミングで、自動的に再生を開始します（２本まとめて読み込んだとき、２本目を追加したときを含みます）。
• チェックを外したとき：左右がそろっても自動では再生せず、Play または Play/Stop [Space] で開始します。
• On / Off はトランスポート 2 段目のチェックボックスか Auto Play On/Off [A] です。設定は次回開いたときに復元されます。ブラウザの再読み込みやセッション復元時には Auto Play による自動開始は行いません（再生位置は先頭のまま）。

書き出し（Exp WebM）とファイルについて

• トランスポート 2 段目の Export 欄で、プルダウンから書き出しモード（Compare (PiP) / Older only / Newer only）を選び、Time Code（既定 ON）・Current Frame（現在フレーム・既定 OFF）・Total Frame（総フレーム・既定 OFF）で焼き込みを切り替えます。
• 焼き込みラベル（プレビュー）：Export のチェックがオンで動画が表示されているとき、映像上にプレビューが出ます。ドラッグで移動、ラベル右下の三角をドラッグしてサイズ変更。ダブルクリックで標準サイズ・初期位置へ戻します。位置・サイズは次回も localStorage から復元されます。
• Exp WebM の焼き込みは、プレビューと同じ位置・同じサイズ・同じ見た目で描画します。Older only / Newer only では Time Code・Current Frame・Total Frame の少なくとも一方がオンである必要があります（両方オフにすると説明オーバレイが出てチェックはすぐオンに戻ります）。Exp WebM を押すと、オフラインで各フレームを所定時刻へシーク／デコードしてから WebCodecs で WebM を生成します。焼き込み TC・フレーム番号の精度と左右の同期を優先するため、尺に比例して時間がかかります（Chrome 系推奨）。Audio 行で選んだモードに応じた音声をミックスします（Mute 時や音声トラックが無い／デコードできない場合は映像のみ）。Both ミックスでは片側モードでも両方のファイルが読み込まれている必要があります。Compare (PiP) は左右そろっている必要があります。書き出し中は画面中央にオーバレイが出て操作がロックされ、Esc でキャンセルできます。
• Compare (PiP) で Audio が Both のとき、書き出し音声だけ LR を入れ替えます（新しい方を L・古い方を R）。画面では新しい方が全面・古い方が右下 PiP 窓のため、右側に映る古い方の音声を R に合わせる意図です。プレビュー再生の Both は「Audio」の説明どおり 古い方 L・新しい方 R のままです。
• 書き出しは Speed 設定に関わらず常に 1.0× です。Exp WebM を押した時点で Speed 表示は 1x に戻ります（書き出し後も 1x のまま）。
• 書き出しはブラウザ内で完結するため、これ以上の大幅な高速化は難しいです。速度を最優先する場合は、ネイティブの動画ツール等をご利用ください。
• 本アプリの Exp WebM は WebCodecs と Web Audio（Mute 時は映像のみ）で WebM（VP8 / VP9 ＋ Opus）をブラウザ内で生成しダウンロードします。編集・納品の現場では MP4（H.264 等）や MJPEG など別形式に慣れている方も多く、WebM 単体では馴染みが薄い形式かもしれません。MP4 や MJPEG など別コンテナへ変換したい場合は、お手数ですがご利用の OS 向けの動画変換ツールやエンコーダを別途ご用意ください。本ページはサーバーにアップロードせずブラウザ内だけで完結するアプリであり、ブラウザが直接書き出せる形式に出力が限られることは仕様です。
• WebM を他形式へ再エンコードするとき、色空間・ガンマ・レンジ（limited / full 等）の扱いをツール側で誤ると、結果が意図より暗くなったりコントラストがずれたりすることがあります。変換プリセットや「色の管理」「レンジ」の項目は、利用するソフトのマニュアルで確認してください。

Seek / Jump などの画面上ヒント

• Seek・Jump・Scrub のほか、Layout / Audio / Speed / Loop / Auto Play の変更のあと、画面上部に短いテキストのフラッシュが出ることがあります（表示ラベルは UI と同じ英語表記）。ログとあわせて、直近の操作内容の確認に使えます。

キーボードショートカット

• Playback / Seek / Jump / Video / Audio / Speed などにショートカットがあります。内容はページ中段のキーボードショートカット（トランスポートの UI 並びどおり Playback・Seek・Jump・Video・Audio・Speed）です。Loop と Auto Play は Playback に含まれます。Speed は Slower / Faster / Reset 1x（テンキー − / ＋ / *、テンキー無しは , / . / /）です。
• 無効になるフォーカス：textarea、select（Video のプルダウン含む）、input のうちシークバー以外、ならびに編集可能要素にフォーカスがある間は、ショートカットは処理されません。シークバーにフォーカスがある場合は、主要なショートカットキーを押すとフォーカスが外れてから処理されます。
• 矢印キーは連打リピート時も Seek に使えます。その他の多くのキーはリピートを無視します。