【わんコメ対応】動画背景対応コメント吹き出しテンプレート＋動画フィッターセット｜好きなMP4を背景にできるOBS用HTML

商品概要:

好きなMP4をコメント吹き出し内の背景動画として使える、OBS / わんコメ対応HTMLテンプレートです。

本商品には、テンプレート本体に加えて、MP4の見え方を調整できる「吹き出し背景動画フィッター」を同梱しています。

通常の動画素材は、コメント吹き出しの横長サイズに合わなかったり、見せたい部分が切れてしまったりすることがあります。

同梱の動画フィッターを使うことで、動画の拡大率、表示位置、明るさ、ぼかし、暗幕の濃さなどをブラウザ上で確認しながら調整できます。

調整後は、テンプレートの style.css の一番下に追記するCSSをコピーできます。

既存の :root を丸ごと置き換える必要はありません。

商品説明文:

お好きなMP4を、コメント吹き出しの背景動画として使えるHTMLテンプレートと、動画の見え方を調整できる補助ツールのセットです。

わんコメとOBSでの使用を想定しており、OBSのブラウザソースに読み込むことで、コメントが動画背景付きの吹き出しとして表示されます。

テンプレート本体では、使用したいMP4を assets/bubble_bg.mp4 という名前で配置するだけで、吹き出し内の背景動画として表示できます。

また、本商品には「吹き出し背景動画フィッター」を同梱しています。

このツールをブラウザで開くと、MP4を読み込んで、実際の吹き出しに近い形で見え方を確認できます。

動画フィッターで調整できる内容:

・吹き出しサイズのプリセット

・動画の拡大率

・動画の横位置

・動画の縦位置

・動画の透明度

・動画の明るさ

・動画のぼかし

・暗幕の濃さ

・アクセント色

・文字色

調整後は、style.css に追記するCSSをコピーできます。

既存の :root を丸ごと置き換える必要がないため、比較的安全にカスタマイズできます。

コメント本文は一文字ずつ表示される文字送り演出付きです。

コメントは下から上へ流れる仕様で、Twitchスタンプなどの画像付きコメント表示にも対応しています。

デザインは、動画フィッターツールのプレビューに合わせたシンプルで高級感のある見た目に統一しています。

背景動画を主役にしやすく、雑談配信、ゲーム配信、歌枠、イベント配信など幅広い配信画面に合わせやすい構成です。

主な特徴:

・わんコメ対応

・OBSブラウザソース対応

・HTML / CSS / JavaScript 形式

・背景なし、吹き出しのみ

・好きなMP4を吹き出し内の背景動画として使用可能

・assets/bubble_bg.mp4 を差し替えるだけで背景動画を変更可能

・動画なしでもフォールバック背景で表示

・動画の透明度、明るさ、ぼかし、拡大率、表示位置を調整可能

・動画フィッターツール同梱

・調整したCSSを style.css の一番下に追記する形式

・既存の :root を丸ごと置き換えなくてよい

・動画フィッターツールの見た目に合わせたシンプルデザイン

・一文字ずつ表示される文字送り演出

・下から上へ流れるコメント表示

・Twitchスタンプ表示対応

・editor_schema.json 同梱

・obs_demo と実テンプレートを分離

・コメント受信時は実コメント表示を優先

セット内容:

01_video_bg_comment_bubble_template

・動画背景対応コメント吹き出しテンプレート本体

・OBS / わんコメで使用するHTML

・onecomme_template

・obs_demo

・README_FIRST.txt

・docs / troubleshooting.txt

・editor_schema.json

・template.json

02_bubble_video_fitter_tool

・吹き出し背景動画フィッター

・index.html

・README.txt

使用方法:

1. ZIPを解凍します。

2. 02_bubble_video_fitter_tool の index.html をブラウザで開きます。

3. 使用したいMP4を読み込み、見え方を調整します。

4. 「おすすめ：style.cssの一番下に追記」のCSSをコピーします。

5. 01_video_bg_comment_bubble_template 内の onecomme_template/video_bg_comment_bubble/style.css の一番下に追記します。

6. 使用したいMP4を bubble_bg.mp4 という名前に変更します。

7. onecomme_template/video_bg_comment_bubble/assets/ に bubble_bg.mp4 を入れます。

8. OBSのブラウザソースで onecomme_template/video_bg_comment_bubble/index.html を指定します。

9. わんコメのコメントテスター、または実コメントで動作確認を行います。

推奨MP4:

・3〜10秒程度

・H.264 / mp4

・音声なし

・1280x720以下

・10MB以下推奨

注意事項:

・実配信やコメントテスター確認には、必ず onecomme_template/video_bg_comment_bubble/index.html を使用してください。

・obs_demo/index.html は見た目確認専用です。

・背景画像や配信画面そのものは含まれていません。

・使用するMP4本体は購入者側でご用意ください。

・MP4が重すぎるとOBSの負荷が上がる場合があります。

・動画フィッターはMP4本体を変換・トリミングして書き出すツールではありません。

・動画フィッターは、テンプレート側での表示位置や見え方を調整するCSSを作るための補助ツールです。

・フィッターから出力したCSSは、基本的に style.css の一番下に追記してください。

・既存の :root を丸ごと置き換える必要はありません。

・動画が表示されない場合でも、フォールバック背景で吹き出し自体は表示されます。

・ブラウザソース上で表示が更新されない場合は、キャッシュ更新や再追加をお試しください。

想定用途:

・雑談配信

・ゲーム配信

・Vtuber配信

・歌枠

・作業配信

・イベント配信

・配信画面の世界観づくり

・動画素材を活かしたコメント欄づくり

・自分専用のコメント吹き出し演出

※現行の価格(2,500円)は、リリース記念として先着5名様限定の価格になります！予めご了承ください。