作る、試す、直すを繰り返し、実際の大会運用に近い形まで改善しました。
Portfolio / Tournament Operations Tool
Ecounter-v1
大会運営を、もっと見やすく、 もっと扱いやすく。
Ecounter-v1は、eスポーツ大会で発生するスコア更新、選手情報管理、配信表示、会場案内を一つの流れで扱うために制作した大会運用支援アプリです。
Project Summary
大会運営の裏側を支える、自作Web運用ツール
進行中でも迷わず扱える操作と、配信で読みやすい表示を重視しました。
課題整理からUI（画面の見た目や操作部分のこと）、機能実装、説明資料まで担当しました。
PC内で動くブラウザ操作型アプリとして、OBS（配信用ソフトのこと）表示へ連携します。
Role / Ownership
制作範囲と担当したこと
AIを相談相手として使いながらも、課題整理、画面設計、実装、検証、改善判断は自分で行いました。
課題整理・設計
大会中に発生する手入力、確認作業、表示切り替えの負担を整理し、運営フローに沿って必要な機能を分けました。
UIと機能実装
操作画面、OBS表示、会場表示、選手情報管理、API連携、CSV取り込みを一つのツールとして扱える形にしました。
検証・改善
ログ、状態ファイル、実際の画面、OBS出力を見比べながら、表示崩れや反映漏れの原因を切り分けました。
資料化・公開準備
提出用ポートフォリオ、操作説明、公開用ページを分け、見る人に合わせて伝わる資料に整えています。
Problem / Goal
大会中の「情報更新」と 「確認負担」を減らしたい
eスポーツ大会では、試合ごとにスコア、選手名、チーム情報、プロフィール、トーナメント進行を何度も更新します。情報が複数の画面やファイルに分かれると、配信中の表示ミスや確認作業が増えます。
この課題に対して、運営画面から入力した情報を、配信表示・会場表示・投稿文作成へつなげられる仕組みを目指しました。見た目は派手さよりも、長時間の大会運用で信頼できる落ち着きと読みやすさを優先しています。
迷わず更新できる
大会中に必要な操作へすぐアクセスできるよう、機能を運用の流れで整理しました。
表示ミスを減らす
入力した情報をOBS表示へつなげ、手作業の転記や確認の負担を抑えます。
情報を再利用する
選手・チーム・プロフィールを登録し、当日の入力作業を減らします。
Solution
運営フローに沿って、入力から表示までをつなげる
大会前の登録、大会中の試合反映、配信画面への表示、会場案内までを一つの流れとして設計しました。
登録する
選手名、チーム、使用キャラ、プロフィールを事前にまとめます。
反映する
試合情報やスコアを運営画面から更新し、必要な表示へ送ります。
配信する
ブラウザソース（Webページを配信画面に重ねる機能のこと）としてOBSへ配置します。
案内する
会場表示で対戦台やフリー台の状態を参加者に伝えやすくします。
Key Features
主要機能
大会中に必要なスコア更新、選手情報、配信表示、会場案内をまとめて扱えます。 入力した情報を再利用し、確認作業と手入力の負担を減らすことを目指しました。
複数試合の点数、先取数、勝敗状態を一つの操作画面から更新します。
選手名、使用キャラ、プロフィール、チーム情報を登録して表示へ反映します。
配信台取得、試合反映、投稿文作成、会場表示送信を近い場所で扱えます。
外部大会情報やCSVを取り込み、手入力と確認作業を減らします。
Visual Output
配信用の表示を個別に出力
運営画面で入力した情報を、OBS向けの表示として切り出します。必要な表示だけを配置できるため、配信画面の確認がしやすくなります。
Technical Design
技術的に工夫した点
大会中に情報がずれないよう、入力・保存・OBS表示・会場表示・公開の役割を分けて設計しました。
Input
運営画面
スコア、選手、チーム、会場状態を運営者が更新
Store
JSON / CSV
現在状態をJSONに保存し、CSVから名簿を取り込み
Output
OBS表示
状態ファイルを参照し、必要な表示だけを出力
Share
会場表示
対戦台やフリー台の状態を会場向けに反映
状態をJSONで分けて保存
スコア、選手、プロフィール、会場表示を状態ファイルに分け、操作画面とOBS出力が同じ情報を参照できるようにしました。
APIの反映時間を検証
APIトークン入力後の取得から、試合反映、会場表示までの流れを測定し、確認待ちが増えにくい取得方法を探しました。
手動運用にも戻れる設計
API連携やCSV取り込みが使えない場面でも、手動入力で大会を止めずに進められる運用を残しました。
APIトークンへの配慮
ポートフォリオにはAPIトークンや実データを載せず、連携設定はアプリ内で入力します。公開用の情報と運用情報を分けました。
Design / Build Process
小さなカウンターから、実戦向けの運用ツールへ
配信用カウンター作成
大会中に必ず使うスコア表示と、OBSへ出すための表示を最初に形にしました。
選手・チーム・プロフィールへ拡張
試合ごとに必要な情報を登録し、配信表示へ反映できるようにしました。
外部連携と大会運用へ展開
API連携、CSV、X投稿文作成、会場表示など、当日の運用に近い機能を追加し、反映までの流れを検証しました。
不具合を切り分けて改善
AIも活用しながら、ログ、状態ファイル、画面表示、OBS出力を見比べ、原因を分けて確認しました。
Problem Solving
AIを使いながらも、 最後は自分で 原因を確認する
AIは、実装案の整理や修正方針の比較に活用しました。ただし、最終判断はAI任せにせず、ログ、状態ファイル、画面表示、OBS出力を自分で照合しました。
API連携の取得失敗、OBSプロフィールの表示崩れ、現在試合中の選手を優先する表示ロジックは、どの処理でずれているかを分けて確認しながら改善しました。
API連携の取得方法を検証
APIトークンを入力して取得する大会情報は、検索条件や取得順によって反映までの流れが変わるため、配信台取得、試合反映、会場表示までを測定しながら待ち時間が増えにくい形を探しました。
少ない現場テストで改善点を拾う
検証できる大会の機会が限られていたため、数少ない現場テストで意見を聞き、操作の迷いや確認負担が出た部分から優先して改善しました。
Technical Stack
使用技術と役割
Python
アプリ本体、起動処理、ローカルサーバー（PC内でWebページを配信する仕組みのこと）を担当し、操作画面とOBS用ページをPC内で扱えるようにしました。
HTML / CSS / JavaScript
操作画面、OBS表示、会場表示など、ブラウザで見る画面の構成と動きを担当し、入力内容が各表示へ反映される流れを作りました。
JSON / CSV
JSON（状態保存用データ形式のこと）で現在状態を保存し、CSVで選手名、チーム、プロフィール、使用キャラを取り込めるようにしました。
API連携 / 公開表示
APIトークンを入力して外部大会情報を取得し、必要に応じて会場表示を公開できます。取得失敗時も手動運用へ戻れることを意識しました。
Profile
現場の困りごとを、 使える仕組みに変える 開発者です。
未経験から開発を始めましたが、分からないことを調べ、AIも活用しながら、実際に動く大会運用ツールを作り切りました。機能を増やすだけでなく、運営者が大会中に迷わず使えることを大切にしています。
課題発見
大会運営で発生する手間や確認作業を、機能として整理しました。
継続改善
約1か月かけて、動作確認と修正を繰り返しながら完成度を上げました。
運用目線
作る側の都合ではなく、使う人が大会中に迷わないことを重視しました。
For Review
提出用の確認導線
公開時に確認してほしい情報をまとめ、提出先に合わせてURLや連絡先を差し替えられるようにします。
公開ページ
Cloudflare Pagesで公開後、このポートフォリオのURLを掲載します。
コード確認
公開してよい範囲を確認したうえで、GitHubリンクまたはコード抜粋を掲載します。
操作デモ
スコア変更、OBS表示反映、会場表示送信までの短い動画を追加予定です。
連絡先
就職活動用の名前、肩書き、連絡先は提出前に追記します。
Result / Learning
未経験から、現場で使える完成物へ。
Ecounter-v1の制作を通して、現場課題を見つけ、必要な機能に分解しながら改善を重ねました。 今後も、使う人の作業を理解し、実用性のあるツールを作れる開発者を目指しています。