見出し画像

eスポーツダッシュボード「NEXUS Championship 2025」を開発・公開しました。

eスポーツダッシュボード「NEXUS Championship 2025」を開発・公開しました。
Claude Opus 4.6とarena.aiのサンプルプロンプトを利用して開発しました。

所感

ほぼプロンプト一発で、動画のような美しいモダンなデザインのVALORANT用のダッシュボードを作成してくれました。
Claude Opus 4.6はデザインセンスも非常に高い印象です。
「配信中」の赤いマーカーのパルスアニメーションなど、指示していない細かい機能まで実装してくれて素晴らしいと感じます。
現在は静的なテストデータを表示しているのみですが、リアルタイムデータ連携機能などを実装すれば、十分実用的になりそうです。
eスポーツやダッシュボード関連の知識も深まり、とても有意義でした。

本ダッシュボードの主な特徴

統計バー

上部に賞金総額、ライブ視聴者数(パルスアニメーション付き)、試合進行状況、ピーク視聴者数の4つの指標をカード形式で表示します。

ダッシュボード概要

試合結果

各試合の詳細情報(チーム、スコア、ラウンド別モメンタムチャート)をカード形式で表示します。

スケジュール

時系列で試合を表示し、ライブ試合は赤いパルスで、完了試合は緑で表示します。

トーナメント表

8チームのシングルエリミネーション形式のトーナメント表です。
各スロットにチームロゴ、タグ、地域、スコアを表示します。
下部にライブ・完了試合のミニモメンタムバーを表示します。

チーム分析

チームランキング

勝率順のソート済みランキング表です。勝率バー、地域フラグ、順位バッジ(金・銀・銅)、敗退済みチームの「敗退」タグが表示されます。

チーム比較

2チームを6つのステータス(攻撃力・防御力・戦略性・チームワーク・操作技術・マップ制圧力)で比較するインタラクティブなSVGレーダーチャートとなります。

動画タイムライン

  • 0:00-0:15: 本ダッシュボードのデモ画面

  • 0:00-0:03: ダッシュボード概要画面

  • 0:04-0:10: トーナメント表画面

  • 0:11-0:15: チーム分析画面

使用技術

開発ツール

Build Apps and Websites (arena.ai)

使用モデル

  • Claude Opus 4.6 Thinking(メインで使用)

  • Claude Opus 4.6(サブで使用)

使用したサンプルプロンプト

Build an esports tournament dashboard with live bracket view, match cards with momentum charts, team comparison radar, and schedule timeline. Pre-loaded with sample tournament.
(ライブトーナメント表、モメンタムチャート付き対戦カード、チーム比較レーダー、スケジュールタイムラインを備えたeスポーツトーナメントダッシュボードを構築。サンプルトーナメントを事前搭載)

関連URL

タグ

#esports
#dashboard
#ClaudeOpus4.6
#arena.ai
#VibeCoding
#Game
#VALORANT
#WebDev

いいなと思ったら応援しよう!