🤖 【連載第2回】画面の文字がバタバタ消えるバグを克服！海外映画風「3行固定ネオン座布団」に込めたミリ単位のUIデザイン設計

💡 はじめに：自動化の代償、それは「字幕が画面で暴れるバグ」

お疲れ様です！WakabaPonchaNです！

🤖一ミリもコードを書かないストリーマーが、最新AI（Gemini 3.5 Flash）とガチ機材を融合させて未来の配信環境を作る連載シリーズ、第2回目のお時間です。

🤖前回は、ホットキーを必死にポチポチ叩いていた手動運用の『AI賢者v1.0』から、完全自動化された “T.A.C.T.I.C.S.” v2.0 へと転生した歴史をお話ししました。

🤖「よっしゃ、これで自動でガシガシ喋るぞ！」と意気込んだのも束の間。いざ実戦テストをしてみると、配信画面（OBS）にとんでもない大問題が発生したのです。

🤖それが、「AIが喋るたびに、字幕ボックスがバタバタと消えたり動いたりして絶望的に見づらい問題」でした。

🤮 従来のUIが抱えていた「配信画面としての致命傷」

🤖初期の字幕表示システムは、AIから届いた文字数に応じて、表示ボックスの横幅や縦幅がその都度「びよ〜ん」と伸び縮みする仕様になっていました。

🤖これがゲーム配信の画面において、どれだけ致命的かというと……

• 文字が届くたびに画面の端でUIがガタガタ動く（リスナーの視線が誘導されてゲームに集中できない）
• 短い一言（15文字前後）だとボックスが極小になり、長文だと画面の半分を占領する
• AIが喋り終わった瞬間にボックスがパッと消える（「今なんて言った？」と思っても読み返せない）

🤖これでは、激しい競技ゲーム（ApexやOverwatch ）の配信画面としては美しくありませんし、何より「形から入る」私の美学が許しませんでした。

🤖「海外映画のスクリーンのように、常にそこに美しく鎮座し、それでいてゲームの邪魔をしない完璧な字幕ボックスを作りたい……！」

🤖ここから、ノンプログラマーによるミリ単位のUI大改造計画が始まりました。

🎨 解決策：サイバーネオン輝く「常時3行固定ボックス」の誕生

① 文字数に左右されない「完全3行ホールド設計」

🤖文字が短くても長くても、表示領域を「縦3行分」の高さに完全固定しました。AIのセリフが1行で終わる時は下に美しい余白が残り、マシンガンのように連を成して届く時は、過去のセリフがログとして上へスムーズに押し上げられていきます。

② 映画のような余韻を残す「8秒間のフェードアウトディレイ」

🤖AIが喋り終わった瞬間に文字を消すのをやめました。発話が完了した後も、リスナーがいつでも視線を落として内容を確認できるよう、丸々8秒間は画面にセリフをスタックして残し続ける仕様（タイマー制御）に変更。これにより、配信全体のラグや見落としを完全にカバーしています。

③ 「形から入る」サイバーパンクなネオンデザイン

🤖フォントには未来感を演出する『Orbitron』と、視認性の高い『M PLUS 1p』をハイブリッドで採用。ボックスのヘッダーには AI SAGE "T.A.C.T.I.C.S." v2.0 という液晶バッジ風のネオンサインを光らせ、AIが思考中（パケット受信中）のときは、左上のインジケーターが怪しく明滅する「男のロマン」をこれでもかと詰め込みました。

🛠️ コード0ミリでも、OBSとHTML5はここまで連動できる

🤖「でもぽんちゃん、コード書けないのにどうやってそんな滑らかな動きを作ったの？」と思いますよね。

🤖実はこれ、裏側でPythonのメインシステム（sensor_controller.py）がキャプチャーボードから映像をスキャンし、文字が生成された瞬間にブラウザ側へWebSocket通信で超高速中継を飛ばしています。それをOBSの「ブラウザソース」として画面にオーバーレイ投影（HTML5 / CSS3 / JavaScript）しているのです。

🤖一ミリもコードは書いていません。ですが、AI（Gemini）に向かって「こういうサイバーな画面を作りたいから、HTMLとCSSのコードを書いて！」と論理的にツッコミを入れまくり、出力されたコードをペタペタとパズルのように組み合わせることで、このプロ仕様のフロントUIに辿り着きました。

🤖アイデアと「こだわり」さえあれば、プログラミングの知識がなくても自分の秘密基地はミリ単位でデザインできる。良い時代になりました、本当に。

🔗 次回予告：遊んでいるゲームを自動で特定する「脳殻」の実装へ

🤖画面の見やすさを極限まで高めた “T.A.C.T.I.C.S.” v2.0。 しかし、画面が綺麗になると、今度はAIの「中身（知能）」をもっと進化させたくなってしまうのがオタクの性というもの。

🤖「APEXを起動したらAPEX用の、Overwatchを起動したらOverwatch用の説教プロンプトを、人間の手動切り替えなしで、AI自らに画面を見て判断させたい……！」

🤖次回は、大賢者にゲーム画面をミリ秒単位でスキャンさせ、自動でタイトルを特定してゲームを120%楽しむための新機能「機能・自動ゲーム認識システム（エンジョイモード）の全貌編」をお届けします。主の弱点を的確に突いてくる大賢者の脳みその裏側を大公開しますので、お楽しみに！

• 私のTwitchチャンネルはこちら！映画風の3行字幕UIがリアルタイムに光っています：わかばぽんちゃん Twitchチャンネル
• ※本記事の執筆にあたり、当ブログはAmazonアソシエイトなどのアフィリエイト広告を利用しています。