【わんコメ対応】宇宙船UI風コメント吹き出しテンプレート｜OBS用HTML

商品概要:

宇宙船の通信パネルやコックピットHUDをイメージした、配信用コメント吹き出しHTMLテンプレートです。

背景なし、吹き出しのみのテンプレートなので、OBSの配信画面に重ねて使用できます。

SF系、宇宙系、メカ系、ゲーム配信などに合わせやすいデザインです。

斜めに落とした角、スキャンライン、グリッド、通信メーター、ステータス表示などを組み合わせ、宇宙船内の通信UIのような雰囲気にしています。

v1.0.4では、インジケーター類を整理し、縦幅が大きくなりすぎないようにコンパクト化しています。

商品説明文:

宇宙船の通信パネルやコックピットHUDをモチーフにした、わんコメ / OBS対応のコメント吹き出しHTMLテンプレートです。

SFゲーム配信、宇宙系の配信画面、メカ・サイバー寄りの配信デザインに合わせやすいよう、青系のHUDカラーをベースに、イエロー系の警告色をアクセントとして加えています。

吹き出しは背景を含まないため、OBSのブラウザソースとして配信画面に重ねて使用できます。

コメント表示時には、下から上へ流れるように表示され、本文は一文字ずつ表示される演出が入ります。

Twitchスタンプなどの画像付きコメントにも対応しています。

デザイン要素としては、以下を入れています。

・斜めに落とした角のパネル形状

・通信UI風のフレーム

・スキャンライン演出

・背景グリッド

・COMMS LINK 表示

・CH番号表示

・LIVE表示

・Shieldメーター

・LAT / CH / READY などの小型インジケーター

v1.0.4では、縦幅が大きくなりすぎないよう、インジケーターを整理し、右側メーターを1つに絞ったコンパクト版にしています。

情報量は残しつつ、コメント本文が見やすいバランスに調整しています。

実配信やコメントテスター確認には、onecomme_template/spaceship_ui_comment_bubble/index.html を使用してください。

obs_demo/index.html は見た目確認用のデモページです。

主な特徴:

・わんコメ対応

・OBSブラウザソース対応

・HTML / CSS / JavaScript 形式

・背景なし、吹き出しのみ

・宇宙船UI / コックピットHUD風デザイン

・通信パネル風のフレーム

・スキャンライン演出

・グリッド表示

・通信メーター、ステータス表示つき

・縦幅を抑えたコンパクト版

・一文字ずつ表示される文字送り演出

・下から上へ流れるコメント表示

・Twitchスタンプ表示対応

・editor_schema.json 同梱

・obs_demo と実テンプレートを分離

・コメント受信時は実コメント表示を優先

使用方法:

1. ZIPを解凍します。

2. OBSのブラウザソースで onecomme_template/spaceship_ui_comment_bubble/index.html を指定します。

3. わんコメのコメントテスター、または実コメントで動作確認を行います。

4. 見た目だけ確認したい場合は obs_demo/index.html をブラウザで開いてください。

内容物:

・README_FIRST.txt

・docs / troubleshooting.txt

・obs_demo

・onecomme_template / spaceship_ui_comment_bubble

・editor_schema.json

・template.json

注意事項:

・実配信やコメントテスター確認には、必ず onecomme_template/spaceship_ui_comment_bubble/index.html を使用してください。

・obs_demo/index.html は見た目確認専用です。

・背景画像や配信画面そのものは含まれていません。

・ブラウザソース上で表示が更新されない場合は、キャッシュ更新や再追加をお試しください。

・環境によって見え方が多少異なる場合があります。

想定用途:

・SFゲーム配信

・宇宙系ゲーム配信

・メカ系配信

・サイバー風配信画面

・Vtuber配信

・雑談配信

・企画配信

・配信画面の世界観づくり