◼︎ 商品説明 配信者・動画制作者必見！ 配信開始前の待ち時間を視聴者にわかりやすく伝える、おしゃれなカウントダウンタイマーです。 「あと何分待てばいいの？」という視聴者の不安を解消し、待機時間自体をエンターテインメントに変えます。 視聴者集め、CM映像の放映、オープニング映像の再生など、配信開始前の待ち時間演出に最適です。 単一のHTMLファイルで完結する設計により、セットアップは驚くほど簡単。 OBSのブラウザソースに読み込むだけで、すぐに使い始められます。 外部ライブラリ不要の軽量設計により、配信のパフォーマンスへの影響も最小限に抑えています。 ◼︎ 主な機能 【9種類のデザインテーマ】 - Simple - 洗練されたモダンデザイン（Apple風） - Cute - 可愛いポップなデザイン（VTuber・雑談配信向け） - Cool - サイバーパンク風ネオンデザイン（ゲーム配信向け） - Bar - プログレスバー形式（ロード画面風） - Run - キャラクターが走るアニメーション（8bit風） - Ring - 円形ゲージ（スマートウォッチ風） - Wave - 水が溜まっていくアニメーション（チル配信向け） - Flip - パタパタ時計風（レトロ調） - Glitch - 暗号解読風グリッチエフェクト（テック系配信向け） 【カスタマイズ機能】 - カラー変更 - 7色のプリセット＋カスタムカラーピッカーで自由に設定 - タイプ別推奨色 - 各デザインに最適化されたデフォルトカラーを用意 - 2つのタイマーモード - Duration（時間指定）/ End Time（時刻指定） - 時間設定 - 時間・分・秒で自由に設定、1m/3m/5m/10m/1h/2hのプリセットも - 終了時刻モード - 「21:00に配信開始」のように時刻を指定してカウントダウン - 終了メッセージ - タイマー終了時に表示するテキストを自由に設定 - 透過終了 - 終了時にメッセージではなく完全透過にするオプション 【Runモード専用機能】 - カスタムキャラクター - 絵文字または画像URLでキャラクターを変更可能 - プリセット絵文字 - 🏃🚶🐕🚗🚀⭐からワンクリック選択 - 画像反転 - URLで読み込んだ画像を左右反転 - START/GOALマーカー - 位置合わせ用マーカーの表示/非表示切替 【配信対応機能】 - 背景透過対応 - OBSのブラウザソースでそのまま透過合成が可能 - 設定自動保存 - localStorageで設定を自動保存、次回起動時に復元 - Glassmorphism UI - 配信画面に馴染むおしゃれな設定パネル - OBS最適化 - ドロップダウン不使用、すべてボタン操作で完結 【安心設計】 - 完全オフライン動作 - 外部サーバー不要、配信中の通信不安定でも安心 - 軽量設計 - 外部ライブラリ不要、1ファイルで完結 - 視認性重視 - どんな背景でも読めるシャドウ・縁取り処理 ◼︎ こんな方におすすめ - ライブ配信の開始前演出を充実させたい方 - 視聴者を待たせる時間をおしゃれに演出したい方 - CM・スポンサー映像の放映時間を表示したい方 - オープニング映像までのカウントダウンを見せたい方 - 配信の世界観に合ったデザインを選びたい方 - VTuber、ゲーム実況、雑談配信など様々なジャンルの配信者 - イベントやプレゼンの開始時刻までのカウントダウンを表示したい方 ◼︎ 同梱内容 - timer.html（メインファイル - これ1つで完結） - README.txt（詳細な使用方法説明書） ◼︎ 動作環境 - 対応配信ソフト：OBS Studio、Streamlabs Desktop、XSplit等（ブラウザソースで使用） - 推奨解像度：幅800px以上 / 高さ600px以上 - フォント読み込み：インターネット接続が必要（Google Fonts使用） ◼︎ かんたん3ステップ導入 1. OBSのソースで「ブラウザ」を追加 2. 「ローカルファイル」にチェックを入れてtimer.htmlを選択 3. 歯車ボタンから好みのデザイン・時間・カラーを設定して完了！ ◼︎ 活用例 - 配信開始5分前「視聴者が集まるまでのカウントダウン」（Durationモード） - 21時配信開始「指定時刻までの自動カウントダウン」（End Timeモード） - CM映像中「スポンサー映像終了までの残り時間表示」 - オープニング前「本編開始までのワクワク演出」 - イベント配信「開演までのカウントダウン」 - コラボ配信「全員揃うまでの待機画面」 ◼︎ デザイン選びのヒント - VTuber配信 → Cute（ポップで可愛い） - ゲーム配信 → Cool（ネオン発光）またはGlitch（ハッカー風） - 雑談・チル配信 → Wave（水が溜まる）またはSimple（モダン） - レトロ風 → Flip（パタパタ時計） - 企業・フォーマル → Simple（洗練）またはRing（スマートウォッチ風） - 楽しい演出 → Run（キャラクターが走る） ◼︎ 注意事項 - 完全オフラインで動作（外部サーバー不要） - フォント読み込みにインターネット接続が必要です - OBSでは「ブラウザソース」＋「ローカルファイル」での使用を推奨 - 設定はブラウザのlocalStorageに保存されます ◼︎ サポート 使用方法や不具合についてのお問い合わせは、メッセージ機能よりご連絡ください。 ◼︎ よくある質問 Q: プログラミング知識は必要ですか？ A: いいえ、ダウンロードしてOBSに読み込むだけで使えます。設定はすべて画面上のボタンから行えます。 Q: 設定は保存されますか？ A: はい、ブラウザのlocalStorageに自動保存され、次回起動時に復元されます。 Q: 背景は透過されますか？ A: はい、OBSのブラウザソースでそのまま透過合成が可能です。 Q: デザインテーマは後から変更できますか？ A: はい、設定パネルからいつでも変更可能です。変更は即座に反映されます。 Q: カラーは自由に変えられますか？ A: はい、7色のプリセットに加え、カラーピッカーで任意の色を指定できます。各デザインには推奨色がありますが、自由にカスタマイズ可能です。 Q: Runモードで自分のキャラクター画像を使えますか？ A: はい、画像のURLを入力することでカスタムキャラクターを設定できます。画像の左右反転も可能です。 Q: タイマー終了時に何も表示したくない場合は？ A: 設定の「On Complete」で「Hide (Transparent)」を選択すると、終了時に完全透過になります。 Q: ボタンが見えにくいのですが？ A: ボタンは透明背景でも見えるよう設計していますが、見えにくい場合はOBSのブラウザソースのサイズを大きくしてみてください。 ◼︎ 更新履歴 【V1.1.0】 - Duration モードに「時間（hr）」入力を追加（最大23時間対応） - プリセットに 1h / 2h を追加 - 1時間以上は HH:MM:SS 形式で自動表示 - End Time モードを新規追加（指定時刻までカウントダウン） - 全9スタイルで HH:MM:SS 表示に対応 【V1.0.0】 - 初回リリース - 9種類のデザインテーマ - カスタムカラー対応 - Runモードカスタムキャラクター対応 - 終了時透過オプション - START/GOALマーカー表示切替 ============================================================ ENGLISH SUMMARY ============================================================ ◼︎ Product Description A stylish countdown timer for streamers and VTubers! Show viewers how long until your stream starts. Single HTML file - just load into OBS browser source and go. Transparent background supported. ◼︎ 9 Design Themes Simple (Modern) / Cute (VTuber) / Cool (Gaming/Neon) / Bar (Progress) / Run (8-bit Animation) / Ring (Smartwatch) / Wave (Chill) / Flip (Retro) / Glitch (Tech/Hacker) ◼︎ Features - 2 Timer Modes: Duration (set time) / End Time (set target clock time) - Hour support with auto HH:MM:SS display - Time presets (1m/3m/5m/10m/1h/2h) - Custom colors (7 presets + color picker) - Custom end message or transparent fade - Run mode: Custom character (emoji/image URL) - Auto-save settings, OBS optimized, offline operation ◼︎ Setup 1. Add Browser source in OBS 2. Select timer.html (Local file) 3. Configure via gear icon - Done!