【配信】画面に重ねる質感 12種｜フィルムの粒子・走査線・光漏れ・雨粒｜下がそのまま透ける・濃さ0で完全に透明・OBS用・設定ボタン(⚙)つき・登録不要

配信画面の「いちばん上」に薄くかぶせて、画面全体の質感を変える層です。ゲーム画面でもカメラでも、下に置いた物はそのまま透けて見えます。フィルムの粒子、ブラウン管の走査線、光漏れ、雨粒――同じ使いかたで見た目だけ違うものを12種そろえました。

動画ファイルではありません。その場で描いているので容量はごくわずかで、ループの継ぎ目もありません。初期値は「薄い」側にしてあります。濃さは⚙で0〜100の間で自由に決められ、0にすると1画素も塗らない＝完全に透明になります。

単一HTML・インストール不要・アカウント不要・オフライン動作。OBSのブラウザソースに入れて、ソース一覧のいちばん上に置くだけ。日本語／English 切替対応。

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

◆ 収録している12デザイン

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

・grain.html … フィルムの粒子（明暗の細かい粒が毎コマ入れ替わります）

・scanline.html … ブラウン管の走査線（細い横線が並び、明るい帯が下りてきます）

・leak.html … 光漏れ（画面のふちから色のついた光がにじみます）

・vignette.html … 四隅が沈む（まわりだけ静かに暗くなり、真ん中は素通しです）

・frost.html … すりガラスの曇り（乳白色の膜と、拭けたような素通しの穴）

・droplet.html … 窓を伝う雨粒（粒が散り、ときどき筋を引いて流れます）

・dust.html … 舞う埃（光の中の細かい粒がゆっくり漂います）

・warp.html … 古いテープのゆらぎ（横帯が明滅し、乱れた帯が抜けていきます）

・fringe.html … 色ずれ（画面のふちに補色の縁取りが出ます）

・flare.html … レンズのハレーション（画面の外の光源から筋とゴーストが伸びます）

・fibre.html … 紙の繊維（和紙のような繊維とむら。上を光が通ります）

・flicker.html … わずかな明滅（映写機のように明るさがゆらぎます）

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

◆ 置きかた（30秒）

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

1. OBSの「ソース」→「＋」→「ブラウザ」

2. 「ローカルファイル」にチェックを入れ、使いたい .html を選ぶ

3. 幅・高さは配信画面と同じ大きさ（例: 1920 x 1080）

4. ソース一覧の いちばん上（＝いちばん手前） に置く

これで、下にあるゲーム画面・カメラ・他の素材の上に薄くかぶさります。2つ以上を同時に重ねることもできます（それぞれ別のブラウザソースとして置いてください）。

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

◆ 濃さの決めかた

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

⚙の「濃さ」が 0〜100 で入っています。

・まず初期値のまま置いて、配信画面を見ながら少しずつ上げるのがおすすめです

・0 にすると1画素も塗りません。 下の画面が完全にそのまま出ます

・暗いゲーム画面では効果が見えにくく、明るい画面では強く出ます

・迷ったら「言われないと気づかないくらい」が目安です

下に何も無いと濃さを決めにくいので、確認用の「見本の下地」を3つ同梱しています（ゲーム画面ふう／カラーバー／風景ふう）。⚙から選べます。配信に出すときは「出さない」に戻してください。

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

◆ 設定ボタン（⚙）

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

濃さも、速さも、粒の細かさも、色も、URLを書き換えずに設定できます。

1. ソース一覧のこのソースを右クリック →「対話」を選ぶ

2. 画面にマウスを乗せると、右上に ⚙ が出ます（出ないときは S キー）

3. 変更して「保存して閉じる」

・普段 ⚙ は見えないので、配信画面には映りません

・設定は保存され、OBSを再起動しても残ります。「設定を初期化」で購入時の状態に戻せます

・?key=a ?key=b を付けると、同じデザインでもシーンごとに別の濃さにできます

※ 設定の保存先はブラウザごとに別々です。Chromeで開いて設定してもOBS側には反映されません。OBSで使うぶんは、必ずOBSの「対話」画面の中で設定してください。

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

◆ 12デザインすべてに共通の設定

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

・?amount=45 … 濃さ（0〜100）。0 で完全に透明。初期値はデザインごとに 22〜40

・?speed=0.5 … 動きの速さ（0〜3。初期1）。0 にすると止まります

・?grain=1.6 … 粒の細かさ（0.3〜3。初期1）。大きいほど粗くなります

・?color=ff9a3c … 色（#は不要）

・?demo=scene … 見本の下地（off＝初期 / scene / bars / photo）

・?lang=en … 英語表示 ／ ?key=a … 設定の保存先を分ける

・?mode=stream … ⚙を完全に出さない

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

◆ 使いかたの例

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

・ゲーム画面の上に「フィルムの粒子」を薄く重ねて、映像ののっぺり感を消す

・カメラの上に「四隅が沈む」を重ねて、視線を中央に集める

・レトロゲームの配信に「走査線」と「テープのゆらぎ」を重ねる

・雑談枠に「光漏れ」や「舞う埃」を薄く重ねて、画面の空気を変える

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

◆ ご注意

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

・下の映像そのものは加工しません。上から「足す」方式です。そのため、下の映像をぼかす・下の映像の色をずらす、といったことはできません（すりガラスは膜を、色ずれはふちの縁取りを、上に描いています）

・効果音はありません（表示のみです）

・視聴者コメントの集計や、外部アプリ・APIとの連携機能はありません

・OBSのブラウザソースは初期状態で背景が透過します。設定で背景を黒く塗っている場合は下が見えません

・濃さを上げすぎると下が見えなくなります。薄い側から合わせてください

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

◆ 動作環境

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

・Chrome / Edge で動作確認済み。OBS Studio 28以降のブラウザソース（Chromium）や、Streamlabs など、ブラウザソースがある配信ソフトでも同じように使えます

・ネット接続は不要です。外部へは一切通信しません（Webフォントも広告も入っていません）

・絵は「その時刻の絵」を毎回計算しているだけで、過去のコマを溜め込みません。長時間つけっぱなしにしてもメモリが増えていきません

・同梱物: HTML 12点＋説明書（日本語／English）＋利用規約