MLB速報オーバーレイを“1日”で。AI駆動開発の制作事例

メジャーリーグの試合進行をゲーム実況風グラフィックでリアルタイム表示する配信オーバーレイ。設計から縦横対応まで、ロードマップ9本のPRを一日で完走した制作事例。

CCAG編集部
CAG編集部
制作事例6分で読めます
制作事例MLB速報オーバーレイを“1日”で。AI駆動開発の制作事例
この記事は Claude Designモード — ビジュアル記事(自己完結HTML)を記事枠に収めています。メタ・目次・関連・CTAの枠は共通です。

「言語化できるものは、全て作る。」——これは私たち電脳技巧集団(AI職人ギルド)のモットーだが、言葉で終わらせては意味がない。今回は、その一例として作ったMLB(メジャーリーグ)速報オーバーレイの制作過程を、設計判断と一緒に開示する。実験的なプロジェクトだが、私たちのAI駆動開発の進め方が、そのまま出ている。

01何を作ったか

作ったのは、野球中継に重ねるリアルタイム速報オーバーレイだ。スコア・カウント・走者・打者成績を、ゲーム実況風のグラフィックで描き、試合の動きに合わせて更新する。配信ソフト OBS の Browser Source(1920×1080 / 30fps)にそのまま読み込める。第一形態は YouTube Live 向けの横 16:9、将来は TikTok / Instagram 向けの縦 9:16 へ。

逆転、サヨナラ、ホームラン、161km/hの剛速球——試合の見せ場では割り込みポップが走る。走者は背番号でなく実名で出る。延長戦にも追従する。「ただ数字を出す」ではなく、観ていて気持ちのいい速報を目指した。

LIVE · 7回裏DODGERS 6METS 5BS ⚡ 161km/h ストレート
スコア・カウント・走者・割り込みポップ。試合の動きにリアルタイム追従する

02一日で完走できた理由:データ層と表示層を分ける

速いだけのプロジェクトは、たいてい後で崩れる。今回が一日で破綻なく完走できたのは、最初にアーキテクチャを固定したからだ。具体的には、データ層と表示層をはっきり分けた。

外部APIから試合データを取り、poller が拾い、normalize が画面比率にも媒体にも依存しない正規化State(GameState)に整える。そこから試合・選手のイベントを判定するトピックスエンジンを通し、WebSocket でオーバーレイに流す。オーバーレイは、ただ render(state) するだけ。

この「表示層は正規化Stateだけを受けて描く」という一線を最初に引いたことが、後のすべてを楽にした。見た目とロジックが、最初から絡まっていない。

API取得 normalizeGameState化 topicsイベント判定 WebSocket render表示層 DATA LAYER DISPLAY LAYER
API → 正規化State → トピックス → WebSocket → 表示層。責務が一方向に流れる

03縦も横も、同じデータから

分離設計の配当は、すぐに返ってきた。16:9(YouTube)と 9:16(TikTok/IG)は、同じ GameState を別レイアウトで描くだけでいい。縦型対応は「表示層を新規で足す」だけで済み、データ層はまるごと流用できた。ロジックの二重化はゼロ。

さらに、State契約はadditive(追加方式)で拡張した。既存の bases を残したまま、走者の実名を持つ runners を足す。古い配線を壊さず、新しい配線を後追いできる。手戻りゼロは、運ではなく設計の結果だ。

GameState正規化JSON(1つ) 16:9 — YouTube 9:16
同じデータ、別レイアウト。縦型は表示層を足すだけでデータ層を流用

04実試合を待たない「replayモード

配信オーバーレイの開発には、地味だが大きな壁がある。実際の試合がないと、動きを確認できない。深夜に試合がなければ、UIの作り込みは止まる。

そこで、pollerlive と replay の2モードを持たせた。保存した試合データを、野球の最小進行単位である投球ごとに再生する。開発用フィクスチャに選んだのは、大谷翔平の試合(gamePk 777657、10回裏サヨナラの6-5)。実試合がない時間でも、逆転やサヨナラの瞬間を何度でも再現してUIを詰められる。

「試合を待つ」から「試合を呼び出す」へ。開発のボトルネックを、設計で消した。
REPLAY · 投球単位 HR サヨナラ
保存フィクスチャを投球ごとに再生。実試合を待たずに見せ場を再現できる

05「動いてるはず」を、許さない

AIに実装を任せると、最後に効いてくるのは検証だ。コードが通っても、画面が崩れていたら意味がない。だから今回は、「動いてるはず」で終わらせず、実画像で確認するループを回した。

自前の WebSocket クライアントでデータの受信を確かめ、さらにヘッドレスChrome(playwright)で実際のCSS描画をスクリーンショットする。逆転・サヨナラ・本塁打・剛速球の割り込みポップ、走者の実名表示、延長回、デモが壊れていないこと——ぜんぶ実画像で目視した。テストは normalize 20本・topics 9本・replay 8本の計37本がパス。

render描画captureスクショ 実画像で確認 → 直す → また確認
受信確認+ヘッドレスChromeの実描画スクショ。憶測でなく、画像で詰める

06司令塔と、つくり手を分ける

この一日を支えたのは、技術設計だけではない。進め方そのものだ。CAGでは、役割をはっきり分けている。

  • 司令塔:方針を整理し、設計し、タスクを分解し、「そのまま渡せる指示文」に落とし、結果を検証する。
  • つくり手:ターミナル・Git・コードを動かし、実装とテストを回す。

考える主体と、手を動かす主体を分ける。すると、それぞれが自分の仕事に集中でき、引き継ぎは曖昧な口頭でなく、構造化された指示文になる。AIを一台で抱え込むのではなく、役割で束ねて、チームとして動かす。これがCAGのAI駆動開発の芯だ。

司令塔設計・分解・検証 つくり手実装・テスト 指示文 → 構造化された指示で引き継ぐ(口頭でなく)
考える主体と動かす主体を分け、引き継ぎは構造化された指示文で

07従来の人月なら、どうなるか

ここまでの設計・実装・検証を、もし従来の専門職が人月方式で受けたら——どれだけの工数と費用になるだろう。あくまで想定・概算だが、目安を置いてみる。

規模を分解すると、要件定義・設計、バックエンド(poller/正規化/トピックス/WebSocket)、フロント(オーバーレイ描画を 16:9 と 9:16 の二系統)、replay、テストと検証、そしてPM。控えめに見ても2〜3人月はかかる構成だ。システム実装の人月単価(60〜300万円/人月)の中位で積むと概算200〜400万円、納期は設計の往復と分業の待ちを含めて2〜3ヶ月。しかも見積りは「設計一式」「開発一式」と"一式"に丸められがちで、修正のたびに追加請求になりやすい。

電脳技巧集団(AI職人ギルド)は、同じものをAI駆動で実働1日級に畳んだ。司令塔が設計と分解と検証を担い、つくり手が実装を回す。価格をつけるなら成果物 × 定価 + AI実費パススルー——内訳はすべて開示し、"一式"は使わない。速さも、安さも、透明さも、同時に成り立つ。

従来(人月) vs CAG ※想定・概算 工数2〜3人月実働1日級 納期2〜3ヶ月最短 概算金額200〜400万円(一式)成果物×定価+AI実費(透明)
同じ成果物を、従来(人月)とCAGで比べた目安。数字は想定・概算
観点従来(人月方式)電脳技巧集団(AI職人ギルド)
想定工数2〜3人月AI駆動で実働1日級
納期2〜3ヶ月(設計往復・分業の待ち)最短
概算金額200〜400万円(“一式”になりがち)成果物×定価 + AI実費パススルー
見積りの透明性内訳が見えにくい“一式”表記ゼロ・内訳を開示
体制多重下請け・分業司令塔 × つくり手の一気通貫
修正対応追加工数=追加請求高速サイクルで都度反映

※ 従来側は本制作物の規模(要件定義〜実装〜テスト〜PMで2〜3人月想定)と公開相場の人月単価から置いた概算。CAG側は本事例の実働を基にした目安。

08これは、CAGの“動く証拠”

MLB速報オーバーレイは、実験的なプロジェクトだ。だが、ここに出ているものは実験ではない。データと表示を分ける設計、手戻りを生まない契約、実試合を待たないreplay、実画像で詰める検証、司令塔とつくり手の分業——どれも、私たちが受注案件で使っている作法そのものだ。

「言語化できるものは、全て作る。」私たちは、それを言葉でなく、動くもので示したい。次にあなたが言語化したいものは、何だろう。

つくりたいものを、言葉で。

LP制作 5万円から。まずは、私たちの速さと透明さを確かめてください。

無料で相談する →
C

CAG編集部

CAG編集部

電脳技巧集団(AI職人ギルド)のメンバー。脱・人月商売と透明性ブランドのもと、AI駆動でものづくりを続けています。

言語化できるものは、全て作る。

あなたの「作りたい」を、定価とスピードで形に。まずは無料の相談から。

ギルドに加わる