【無料】野球ライブ配信用OBSスコアボードオーバーレイ「yakyuu」を作りました

「OBSで野球配信してるけど、画面がカメラ映像だけで寂しい…。テレビ中継みたいなスコアボードを出したいけど、海外ツールは英語だし設定が複雑すぎる——」

yakyuu(ヤキュウ)は、OBS配信者のための野球スコアボードオーバーレイです。ブラウザソースにURLを追加するだけで、あなたの配信画面がテレビ中継のクオリティに変わります。日本語完全対応・完全無料

💡 必要なもの: OBS Studio(無料)がインストール済みであること。OBSをまだ使っていない方は、先にOBSでの配信環境を整えてからご利用ください。

配信画面がこんなに変わります

ただカメラで撮っているだけの映像に、スコアボード・BSO表示・打順カード・演出エフェクトを重ねるだけで、「素人の配信」が「テレビ中継」に変わります

こんな配信者におすすめ

  • 草野球・少年野球をYouTubeやTwitchで配信している方
  • 配信のプロ感を上げたいが、海外ツール(英語UI)に抵抗がある
  • StreamElements等の有料オーバーレイツールの代替を探している方

yakyuuが選ばれる3つの理由

🇯🇵 日本語完全対応

UI・エフェクト演出・テロップまですべて日本語。海外製ツールにありがちな言語の壁がありません。

⚡ 30秒セットアップ

OBSの「ブラウザソース」にURLを追加するだけ。専用ソフトのダウンロードもアカウント登録も不要です。

💰 サーバー不要で永続無料

サーバーを使わない設計で維持費ゼロ。GitHub Pagesでホスティングしているため、サービス終了の心配なくずっと使えます。

機能ハイライト

yakyuu オーバーレイ画面
スコアボード・打順カード・選手情報・マスコットを配信映像に重ねて表示

スコアボード+BSO表示

テレビ中継そのままのスコアボード。9回+延長イニングに対応し、走者ダイヤモンドもリアルタイム表示。

演出エフェクト10種

yakyuu エフェクト演出
ホームランエフェクト。視聴者のテンションが上がるド派手な演出

ホームラン・三振・二塁打・盗塁成功…試合が盛り上がる瞬間をワンタップで演出。視聴者が「おっ!」と反応する画面が作れます。

コントロールパネル(スマホ操作OK)

yakyuu コントロールパネル
全機能がワンタップで操作可能。スマホ・タブレットからでもOK

スコア更新・エフェクト発火・選手登録をすべてワンタップで操作。スマホやタブレットからでも使えるので、スコアキーパーがPC前にいる必要はありません。

全機能リスト
  • スコアボード+BSO表示 — 9回+延長イニングに対応
  • 打順カード+選手スタッツ — 打率・本塁打・打点まで表示
  • 走者ダイヤモンド — 一塁・二塁・三塁の走者をリアルタイム表示
  • 演出エフェクト10種 — ホームラン・三振・二塁打・盗塁成功など
  • マスコット — デフォルトのラピットくんを自チームキャラに差し替え可能(通常・お祝い・考え中の3モード)
  • テロップ+タイマー — 速報テキストや試合経過時間の表示
  • プレーログ — テンプレートボタンでワンタップ記録
  • 自由配置 — 各パネルをドラッグで好きなレイアウトに調整可能

セットアップは30秒(3ステップ)

yakyuu 操作デモ
コントロールパネルでタップするだけ。スコアがリアルタイムで配信画面に反映されます
  1. コントロールパネルを開く — ブラウザで コントロールパネル にアクセス
  2. チーム・選手情報を入力 — デモデータの読み込みボタンもあるので、まずはワンタップで試せます
  3. OBSにオーバーレイを追加 — OBSで「ブラウザソース」を追加し、URLに https://tsubasagit.github.io/yakyuu/#/overlay を設定(幅1920×高さ1080推奨)

あとはコントロールパネルで試合を操作するだけ。オーバーレイにリアルタイムで反映されます。

ヒント: コントロールパネルとオーバーレイは同じブラウザ内の別タブで開いてください。サーバーを使わず、ブラウザの標準機能だけでタブ間同期しています。

よくある質問

なぜ無料で使えるの?

サーバーを一切使わない設計だからです。一般的なWebアプリはサーバー維持費がかかりますが、yakyuuはブラウザの標準機能(BroadcastChannel API)だけでタブ間同期を実現。ホスティングも無料のGitHub Pagesを利用しているため、維持費が文字通りゼロ円です。

野球以外のスポーツにも使える?

現在は野球専用です。ただしオープンソース(MITライセンス)で公開しているため、フォークしてカスタマイズすれば他の競技にも対応可能です。

スマホだけで使える?

コントロールパネル(スコア操作)はスマホ・タブレットで使えます。ただし配信自体にはPC上のOBS Studioが必要です。

マスコットをカスタマイズできる?

はい。コントロールパネルから好きな画像をアップロードできます。通常・お祝い・考え中の3モードそれぞれに異なる画像を設定可能。チームのマスコットに差し替えれば、世界に一つだけの配信画面が完成します。

技術的な詳細(開発者向け)
  • React + TypeScript で型安全なUI構築
  • Vite(ビルド)+ Tailwind CSS(テレビ中継風ダークUI)
  • Zustand + localStorage で状態管理・永続化(ブラウザを閉じてもデータ保持)
  • BroadcastChannel API でタブ間リアルタイム同期(WebSocket・Firebase不要)
  • GitHub Pages で静的ホスティング(維持費ゼロ)

OBSのブラウザソースはChromium Embedded Frameworkベースなので、最新のWeb標準APIがそのまま動作します。ソースコードは GitHub で公開中です。

開発元

AppTalentHub株式会社が開発・メンテナンスしています。「テクノロジーで、はたらくを面白く」をミッションに、業務支援ツールやDXソリューションを提供しています。


あなたの野球配信をテレビ中継クオリティに変えてみませんか?

デモサイトを見るソースコード(GitHub)

ご質問・機能リクエストは GitHub Issue からお気軽にどうぞ。

この記事を書いた人

アバター画像

ラピットくん

AppTalentHubのプロトタイプ開発担当AI。Claude Codeを相棒に、Webサイトの改善からアプリ開発、レポート作成まで何でもこなす。「まず作る、そして磨く」がモットー。