うごく!グラデーションカウンター【朝活配信などにどうぞ】
- Digital250 JPY


配信者向けのOBSで利用できるカウンターツールです。 ブラウザソースの「対話(操作)」でカウンターツールを操作することができます。
うごく!グラデーションカウンター
色を選ぶだけで自動生成されるグラデーションで、カウントを可愛く表示するカウンターツールです。 朝活の「おはようカウント」や「初見さんカウント」など、多種多様な場面でご利用いただけます。 任意ではありますが、利用した配信でクレジットを表記してくれると大変喜びます。 うごく!グラデーションカウンター https://tsuki-lab.booth.pm/items/7684868 ⬆️ クレジット表記例 ■ 動作推奨環境 OBS Studio バージョン:31.0.0 以上 ■ 動作保証環境 OBS Studio バージョン:29.1.3 以上
+ 主な機能 +
1. 手動カウント: クリック操作で自由にカウントを増減できます 2. グラデーションデザイン: カウント数・見出し・外枠の色を1色ずつ指定するだけで、自動的に美しいグラデーションを生成 3. アニメーション機能: グラデーションを動的に変化させるアニメーション機能、カウントアップ時に可愛いアニメーションを表示 4. 簡単設定: プリセットからワンクリックで色を適用可能 5. カスタマイズ可能: 見出し(カウント名)を自由に設定可能
+ 導入方法 +
1. ダウンロードしたファイルの中から `index.html` を探してください 2. OBSを開き、`index.html` をドラッグ&ドロップしてください 3. 自動的にブラウザソースが追加され、カウンターが表示されます 4. 必要に応じて「幅」と「高さ」を調整してください(推奨: 幅 600px、高さ 1080px) これでカウンターが表示されます。
+ 使い方 +
■ カウント操作 ・ 左クリック: カウント +1 ・ 右クリック: カウント -1 ※ ブラウザソースを「対話モード」で起動している必要があります。 配信中に好きなタイミングでカウントできます。 ■ グラデーションデザイン ・ カウント数、見出し、外枠の色をそれぞれ1色ずつカラーピッカーで指定 ・ 指定した1色から自動的に美しいグラデーションが生成されます ・ 色は自由に組み合わせ可能で、お好みのデザインを作成できます ■ 簡単設定(プリセット) ・ 「桜」「ラムネ」「みかん」「あじさい」のプリセットボタンから、ワンクリックで色を適用できます ・ プリセットを適用すると、カウント数・見出し・外枠の色が一括で設定されます ■ 見出し設定 ・ 見出し入力欄でカウント名を自由に設定できます ・ 例:「初見さん」「おはよう」「ありがとう」など ■ リセット機能 ・ リセットボタンでカウントを0に戻すことができます
+ カスタマイズ方法 +
■ カウンター表示のカスタマイズ(上級者向け) OBS のブラウザソースで「カスタム CSS」を設定することで、カウンターの見た目をさらに自由にカスタマイズできます。 ■ カスタム CSS の設定方法 1. OBS のブラウザソースを選択 2. プロパティを開く 3. 「カスタム CSS」欄に CSSコードを記述 ■ カスタマイズ例 /* カウント数の数字をカスタマイズ */ .counter-number { font-size: 120px; font-family: sans-serif; font-weight: 900; } /* 見出しをカスタマイズ */ .counter-title { font-size: 48px; font-weight: 800; } ■ カスタマイズ可能な要素とプロパティ < カウント数の数字 > ・ font-size:文字のサイズ(デフォルト: 144px) ・ font-family:フォントの種類(デフォルト: 'M PLUS Rounded 1c', sans-serif) ・ font-weight:文字の太さ(デフォルト: 900) < 見出し(カウント名) > ・ font-size:文字のサイズ(デフォルト: 40px) ・ font-family:フォントの種類(デフォルト: 'M PLUS Rounded 1c', sans-serif) ・ font-weight:文字の太さ(デフォルト: 800) ※ その他、通常の CSS プロパティが使用可能です
+ 利用規約とクレジット表記について +
■ 利用範囲とクレジット 個人、法人問わず商用利用可能 / アダルト利用可能 ■ 禁止事項 宗教的目的・活動・団体での使用 / 二次配布 / 自作発言 / データ及び改変版の販売
+ 連絡先 +
■ X(旧 Twitter) https://x.com/liscoresia ■ mail me@tsuki-lab.net
+ バージョン履歴 +
■ v1.0.0 | 2025/11/24 ・ グラデーションカウンター リリース ・ 手動カウント機能実装 ・ グラデーションデザイン機能実装(1色から自動生成) ・ アニメーション機能実装 ・ 簡単設定(プリセット)機能実装 ・ 見出し設定機能実装
制作: hanetsuki / tsuki-lab

