【OBS/HTML】iOS風天気時計ウィジェット | 時間連動カラー変更・雨エフェクト搭載【配信素材】

実際の時間帯に合わせて背景色が美しく移り変わり、雨を降らせるエフェクト搭載してます！のiOS風天気時計（HTMLソース型配信素材）です。

OBSのブラウザソースに読み込ませるだけで、配信画面にすりガラス風デジタル時計を設置できます。

日々の雑談配信、歌枠、朝活、作業配信など、あらゆる配信画面のレイアウトに美しく溶け込みます。

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

✨ 主な機能・ポイント ✨

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

①時間帯に合わせて切り替え機能

お使いのパソコンの現在時刻を自動で取得し、時間帯に合わせて背景のグラデーションカラーとアイコンが4段階に全自動で切り替わります。

・朝昼（6:00〜15:59）：爽やかなスカイブルー ✕ 太陽アイコン

・夕方（16:00〜18:59）：美しいサンセットオレンジ ✕ 夕日アイコン

・夜（19:00〜22:59）：深みのあるディープブルー ✕ 三日月アイコン

・深夜（23:00〜5:59）：落ち着いたミッドナイトグレー ✕ 星座アイコン

② 「雨モード」動態エフェクト

URLの末尾に指定のパラメータを加えるだけで、アイコンが雨雲に変化し、ウィジェット枠内にリアルタイムに降り注ぐ雨のパーティクルエフェクトが展開されます。その日の実際の天気や、配信の気分に合わせて簡単に切り替え可能です。

③ 表示のカスタマイズ（秒数非表示対応）

デフォルトの「時:分:秒」表示から、URLパラメータを使用することで簡単に「時:分」のシンプルな表示へと切り替えることができます。

④ 24時間自動リアルタイム同期 ＆ 超軽量設計

OBS内で常に正確な時間が維持され、動作も非常に軽量なためPCに負荷をかけません。

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

📦 商品内容

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

・ios_weather_clock.html

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

🧷 導入方法・設定手順

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

外部サーバーや面倒な外部登録は一切不要！ダウンロードしたファイルをOBSの「ブラウザソース」に読み込ませるだけの超簡単ステップです。

【設定手順：OBSの配信画面に追加する】

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

2. プロパティ画面が開いたら、「ローカルファイル」のチェックは必ず【外した状態（OFF）】にしてください。

3. 「URL」欄に、ダウンロードした【 ios_weather_clock.html 】のファイルパス（ file:///〜 ）を貼り付けます。

➔ 通常時（秒数表示・通常の天気）のURL末尾例：.../ios_weather_clock.html

💡 ※【URLパラメータによる表示カスタム（組み合わせ自由）】

・秒数を非表示（時:分のみ）にしたい場合：

URLの末尾に半角で【 ?sec=0 】と追記します。

・雨モードを起動したい場合：

URLの末尾に半角で【 ?rain=1 】と追記します。

・秒数非表示 ＆ 雨モードを同時に適用したい場合：

URLの末尾に半角で【 ?sec=0&rain=1 】と追記します。

（※特定の時間帯を固定してテストしたい場合は 【 ?hour=18 】 のように数値を指定して確認することも可能です）

5. 推奨サイズとして、幅：450 ／ 高さ：200 程度（お好みのサイズ）に設定し、OBS画面上の好きな位置に配置して「OK」を押します。

完成！

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

📜 利用規約

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

【許可していること】

✅ 商用利用（収益化済みのYouTube、Twitch、ツイキャス等の配信活動・動画制作）

✅ サムネイル、配信アーカイブ、切り抜き動画への映り込み

✅ 配信画面やオーバーレイに合わせたサイズ、配置の自由な変更・コードの微調整

【禁止事項】

❌ 素材データ（ソースコード）そのもの、または加工・改変済データの再配布・転売・譲渡・自作発言

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

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

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

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

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

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

基本料金システム：【 BOOTHの商品代金 】＋【 下記カスタム料金 】

① カラー変更＋¥500 〜

全体の配色をご指定 of カラーに変更します。

② ロゴ・お名前挿入 ＋¥1,000 〜

ロゴやお名前を素材内に配置します。

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

配置変更や、OBSで動かしやすいようにパーツ分解します。

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

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

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

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

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

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

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

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

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

🔗 https://sakuramisozaiya.vercel.app/

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

💌 お問い合わせ

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

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