OBS 目標達成メーター ウィジェット｜登録者・支援・耐久配信の進捗バー｜HTML素材・色/幅を設定ファイルで変更・外部通信なし・商用可

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、および各配信プラットフォームの公式素材ではありません。ギャラリー画像で見た目をご確認のうえご購入ください。