# ネオン風配信時計 (Neon Clock) ライブ配信（OBS Studioなど）で使用することを想定した、ネオン看板風のデザインのデジタル時計です。 HTMLファイル1つで動作し、ブラウザソースとして追加するだけで背景が透過された状態で表示されます。 ## 利用規約 本ツールを使用した際に本規約に同意したとみなします。 - 個人・法人・商用問わず使用いただけますが、必ずクレジット表記をお願いいたします。 - 配信の概要欄や動画の説明文などに「ももちょこの素材部屋」と記載してください。 - YouTubeやTwitch等での動画・配信（収益化における制限もございません）など様々な用途でご自由に使用可能です。 - 二次配布や公序良俗に反する行為・違法行為に利用することはお控えください。 - 編集や加工は自由に行えますが加工の有無による著作権の譲渡や移動はありません。 - ※配布物の著作権は放棄しておりません。 - このツールを利用したことでトラブルが生じても一切の責任を負いません。 ## 特徴 - **ネオンデザイン**: サイバーパンクやレトロフューチャーな雰囲気に合う、発光表現を取り入れたデザイン。 - **アニメーション**: - GSAPライブラリを使用し、ネオン管特有の「チカチカ」とした明滅（フリッカー）や、光の強弱の揺らぎを再現しています。 - 「ON AIR」ラベルと時計の数字は、それぞれ異なるタイミングでランダムに明滅します。 - **透過対応**: 背景は透明に設定されており、配信画面にそのまま重ねて使用できます。 ## ファイル一覧 - `neon_clock.html`: 時計本体（HTML, CSS, JavaScriptが含まれています） - `README.md`: 説明書 ## 使い方 ### 1. 動作確認 `neon_clock.html` をGoogle ChromeなどのWebブラウザで直接開いて、時計が表示されるか確認してください。 ### 2. OBS Studioへの追加 1. OBSの「ソース」パネルで「+」をクリックし、「ブラウザ」を選択します。 2. 新規作成で名前（例: ネオン時計）を付けて「OK」をクリックします。 3. プロパティ画面で設定を行います： - **ローカルファイル**: チェックを入れます。 - **参照**: ダウンロードした `neon_clock.html` を選択します。 - **幅**: `800` (時計のコンテナ幅に合わせて調整してください) - **高さ**: `400` - **カスタムCSS**: 空欄または初期状態のままでOKです。 4. 「OK」をクリックして画面に追加します。 5. 画面上の好きな位置に配置・リサイズしてください。 ### トラブルシューティング もし背景が白っぽくなる、色がくすむ、透過が綺麗に行われない場合は、OBS上で追加したソースを右クリックし、「ブレンド方法 (Blending Method)」から「SRGBオフ (SRGB Off)」を選択してみてください。 ## カスタマイズ `neon_clock.html` をテキストエディタ（メモ帳やVS Codeなど）で開くことで、色などを変更できます。 ### 色の変更 `<style>` タグ内の `:root` セクションを探し、カラーコードを変更してください。 ```css :root { --neon-blue: #0ff; /* 時計の数字と枠の色 */ --neon-pink: #f0f; /* ON AIRラベルの色 */ /* ... */ } ``` ## 使用ライブラリ / フォント 本ツールは以下の外部リソースをCDN経由で使用しています。インターネット接続が必要です。 - **GSAP (GreenSock Animation Platform)**: アニメーション制御 - **Google Fonts**: - Orbitron (時計数字) ## お問い合わせ ご不明な点などがありましたら、XのDMやホームページからお問い合わせください。 また、表示や配色の変更など軽微なものであれば対応致しますので、お気軽にご相談ください。 - **X**: https://x.com/momochoco_wld - **ももちょこの素材部屋（ホームページ）**: https://momochoco.net --- Copyright (c) 2026 momochoco