配信演出スタジオ

課題・制作の目的

配信・イベントのシーン、文字、告知、タイマーを操作できる独自の演出UIと表示専用画面を実装すること。

担当範囲

企画 / オリジナルUIデザイン / 状態設計 / 実装

技術スタック

• JavaScript
• HTML
• CSS
• SVG
• URL API

実装内容

VTuberの配信準備に向けて、16:9プレビュー、出力されないモデル配置ガイド、雑談用背景とゲーム用透過表示を制作しました。4シーンの文言・配色・告知を設定し、ブラウザ保存や設定ファイルで再利用できます。待機と休憩は予定時刻に基づく別々のタイマーを使い、シーン別URLをOBSへ登録して切り替える構成です。編集側から本番出力をリアルタイムに操作する機能や、実チャット接続はありません。本人モデルはOBSの別ソースとして重ねます。Windows/macOSのOBS・実GPU・本人モデル・実ゲームを組み合わせた長時間負荷は未検証です。

• 4シーンの文言・配色・告知と16:9のモデル配置ガイド
• 待機・休憩ごとの予定時刻を使い、再読み込みで戻らないタイマー
• シーン別URL、ブラウザ保存と設定ファイル、初期化の取り消し
• 雑談背景・ゲーム用透過表示と、保存・読み込み失敗時の案内

確認できる成果

設定からOBS用URLの準備までを、ログイン不要で試せる制作例として公開。実配信での導入効果・OBS実機での動作を保証するものではありません。

確認対象は以下の公開サイト・デモ・ソースコードと記載した実装範囲です。売上・問い合わせ数・工数削減率の測定値は掲載していません。外部デモは公開状況によって利用できない場合があります。

関連サービス

• MVP・新規Webサービス開発 →
• VTuber・イベントのWeb制作 →