PASTEL POP STREAM BAR — OBS用の配信バー（HTMLウィジェット） 配信画面に、時計とかわいいを1本で。 ミルク色の地（COCOA だけ濃い地）に、レースのようななみなみの下ふち。 左にリボン、右にキャンディがゆっくり揺れています。 ──────────────────────────────────── ■ こんな素材です 時計・日付・LIVE表示・ゲーム名・SNSのIDを、横長のバー1本にまとめた 配信画面用の素材です。OBS Studio の［ブラウザ］に読み込んで、 画面の上か下のふちに置いてお使いください。 画像ではなく HTML でできているので、時計は実際に動きます。 大きくしたいときは、OBS の［幅］［高さ］を、同じ倍率で大きくしてください。 （例: 幅1200 高さ96 → 幅2400 高さ192）。高さだけ上げると、バーが［幅］より 広くなったところで両端が切れます。 バーの高さは［高さ］96 で 67 px、192 で 134 px、288 で 201 px になります。 その方法なら文字はぼけません（配信画面で角を引っぱって伸ばすとぼけます）。 ※ 文字とバーの形は図形で描いてあります。両端のリボンとキャンディだけは絵で、 　 ［幅］［高さ］を上げても大きくなりません（［高さ］96 のときの大きさのままです）。 　 ［高さ］192・288 にするとバーだけが大きくなるので、飾りはバーの上寄りに 　 小さく付いた形になります。飾りもこの見た目でお使いになるなら［高さ］96 をおすすめします。 ⚠ ［高さ］288 より大きくしても、バーはそれ以上大きくなりません （配信画面いっぱいにならないよう上限を付けています）。 HTML や CSS の知識はいりません。 付属の設定画面で、色はボタンで選び、文字は打ち込むだけで変えられます。 ──────────────────────────────────── ■ 特徴 ・時計が実際に動きます（パソコンの時計をそのまま表示） ・OBS の［幅］［高さ］を大きくすれば、大きくしても文字がぼけません（画像ではなく HTML） ・背景は透過。配信の映像の上にそのまま重ねられます ・設定画面つき。HTML を書きかえる必要はありません ・外部のサーバーにつながりません（インターネットが切れても動きます） ・会員登録・APIキー・追加のソフトは不要です ・両端のリボンとキャンディは、設定の「動き」とは別に、いつもゆっくり動いています ・「動き」で「なし」を選ぶと、リボンとキャンディも止まります ・長い配信でも目が疲れないよう、動きは控えめに作ってあります ・パソコン側で「アニメーションを減らす」設定にしている方には、動きが自動で止まります ──────────────────────────────────── ■ 画像生成AIについて 両端のリボンとキャンディの絵は、画像生成AI（ChatGPT）で作ったものです。 それ以外——バーの形・文字・区切りの点線・下のなみなみ・文字の横の小さな飾り——は、 HTML と CSS で1つずつ書いたものです。 AIで作っているため、似た雰囲気の素材を他の方がお使いになる場合があります。 ──────────────────────────────────── ■ この商品に入っているもの 【カラーテーマ 6色】 STRAWBERRY / SODA / MINT / LEMON / LAVENDER / COCOA ボタンを押すだけで切り替わります。 【時計】 24時間表示 / 12時間表示（AM・PM） 秒の表示を出す・出さない 【日付】4通りの書き方 09.29 TUE（月日と曜日） 2026.09.29（年月日） 09.29（月日だけ） SEP 29（英語の月） 日付そのものを出さないことも選べます 【LIVE表示】 「LIVE」「ON AIR」「配信中」など、文字は自由に変えられます（16文字まで） 【カスタムテキスト】 好きな言葉をひとつ入れられます（日本語も入ります・40文字まで） ⚠ 長すぎるときは、バーの中で「…」と省略されます 【NOW PLAYING】 小さな見出しと中身の2段組み。 見出し（NOW PLAYING）も中身（ゲーム名）も自由入力です（見出し 24文字・中身 40文字まで） ⚠ 中身が長すぎるときは、バーの中で「…」と省略されます 【SNSのID】 @あなたのID を表示できます（32文字まで） ⚠ 長すぎるときは、バーの中で「…」と省略されます 【アニメーション 5種類】 なし / ゆっくり点滅 / ぽんと出てくる / タイピング / ぷるっと弾む どれも配信の邪魔にならない量にしてあります 【表示の大きさ】3段階（小・中・大） ⚠ 文字だけでなくバー全体が大きくなります（［高さ］96 のとき 高さ 58.6 / 67 / 77 px） ⚠ リボンとキャンディの大きさは変わりません（変わるのはバーだけです） 【透明度】0〜100%（バーだけ。リボンとキャンディは透けません） 【設定画面】settings.html をダブルクリックするだけで開きます ──────────────────────────────────── ■ 導入方法 1. ZIP を解凍します 2. settings.html をダブルクリックして、色と文字を決めます 3. 「アドレスをコピー」を押します 4. OBS の［ソース］の ＋ →［ブラウザ］を選びます 5. ［ローカルファイル］のチェックを外し、［URL］にアドレスを貼ります 6. ［幅］1200 ／［高さ］96 を入れて OK 7. 配信画面でドラッグして位置を合わせます ⚠ バーはソースの枠の中央に出ます（枠いっぱいには広がりません）。 両端のリボンとキャンディは、バーより外側にはみ出しています。 画面の端に寄せたいときは、［幅］を 680 くらいまで下げてください（［高さ］96・既定の設定で、飾りまで入れて約 668 px。これより狭くすると飾りが先に切れます）。 ⚠ この 680 と 668 px は［高さ］96 のときの値です。［高さ］を上げるとバーは 大きくなりますが飾りは大きくならないので、必要な［幅］は同じ倍率にはなりません。 （大きくしたいときは、角を引っぱらずに 6 の［幅］［高さ］を大きくしてください） くわしい手順は、同梱の README.html に書いてあります。 ──────────────────────────────────── ■ 動作環境 ・動作を確かめた環境: OBS Studio 32.1.2 / Windows 11 ・これより前の版の OBS Studio・Mac では確かめていません ・インターネット接続は不要です ・会員登録・APIキー・追加のソフトは不要です ・Adobe などの有料ソフトは必要ありません ──────────────────────────────────── ■ ファイルの内容（全 30 ファイル） PRO/ index.html OBS に読み込む本体 settings.html 設定画面 css/ js/ assets/ ほか 中身のファイル（触らなくて大丈夫です） README.html くわしい説明（ブラウザで開きます） README.txt 文字だけの説明 LICENSE.txt ご利用の範囲 FREE/ index.html 無料版（STRAWBERRY 1色・設定画面なし・リボンとキャンディなし） css/ js/ README.html 無料版の中身と説明 PREVIEW/ preview.html 6色と主な設定を1ページで見比べられる確認用 ──────────────────────────────────── ■ ご利用の範囲（くわしくは同梱の LICENSE.txt） ○ 個人でのご利用 ○ 配信でのご利用（YouTube / Twitch / ニコニコ生放送 / TikTok など） ○ 動画・SNS でのご利用 ○ 収益化しているチャンネルでのご利用 ○ 法人・企業案件配信でのご利用 ○ 色・大きさ・文字などの変更 ○ 他の素材と組み合わせての改変 × 再配布・転売 × 素材そのものの販売・配布 × ご購入者以外への配布 （制作を手伝う方への一時的な受け渡しを除く／くわしくは LICENSE.txt） （ご依頼を受けて他の方の配信画面を作る場合は、ご依頼者ご本人にお買い上げください） × 素材集・テンプレートなど、素材そのものが主な価値になる商品への同梱 × 素材を印刷・加工したグッズ等の販売 （ご自身の配信・活動で配るノベルティは差し支えありません） × 自作発言 × 素材そのもの、または素材を主体としたデザインの商標登録・意匠登録 × 違法な内容、他者を誹謗中傷する内容での使用 著作権は Enyeart design（michew）にあります。 クレジット表記は必須ではありません。 ──────────────────────────────────── ■ ご注意 ・デジタル商品のため、ご購入後の返品・返金は承っておりません。 ・ZIP を解凍してからお使いください。中のファイルだけを取り出すと動きません。 ・時刻はお使いのパソコンの時計を表示します。 ・フォントのファイルは同梱していません（パソコンに入っている字で表示します）。 ・OBS Studio をはじめ各ソフトの仕様変更により、表示が変わる場合があります。 ──────────────────────────────────── ご不明な点は、この商品ページのメッセージからお気軽にどうぞ。