OBSの「ブラウザソース（ローカルファイル）」で読み込む、アニメーション付きの目標達成メーターです。 登録者数目標、支援・寄付目標、耐久配信の進捗、企画の達成率などを、配信画面の上に重ねて表示します。 `config.js` をテキストエディタで書き換えるだけで、目標名・現在値・目標値・接頭記号・バーの色・パネル色・横幅を変更できます。 ## 掲載画像について ギャラリーの4枚は、この商品のHTML/CSSをブラウザで実際に描画した画面をそのまま切り出したものです。イメージ画像ではありません。設定ファイルの値だけを変えて撮っています（登録者数 / ¥表記の支援目標 / 耐久配信 / 幅と色の変更）。 ## こんな方向け - 目標バーだけが欲しくて、フルセットの配信素材までは要らない方 - OBSでローカルHTMLを読み込める方 - 外部サービスへのログインやアカウント連携が要らない素材を使いたい方 - 耐久配信・企画配信の進捗を、画面上で見せたい方 ## 入っているもの（全5ファイル） - `overlay/index.html` — OBSに読み込む本体 - `overlay/styles.css` — 見た目、余白、パネル、アニメーションの設定 - `overlay/config.js` — 目標名・現在値・目標値・色・横幅の設定ファイル - `overlay/overlay.js` — 進捗率の計算とバー表示 - `README.md` — 導入手順 ## 変更できる項目 目標タイトル / 現在の数値 / 目標数値 / ¥などの接頭表示 / ステータス文言 / 進捗バーのグラデーション色（開始色・終了色） / パネル背景色 / ぼかしの強さ / ウィジェットの横幅 ## 使い方 1. ZIPを任意の場所に解凍します 2. OBSで「ソース」→「ブラウザ」を追加します 3. 「ローカルファイル」にチェックを入れ、`overlay/index.html` を選びます 4. 幅 `1920`、高さ `1080` から始め、配信レイアウトに合わせてOBS側で拡大・縮小します 5. 表示内容を変えるときは `overlay/config.js` を編集し、ブラウザソースを更新します 読み込み後、バーは0%から設定値まで約1.5秒かけて伸びます。 ## 仕様（購入前にご確認ください） - **数値は自動取得しません。** 登録者数・寄付額・視聴者数を配信サイトから読み取る機能は含みません。配信前に `config.js` の値をご自身で設定してください - 外部API通信、トラッキング、ログイン、アカウント連携、認証情報の入力、サーバーへの送信は一切行いません。すべてローカルファイルとして動作します - Streamlabs / StreamElements / YouTube / Twitch との公式連携品ではありません - OBS本体の設定代行、個別のデザイン調整、サムネイル画像、BGM、効果音は含みません - OBS以外の配信ソフトでの動作は保証しません ## 利用条件 購入者本人の配信・動画・告知用画像にご利用いただけます。CSSの改変も可能です。素材ファイルそのものの再配布・再販売・自作発言は禁止です。 ## ご購入前に OBSのブラウザソース向けの静的なHTML/CSS/JS素材です。配信の売上、登録者増加、視聴数増加、ランキング上昇は保証しません。OBS、BOOTH、および各配信プラットフォームの公式素材ではありません。ギャラリー画像で見た目をご確認のうえご購入ください。