【OBS用HTML】画像トランジションオーバーレイ｜マシュマロ・質問箱を演出付きで切り替え

マシュマロ、質問箱、お便り、ファンアートなどの画像を、

8種類のトランジション演出付きで切り替えられるOBS用HTMLオーバーレイです。

配信中に「次へ」「前へ」を操作するだけで、現在の画像が演出付きで退場し、次の画像が表示されます。

自動で流れ続けるだけのスライドショーではなく、配信者が話す内容や進行に合わせて、好きなタイミングで画像を切り替えられます。

マシュマロ専用ではありません。

PNG・JPG・WebP・GIF形式の任意の画像を登録できるため、質問読み配信のほか、ファンアート紹介、企画画像、スクリーンショット、アンケート結果、告知画像など、さまざまな用途でお使いいただけます。

━━━━━━━━━━━━━━━━━━━━

■ 8種類のトランジション演出

━━━━━━━━━━━━━━━━━━━━

画像の切り替えに、以下の8種類の演出を使用できます。

・フェード

・横スライド

・縦スライド

・ズーム

・紙めくり

・3Dフリップ

・モザイク分解・再構築

・光と粒子

演出を1種類に固定するだけでなく、画像を切り替えるたびに演出が変わる「ランダム演出」にも対応しています。

ランダムで使用したくない演出は個別に除外できるため、配信の雰囲気に合わせた組み合わせを作れます。

━━━━━━━━━━━━━━━━━━━━

■ 主な機能

━━━━━━━━━━━━━━━━━━━━

・複数画像の一括登録

・ドラッグ＆ドロップによる画像追加

・Ctrl+Vによるクリップボード画像の貼り付け

・前の画像／次の画像への切り替え

・サムネイルをクリックして直接表示

・先頭／末尾への移動

・サムネイルのドラッグによる順番変更

・画像の個別削除／全削除

・画像の表示／非表示切り替え

・8種類のトランジション演出

・演出のランダム切り替え

・ランダム対象演出の個別設定

・演出時間の変更

・自動送り機能

・末尾から先頭へ戻るループ機能

・操作音のON／OFF

・キーボード操作

・マウスクリックによる画像送り

・表示設定の自動保存

━━━━━━━━━━━━━━━━━━━━

■ 対応画像形式

━━━━━━━━━━━━━━━━━━━━

・PNG

・JPG／JPEG

・WebP

・GIF

・クリップボードへコピーした画像

透明PNGにも対応しており、透明部分を維持したまま表示できます。

※GIF画像は表示可能ですが、演出処理では1コマ目を基準として扱います。

━━━━━━━━━━━━━━━━━━━━

■ 配信画面には画像と演出だけを表示

━━━━━━━━━━━━━━━━━━━━

画像の登録や切り替えは、OBSのブラウザソースを右クリックして開く「対話」画面から操作します。

対話画面内で右クリックすると操作パネルが開き、もう一度右クリックすると閉じられます。

操作パネルや設定画面は通常の配信映像には表示されません。

視聴者側に映るのは、登録した画像とトランジション演出だけです。

━━━━━━━━━━━━━━━━━━━━

■ マウス・キーボード操作

━━━━━━━━━━━━━━━━━━━━

操作パネルのボタンだけでなく、マウスやキーボードでも画像を切り替えられます。

【マウス操作】

・左シングルクリック：次の画像

・左ダブルクリック：前の画像

・右クリック：操作パネルの表示／非表示

【キーボード操作】

・右矢印：次の画像

・左矢印：前の画像

・Space：画像の表示／非表示

・Home：先頭の画像

・End：末尾の画像

・R：ランダム演出ON／OFF

・Ctrl+V：クリップボード画像を追加

※キーボード操作は、OBSの「対話」ウィンドウが選択されているときに使用できます。

※OBSやOS全体で動作するグローバルホットキーではありません。

━━━━━━━━━━━━━━━━━━━━

■ 表示を細かくカスタマイズ

━━━━━━━━━━━━━━━━━━━━

画像のサイズや位置だけでなく、枠線や背景プレートなども調整できます。

・画像の最大横幅

・画像の最大高さ

・9方向から選べる基本表示位置

・X／Y位置の微調整

・画像のフィット方法

・角丸

・枠線の太さ

・枠線の色

・ドロップシャドウ

・背景プレートの表示／非表示

・背景プレートの色

・背景プレートの透明度

画像のフィット方法は、以下の3種類から選択できます。

・全体表示

・表示領域いっぱい

・元サイズ

設定内容はブラウザソースに自動保存されるため、次回起動時にも演出やレイアウト設定が復元されます。

━━━━━━━━━━━━━━━━━━━━

■ こんな配信におすすめ

━━━━━━━━━━━━━━━━━━━━

・マシュマロを順番に読む配信

・質問箱やお便りを紹介する配信

・視聴者から届いたファンアートの紹介

・スクリーンショットを見ながら進める企画

・アンケート結果の発表

・複数の告知画像を順番に見せたいとき

・画像の切り替えを配信演出として見せたい方

・通常のスライドショーでは物足りない方

━━━━━━━━━━━━━━━━━━━━

■ 導入方法

━━━━━━━━━━━━━━━━━━━━

1. ダウンロードしたZIPファイルを解凍します

2. OBSで「ブラウザ」ソースを追加します

3. 「ローカルファイル」にチェックを入れます

4. overlayフォルダ内のindex.htmlを選択します

5. 幅と高さを配信解像度に合わせます

6. 追加したブラウザソースを右クリックし「対話」を開きます

7. 対話画面内で右クリックして操作パネルを表示します

8. 使用する画像を登録します

OBSへ登録するファイルは、以下のファイルです。

overlay/index.html

demo/index.htmlは動作確認用です。

実際の配信には使用しないでください。

━━━━━━━━━━━━━━━━━━━━

■ 収録内容

━━━━━━━━━━━━━━━━━━━━

・OBS実配信用オーバーレイ

・演出確認用デモ

・サンプル画像

・README_FIRST.txt

・詳しい導入説明書

・操作ガイド

・トラブルシューティング

・利用規約

━━━━━━━━━━━━━━━━━━━━

■ 動作環境

━━━━━━━━━━━━━━━━━━━━

・OBS Studio

・Windows 10／11

・OBSブラウザソースを利用できる環境

・推奨解像度：1920×1080／1280×720

※Windows版OBSを基準に制作しています。

※Mac環境は実機確認を行っていないため、動作保証の対象外です。

※わんコメと連携するコメント吹き出しテンプレートではありません。

━━━━━━━━━━━━━━━━━━━━

■ ご購入前の注意事項

━━━━━━━━━━━━━━━━━━━━

・登録した画像そのものは保存されません。

・OBSやブラウザソースを再起動、再読み込みした場合は、画像を再登録してください。

・演出、位置、サイズ、色などの設定値は自動保存されます。

・ショートカットはOBSの「対話」ウィンドウが選択されているときに動作します。

・画像サイズやPCの性能、OBSのバージョンによって、演出の見え方が多少異なる場合があります。

・すべての環境での完全な動作を保証するものではありません。

━━━━━━━━━━━━━━━━━━━━

■ 利用について

━━━━━━━━━━━━━━━━━━━━

【可能なこと】

・購入者本人による配信利用

・収益化済み配信での利用

・動画への利用

・個人利用

・配信画面に合わせた設定変更

【禁止事項】

・商品データの再配布、再販売、譲渡

・自作発言

・第三者が商品ファイルを取得できる状態での公開

・本商品を主要部分として使用した別商品の販売

・公序良俗に反する目的での利用

・違法行為への利用

詳細は同梱のLICENSE.txtをご確認ください。

━━━━━━━━━━━━━━━━━━━━

■ クレジット

━━━━━━━━━━━━━━━━━━━━

制作：たっくん

※現在の価格(1280円)は、リリース記念価格です。先着5名様限定の価格になりますので、予めご了承ください。

※トランジション演出はあとから追加できる仕組みなっていますので、ご希望のトランジション演出の作成も有料にて承ります。