【OBS用/HTML】動く！ふんわり可愛い配信ゴールバー/カウンター（自作イラスト対応）

リスナーとの一体感を高め、目標達成の瞬間を最高に可愛く演出！✨

VTuber・配信者向けの オリジナルイラスト対応・ふんわり動く目標達成バー（ゴールカウンター / HTMLソース型配信素材） です🎀

「チャンネル登録者数〇〇人を目指す！」「イベント目標〇〇ポイント！」といった耐久配信や企画枠に大活躍。

斜めストライプが優しく流れるキャンディ風デザインに、キラキラ光るシャイニングエフェクトを搭載。専用の「設定ジェネレーター」が内蔵されているため、HTMLやCSSの知識がなくても、ブラウザやOBS上でポチポチと設定するだけで、あなただけのオリジナル目標バーが一瞬で完成します。

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

✨ 主な機能・おすすめポイント ✨

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

🐰 自分のイラストや立ち絵がバーの先端で動く！

プリセットのかわいいアイコン（🍬⭐🐰💖🐾）はもちろん、ご自身のオリジナルイラスト（去背画像URL）をプログレスバーの先端に設定可能！数値の進捗に合わせて、自分のキャラクターがスルスルと滑らかに追いかけるように動きます。

🧱 自由な表示切り替えで画面すっきり

「カウンター（数値）のON/OFF」や「背景（外枠）のON/OFF」がワンクリックで切り替え可能。背景枠を消せば、可愛いバーとキャラクターだけが画面にフワフワ浮いているような、シンプルで洗練されたオーバーレイ配置も可能です。

🎨 直感的なカラーピッカー＆自動保存

バーの色、背景、文字色などを自由に変更可能。色に迷った時の「デフォルトに戻す」ボタンも付いています。設定内容は自動記憶（ローカル保存）されるため、毎回の再設定の手間もありません。

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

📦 商品内容

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

・counter.html（ウィジェット本体 兼 設定ジェネレーターパネル）

・利用規約テキスト

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

🧷 導入方法・OS別の操作手順

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

🛠️ 【事前準備】ファイルのURLパスをコピーする

ダウンロードした counter.html をお使いのブラウザ（Chromeなど）にドラッグ＆ドロップして開きます。画面一番上のアドレスバーにあるURL（ file:///〜 で始まる長い文字列）を丸ごとコピーしておきます。

🖥️ STEP 1：OBSに「設定パネル（操作用裏画面）」を埋め込む

1. OBSの上部メニューから「表示」＞「ドック」＞「カスタムブラウザドック」をクリックします。

2. 任意のドック名（例：目標設定）を入力します。

3. URL欄に、先ほどコピーしたURLを貼り付け、一番後ろに半角で ?dock=1 と付け足して「適用」を押します。

➔ （URL例： file:///C:/.../counter.html?dock=1 ）

💡 現れたパネルは、OBSの左右の枠にドラッグ＆ドロップすると、ピタッと埋め込んで常設化できます！

🍎 【Macユーザーの方へ】ドックで文字入力ができない場合の裏ワザ

Mac版OBSの仕様により、ドック上で日本語の直接入力やコピペができない制限がございます。その場合は、ドック用URLの末尾に &title=表示したい文字 を手動で追記することでタイトルを設定可能です！

➔ （URL例： .../counter.html?dock=1&title=耐久配信 ）

※目標数値の変更は、入力欄の右側にある「上下の矢印（▲▼）」をマウスでカチカチとクリックすることで正常にコントロール可能です✨

🎥 STEP 2：OBSに「配信画面（バー本体）」を表示する

1. OBSの「ソース」の[＋]ボタンから「ブラウザ」を追加します。

※【重要】プロパティ内の「ローカルファイル」のチェックは必ず【外した状態（OFF）】にしてください。

2. URL欄に、先ほどコピーしたURLを貼り付け、一番後ろに半角で ?obs=1 と付け足します。

➔ （URL例： file:///C:/.../counter.html?obs=1 ）

✨ STEP 3：完成！

あとはOBSに埋め込んだ「設定パネル」から数字や色を変えるだけ！配信画面の目標バーが、リアルタイムに連動してスルッと可愛く動きます🍬✨

⚠️ イラストURL設定時のご注意：

画像のURLは、必ず最後が .png や .jpg などの拡張子で終わる「直接リンク（ダイレクトリンク）」を入力してください。WebページのURL（html）では表示されません。

（※Discordの個人サーバー等に画像をアップロードし、右クリックして「リンクをコピー」する方法が一番簡単でおすすめです！）

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

📜 利用規約

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

【許可していること】

✅ 商用利用（収益化済みのYouTube、Twitchでの耐久配信・目標達成企画・動画制作など）

✅ 配信画面やお部屋素材に合わせたサイズ、配置、カラーの自由な変更

✅ ご自身が著作権を持つ画像、または利用規約で許可されたフリー素材（イラストURL機能）の使用

【禁止事項】

❌ 素材データそのもの、または改造済データの再配布・転売・譲渡・自作発言

❌ デザインの原型を留めない過度な改変、商標登録、公序良俗に反する目的での利用

※著作権は放棄しておりません。

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

🎨 セミオーダー（カラー・デザインカスタム）

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

販売中の素材を、活動スタイルやイメージカラーに合わせてカスタマイズ可能です✨

💰 基本料金：【 BOOTH商品代金 】＋【 カスタム料金 】

・① カラー変更：＋500円〜

・② ロゴ・お名前・イラスト挿入：＋1,000円

・③ レイアウト微調整・パーツ分け：＋1,500円〜

※詳細やご依頼の流れは、こちらの【カスタム専用ページ】を確認してください。

🔗 https://sakuramii.booth.pm/items/8483503

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

🌐 配信活動に役立つ無料ツール公開中！

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

ブラウザ上でカンタンに高画質アセットが作れる、実用的な無料ジェネレーターツールを多数公開しています。日々の活動や枠作りにぜひ役立ててください。

🎨 ゆめかわ カスタム時計ジェネレーター

📅 週間配信スケジュールメーカー

🖼️ 配信サムネイル背景ジェネレーター

🔗 https://sakuramisozaiya.vercel.app/

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

💌 お問い合わせ

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

ご不明な点や動作に関するご相談、カスタムのご依頼は、BOOTHのメッセージ、または X（旧Twitter）のDM（@skrm_sozaiya）よりお気軽にご連絡ください🧸💬