[2026/10/18]

[Web Tool] Video Editor — 動画を切る・つなぐ・書き出すブラウザ完結型動画エディタ

概要

Video Editorは、ブラウザの中だけで動く、動画の編集ツールです。動画のファイルは、サーバーへ送られません。

ブログに貼る動画を、サッと切って、つないで、書き出す。そのために作りました。ふだんの画面は、「素材を入れる → 切る → 書き出す」だけで足ります。細かい機能は、右の欄の折りたたみに入っています。困ったときは、F1 キーを押すと、「やりたいこと → やり方」を探せます。

切る・つなぐ: 分割、削除、詰めて削除、トリム、並べ替え、複製
足す: 文字、字幕、色の背景、図形（四角・丸）、ぼかし／モザイク、画像
整える: 位置・大きさ・回転、切り抜き、色・フィルタ、クロマキー、動き、切り替え効果、速度
音: 音量、フェード、ノーマライズ、無音カット
書き出し: MP4 / WebM / MKV / MOV、GIF、音声のみ、無劣化カット、静止画、字幕ファイル
録画・録音: 画面、カメラ、マイク
自動保存: ページを開き直すと、「続きから再開」と出ます

開く

インストールは不要です。下のリンクから、そのまま開けます。

3D Gaussian Splatting Viewer

lain-lab.com の動画エディタの使い方ガイド。動画を、サーバーへ送らずに、ブラウザの中だけで編集します。切る、つなぐ、文字や字幕を入れる、速度を変える、ぼかす、クロマキーまで。MP4 や GIF への書き出し、1GB を超える動画、自動保存からの再開にも対応しています。困ったときは F1 キーで、やりたいことから探せます。

lain-lab.com

スタートメニューから起動

トップページのスタートメニューからも起動できます。

TOPページ

PROTOCOL.LAIN // Archive

Lainの世界観で作る学習・実験場。

lain-lab.com

スクリーンショット

はじめの画面

左に素材と追加ボタン、中央にプレビューとタイムライン、右にクリップの設定、という並びです。

動画を読み込んだ画面

書き出し

F1 ヘルプ

続きから再開

アプリの特徴

動画は、サーバーへ送られません: 読み込みも、編集も、書き出しも、ブラウザの中だけで行います
1GB を超える動画でも使えます: 動画を全部メモリに載せず、必要な部分だけを読みます。1.4GB・約 25 分の動画で、読み込みから書き出しまで、動作を確認しています
書き出しが速い: ブラウザの動画エンコーダを使います。27 分 18 秒の動画を、「ブログ用」で、94.8 秒で書き出せました（Windows 11、Chrome、Core i7-12700K、RTX 4070 Ti）
ふだんの画面は、シンプル: 細かい機能は、右の欄の折りたたみにあります。探すときは、F1 です
自動保存: 編集内容は、ブラウザに自動で保存されます。動画のファイルそのものは、保存しません
プレビューと書き出しは、同じ絵: 同じ描画の仕組みを使っているため、見たとおりに書き出されます

まず試す

Video Editorを開きます。
左の「素材」に、動画をドロップします（クリックして選ぶこともできます）。
素材の＋を押して、タイムラインに置きます。
切りたい位置をクリックして、S キーで分割します。いらない部分を選んで、Delete キーで消します。隙間を詰めたいときは、Shift + Delete です。
右上の 書き出し を押します。用途は、「ブログ用」のままで、書き出す を押します。

Chrome と Edge では、書き出しのときに、保存先を選びます。それ以外のブラウザでは、ダウンロードになります。

使い方

1. 素材を入れる

左の「素材」に、ファイルをドロップします。動画、音声、画像が使えます。タイムラインに、直接ドロップしてもかまいません。

最初に置いた動画に合わせて、画面の大きさとフレームレートが、自動で決まります
縦動画にしたいときは、右の「プロジェクト」タブで、比率を 9:16 にします
素材は、動画のファイルそのものを読んでいます。ファイルの場所を変えたり、消したりすると、「見つかりません」と出ます（あとの「自動保存と再開」を見てください）

2. 切る・つなぐ・並べ替える

やりたいこと	やり方
途中で切りたい	位置をクリックして、`S`（または「分割」）。クリップを選んでいなければ、その位置にある全部のクリップが切れます
いらない部分を消したい	クリップを選んで `Delete`。隙間が残ります。`Shift` + `Delete` なら、隙間を詰めて消します
前の部分だけ、後ろの部分だけ消したい	再生位置を合わせて、`Q`（位置より前を削除）、`W`（位置より後ろを削除）
長さを調整したい	クリップの左右の端を、ドラッグします。隣のクリップや目印に、吸い付きます（`Alt` を押している間は、吸着なし）
順番を入れ替えたい	クリップを、左右にドラッグします。重なった場合は、自動で間に挿入されて、後ろがずれます（`Alt` を押しながら落とすと、そのまま重なります）
隙間を詰めたい	隙間のあるトラックを右クリック →「隙間を詰める」
複数を、まとめて選びたい	`Shift` か `Ctrl` を押しながらクリック。または、何もない所をドラッグして囲みます。`Ctrl` + `A` で、全部
映像と音声を、別々に動かしたい	映像と音声は、リンクでつながっています。`Alt` を押しながら操作すると、片方だけ動かせます。右クリック →「連動を解除」でも
複製、コピー	`Ctrl` + `D` で複製。`Ctrl` + `C` / `X` / `V` で、コピー・切り取り・貼り付け

3. 文字・字幕・図形・ぼかし

左の「追加」から、入れます。

テキスト: プレビューの上で、ドラッグして動かします。角で大きさ、上の丸で回転です。内容や色は、右の「クリップ」タブで変えます
字幕: 右の「字幕」タブで、一覧から編集します。SRT と VTT の読み込み、書き出しができます。長い文章から、字幕を一括で作ることもできます
色背景・四角・丸: 背景や、枠、目隠しに使います
ぼかし／モザイク: 隠したい場所に、置きます。範囲と強さを、右の欄で変えます

4. 見た目を整える

クリップを選ぶと、右の「クリップ」タブに、設定が出ます。細かいものは、折りたたまれています。

位置・大きさ: 位置、大きさ、回転、不透明度、反転。「右下に小さく」などの、ワイプのような置き方も、ボタンで選べます
切り抜き: 画面の一部だけを使います
色・フィルタ: 明るさ、コントラスト、彩度など。プリセットもあります
クロマキー: 背景の色を、透明にします
動き: ズームや移動を、つけます
切り替え効果・フェード: フェード、ワイプ、スライド、ズーム、ぼかし、回転。クリップを選んで、「クロスフェード」でつなぐこともできます

5. 速度

クリップを選んで、右の「時間」の「速度」を変えます。0.25 倍から 8 倍までです。速度を変えると、音の高さも変わります。 速度を変えたあとの隙間は、自動では詰まりません。「隙間を詰める」で詰めてください。

6. 音

音量とフェード、エフェクトは、音声のクリップを選んで、右の欄で変えます
ノーマライズ: 音量を、ほどよく揃えます
無音カット: 音の小さい部分を探して、すべてのトラックから、その時間を削除して詰めます。基準の音量と、最低の長さを、変えられます

7. 書き出し

右上の 書き出し（または Ctrl + E）を押します。

用途	内容
ブログ用	MP4、720p、30fps。軽くて、どこでも再生できます
高画質	編集した解像度のまま、きれいに書き出します
小さく	480p、24fps。容量を優先します
縦動画	プロジェクトの比率で書き出します（Shorts / Reels / TikTok 向け）
WebM	WebM 形式で書き出します
無劣化カット	再エンコードせず、切るだけ。速くて、画質が落ちません
GIF	アニメ GIF。長いと容量が大きくなるので、10 秒以内がおすすめです
音声だけ	M4A / WAV / OGG

「詳細設定」で、形式、コーデック、高さ、フレームレート、画質、音声の音質を、変えられます
範囲は、「全体」のほかに、I キーと O キーで決めた範囲も選べます
この瞬間を画像で保存（PNG / JPG）と、字幕ファイル（SRT / VTT）も、同じ画面から出せます
書き出し中は、このタブを開いたままにしてください

無劣化カットは、素材が 1 本で、拡大縮小・フィルタ・文字などを使っていないときだけ、使えます。切れ目は、キーフレームの単位になるので、数コマの誤差が出ます。ぴったり切りたいときは、「ブログ用」などの、再エンコードで書き出してください。

8. 録画・録音

左の「録画・録音」から、画面録画、カメラ、マイク録音ができます。「停止して追加」を押すと、素材に追加されて、タイムラインに置かれます。

9. 自動保存と再開

編集内容は、ブラウザの中に、自動で保存されます。ページを開き直すと、上に、「前回の編集内容があります」と出ます。続きから再開 を押すと、戻ります。

動画のファイルそのものは、保存されません。再開したあとに、素材が「未接続」になっていたら、右の「プロジェクト」タブの「前回の素材を再接続」を押すか、同じファイルを、左の「素材」にドロップしてください。自動でつながります
「プロジェクトを保存」で、ファイル（.vedit.json）にも、残せます。動画本体は、含まれません

10. ショートカットキー

キー	動き
`Space`	再生 / 停止
`←` `→`	1 コマ戻る / 進む
`Shift` + `←` `→`	1 秒戻る / 進む
`↑` `↓`	前 / 次の切れ目へ
`Home` `End`	最初 / 最後へ
`S`	再生位置で分割
`Delete`	削除
`Shift` + `Delete`	削除して詰める
`Q` / `W`	再生位置より前 / 後ろを削除して詰める
`Ctrl` + `Z`	元に戻す
`Ctrl` + `Shift` + `Z`（または `Ctrl` + `Y`）	やり直し
`Ctrl` + `C` / `X` / `V`	コピー / 切り取り / 貼り付け
`Ctrl` + `D`	複製
`Ctrl` + `A`	すべて選択
`I` / `O`	範囲の開始 / 終了
`Alt` + `X`	範囲を解除
`M`	マーカー
`T`	テキストを追加
`+` / `-`	タイムライン拡大 / 縮小
`\`	タイムライン全体表示
`N`	吸着オン / オフ
`L`	範囲ループオン / オフ
`Ctrl` + `S`	プロジェクト保存
`Ctrl` + `E`	書き出し
`F1`	ヘルプ

対応していないもの

内容	扱い
速度を変えても、音の高さを保つ	できません。速度に合わせて、音の高さも変わります
MP3 の書き出し	ありません。音声のみは、M4A / WAV / OGG です
ブラウザが読めない形式の動画	読み込めません。HEVC（H.265）などは、環境によって読めません。H.264 / VP9 / AV1 の動画に変換してください
スマートフォンでの動作	確認していません
Safari、Firefox での動作	確認していません。Safari は、フィルタが、プレビューに出ません

注意事項

動作の確認は、Windows 11 の Chrome で行いました。1.4GB・約 25 分の動画の読み込み、書き出し、日本語のファイル名での保存、自動保存からの再開は、実機で確認しています
文字・字幕の書き出し、M4A の書き出し、無劣化カット、画面録画は、実機では、まだ確認していません
H.264 や AAC で書き出せるかは、ブラウザと端末によって違います。使えないときは、VP9 や Opus などに、自動で切り替わって、結果の画面に注意が出ます
Chrome と Edge 以外では、書き出しが、メモリの上で行われます。とても大きな動画は、書き出せないことがあります
編集内容は、ブラウザのサイトデータに保存されます。サイトデータを消すと、消えます。大事な編集は、「プロジェクトを保存」で、ファイルにも残してください
動画、音声、画像は、ご自身が、使ってよいものを、使ってください。ファイルは、こちらでは、配っていません

よくある質問 (FAQ)

Q. 動画は、どこかに送信されますか。
A. 送信しません。読み込みも、編集も、書き出しも、ブラウザの中だけで行います。

Q. 動画が読み込めません。
A. HEVC（H.265）など、一部の形式は、環境によって読めません。H.264 / VP9 / AV1 の動画に変換してください。Chrome か Edge の、最新版が、一番安定しています。

Q. 音が出ません。
A. 最初に、再生ボタンを押すまで、音は出ません。トラックのスピーカーのマークが、ミュートになっていないか、音量が 0 でないかも、確認してください。

Q. プレビューが、カクつきます。
A. プレビューは、自動で、軽い画質で表示しています。4K や、重い動画のときは、他のタブを閉じる、効果（ぼかし・クロマキー）を減らすと、軽くなります。書き出した結果には、影響しません。

Q. クリップが、動かせません。
A. トラックが、ロックされていないか、確認してください。

Q. 書き出した動画の、端がずれます。
A. 無劣化カットは、数コマの誤差が出ます。ぴったり切りたい場合は、「ブログ用」などの、再エンコードで書き出してください。

Q. 書き出しに、時間がかかります。
A. 動画の長さの、0.3 〜 2 倍が目安です（画面の大きさや、端末によります）。書き出し中は、このタブを開いたままにしてください。27 分 18 秒の動画を、「ブログ用」で、94.8 秒で書き出せた例があります。

Q. 1GB を超える動画を、扱えますか。
A. 読み込みは、メモリに全部載せないので、大丈夫です。書き出しは、Chrome / Edge で保存先を指定すると、ファイルへ直接書き込めるので、安定します。

Q. 作業を中断して、続きからやりたいです。
A. 編集内容は、自動で、このブラウザに保存されます。次に開いたときに、「続きから再開」を選んで、素材を再接続してください。

Q. 再開したのに、素材が「未接続」です。
A. 動画のファイル自体は、保存されないためです。右の「プロジェクト」タブの「前回の素材を再接続」を押すか、同じファイルを、左の「素材」にドロップしてください。

技術記事

実装の詳細は、技術記事にまとめています。

[Astro] #178 ブラウザだけで動く動画エディタ — 1.4GB・27分の動画を、アップロードなしで切って書き出す

ブラウザの中だけで動く動画エディタを作りました。動画はどこにも送られません。

lain-lab.com

更新履歴

バージョン	日付	内容
v1.0	2026/10/18	初回公開（編集、文字・字幕・図形・ぼかし、切り替え効果、速度、音声、書き出し、録画・録音、自動保存と再開、F1 ヘルプ）

クレジット

動画の読み込みと書き出し: Mediabunny（WebCodecs を使ったライブラリ。ライセンス文は、サイトに同梱しています）
描画、音声処理: ブラウザの Canvas と Web Audio

Mediabunny — A complete JavaScript media toolkit for the browser | Mediabunny

A JavaScript library for reading, writing, and converting media files. Directly in the browser, and faster than anybunny else.

mediabunny.dev

ご自身で用意した、動画、音声、画像の権利は、それぞれの権利者にあります。Video Editorは、個人の制作物です。