商品概要: 好きな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名様限定の価格になります！予めご了承ください。