こんにちは、"誰かがこう呼ぶソロメイカー"です🙌

今回は、少し変わった金融エンタメWebアプリを作ってみました。

その名も、

日本株代表イレブン ⚽📈

ざっくり言うと、

> 日本株11銘柄をサッカー日本代表のスタメンに見立てて、自分だけの「○○ジャパン」を作るアプリ

です。

公開URLはこちらです👇

https://nihon-kabu-eleven.vercel.app/

---

作ったもの ⚽

日本株代表イレブンは、日本株をサッカーの代表チームのように編成するWebアプリです。

通常の株アプリのように、

買う💰
売る📉
証券口座と連携する🏦

というものではありません。

あくまで、

> 日本株を題材にしたチーム編成ゲーム 🎮

として作っています。

ユーザーは日本株から11銘柄を選び、それぞれにポジションを割り当てます。

たとえばこんな感じです👇

FW：値上がり期待・成長性 🚀
MF：収益力・バランス ⚖️
DF：安定性・下落耐性 🛡️
GK：財務健全性・最後の砦 🧤

株なのにサッカー。

でも、実際に画面にしてみると、思った以上にしっくりきました。

---

なぜ作ったのか 🤔

もともと私は、投資系アプリとして「売り時くん」を作っています。

売り時くんは、相場の過熱感を見て、

> 今は売り時なのか？

を考えるためのツールです。

一方で、投資の話はどうしても真面目になりがちです。

リターン
リスク
移動平均
RSI
バックテスト

こういう要素はもちろん大事です。

ただ、投資に慣れていない人にとっては、少し重い😅

そこで今回は、もっと軽く遊べる形にしたいと思いました。

> 自分なら日本株代表にどの11銘柄を選ぶか？⚽📈

こういう切り口なら、投資の話をゲームっぽく楽しめるのではないかと考えました。

---

コンセプト 💡

テーマはシンプルです。

日本株 × サッカー代表 × チーム編成 🇯🇵⚽📈

です。

たとえば、

トヨタを守備の中心に置く🚗🛡️
ソフトバンクGをFWにする🚀
半導体銘柄で攻める💽⚡
銀行株をDFに置く🏦🛡️
財務の強い銘柄をGKにする🧤

というように、銘柄の特徴をポジションに置き換えて楽しみます。

もちろん、これは投資助言ではありません。

特定の銘柄の購入をすすめるものでもありません。

あくまで、株式市場を題材にしたエンタメアプリです🎮

---

できること ✅

現時点では、以下のような機能を実装しています。

日本株11銘柄の選抜⚽
FW / MF / DF / GK のポジション設定
フォーメーション選択
チーム名の入力
「ジャパン」「イレブン」「FC」などの呼称選択🇯🇵
銘柄検索🔍
ベンチ入りメンバー表示
選抜済み銘柄を外す機能
実データ確認📊
エントリー保存
エントリー取り消し
再エントリー
参加チームランキング表示🏆

最初は、ただ11銘柄を並べるだけの簡単な画面でした。

そこから少しずつ、

サッカーっぽいピッチ表示⚽
フォーメーション模式図
電光掲示板風の大会情報✨
下側のチーム編成UI
実データ確認の折りたたみ📂

などを追加していきました。

だんだん「アプリっぽく」なってきています。

---

対応フォーメーション 🧩

現在は、以下の8種類のフォーメーションに対応しています。

4-3-3
4-2-3-1
4-4-2
3-5-2
3-4-3
5-3-2
3-4-2-1
5-4-1

最初は4-3-3だけで十分かなと思っていました。

ただ、いくつかフォーメーションを増やしてみると、見た目の印象がかなり変わりました。

攻撃的なチームなのか🚀

守備的なチームなのか🛡️

バランス型なのか⚖️

株のポートフォリオなのに、サッカーの戦術っぽく見えてくるのが面白いところです。

---

技術構成 🛠️

技術構成は以下です。

React
TypeScript
Vite
Vercel
FastAPI
Render
Supabase

フロントエンドは React / TypeScript / Vite です。

バックエンドは FastAPI で作り、Render にデプロイしています。

エントリー情報などは Supabase を使っています。

まずはWebアプリとして公開し、反応を見ながら改善していく方針です🚀

---

AIと一緒に作っている 🤖

今回も、かなりAIに手伝ってもらいながら作っています。

いわゆるバイブコーディングです。

ただ、今回あらためて感じたのは、

> AIに任せれば全部うまくいくわけではない😇

ということです。

特にUI修正は、かなり慎重にやる必要がありました。

実際に、

中央ピッチを触りたくないのに別の場所を触ってしまう
左側の模式図だけ直したいのに中央ピッチまで変わる
DOM後付けの処理で画面が真っ白になる😱
検索中に別セクションが消える

といったトラブルもありました。

AIは強力ですが、指示が曖昧だと普通に壊します。

なので途中からは、

> どのセクションを触るのか

をかなり明確にするようにしました。

中央ピッチなのか。

左のフォーメーション模式図なのか。

下側のチーム編成UIなのか。

APIなのか。

CSSだけなのか。

React本体を触るのか。

ここを切り分けるだけで、かなり安全に進められるようになりました。

これは個人開発でAIを使ううえで、かなり大事な学びでした📝

---

まだ試作段階です 🚧

まだ完成版ではありません。

特に改善したいところは、こんな感じです。

スマホ表示の最適化📱
ランキングの実データ化🏆
大会一覧ページの作成
チーム詳細ページ
SNS共有用画像の生成🖼️
チーム診断ロジックの強化
銘柄検索の改善🔍
UIの整理

今はまだMVPです。

ただ、エントリー保存・取り消し・再エントリーまで一通り動くようになったので、いったん公開してみることにしました。

---

今後やりたいこと 🚀

今後は、大会機能をもう少しゲームっぽくしていきたいです。

たとえば、

大会ごとに締切を設定する
参加者が11銘柄を選んでエントリーする
一定期間後のリターンで順位を出す
「○○ジャパン」としてランキング表示する🏆

という流れです。

また、SNSで共有しやすいように、

> 自分の日本株代表イレブン画像 ⚽📈

を生成できるようにしたいです。

これはかなり相性が良い気がしています。

---

おわりに 🙌

日本株代表イレブンは、投資アプリではありません。

日本株を使ったチーム編成ゲームです⚽📈

投資をもっと軽く、楽しく、話題にしやすくする。

そんな方向で育てていきたいと思っています。

まだ試作版ですが、よければ触ってみてください👇