回路基板とメカパネルのかっこいい動く配信画面セット【待機画面・エンディング・雑談・ゲーム配信／パーツ・チャットCSS付き／Vtuber素材】

ざらつく黒い地に、回路基板の細い線と、角を斜めに落としたメカパネルを重ねた、硬い機械の配信画面セットです。地と板は白黒でそろえ、差し色は明るい黄緑ひとつだけ。回路を光が流れ、計器の針がふれ、丸穴のバーの上を光が走ります。動く背景・待機画面・エンディング・雑談画面・ゲーム配信画面を、横の画面（パソコン向け）で入れています。それぞれ元の画面と同じ位置で切った透過 PNG のパーツ単体と、YouTube ライブのコメントを同じ絵柄にそろえるチャットCSS も付いています。動くものには、同じ絵の静止（PNG）も入れています（軽い方をお選びいただけます）。

■ 入っているもの（全 23 点）

［横 1920x1080］の1色です（パーツ単体も同じ大きさで、パーツごとに元の画面の位置で切ってあります）。縦（スマホ向け）の画面と、色ちがいは入っていません。

・画面 5つ（動く背景・待機画面・エンディング・雑談画面・ゲーム配信画面。画面いっぱいの絵）＝動く webm 5点＋同じ絵の静止 PNG 5点で 10点

・パーツ単体 11点（パーツごとに切り出した元の画面が決まっています）

　・雑談画面の位置 9点（コメント枠・コメント枠の見出し・見出しの板・見出しの副板・丸穴のバー・計器（大）・計器（小）・お題の帯・メカの飾り）

　・ゲーム配信画面の位置 2点（名前の札・ゲーム枠のふち）

・チャットCSS 2点（チャットCSS・チャットCSSの見え方を確かめるページ）

動く webm が 5 点、静止 PNG が 16 点です。

動くのは 動く背景・待機画面・エンディング・雑談画面・ゲーム配信画面 です。パーツ単体は静止の PNG だけです。

動くものには同じ絵の静止 PNG（動画の最初のコマ）も付いていますので、軽い方をお選びいただけます。

■ 動き

15秒でぴったり1周します。継ぎ目は見えません。

・回路基板の上を、明るい黄緑の光が流れます（15秒に3回）（画面5つとも）

・計器の針が、左右にゆっくりふれます（画面5つとも）

・丸穴のバーの上を、光が横に走ります（画面5つとも）

・中ほどの大きな輪が、15秒でちょうど1周まわります（動く背景）

・コメント枠の左の縦線を、光が下から上へ上ります（雑談画面・ゲーム配信画面）

・大きな字が、いちど消えてから、同じ場所に1字ずつばらばらに現れます（待機画面・エンディング）

・板の中の細い線が、左から右へ伸びて戻ります（待機画面）

■ 使い方

1. OBS で［ソース］→［メディア］として webm を読み込み、［ループ (繰り返し)］にチェックを入れてください。15秒でぴったり1周します。

2. 静止の PNG は［画像］として読み込めます。動くものに付いている PNG は、その動画の最初のコマと同じ絵です。軽い方をお選びください。

3. ゲーム配信画面のゲーム画面を置く窓（左から56px・上から210px、横1340px・縦754px）は、暗い灰色で塗ってあります。ゲーム画面は、この画面より上のソースとして重ねてください。

4. 雑談画面は、中ほど（左から620px・上から330px、横556px・縦570px）に板も飾りも置いていないので、立ち絵やカメラをそこへ置けます。

5. パーツ単体は 1920x1080 の透過 PNG で、パーツごとに切り出した元の画面が決まっています。雑談画面の位置が 9点（コメント枠・コメント枠の見出し・見出しの板・見出しの副板・丸穴のバー・計器（大）・計器（小）・お題の帯・メカの飾り）。ゲーム配信画面の位置が 2点（名前の札・ゲーム枠のふち）。その元の画面に重ねるときは、左上をそろえて置けば同じところに出ます。別の画面に重ねるときや、好きな所へ置きたいときは、位置をご自分で決めてください。

6. チャットCSS（chat/chat.css）は、YouTube ライブのコメント欄に使います。OBS で［ソース］→［ブラウザ］を足し、［URL］に https://www.youtube.com/live_chat?v=（配信のID）&is_popout=1 を入れてください（配信のID は、配信ページの URL の「v=」のうしろの 11 文字です）。そのソースのプロパティの［カスタム CSS］の中身をいったん全部消してから、chat.css の全文を貼ります。幅 400 ／ 高さ 600 くらいから始めて、配信画面に合わせて変えてください。貼る前の見え方は、chat/chat_preview.html をブラウザで開いて確かめられます。

■ 気をつけていただきたいこと

・次の文字が絵に焼いてあり、消せません。

・［動く背景］「SYS-04A」／「0x1F2E」

・［待機画面］「STANDBY」／「まもなく開始します」／「STATUS」／「0x1F2E」／「SYS-04A」／「SIG」／「0.42」／「DECK / 16:9 / 30F」

・［エンディング］「OFF AIR」／「ご視聴ありがとうございました」／「CLOSED」／「REF.882」／「0x1F2E」／「SIGNAL」／「CH.01」

・［雑談画面］「TALK」／「雑談」／「SYS-04A」／「0x1F2E」／「REF.882」／「DECK / 16:9 / 30F」／「COMMENT」／「コメント」／「TOPIC」／「お題」／「CH.01」／「SIG」／「0.42」

・［ゲーム配信画面］「GAME」／「ゲーム中」／「COMMENT」／「NAME」／「SYS-04A」／「REF.882」／「DECK / 16:9 / 30F」

・［コメント枠の見出し］「COMMENT」／「コメント」

・［計器（大）］「REF.882」

・［計器（小）］「SIG」／「0.42」

・［名前の札］「NAME」

・コメント枠・見出しの板・見出しの副板・丸穴のバー・お題の帯・ゲーム枠のふち・メカの飾りには文字は入っていません。

・動く背景・待機画面・エンディング・雑談画面・ゲーム配信画面は、画面いっぱいの絵です（透けません）。

・ゲーム配信画面のゲーム画面を置く窓の中は、透明ではなく暗い灰色で塗ってあります。ゲーム映像は、この画面の上に重ねてお使いください。

・雑談画面の中ほど（左から620px・上から330px、横556px・縦570px）には、板も飾りも置いていません。立ち絵やカメラはそこへ置けます。

・パーツ単体は静止の透過 PNG です（動きません）。大きさは 1920x1080 です。

・パーツ単体は、パーツごとに切り出した元の画面が決まっています。雑談画面の位置が 9点（コメント枠・コメント枠の見出し・見出しの板・見出しの副板・丸穴のバー・計器（大）・計器（小）・お題の帯・メカの飾り）。ゲーム配信画面の位置が 2点（名前の札・ゲーム枠のふち）。

・チャットCSS は YouTube ライブのコメント欄用です。ポップアウト表示のコメント欄に当てて、パソコンのブラウザと OBS Studio 32.1.2（Windows 11）で確かめました。Twitch には対応していません。

・チャットCSS で形を変えるのは、ふつうのコメントだけです。スーパーチャット・メンバー加入・スタンプの購入などの特別なコメントは形を変えていません。ただし、上を流れるスーパーチャットの帯と固定の案内は、配信画面に重ねるために消しています。

・チャットCSS では、名前の色が、配信者ご本人は明るい黄緑、モデレーターは白、メンバーとほかの方は明るい灰色で出ます。

・チャットCSS の書体は Google Fonts から読み込みます（書体のファイルは入っていません）。読み込めない環境では、お使いのパソコンにある書体で表示されます。

・差し色は1色だけです（明るい黄緑）。色ちがいはありません。

・縦（スマホ向け）の画面と、色ちがいは入っていません。

・書体は同梱していません（画像には焼いてあります）。

■ ご利用の範囲

同梱の LICENSE.txt をお読みください。

配信・動画・SNS でお使いいただけます（商用も可）。

素材そのものの再配布・再販売はご遠慮ください。

■ 作り方

背景・画面・パーツの絵は、すべてプログラムで1本ずつ線を引いて描いています。

AI が描いた画像は1枚も入っていません。

チャットCSS も、同じプログラムが持っている文字をそのまま書き出したものです。