赤枠サイトフレーム合成

フレームの窓に動画・画像をはめ込んで書き出し。処理はすべてこのブラウザ内で行われます。

素材を読み込むとここにプレビューが表示されます

1素材を読み込む

背景フレーム 画像（PNG / JPEG）または動画（MP4 / MOV）ドロップまたはタップして選択

はめ込み素材 動画（MP4 / WebM / MOV）または画像。続けてドロップすると追加されますドロップまたはタップして選択

背景フレームを読み込まないときは「背景フレームなし」になり、はめ込み素材を画面いっぱいに表示します（右上のロゴ付き）。

2はめ込み領域

フレーム内の黒い部分・透明部分を自動で検出します。うまくいかない場合は「タップで領域を選択」か、プレビュー上の枠をドラッグして調整してください。

検出する部分

色の許容範囲 48

縁の食い込み 1px

検出した形でくり抜く（角丸・不定形の窓に対応）

X Y 幅高さ

3配置とクロップ

配置

フィットフィル引き伸ばし

フィット：全体が収まるよう縮小・拡大（余白はフレームのまま）／フィル：領域を埋めてはみ出しをカット

上下に余白（黒帯）ができるときは上に寄せる

「フィット」で上下に余白ができるとき、オンなら映像を上に寄せて黒帯を下だけにし、オフなら上下の中央に置きます。背景フレームあり・なしで別々に覚えます（初期設定：背景フレームありはオン、なしはオフ）。

素材の位置と大きさ

左右

上下

拡大

単位：左右・上下はフレームのピクセル、拡大は %。プレビュー上の「素材をドラッグで移動」でも動かせます。窓の形でくり抜いているときは、窓の外にはみ出した部分はフレームで隠れます。

上

下

左

右

上下を連動左右を連動

素材を読み込むと調整できます（単位：元素材のピクセル）

4トランジション

HEAVENESE のトランジション（1.84 秒・効果音つき）を、動画の最初と最後に入れられます。トランジションはロゴも含めていちばん上に重なります。プレビュー・動画の書き出し・Premiere 用 XML のすべてに反映されます。

最初に入れる

素材の再生を始める位置秒フレーム

最初のトランジションは、必ず完成動画の先頭（0 秒 0 フレーム）から始まります（固定）。「素材の再生を始める位置」は、完成動画の先頭からの位置です（30 フレーム＝1 秒）。背景フレームとはめ込み素材は、再生が始まるまで表示しません（黒）。

最後に入れる

最後のトランジションの位置は固定です。トランジションが終わる 1 秒 13 フレーム前に、はめ込み素材と背景フレームが止まります（＝素材が終わる 13 フレーム前にトランジションが始まります）。例：はめ込み素材が 25 秒で終わるときは、24秒17フレームから始まります。素材が止まったあとは背景フレームとはめ込み素材を表示せず（黒）、トランジションが終わったところで完成動画も終わります。

効果音を入れる

初期設定：素材の再生は 1 秒 5 フレームから。

5書き出し

日付（動画の名前の月日）

動画の番号名前の先頭に月日と番号を付ける名前の最後に「赤枠」を付ける

書き出す動画の名前は「月日と番号.はめ込み素材の名前赤枠.mp4」です（例：10 月 25 日の 1 番目なら「10251.○○ 赤枠.mp4」、12 番目なら「102512.○○ 赤枠.mp4」、10 月 4 日の 1 番目なら「1041.○○ 赤枠.mp4」。月と日に 0 は付けません）。日付は、背景フレームの名前（例：10.25.mp4）から自動で入ります。違っていたら直せます。はめ込み素材の名前が、すでに月日と番号（例：10253.）で始まっているときは、その数字をそのまま使います。複数の素材を 1 本ずつ書き出すときは、番号の付いていない素材に、この番号から順に 1 つずつ増やして付けます。月日と番号、「赤枠」は、上のスイッチでそれぞれ付けないこともできます（初期設定はどちらも付ける）。

動画形式

音声（プレビューにも反映）

Premiere Pro 用に書き出す

いまの合成の設定を、Premiere Pro で読み込める XML にします。ZIP をどこで展開しても、XML と同じフォルダの素材に自動でつながります。ZIP の中には XML のほか、背景フレームとはめ込み素材の動画（元のファイル名のまま）、ロゴ画像、読み込み方の説明（README.txt）が入ります。複数の素材を読み込んでいるときは、全部を 30 秒ずつあけて 1 つのシーケンスに並べます。

トランジションの動画は ZIP に入りません。名前は、背景フレームと同じ名前で拡張子が .mov です（例：背景フレームが 10.11.mp4 なら 10.11.mov。背景フレームがないときは LT.mov）。どの XML も、ZIP を展開してできたフォルダの「1 つ上のフォルダ」にあるこのファイルを読みにいきます。背景フレームを読み込んでから下のボタンで保存し、ZIP を展開する場所（例：ダウンロードフォルダ）に置いてください。同じ背景フレームを使う間は、1 回置けば済みます。

トランジションの動画をダウンロード

使い方と注意点

背景フレーム（画像または動画）を読み込むと、黒い（または透明な）窓を自動で検出します。動画のときは途中のコマで検出します。
はめ込み素材を読み込むと、窓の中にフィット表示されます。
動画の上下に黒帯がある場合は「黒帯を自動検出」か、スライダーでクロップしてください（明るい場面で実行すると正確です）。
「動画を書き出す」で、はめ込み動画の最初から最後までを書き出します。背景フレームの動画はその間ループします。
HEAVENESE のロゴは、はめ込み素材を表示している間だけ右上に合成されます。トランジションはそのさらに上に重なります。
「4. トランジション」で、最初と最後にトランジションを入れるか、始めるタイミングを設定できます。

対応ブラウザ（最近の Chrome / Edge / Safari など）では、動画を 1 コマずつ処理する高速方式で書き出します（MP4）。
高速方式が使えない場合は、再生しながら録画する通常方式（実時間）に自動で切り替わります。通常方式では、途中でタブを切り替えるとコマ落ちすることがあります。
保存できる形式はブラウザによって異なります。Safari と最近の Chrome / Edge は MP4、Firefox は WebM になります。
ファイルはサーバーへ送信されません。すべてこの端末の中で処理されます。

更新情報

赤枠サイトの主な変更点です（新しい順）。

2026年10月27日

サイトのアドレスを https://akawaku.ic2.jp/ に変えました。これまでのアドレス（https://tools.ic2.jp/akawaku/）を開くと、自動で新しいアドレスに移ります。

2026年10月25日

書き出す動画の名前を「月日と番号.はめ込み素材の名前赤枠.mp4」にしました（例：10251.○○ 赤枠.mp4）。「5 書き出し」に「日付」（背景フレームの名前から自動で入り、直せる）と「動画の番号」の欄を追加しました。はめ込み素材の名前に、すでに月日と番号が付いているときは、その番号を使います。月日と番号・「赤枠」は、スイッチで付けないこともできます。
Premiere 用の ZIP・展開してできるフォルダ・XML・シーケンスの名前を、月日と番号を付けたはめ込み素材の名前にしました（例：10253.○○.zip）。
Safari で作った動画の色の情報（色の範囲）を正しくしました。これまでは、黒が少し浮いて白っぽく見えることがありました。
Firefox と Safari の書き出しを速くしました（Firefox は約 1 倍速 → 約 3.4 倍速、Safari は約 1.8 倍速 → 約 2.5 倍速）。Firefox では、枠素材の作成も速くなりました。
Brave で「フィンガープリンティングのブロック」がオンのとき、書き出した動画のはめ込み素材の音が、最初ほど小さくなる問題を直しました。あわせて、オンのときは作業できないようにして、オフにする案内を出すようにしました。
Safari では作業できないようにして、Chrome か Brave で開くよう案内を出すようにしました。
「更新情報」と「ライセンス」のタブを追加しました。

2026年10月24日

サイトの名前を「赤枠サイト」にしました。
プレビューは、再生ボタンを押すと必ず 0:00（最初のトランジション）から、トランジションの絵と効果音がそろってから再生するようにしました。ループ再生は初期設定でオフにしました。
Safari などで、プレビューのトランジションの効果音が鳴らないことがある問題を直しました。
Safari・Firefox で開いたときは書き出しの速さについて、Brave でフィンガープリンティングのブロックがオンのときはオフにするよう、案内を出すようにしました。
書き出し中の「◯倍速」の表示を、実際の速さに近づけました。書き出しを少し速くしました。

2026年10月13日

コマの時刻が乱れている動画（動きがかくつく動画）を、読み込んだときに自動で直すようにしました（映像と音はそのまま）。
コマ数（29.97・59.94 fps など）や画質の違う素材でも、コマを取り違えずに書き出すようにしました。高画質の素材は、書き出しの画質も上げます。
枠素材のプレビューの文字を、できあがりと同じフォントで表示するようにしました。

2026年10月12日

「枠素材を作る」タブを追加しました（放送日を選ぶと、背景フレームの動画を作れます）。
はめ込み素材を複数読み込んで、30 秒ずつあけて 1 つのタイムラインに並べられるようにしました（どの素材にも最初と最後にトランジション）。
トランジションの位置を固定にしました。Premiere 用のトランジションの動画は、背景フレームと同じ名前の .mov を、展開したフォルダの 1 つ上に置いて共通で使う方式にしました。
書き出す動画の大きさと画質を、背景フレームに合わせるようにしました。プレビューは 0:00 から再生するようにしました。
サイトのアイコンを作りました。操作手順書に説明動画を入れました。

2026年10月5日〜6日

はめ込み素材の音量を、トランジションの効果音の音量に合わせる機能と、音量の調整を追加しました（Premiere 用 XML にも反映）。
背景フレームなしの動画を書き出せるようにしました（はめ込み素材を画面いっぱいに表示し、右上にロゴ）。
はめ込み素材の黒い余白（黒帯）を自動で切り取り、上下に余白ができるときに上に寄せる設定を追加しました。
トランジションの位置を初期設定に戻すボタンを追加しました。
プレビューで、シークや繰り返しのあとに前の音が鳴る問題などを直しました。

2026年9月28日

赤枠サイトを公開しました。背景フレームの窓にはめ込み素材を合成し、ロゴを重ねて、動画（MP4）と Premiere Pro 用の XML（ZIP）を書き出せます。
動画の最初と最後にトランジション（効果音つき）を入れられるようにしました。
操作手順書のタブを追加しました。

ライセンス

赤枠サイトで使っている部品（オープンソースのソフトウェア）・文字の形（フォント）・外部のサービス・素材です。処理はすべてお使いのブラウザーの中で行われ、動画がどこかへ送られることはありません。

ソフトウェア

ライセンスの全文を表示

@mediabunny/aac-encoder 1.62.1 音声（AAC）の圧縮に使っています。ブラウザーが AAC の圧縮に対応していないとき（Firefox など）だけ読み込みます。ライセンス：Mozilla Public License 2.0（MPL-2.0）　著作権：© 2026-present, Vanilagy and contributors 中に、FFmpeg の AAC エンコーダー（libavcodec）を WebAssembly にしたものが入っています。FFmpeg の部分のライセンスは GNU Lesser General Public License 2.1 以上（LGPL-2.1+）です。パッケージ ↗　FFmpeg ↗　FFmpeg のソースコード ↗

ライセンスの全文を表示

フォント

Roboto（Black Italic） 「枠素材を作る」で、窓の下の日付の文字に使っています。ライセンス：Apache License 2.0　制作：Christian Robertson（Google） Google Fonts ↗

ライセンスの全文を表示

外部のサービス

YouTube 操作手順書の説明動画を、YouTube から埋め込んで表示しています（手順書を開いたときに読み込みます）。

素材

ロゴ（HEAVENESE）、トランジションの映像と効果音、「枠素材を作る」の標準の背景（News背景）は、番組 HEAVENESE の素材です。 Brave で出す案内の、ライオンのアイコンと画面の図は、操作の場所を示すために Brave の画面から取ったものです。Brave は Brave Software, Inc. の商標です。Chrome は Google LLC の商標です。

このサイトの仕組みについて

音量合わせの音の大きさは、ITU-R BS.1770（放送の音の大きさの測り方）に沿って、このサイトの中で測っています。ZIP の作成、Premiere Pro 用 XML（Final Cut Pro 7 XML 形式）の作成、動画のコマの時刻の修正なども、このサイトの中のプログラムで行っています。

赤枠サイトフレーム合成

更新情報

2026年10月27日

2026年10月25日

2026年10月24日

2026年10月13日

2026年10月12日

2026年10月5日〜6日

2026年9月28日

ライセンス

ソフトウェア

フォント

外部のサービス

素材

このサイトの仕組みについて

Chrome か Brave で開いてください

Brave の「フィンガープリンティングをブロック」をオフにしてください