概要
本ツールは、OBS Studioなどの配信ソフトに「ブラウザソース」として読み込ませて使用する、配信画面（オーバーレイ）です。 1920×1080のフルHDサイズに最適化されており、画面上の要素を直感的にカスタマイズ・ドラッグ移動させることができます。
画面一覧
主な機能と特徴
- 直感的なドラッグ＆ドロップ: 画面上の各ボックス（TITLE, COMMENT, MEMOなど）は、ヘッダー部分をドラッグすることで自由に配置を変更できます。
- 文字量に応じた自動伸縮: タイトルやメモのテキストエリアは、入力された文字量に合わせて縦横に自動でサイズが調整されます。
- 無限に増やせるボックス（複製機能）: ボックスをダブルクリックするだけで、簡単に同じスタイルのボックスを複製できます。不要なボックスは右上のボタンで即座に削除可能です。
- ループ対応のプロフィール表示: 画面上部のプロフィール領域は、クリックで複数の情報（アカウント名、SNS、Webサイトなど）を滑らかなアニメーションでローテーション表示させることができます。
OBS Studioへの登録方法
- OBSの「ソース」パネルにある「+」ボタンをクリックし、「ブラウザ」を選択します。
- プロパティ画面で以下のように設定します：
- URL: お好みの画面のURLを入力してください。
- ローカルファイル: ダウンロードしたファイルを使う場合こちらにチェックを入れ、ファイルを選択します。
- 幅:
1920 - 高さ:
1080
- 「OK」をクリックすると、配信画面にオーバーレイが表示されます。
各パーツの編集方法
ブラウザソースの操作について 画面上のテキスト入力やドラッグ操作を行うには、OBS上でソースを右クリックし、「対話（操作）」を選択してください。
専用の操作ウィンドウが開き、直接編集できるようになります。
各種テキスト・ボックスの編集
- タイトル・メモの変更: 各ボックス内のテキストは直接書き換えが可能です。
- ヘッダー名の変更: 「TITLE」「COMMENT」といったヘッダーの文字も自由に変更できます。
- ボックスの複製: ボックスをダブルクリックすると、少しずれた位置に新しいボックスが複製されます。
- ボックスの削除: ボックス右上にある赤色のボタンを押すと削除されます。
プロフィール（画面上部）の編集
- 上部のプロフィールエリア（デフォルトでは名前やSNSが表示されている部分）をダブルクリックします。
- プロフィール編集用のポップアップ（
// PROFILE EDIT）が表示されます。 - 「＋ 追加」ボタンで項目を増やし、不要な項目は「×」で削除します。
- 編集が終わったら「SAVE」ボタンを押すと、入力した内容が3秒間隔で自動ループ再生されます。
時計・日付機能
- 画面右上には、配信を開いているPCのローカル時間に同期した「日付」と「時刻（1秒ごとに更新）」がリアルタイムに表示されます。特に設定は不要です。
使用上の注意点
- リフレッシュ時のリセットについて: 本ツールはJavaScriptで動的に配置やテキストを保持しています。OBS側でブラウザソースを「リフレッシュ（再読み込み）」したり、OBSを再起動したりすると、編集したテキストや配置が初期状態に戻ります。 配信開始直前に「対話」画面からセットアップするか、お気に入りの配置やテキストを固定したい場合は、HTMLソースコード内の該当箇所（
<body>内の初期値や<script>内のprofileItems）を直接書き換えて保存することをおすすめします。 - 推奨解像度: 1920×1080（16:9）以外で使用すると、コーナーの装飾などが崩れる場合があります。