はじめに
プログラミングの経験はゼロ。HTMLとCSSの違いもあやしいレベル。
そんな自分が、ライブの本番前に友達と盛り上がるための「セトリ予想ビンゴ」アプリを作って、実際に公開・運用するところまでこぎつけました。
使ったのはClaude(Anthropic社のAI)だけ。コードは一行も自分では書いていません。書いたのは、日本語での指示と、動作確認のスクリーンショットだけ！
この記事では、何を作ったか・どう進めたか・非エンジニアなりに気をつけたことを、実際のやり取りを振り返りながらまとめます。「AIでアプリを作ってみたいけど、自分にできるのか分からない」という人の参考になればうれしいです。
作ったもの
セトリ予想ビンゴというWebアプリ。
- 🔗 公開URL: https://38d95ltszs.github.io/setlist-bingo/
- 🔗 リポジトリ: https://github.com/38d95ltszs/setlist-bingo
(実際に触れる状態で公開しているので、雰囲気だけでも見てもらえると嬉しいです。コードも全部公開しているので、「AIだけでどこまで書けるのか」が気になる人は覗いてみてほしいです！)
- ライブのセットリスト(何の曲がどの順で演奏されるか)を、5×5→最終的には3×3のビンゴカードに予想して書き込む
- 縦・横・斜めのラインに「ジュエル」を賭ける(ライン難易度に応じて倍率が変わる。最高倍率は765倍)
- 担当アイドルを選ぶと、その曲がビンゴラインに含まれていたときにスコアが2倍
- ライブ後、運営が正解のセットリストを登録すると、参加者全員が自動採点される
- 「流行」タブでみんなの予想傾向(人気の曲・担当アイドルランキングなど)が見られる
- 結果はXにシェアできる画像として生成できる
技術構成は、フロントエンドがHTML/CSS/JavaScriptの単一ファイル(ビルド不要、GitHub Pagesでそのまま公開)、バックエンドがSupabase(認証・DB)。サーバーは一切自分で立てていません。
なぜ作ったか
きっかけは単純で、「友達内でライブ前にセトリ予想して盛り上がりたいけど、いいツールがなかった」から。
最初は紙とペンでビンゴを作るくらいの気持ちでしたが、「これWebアプリにできたら面白くない?」と思いつき、Claudeに相談してみたのが始まり。
どう進めたか
最初の一歩: ルールを言葉で説明するだけ
最初にやったのは、ビンゴのルールを日本語で説明することだけでした。「5×5のマスに曲を予想して書き込む」「縦横斜めが揃ったらBINGO」「中央はFREEマス」といった、ゲームのルールを箇条書きで伝えると、Claudeが具体的な実装方針・DB設計・画面構成まで一気に提案してくれました。
自分がやったのは、その提案を見て「これはいいね」「ここは違う」と反応することだけ。設計そのものは分からなくても、「できあがったものが自分のイメージと合っているか」は判断できる。この往復が、この開発の基本スタイルでした。
途中で仕様が何度もひっくり返った
作りながら「これ、思ったより難しすぎるかも」と気づくことが何度もありました。
- 最初は5×5(25マス)のビンゴだったが、当てるのが難しすぎて誰も本気で予想してくれなさそうだったので、3×3(9マス)に縮小
- ベットのライン数も12本→8本に整理し、さらに「個別に賭ける」から「マスター/プロ/レギュラーの3択」に簡略化
- 「前半の曲は前半のマスに」「後半の曲は後半のマスに」という凝ったルールも、実際に期待値を計算してもらったら難易度が高すぎることが分かり、撤廃した
面白かったのは、こういう「これ面白いのかな?」という疑問に対して、Claudeが実際にシミュレーションコードを書いて、期待値やBINGO成立確率を数字で出してくれたこと。感覚だけでなく数字で「これは辛すぎる」「これくらいがちょうどいい」と判断できたのは、自分一人では絶対にできなかったことだと思います。
遊び心の部分も一緒に考えてくれた
最高倍率のラインをただの「×15」にするか迷っていたとき、「ロマン枠にしたい」と伝えたら期待値計算をしてくれた上で、最終的に「765倍」という、アイドルマスターファンならニヤッとする数字に落ち着いた。こういう細かい遊び心の部分まで一緒に考えてくれたのは嬉しかったです。
スクリーンショットが命綱だった
コードは読めないので、動作確認は基本的に実機のスクリーンショットを見せることでやっていた。「ここの文字が重なってる」「ボタンの位置がおかしい」とスクショを送ると、原因を特定して直してくれる。iPhone特有の癖(自動ズーム、パスワード自動入力の不具合など)も、症状を伝えるだけで「これはiOSのこの仕様が原因」と説明した上で直してくれました。
知人からのセキュリティ指摘
公開後、知人(詳しい人らしい)から「変なSQLが発行されそう」「HTMLは書き換えられるから、その前提で大丈夫か見た方がいい」という指摘をもらいました。これを丸ごとClaudeに伝えたところ、実際にデータベースの権限設定を1つずつ見直してくれて、「大会作成の権限が、見た目上はボタンを隠しているだけで、実際は誰でも作成できてしまう」という本物の穴を見つけて直してくれました。
自分では気づけなかったし、指摘してくれた知人もえらいが、指摘を受けて実際に監査して修正までできたのも大きかった。「専門知識がない人間が一人で作った」という状態でも、こうやって第三者のレビューを挟んで改善していけるのは、AI開発ならではの安心材料だと思います。
非エンジニアなりに気をつけたこと
- 仕組みを理解しようとしすぎない。「なぜこのコードで動くのか」を全部理解しようとすると心が折れる。「動くか」「自分の意図通りか」だけを確認する
- 画面のスクリーンショットを積極的に使う。文章だけで説明するより、圧倒的に伝わりが早い
- 「なんとなく変」を我慢しない。理由が説明できなくても、違和感があれば都度伝える。実際、感覚的な指摘から重要なバグが見つかったことも多い
- セキュリティなど、自分の理解が及ばない部分は人に頼る。今回のように、詳しい知人からの指摘を素直に伝えるだけでも、大きな改善につながった
おわりに
コードは1行も書いていないが、「セトリ予想ビンゴ」というアプリはちゃんと友達内で運用できるところまで仕上がった。もちろん、全てを理解した上で作ったわけではないし、細かい実装の妥当性を自分で保証することはできない。それでも、「作りたいものを言葉にできれば、形にできる」というのは、今のAIが実際に到達しているラインなんだと実感しました。
同じように「プログラミングはできないけど、作りたいものがある」という人に、この記事が何かのきっかけになれば嬉しいです。