【OBS配信用】YouTube登録者数オーバーレイ 2種｜APIキー不要・カスタムCSSに貼るだけ｜インク飛沫デザイン オレンジ／ピンクの色違い｜ブラウザソース対応

YouTubeのチャンネル登録者数を配信画面に表示する、OBS用のオーバーレイです。OBSで「ブラウザソース」を1つ作り、その設定画面の「カスタムCSS」という欄に付属の文字を貼り付けるだけで表示できます。

　ブラウザソース … 配信ソフトの中でウェブページを開いて、配信画面に映す機能です。

　カスタムCSS 　 … 開いたページの見た目を変えるための、指示書きです。

インクが飛び散る派手なデザインを、オレンジとピンクの2色でお届けします。

2つは形も動きもまったく同じで、色だけが違う色違いです。

◆ いちばんの特徴 ── APIキーもチャンネルIDも要りません

※ ご自分のYouTube Studioの登録者数の画面を、OBSの中で開いて使う商品です。

　 OBSのブラウザソースはふだんのブラウザとは別扱いのため、

　 OBS側でGoogleにログインする操作が、初回に1回だけ必要です。

　 一度ログインすればOBSに保持されるので、次回以降は不要です。

画面に出る数字は、YouTubeが自分の画面に出しているものを、そのまま映しています。

数字を取りに行く仕組みを別に用意しないので、次のものが一切不要です。

・APIキー（数字を取り寄せるための、合言葉のような文字列）

・チャンネルID（UC で始まる、チャンネルごとの文字列）

・Google Cloud Console（Googleの管理画面）での取得手続き

・外部サービスへの登録やアカウント連携

◆ 中で起きていること

OBSのブラウザソースで、YouTube Studio（YouTubeの管理画面）のアナリティクス

（視聴データの画面）を開きます。そこには登録者数が大きく出ています。

貼ったCSSが、その画面のメニュー・グラフ・文字を丸ごと隠します。

そして残った数字だけに、インク飛沫の背景・金色の球を描いて、

配信に載せられる見た目にします。

数字を出しているのはYouTube自身です。本商品は、その見た目を変えるものです。

◆ 用意することは、2つだけ

1. OBSの「ソース」に「ブラウザ」を足して、幅を 400、高さを 150 にする

2. 同じ設定画面の「カスタムCSS」欄を空にして、orange.css の中身を全部貼る

OBSの「クロップ/パッド」フィルタで切り抜く作業は要りません。

ファイルの置き場所を決めたり、URLのうしろに設定を書き足したりする作業もありません。

ピンクに替えたいときは、同じ欄に pink.css の中身を貼り直すだけです。

◆ 特徴

・表示サイズは2種とも 400×150px、背景は透過です（下の映像が透けて見えます）

・数字の左に金色の球。2.5秒かけてゆっくり大きさが脈打ちます

・数字は白。後ろに影を入れてあるので、明るい画面の上でも読めます

・絵は図形（SVG）をCSSの中に直接埋め込んで作っています。画像ファイルは使いません

・文字はPCに元から入っている書体だけを使います。ネットから書体を読み込みません

・貼るのはCSSの中身だけなので、展開したフォルダはどこに置いても構いません

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

ご購入前にお読みください

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

この商品は、ふつうのオーバーレイとは仕組みが違います。

下の8点をご確認のうえ、ご検討ください。

■ 1. YouTube Studio にログインした状態で使うものです

　本商品は、YouTube Studio の画面そのものをOBSで開いて、その見た目を

　CSSで変えるものです。ログアウトされた状態では登録者数は表示されません。

　ご自分のチャンネルの数字を映すためのもので、他の方のチャンネルの数字は映せません。

■ 2. OBSのブラウザソースの中で、Googleへログインする操作が必要です

　OBSのブラウザソースは、ふだんお使いのブラウザとは別のものとして動きます。

　そのため、OBSの側であらためてログイン画面が出ることがあります。

　その場合は、ソースを右クリックして「操作」を選び、開いた小さな窓の中で

　ログインしてください。

　操作 … ブラウザソースの中をクリックしたり文字を打ったりできる小窓を開く機能です。

　　　　 OBSの版によっては「対話」「Interact」と表示されます。

■ 3. OBSの「カスタムCSS」欄に、文字を貼り付ける操作があります

　プログラムを書く必要はありませんが、CSSファイルをメモ帳で開いて全部コピーし、

　OBSの欄に貼り付ける、という作業は発生します。

　貼り付けが途中で切れると飾りが出ないので、必ず全部をコピーして貼ってください。

■ 4. YouTube側の画面の作りが変わると、表示が崩れる可能性があります

　本商品のCSSは、現在の YouTube Studio の画面の組み立てに合わせて作っています。

　YouTubeが画面を作り替えた場合、数字の位置がずれる・飾りが出ない・

　隠したはずの部分が見える、といったことが起こる可能性があります。

　これは本商品の側で防げるものではありません。あらかじめご承知おきください。

■ 5. インクと球の色は変更できません

　インク飛沫の背景と金色の球は、絵のデータを文字の並びに置き換えた形

　（data URI といいます）でCSSの中に埋め込んであります。色の番号がそのままの形で

　書かれていないため、メモ帳などで色だけを書き換えることはできません。

　色を変えたい場合は、同梱の2色からお選びください。

　数字の色は、CSSの中に書いてあるので書き換えられます。

■ 6. 進捗バー（目標人数までの進み具合を、棒の長さで表すもの）はありません

　出るのは、インク飛沫の背景・金色の球・登録者数の数字の3つだけです。

■ 7. ブラウザソースの設定画面を、配信に映さないでください

　URLにはあなたのチャンネルのIDが入っています。また「操作」の窓には

　ログイン情報が映り込みます。設定は配信を止めた状態で行ってください。

■ 8. 収録の2種は「色違い」です

　デザインの形や動きが2種類あるわけではありません。

　配信画面に合う方の色を選んで、1つを使う商品です。

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

収録内容（2種）

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

同じデザインの色違いが2つ入っています。

どちらも 400×150px・背景透過で、できることはまったく同じです。

■ Orange ── オレンジのインクが飛び散るタイプ

　・オレンジの大きなインクの塊に、飛び散った粒と深い緑のインクを重ねています

　・数字の左に金色の球が出ます

　・暖色の配信画面や、緑・青の背景に合わせやすい配色です

■ Pink ── ピンクのインクが飛び散るタイプ

　・上の Orange と、形も動きもまったく同じです。色だけが違います

　・主役のインクが濃いピンク（マゼンタ寄り）、重ねたインクが深い青緑になります

　・変わるのはインクの2色だけです。金色の球・数字は Orange と共通です

　・ピンク系・紫系の配信画面や、オレンジが浮いてしまう画面に向きます

■ 同梱ファイル

　　ink-splat-css/

　　　orange.css 　オレンジ版。カスタムCSS欄に貼る文字

　　　pink.css 　　ピンク版。作りは同じで、色だけ違います

　　　README.txt 　使い方（この説明文より詳しく書いています）

　　　LICENSE.txt　ご利用条件

※ CSSファイルは、中身をOBSの設定欄に「貼り付けて」使います。

　 ファイルそのものをOBSに読み込ませるわけではないので、

　 展開したフォルダはどこに置いていただいても構いません。

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

使い方

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

◆ 手順1　映すページのURLを用意する

1. ふだん使っているブラウザで YouTube Studio（studio.youtube.com）を開きます。

2. 左のメニューから「アナリティクス」を開きます。

3. 画面の中の「リアルタイム」の枠を開いて大きくします。

4. その中で「現在の数を表示」を選びます。大きな登録者数が真ん中に出れば、そのページです。

5. ブラウザのアドレス欄の文字を、途中で切らずに「全部」コピーします。

　※ このURLには、あなたのチャンネルのIDが入っています。

　　 人に見せない・配信に映さないようにしてください。

◆ 手順2　OBSにブラウザソースを作る

1. OBSを開き、使いたいシーンを選びます。

2. 「ソース」欄の下の「＋」を押し、「ブラウザ」を選びます。

3. 分かる名前を付けて「OK」を押します。

4. 出てきた設定画面で、次の3か所を設定します。

　　URL 　… 手順1でコピーしたURLを貼り付ける

　　幅 　　… 400

　　高さ 　… 150

5. 同じ画面の「表示されていないときにソースをシャットダウン」に

　 チェックが入っていたら、外してください。

◆ 手順3　カスタムCSSを貼る

1. 同じ設定画面を下へスクロールすると「カスタムCSS」という広い欄があります。

2. その欄をクリックして Ctrl+A（全部選ぶ）→ Delete で空っぽにします。

3. orange.css をメモ帳で開き、Ctrl+A → Ctrl+C で全部コピーします。

　 （上のほうにある日本語の説明文も含めて「全部」です）

4. OBSの「カスタムCSS」欄に Ctrl+V で貼り付け、「OK」を押します。

◆ 手順4　OBSの中でGoogleにログインする

登録者数が出ず、Googleのログイン画面が出ている場合は、

ソースを右クリックして「操作」（「対話」「Interact」と表示されることもあります）

を選び、開いた窓の中でログインしてください。

　★ この作業をしている画面は、配信に映さないでください。★

◆ うまく表示されないときは

・何も出ない／真っ黒のまま

　→ 設定画面の「現在のページのキャッシュを更新」を押して、読み直してください。

・数字は出るのに、背景の飛沫と金色の球だけ出ない

　→ カスタムCSSの貼り付けが途中で切れています。欄を空にして貼り直してください。

・文字がにじむ・ぼやける

　→ ブラウザソースを拡大していないか確かめてください。400×150 のままが最もきれいです。

詳しい手順は、同梱の README.txt に画面の順番どおり書いています。

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

変えられるところ・変えられないところ

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

◆ 変えられます

・数字の色

　　color: #FFFFFF; 　　　　　　　　　← 数字の色

◆ 変えられません

・インク飛沫の背景と、金色の球の色

　この2つは、絵のデータを文字の並びに置き換えた形（data URI）で

　CSSの中に埋め込んであります。色の番号がそのままの形では書かれていないため、

　メモ帳などで色だけを書き換えることはできません。

　同梱の orange.css と pink.css の2色からお選びください。

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

注意事項

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

・本商品はデジタルデータ（CSSファイル2つと手順書）です。動画・画像は含みません。

・収録の2種は、形も動きも同じ色違いです。デザインの形が2種類あるわけではありません。

・表示サイズは2種とも 400×150px、背景は透過です。

・APIキー・チャンネルID・外部サービスへの登録は必要ありません。

・OBSのブラウザソースの中で、YouTube Studio にログインした状態で使います。

・YouTube側の画面の作りが変わると、表示が崩れる可能性があります。

　これは本商品の側で防げるものではありません。

・進捗バー（目標人数までの進み具合を棒で表すもの）は付いていません。

・ブラウザソースの設定画面と「操作」の窓は、配信に映さないようご注意ください。

・書体ファイルの同梱や、ネットからの書体の読み込みはありません。

・OBS Studio のブラウザソースで使います。同じくブラウザソース機能と

　カスタムCSS欄を持つ Streamlabs Desktop でも手順は同じです。

・配信・アーカイブ・切り抜き・収益化での利用は、個人・法人を問わず可能です。

　クレジット表記は不要です。改変も自由です。

・ファイルそのものの再配布・転売・共有はできません。オーバーレイ部分を画像や動画として

　書き出し、素材として配布・販売することもできません。

・本商品のデザインはすべてオリジナルです。絵はCSSの中に直接書いた図形（SVG）で

　作っており、外部から持ってきた素材や書体ファイル、特定の企業・作品の素材・商標は

　一切使用していません。

・本商品は非公式のものです。YouTube・Google とは関係ありません。

・詳しいご利用条件は、同梱の LICENSE.txt に記載しています。