OBS HTML Clock Generator GUIDELINES
Tool Introduction

OBS HTML Clock Generator

ライブ配信や録画画面において、「現在時刻」の表示は視聴者の利便性を高める定番の要素です。

しかし、OBS Studioの標準テキストソース（GDI+等）では、文字の装飾やフォント、レイアウトの微調整に限界があります。また、既存の時計素材を利用する場合でも、「自分のチャンネルのテーマカラーに合わない」「時刻が切り替わるたびに文字幅が伸縮して画面がガタつく」といった問題に直面することが少なくありません。

「OBS HTML Clock Generator」は、これらの課題をブラウザ上で直感的に解決し、OBS用の高品質な透過時計HTMLを出力できるスタンドアロンWebツールです。

完全ローカル動作設計：
外部サーバーを介さずブラウザ上で処理が完結するため、生成されたHTMLやZIPファイルはインターネット環境に依存せず、ローカル環境（file:// プロトコル）でも完全に動作します。

01. 実用的な機能・最適化

一般的なウェブクロックと異なり、配信ソフトでの利用シーンに特化した独自の設計思想が盛り込まれています。

数字の固定幅設定

1文字あたりの幅をCSSで強制的に固定。時刻が進んでも時計全体の横幅が伸縮せず、画面のガタつきを防止します。

ジャストサイズ設計

出力されるHTMLは自動的に左上寄せになり、不要な透明領域を削減。OBS上での他ソースの誤選択を防ぎます。

ローカルフォントZIP同梱

PC内のフォント使用時は、フォントデータとHTMLを自動でZIP化。ブラウザのセキュリティ制限を安全にクリアします。

高度なエフェクト制御

視認性を高める境界線（Stroke）や、ぼかし・位置をミリ単位で調整できるドロップシャドウを完備しています。

豊富な表示アドオン

点滅アニメーション付きの「LIVEバッジ」（5スタイル）、曜日に対応した「日付表示」、および任意の文字列（配信用のハッシュタグなど）を表示できる「カスタムラベル」を統合してレンダリング可能です。

02. 開発環境・技術仕様

ビルド環境が一切不要でありながら、高度な機能を提供する、設計の美しいクリーンなクライアントサイドSPA（Single Page Application）です。

UI / Styling

Tailwind CSS & IBM Plex Sans JP

ユーティリティファーストなスタイリングに加え、ジェネレーター画面全体の基本フォントに「IBM Plex Sans JP」を採用し、一貫した視認性を担保しています。

Logic / Package

React (v18) & JSZip (UMD)

CDNインポートマップを用いたReactのダイレクト読み込みと、ローカルセキュリティ境界制限を回避するためのJSZip(UMD設計)を組み合わせています。

03. 具体的な出力例とデモ（作例）

本ジェネレーターを使用して出力された実機用透過時計ソースのライブ動作サンプルと、適用されているカスタマイズパラメータの設計解説です。

LIVE DEMO (チェッカー背景：透過確認用)

適用パラメータ・チューニング

  • フォントファミリー: 近未来感と視認性を兼ね備えたデジタルデザインの王道『Orbitron』を採用。
  • 等幅補正（数字の固定幅）: `0.9em`の文字幅設定により「1」や「:」を含む時間移動時でもフレームサイズが固定。
  • すりガラス調（frame-glass）: 背面を透過処理しながらも、12pxのぼかし（backdrop-filter）を加え、背景色の白飛びを保護。

追加アタッチメント

  • ミニマルLIVEバッジ: ピンクカラー（`#ff2a6d`）でゆっくり点滅するシンプルなLIVEアタッチメントを左上に配置。
  • カスタムラベル（#NEURA）: フレーム右下にブランドハッシュタグを配置。全体のバランスをとるアジャスター要素としても機能。
  • マージン（Padding）: フレーム内のテキスト保護のために、細かな文字サイズ相対割合（`0.1em`）の余白を担保。

04. 導入手順

作成したHTML時計を、OBS Studioへ追加する手順は非常にシンプルです。

1. デザインしてエクスポート

ブラウザ上でカスタマイズが完了したら、「HTMLとして保存」（ローカルフォント使用時は「ZIPで保存」）をクリックしてPCにダウンロードします（ZIPの場合は事前に展開・解凍します）。

2. OBSでブラウザソースを追加

OBS Studioの「ソース」エリアにある「＋」ボタンをクリックし、新規の「ブラウザ」ソースを追加します。

3. ローカルファイルを指定して配置

「ローカルファイル」のチェックボックスを有効化し、保存した `obs_clock.html` を選択します。表示したい時計のサイズに合わせて、ソースの「幅」と「高さ」（例: 幅800、高さ350）を調整して完了です。

05. まとめ

「OBS HTML Clock Generator」は、サーバーを一切介さない軽量動作でありながら、配信者の細かな「痒いところに手が届く」工夫が詰め込まれたデザインユーティリティです。

VTuberの雑談配信、長時間の作業配信、ゲームの実況プレイ、あるいは企業の社内配信イベントまで、あらゆる配信レイアウトにぴったりとハマる美しい時計表示を誰でも容易に実装できます。

本ツールは、利用規約やセキュリティ境界を厳守した安全な環境下で自由にご利用いただけます。