スマホ通知やSNS通知バナーをモチーフにした、わんコメ / OBS対応のコメント吹き出しHTMLテンプレートです。 角丸の半透明パネルに、アプリアイコン風のマーク、名前、コメント本文をすっきり表示します。スマホに通知が届いたような見た目なので、雑談配信、作業配信、ゲーム配信、Vtuber配信など、幅広い配信画面に合わせやすいデザインです。 背景は透明なので、OBSのブラウザソースとして配信画面に重ねて使用できます。 コメントは下から上へ流れるように表示され、本文は一文字ずつ表示されます。Twitchスタンプなどの画像付きコメントにも対応しています。 主な特徴 - わんコメ対応 - OBSブラウザソース対応 - HTML / CSS / JavaScript形式 - 背景透明、吹き出しのみ表示 - スマホ通知 / SNS通知バナー風デザイン - 角丸の半透明パネル - 名前とコメントを通知本文風に表示 - コメントが下から上へ流れる表示 - 一文字ずつ表示される文字送り演出 - Twitchスタンプ表示対応 - editor_schema.json 同梱 - 見た目確認用の obs_demo 付き - 実配信用テンプレートとデモを分離 こんな配信におすすめ - 雑談配信 - 作業配信 - ゲーム配信 - Vtuber配信 - SNS風・スマホ風の配信画面 - シンプルで使いやすいコメント表示にしたい配信 - かわいい / きれいめ / 近未来寄りの画面づくり 使用方法 1. ZIPファイルを解凍します。 2. OBSでブラウザソースを追加します。 3. ローカルファイルとして、以下のHTMLを指定してください。 onecomme_template/notification_comment_bubble/index.html 4. わんコメを起動します。 5. コメントテスター、または実際のコメントで表示を確認してください。 見た目だけ確認したい場合は、以下をブラウザで開いてください。 obs_demo/index.html ※ obs_demo/index.html は見た目確認専用です。 実配信やコメントテスター確認には、必ず onecomme_template/notification_comment_bubble/index.html を使用してください。 内容物 - README_FIRST.txt - docs/troubleshooting.txt - obs_demo - onecomme_template/notification_comment_bubble - editor_schema.json - template.json 注意事項 - 本商品は、わんコメ / OBS向けのHTMLテンプレートです。 - 背景画像や配信画面そのものは含まれていません。 - OBSのブラウザソースでローカルHTMLを読み込んで使用してください。 - 環境によって見え方が多少異なる場合があります。 - 表示されない場合は、OBSブラウザソースのキャッシュ更新、またはブラウザソースの再追加をお試しください。 - Twitchスタンプなどの画像は、コメント本文内の安全な画像URLのみ表示されます。