プログレスバー素材
動画の長さに合わせたプログレスバーアニメーションを生成し、背景透過の動画素材として書き出します。
▶
使い方のヒント
- 分・秒を指定すると、その時間で0%→100%に到達するバーを生成します
- 書き出された動画は背景透過（アルファチャンネル）済みです
- 「再生 + 録画開始」でアニメーション完了時に自動で録画停止します
- 「1920x100」を選ぶと、動画下部に配置しやすい細長い素材になります
- SafariはWebM録画に対応していません。Chrome/Edgeをご利用ください
アニメーション設定
形状
スタイル設定
テキスト表示
エクスポート設定
このツールについて
プログレスバー素材ジェネレーターは、動画に重ねることで視聴完了率アップが期待できるオーバーレイ素材をブラウザ上で無料で作成できるツールです。水平バー・円形ゲージ・分割ドットの3種類の形状から選び、動画の尺（秒数）を入力するだけで、ちょうど動画と同じ長さのプログレスバーアニメーションを背景透過のWebMとして書き出せます。「あとどのくらいで終わるか」を視覚的に伝えることで視聴者の離脱を抑え、解説動画・レシピ動画・チュートリアルの視聴完了率向上に効果的です。アカウント登録不要で、Premiere Pro・DaVinci Resolve・CapCutなどの動画編集ソフトにそのまま読み込めます。バーの色・太さ・イージング・テキスト表示など細かくカスタマイズでき、ループ再生や逆再生にも対応しています。
使い方
- 1動画の長さ（分・秒）を入力する
- 2バーの形状（水平・円形・分割ドット）を選ぶ
- 3色・太さ・表示テキストをカスタマイズする
- 4キャンバスサイズ（横・縦・スリム）を選ぶ
- 5「再生＋録画開始」を押すと自動録画されダウンロードできる
活用シーン
- ✓YouTube解説動画の右下にプログレスバーを重ねて、離脱率を下げる
- ✓チュートリアル動画のセクション区切りに残り時間を視覚的に表示
- ✓TikTok・Instagram ReelsなどSNS縦型動画向けの縦バーを作成
- ✓セミナー・ウェビナーのスライドにカウントダウンバーを追加
よくある質問
Premiere ProやDaVinci Resolveで使えますか？+
はい。書き出されたWebMファイルはアルファチャンネル（透過情報）を含んでいるため、Premiere Pro・DaVinci Resolve・Final Cut Proなど主要な動画編集ソフトのタイムラインにそのまま配置できます。
YouTube動画の離脱防止に効果がありますか？+
プログレスバーは「あとどれくらいで終わるか」を視覚的に伝えることで、視聴者の離脱を抑える効果が期待できます。特に5分以上の長尺動画や解説系動画で有効です。
どのサイズで書き出せますか？+
横型（1920×1080）・縦型（1080×1920）・スリム（1920×100）の3サイズに対応しています。スリムサイズは動画の最下部に配置しやすい細長いバーになります。
Safariでは使えませんか？+
ツールのプレビューはSafariを含む全ブラウザで動作します。ただし録画・書き出し機能はWebM形式のためSafari非対応です。書き出しにはChromeまたはEdgeをお使いください。
ループや逆再生はできますか？+
はい。アニメーション設定でループ再生と逆再生（100%→0%）を有効にできます。ループ設定は長時間の待機画面素材などに便利です。
登録やログインは必要ですか？+
不要です。アカウント登録なしでブラウザから完全無料でお使いいただけます。すべての処理はブラウザ内で完結します。