【無料】きせかえ時計 Clock Studio - OBS用時計素材｜8デザイン・設定画面つき・背景透過
- ダウンロード商品¥ 0無料ダウンロードClockStudio_v1.0.0_Free.zip(3.43 MB)ClockStudio_v1.0.0_Free.zip
配信画面に、きせかえできる時計を。 「きせかえ時計 Clock Studio」は、OBS のブラウザソースで表示する配信用の時計素材です。 設定画面でデザインを選んで、秒・日付・ひとことなどを好みに調整したら、 できあがった URL を OBS に貼るだけ。背景は透明なので、ゲーム画面や雑談画面の上にそのまま重ねられます。 無料版では 8 種類のデザインが使えます（クレジット表記をお願いしています）。 ■ こんな方に ・配信画面に時計を置きたい。でも HTML や CSS はさわりたくない ・配信の雰囲気に合わせて、時計の見た目をかんたんに変えたい ・日付や「JST」「配信中」などのひとことも、時計といっしょに出したい ・OBS に入れる幅・高さを毎回調べるのが面倒 ■ 無料版で使えるデザイン（8 種類） ・プレーン … 白い文字に影。どんな画面にもなじむ基本形 ・ピル … 半透明の丸いプレートに乗せた時計 ・ネオン … 光る文字。ときどき “チカッ” と瞬きます ・7セグ … デジタル時計の 7 セグメント表示。消えている部分もうっすら見えます ・ニュース … 報道番組のテロップ風の帯 ・パステル … やさしいグラデーションのプレートに、小さな飾り ・和風 … 和紙の地に明朝体、朱の落款。日付は漢数字（十月三日 土曜） ・アナログ … 文字盤と針のアナログ時計（秒針つき） ■ 特徴 ・背景透過。OBS のブラウザソースに URL を貼るだけで使えます ・設定画面つき。1 つの画面で「デザインを選ぶ → 好みに調整 → URL をコピー」まで完結 ・カードにマウスを乗せると、プレビューで試し表示。◀ ▶ で順番に切り替えも ・OBS に入れる「幅 × 高さ」のおすすめ値を自動で表示（クリックでコピー） ・設定は自動で保存。OBS に貼った URL を読み込んで、あとから続きを直すこともできます ・長時間の配信でも重くならないよう、変わった数字だけを書き換える作りです ・設定画面は 日本語 / English / 繁體中文 に対応（右上で切り替え。初回はブラウザの言語に合わせます）。時計の曜日や午前/午後なども、選んだ言語で表示できます ■ 無料版で使えるもの / 有料版（¥500）で増えるもの 無料版 有料版 デザイン 8 種 100 種すべて 色 デザイン標準の色で固定 おすすめ配色（各デザイン 4〜5 個）＋ 3 か所まで自由に フォント デザイン標準で固定 19 種から選べる 文字のフチ なし（固定） 太さ・色を自由に 時刻の変わり方 なし（固定） ふわっと / スライド / ぽんっと 秒・日付・12 時間表示・ひとこと・大きさ・影・位置・タイムゾーン ◯ ◯ 設定画面 ◯ ◯ クレジット表記 必要 不要 無料版の設定画面でも、有料版の 92 デザインを鍵つきのサンプル画像で見ることができます。 「このデザインで使いたい」と思ったら、有料版へどうぞ → https://amemineamane.booth.pm/items/8958119 ■ 設定できる項目（無料版） ・秒の表示 / 日付の表示 / 12 時間表示（AM/PM または 午前/午後） ・日付の書式 … 10月3日(土) / 2026年10月3日(土) / 令和8年10月3日(土) / 2026/10/03 Sat / 2026.10.03 SAT / Sat, Oct 3 ・言語 … 設定画面と、時計に出る曜日・午前/午後などの言語（日本語 / English / 繁體中文） ・日付の位置 … 時計の上 / 下 / 左 / 右 ・ひとこと … 時計の下に好きな文字（30 文字まで。例: JST、配信中） ・大きさ … 30% 〜 400% ・ドロップシャドウ、コロンの点滅、時の先頭ゼロ（09:05 / 9:05） ・画面内の位置 … 横（左・中央・右）/ 縦（上・中央・下） ・タイムゾーン … 空欄でパソコンの時刻。指定すると他の地域の時刻も表示できます ※ アナログなど、デザインによっては使えない項目があります（設定画面で薄く表示されます） ■ 使い方 1. ZIP を解凍して、フォルダ内の settings.html をダブルクリック（ブラウザで設定画面が開きます） 2. 左でデザインを選び、右で秒・日付・ひとことなどを調整 3. 中央下の「URL をコピー」を押す 4. OBS でソースの「+」→「ブラウザ」を追加。「ローカルファイル」のチェックを外して、URL 欄に貼り付け 5. 幅・高さに、設定画面に出ている「幅 × 高さ」の数字を入れて OK ※ いちばん簡単に試すなら、OBS のブラウザソースで「ローカルファイル」にチェック → clock.html を選ぶだけでも 「プレーン」の時計が表示されます ■ 収録内容 ・clock.html … 時計本体（OBS のブラウザソースに登録するファイル） ・clock-data.js … デザインやフォントの定義 ・settings.html … 設定画面（プレビュー付き） ・thumbs/ … 設定画面のデザイン一覧用の画像 ・i18n/ … 言語の辞書（日本語 / 英語 / 繁体字。消さないでください） ・README.txt / README_en.txt / README_zh-TW.txt … 使い方・利用規約（日本語 / 英語 / 繁体字） ダウンロードするファイル: ClockStudio_v1.0.0_Free.zip ■ 動作環境 ・OBS Studio 30 以降を推奨 ・Windows / macOS ・設定画面は Chrome / Edge などのブラウザで開いてください ・フォントの読み込みにインターネット接続が必要です（つながっていなくても、代わりのフォントで時計は動きます） ■ 利用規約 ・個人 / 商用利用 OK ・配信、動画投稿、収益化 OK ・改変 OK（自分の配信で使うための改造は自由です） ・再配布、販売、改変版の配布は NG ・本素材の使用によって生じたいかなる損害についても、作者は責任を負いません 【！】無料版はクレジット表記をお願いします 以下のいずれかをお願いします： ① 配信・動画の概要欄にクレジットを記載 ▼コピペ用▼ ───────────── 時計素材: きせかえ時計 Clock Studio（雨峰あまね） BOOTH: https://amemineamane.booth.pm/ X: https://x.com/AmemineAmane ───────────── ② この商品の告知ポストをリポスト(RT) → https://x.com/AmemineAmane/status/2108214915333038515 ※クレジット不要・全100デザイン・色やフォントの変更は、有料版（¥500）で ■ 関連商品 ・きせかえ時計 Clock Studio 有料版（¥500・全100デザイン・クレジット不要）→ https://amemineamane.booth.pm/items/8958119 ・その他の配信素材 → https://amemineamane.booth.pm/ ■ お問い合わせ ご質問・ご要望・不具合報告はお気軽にどうぞ！ ・X(Twitter) の DM: https://x.com/AmemineAmane ・BOOTH のメッセージ機能 ■ 更新履歴 ・v1.0.0 公開
English
A dress-up clock for your stream. "Kisekae Clock Studio" is a clock overlay for OBS, shown with a Browser source. Pick a design in the settings page, adjust seconds, date, a caption and more, then just paste the generated URL into OBS. The background is transparent, so it sits right on top of gameplay or chatting scenes. The free version includes 8 designs (credit required). The settings page is available in Japanese, English and Traditional Chinese. ■ Great for you if... - You want a clock on your stream, but don't want to touch HTML or CSS - You want to change the clock's look to match the mood of your stream - You want to show the date or a short caption like "JST" or "LIVE" with the clock - You're tired of figuring out the width and height to enter in OBS ■ Designs in the free version (8) - Plain … White text with a shadow. A basic look that fits any scene - Pill … A clock on a semi-transparent rounded plate - Neon … Glowing text that flickers now and then - 7-Segment … A digital 7-segment display. Unlit segments are faintly visible - News … A news-program style banner - Pastel … A soft gradient plate with small decorations - Wafu … Japanese style: washi paper, Mincho font and a red seal. The date is in kanji numerals (十月三日 土曜) - Analog … An analog clock face with hands (with second hand) ■ Features - Transparent background. Just paste the URL into an OBS Browser source - Includes a settings page: "Pick a design → Adjust → Copy URL", all on one page - Hover over a card to preview it. Step through designs with ◀ ▶ - Shows the recommended "Width × Height" for OBS automatically (click to copy) - Settings are saved automatically. You can also load the URL from OBS to keep editing later - Only the digits that change are redrawn, so it stays light even on long streams - Settings page and clock text in Japanese / English / Traditional Chinese ■ Free version vs. full version (¥500) Free Full Designs 8 All 100 Colors Fixed to design defaults Presets (4-5 per design) + up to 3 custom colors Font Fixed to design default Choose from 19 Text outline None (fixed) Any thickness and color Digit animation None (fixed) Fade / Slide / Pop Seconds, date, 12-hour, caption, size, shadow, position, time zone Yes Yes Settings page Yes Yes Credit Required Not required Even in the free version, the settings page shows the other 92 designs as locked sample images. If you'd like to use one of them, check out the full version → https://amemineamane.booth.pm/items/8958119 ■ Settings (free version) - Seconds / date / 12-hour clock (AM/PM) - Date format … Sat, Oct 3 / Oct 3 (Sat) / Sat, Oct 3, 2026 / 2026/10/03 Sat / 2026.10.03 SAT (Japanese and Taiwanese formats are also available, e.g. 10月3日(土) / 民國115年10月3日(六)) - Language … settings page and the clock's weekdays, AM/PM, etc. (Japanese / English / Traditional Chinese) - Date position … above / below / left / right of the clock - Caption … any text under the clock (up to 30 characters, e.g. JST, LIVE) - Size … 30% to 400% - Drop shadow, blinking colon, leading zero (09:05 / 9:05) - Position … horizontal (left / center / right) / vertical (top / middle / bottom) - Time zone … leave empty for your PC's time, or show the time in another region * Some options are not available for some designs, such as Analog (they are grayed out in the settings page) ■ How to use 1. Unzip, then double-click settings.html in the folder (the settings page opens in your browser) 2. Pick a design on the left, then adjust seconds, date, caption, etc. on the right 3. Click "Copy URL" at the bottom center 4. In OBS, click "+" under Sources and add a "Browser" source. Uncheck "Local file" and paste the URL into the URL field 5. Enter the "Width × Height" numbers shown in the settings page and click OK * The quickest way to try it: in an OBS Browser source, check "Local file" and select clock.html. The "Plain" clock appears right away. ■ Requirements - OBS Studio 30 or later recommended - Windows / macOS - Open the settings page in a browser such as Chrome or Edge - An internet connection is needed to load fonts (the clock still works offline with a fallback font) ■ Terms of use - Personal and commercial use OK - Streaming, video uploads and monetization OK - Modifications OK (feel free to customize it for your own streams) - Redistribution, resale, or distributing modified versions is NOT allowed - The author is not responsible for any damage caused by using this asset [!] The free version requires credit Please do one of the following: ① Add a credit to your stream / video description ▼ Copy & paste ▼ ───────────── Clock: Kisekae Clock Studio (Amemine Amane) BOOTH: https://amemineamane.booth.pm/ X: https://x.com/AmemineAmane ───────────── ② Repost (RT) the announcement post for this item → https://x.com/AmemineAmane/status/2108214915333038515 * No credit required, all 100 designs, and custom colors / fonts: full version (¥500) ■ Related items - Kisekae Clock Studio full version (¥500, all 100 designs, no credit required) → https://amemineamane.booth.pm/items/8958119 - More streaming assets → https://amemineamane.booth.pm/ ■ Contact Questions, requests and bug reports are always welcome! - DM on X (Twitter): https://x.com/AmemineAmane - BOOTH message feature
繁體中文
讓直播畫面多一個可以換裝的時鐘。 「換裝時鐘 Clock Studio」是用 OBS 瀏覽器來源顯示的直播用時鐘素材。 在設定畫面選好設計，依喜好調整秒數、日期、附加文字等， 再把產生的網址貼到 OBS 就完成了。背景是透明的，可以直接疊在遊戲畫面或聊天畫面上。 免費版可以使用 8 種設計 (需要標註出處)。 設定畫面支援日文、英文、繁體中文。 ■ 推薦給這樣的你 ・想在直播畫面放時鐘，但不想碰 HTML 或 CSS ・想配合直播的氣氛，輕鬆改變時鐘的樣子 ・想在時鐘旁邊一起顯示日期，或「JST」「直播中」之類的短文字 ・每次都要查 OBS 要填的寬度・高度，覺得很麻煩 ■ 免費版可以使用的設計 (8 種) ・基本 … 白色文字加陰影。適合任何畫面的基本款 ・膠囊 … 放在半透明圓角底板上的時鐘 ・霓虹 … 會發光的文字，偶爾會「閃一下」 ・七段顯示 … 電子鐘的七段顯示器。沒亮的部分也會淡淡地顯示 ・新聞 … 新聞節目字幕風格的橫條 ・粉彩 … 柔和漸層的底板，加上小裝飾 ・和風 … 和紙底、明朝體、朱紅落款。日期用國字數字 (十月三日 週六) ・指針 … 有錶盤和指針的指針時鐘 (含秒針) ■ 特色 ・背景透明。只要把網址貼到 OBS 的瀏覽器來源就能使用 ・附設定畫面。「選擇設計 → 調整 → 複製網址」在同一個畫面就能完成 ・滑鼠移到卡片上，可以在預覽中試看。也能用 ◀ ▶ 依序切換 ・自動顯示要填入 OBS 的「寬度 × 高度」建議值 (點一下即可複製) ・設定會自動儲存。也可以讀取貼在 OBS 的網址，之後接著修改 ・只重畫有變化的數字，長時間直播也不會變重 ・設定畫面和時鐘文字支援日文 / 英文 / 繁體中文 ■ 免費版可以用的功能 / 付費版 (¥500) 增加的功能 免費版 付費版 設計 8 種 全部 100 種 顏色 固定為設計預設的顏色 推薦配色 (每個設計 4～5 組) ＋ 最多 3 處自由設定 字型 固定為設計預設 19 種可選 文字外框 無 (固定) 粗細・顏色自由設定 數字動畫 無 (固定) 淡入 / 滑動 / 彈跳 秒數・日期・12 小時制・附加文字・大小・陰影・位置・時區 ◯ ◯ 設定畫面 ◯ ◯ 標註出處 需要 不需要 免費版的設定畫面，也能以上鎖的範例圖片瀏覽付費版的 92 種設計。 如果有「想用這個設計」的，歡迎選購付費版 → https://amemineamane.booth.pm/items/8958119 ■ 可以設定的項目 (免費版) ・秒數顯示 / 日期顯示 / 12 小時制 (AM/PM 或 上午/下午) ・日期格式 … 10月3日(六) / 2026年10月3日(六) / 民國115年10月3日(六) / 2026/10/03 Sat / 2026.10.03 SAT / Sat, Oct 3 ・語言 … 設定畫面，以及時鐘上星期、上午/下午等的語言 (日文 / English / 繁體中文) ・日期位置 … 時鐘的 上 / 下 / 左 / 右 ・附加文字 … 在時鐘下方顯示喜歡的文字 (最多 30 字。例：JST、直播中) ・大小 … 30% ～ 400% ・陰影、冒號閃爍、小時補 0 (09:05 / 9:05) ・畫面中的位置 … 水平 (左・中・右) / 垂直 (上・中・下) ・時區 … 留空為電腦的時間。指定後也能顯示其他地區的時間 ※ 依設計不同 (例如指針)，有些項目無法使用 (在設定畫面會以淡色顯示) ■ 使用方法 1. 解壓縮 ZIP，在資料夾裡的 settings.html 上按兩下 (會用瀏覽器開啟設定畫面) 2. 在左邊選設計，在右邊調整秒數、日期、附加文字等 3. 按下方中間的「複製網址」 4. 在 OBS 的「來源」按「+」→ 新增「瀏覽器」。取消勾選「本機檔案」，在網址欄位貼上 5. 在寬度・高度填入設定畫面顯示的「寬度 × 高度」數字，按確定 ※ 想最快試用的話，在 OBS 的瀏覽器來源勾選「本機檔案」→ 選擇 clock.html， 就會顯示「基本」設計的時鐘 ■ 內容物 ・clock.html … 時鐘本體 (要加入 OBS 瀏覽器來源的檔案) ・clock-data.js … 設計和字型的定義 ・settings.html … 設定畫面 (附預覽) ・thumbs/ … 設定畫面設計一覽用的圖片 ・i18n/ … 語言資料 (日文 / 英文 / 繁體中文)，請勿刪除 ・README.txt / README_en.txt / README_zh-TW.txt … 使用方法・使用規範 (日文 / 英文 / 繁體中文) 下載檔案：ClockStudio_v1.0.0_Free.zip ■ 系統需求 ・建議使用 OBS Studio 30 以上 ・Windows / macOS ・設定畫面請用 Chrome / Edge 等瀏覽器開啟 ・載入字型需要網路連線 (沒有連網時，時鐘仍會用替代字型正常運作) ■ 使用規範 ・個人 / 商業使用 OK ・直播、影片上傳、營利 OK ・修改 OK (為了自己的直播而改造，請自由使用) ・禁止二次散布、轉售、散布修改版 ・因使用本素材而產生的任何損害，作者概不負責 【！】免費版請標註出處 (Credit) 請擇一進行： ① 在直播・影片的資訊欄標註出處 ▼可直接複製▼ ───────────── 時鐘素材：換裝時鐘 Clock Studio (雨峰あまね / Amemine Amane) BOOTH: https://amemineamane.booth.pm/ X: https://x.com/AmemineAmane ───────────── ② 轉發 (RT) 本商品的公告貼文 → https://x.com/AmemineAmane/status/2108214915333038515 ※ 免標註出處・全部 100 種設計・自由更改顏色和字型，請使用付費版 (¥500) ■ 相關商品 ・換裝時鐘 Clock Studio 付費版 (¥500・全部 100 種設計・免標註出處) → https://amemineamane.booth.pm/items/8958119 ・其他直播素材 → https://amemineamane.booth.pm/ ■ 聯絡方式 有任何問題、需求或錯誤回報，歡迎隨時聯絡！ ・X (Twitter) 私訊：https://x.com/AmemineAmane ・BOOTH 的訊息功能 ■ 更新紀錄 ・v1.0.0 發布
