kamitool > 読みもの > 配信画面の背景が透明になるしくみと、見え方の確かめ方
配信画面の背景が透明になるしくみと、見え方の確かめ方
このサイトのツールを、OBSで使うと、背景が透明になって、ゲーム画面の上に、文字や数字だけが重なります。でも、ふだんのブラウザで開くと、背景が、白や市松模様に見えます。この違いが、どこから来るのかを、順番に説明します。
透明とは、どういうことか
画像や映像には、色のほかに、「どれくらい透けているか」を表す情報を、持てるものがあります。この透け具合の値を、アルファと呼びます。アルファが0なら、完全に透明で、後ろの映像が、そのまま見えます。1なら、完全に不透明です。ページの背景を、アルファ0にした状態が、「背景が透明」です。
Webページの背景色には、「transparent」という指定があります。このサイトのツールは、多くが、ページの背景に、この指定を使っています。そのため、ページの中に、文字や数字だけがあり、そのほかの部分は、何も塗られていない状態です。
OBSでは、透明のまま映る
OBSのブラウザソースは、Webページを映像にするときに、アルファの情報を、そのまま残して扱います。背景が透明のページは、透明のまま、配信の画面に載ります。その下にある、ゲームの映像が、透けて見えます。
ブラウザソースの設定には、「カスタムCSS」の欄があります。初めに入っている内容は、背景を透明にして、余白をなくす、という指定です。そのため、ツールが、背景に何も指定していなくても、背景は透明になります。このサイトのツールは、さらに、自分でも背景を透明にしているので、カスタムCSSを触る必要は、ありません。
ふだんのブラウザでは、なぜ白や模様に見えるのか
ふだんのブラウザは、ページの後ろに、何も置いていません。ページの背景が透明でも、その後ろには、ブラウザ自身の、白い下地が、見えます。そのため、背景が透明のツールを、そのまま開くと、白い背景の上に、白い文字が、見えなくなる場合があります。
このサイトのツールは、この問題を避けるために、設定パネルを出したときだけ、背景を、暗い市松模様に変えています。設定パネルは、URLの末尾に「#edit」を付けると出ます。市松模様は、「この部分は、透明になっている」ことを示す、画像編集ソフトなどでも使われる、お約束の模様です。OBSの中では、この市松模様は、出ません。
| 開いている場所 | 背景の見え方 |
|---|---|
| OBSのブラウザソース | 透明（後ろのゲーム映像が見える） |
| ふだんのブラウザ（URLの末尾に何も付けない） | 白い下地が見える |
| ふだんのブラウザ（URLの末尾に#edit） | 暗い市松模様と、設定パネル |
透明になっているかを、確かめる方法
ふだんのブラウザでは、透明の確認が、むずかしいので、OBSの画面で確かめるのが、確実です。確かめるときは、次のようにします。
- ゲーム画面や、色のついた映像を、キャンバスに映しておく
- そのすぐ上に、ツールのブラウザソースを置く
- ツールの文字や数字の、まわりの映像が、見えているかを確かめる
文字のまわりが、黒や白で塗りつぶされている場合は、ページの背景が、透明になっていません。ツールのURLが正しいか、別のページを読み込んでいないかを、確認してください。
半透明の部分もある
ツールによっては、背景の一部を、わざと半透明にしています。たとえば、告知ティッカーの帯は、少し暗い半透明で、文字が読みやすくなっています。プレイ中バナーも、暗い色を、約88%の濃さで敷いています。完全に透明にするより、文字が、読みやすくなるためです。半透明の濃さは、有料版では、変えられるツールがあります。
文字の読みやすさと、背景の関係
背景が透明だと、後ろの映像によって、文字の読みやすさが、大きく変わります。ゲーム画面が明るい場面では、白い文字が、読みにくくなることがあります。そのため、文字に縁取りや影を付ける機能が、有料版にあります。無料版で読みにくいときは、次の方法が使えます。
- 文字の色を、後ろの映像と、はっきり違う色に変える
- OBSの側で、ツールの後ろに、半透明の色つきの四角（「カラーソース」）を置く
- ツールを、画面の暗い部分に、置く
OBSの「カラーソース」は、ソースの＋から選べる、単色の四角です。不透明度を下げて、ツールの後ろに置くと、帯のように、使えます。
まとめ
背景の透明は、ページの背景を「transparent」にして、OBSが、アルファの情報を、そのまま残すことで、成り立っています。ふだんのブラウザで、白や市松模様に見えるのは、ブラウザ側の下地が、見えているからで、不具合では、ありません。確かめるときは、OBSの画面で、ゲーム映像の上に重ねて、見るのが、確実です。
透明に関する、よくある勘違い
「背景が透明」と「何も映っていない」は、違います。透明の部分は、後ろの映像が、そのまま見えます。ゲーム画面が、映っていない状態（真っ黒）で、確かめると、透明かどうかが、分かりません。確かめるときは、色のついた映像を、後ろに置いてください。
もう1つの勘違いは、「透明なら、後ろの映像が、見えるはず」という考えです。ツールの文字の周りに、半透明の帯や、影が付いていると、後ろの映像が、少し暗く見えます。これは、不具合ではありません。文字を読みやすくするための、工夫です。ツールによっては、この帯や影を、有料版で、薄くしたり、消したりできます。
背景が透明にならず、黒く映ります。
ブラウザソースの、カスタムCSSの欄が、書き換えられていないかを、確かめてください。背景を、塗りつぶす指定が、入っていると、透明になりません。初めの内容に、戻すと、直ります。
ふだんのブラウザで、背景が白いのは、不具合ですか？
不具合ではありません。ふだんのブラウザは、ページの後ろに、白い下地が見えます。OBSの中では、透明のまま映ります。
設定パネルの、市松模様は、配信に映りますか？
URLの末尾に「#edit」が付いたときだけ、出ます。「#edit」が付いたURLを、OBSに貼ると、映り込みます。付いていないURLなら、映りません。
透明にしたまま、文字を読みやすくするには？
文字の色を、後ろの映像と、はっきり違う色にします。有料版では、縁取りや影を、付けられるツールがあります。OBSの側で、ツールの後ろに、半透明の色つきの四角を、置く方法も、あります。
背景を、わざと色つきにできますか？
ツールによります。順番待ちボードは、背景を、色つきか透過かで、選べます。そのほかの、画面に重ねる型のツールは、無料版では、透明に決まっています。
半透明の濃さの、考え方
半透明の濃さは、「不透明度」で、表されます。100%なら完全に不透明、0%なら完全に透明です。告知ティッカーの帯は、約72%、プレイ中バナーの背景は、約88%に、決まっています。数字が大きいほど、後ろの映像が、見えにくくなり、文字は、読みやすくなります。数字が小さいほど、後ろの映像が見え、画面が、すっきりします。
どちらが、よいかは、ゲームの映像で、変わります。明るい映像が、多いゲームでは、帯が濃いほうが、読みやすくなります。暗い映像が、多いゲームでは、帯が薄くても、文字が、読めます。無料版では、この濃さを、変えられないツールが、多いので、読みにくいときは、OBSの側で、半透明の四角を、重ねて、調整する方法が、あります。
透明の部分の、見え方は、モニターや、配信の画質の設定でも、少し変わります。配信のサービスで、映像が、圧縮されると、細い文字や、薄い色の部分が、つぶれることが、あります。細い文字は、避けて、太めのフォントや、大きめの文字を、選ぶと、安心です。
文字の色を、選ぶときの目安
透明の背景の上に置く文字は、後ろの映像の、明るさに、左右されます。暗い映像の上では、白や明るい色が、読みやすくなります。明るい映像の上では、暗い色が、向いています。ゲームによって、場面ごとに、明るさが変わる場合は、白と、暗い縁取りの組み合わせが、安定します。縁取りは、無料版では、付けられないツールが、多いので、OBSの側で、半透明の四角を、重ねる工夫が、使えます。配信を始める前に、いちばん明るい場面と、いちばん暗い場面で、文字が、読めるかを、確かめておくと、安心です。