3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ClaudeCode×仕様駆動開発でピンク♡なボードゲームを作ってみた

Last updated at Posted at 2025-12-20

この記事はクソアプリ Advent Calendar 2025の20日目の記事です!
開発したアプリケーションはこちらからダウンロードできます!(iPhoneのみ)

はじめに

どうも!ツバサと申します。これがQiita初投稿です!
面白そうなアドベントカレンダーがあり、皆さんに僕の作ったアプリをプレイしてもらえればと思い投稿しています!
普段は渋谷の会社でWEBエンジニアをしており、社内アプリケーションをメインで開発しています。
今回は普段の業務とは違った、Flutter/Dartを使用したネイティブアプリを仕様駆動開発で作ったのでご紹介いたします。

※一部下ネタを含みますので、苦手な方はご注意ください。

開発の経緯

せっかくAIで楽にアプリを作れるのだから、みんなに楽しんでもらえそうなのはどのジャンルだ...と考えた時に思い浮かんだのが、「エロ」×「ボードゲーム」でした。
友人にもこのビジョン(笑)に共感してくれる人がいて、ナレッジをシェアしつつ何個か作ろうぜ!というので開発をスタートさせました。
その中でクソアプリアドベントカレンダーにも載せようと思い立ち、12/17にリリースしたのが今回紹介するアプリです。

使用技術、下準備について

FE:Dart(Flutter)
FEのみの超軽量アプリケーションです。
ボードゲームは基本的に1台のスマートフォンを使ってリアルな場で行うことを想定しており、オフラインでできる&セーブなどは想定していないため基本的にデータを永続化する必要もありません。

AppStoreに公開するにあたっては「Apple Developer Program」に参加する必要があり、2025年現在で年間99ドルが必要です。
GooglePlayは、金額自体は安いのですが、テストプレイのハードルが高く今回は一旦断念しています。

AI:Claude Code
最低でもProプランに加入する必要があり、それが月額20ドルになります。
所属している会社がありがたいことに、福利厚生として月間15,000円までAI個人利用を補助してくれるので、私はClaud Code Max(5x)プランを契約しました。
エディタはcursorを使用しており、ソースコードの補完などもしてくれます。

使用したAI系ライブラリなど

cc-sdd
仕様駆動開発(spec-driven development)をするために必要なツールです。
オープンソースでkiro式を使い、簡単に仕様駆動開発ができます。

frontend-design
Claude Codeのプラグインで、イメージしている雰囲気を言葉で伝えることによりそれっぽく実装してくれます。
使用しましたが、かなり自分のイメージに近いものを作ってくれたので良かったです。

作るゲームについて

今回はお題がありそのテーマに沿って参加者が演技をし、そのほかの参加者がどのお題の演技をしたか当てるというゲームを作りました。
(某ボードゲームのシステムをオマージュしています)

全てのお題は「ピンク」なお題になっており、飲み会や友達との旅行で楽しめるようにと設計しています。

開発手順

下記で、cc-sddをインストールできます。

npx cc-sdd@latest --lang ja

詳細なやり方はこちらの記事を参考にしているので、ご覧ください。

仕様駆動開発をするにあたって、まずはある程度要件を定めておきます。
ゲームの概要はこうで、流れはこうで、技術スタックはこうで、画面はこんなのを作りたいといった感じです。

Flutterで「あんっ♡とイって」というパーティーゲームアプリを新規作成してください。

【ゲーム概要】
3〜8人のプレイヤーが1台のスマホを回して遊ぶオフラインゲーム。
お題(例:「わ!」)と番号(1〜8)に沿って演技し、他プレイヤーがそれを当てる。

【技術要件】
- Flutter (Dart)
- iOS専用
- バックエンド不要(完全オフライン、1端末完結)
- 認証不要
- 状態管理: Riverpod
~~~~~~

完全新規であったので、上記プロンプトを用いて、cc-sddに仕様を作成してもらいます。

/kiro:spec-init "プロンプト"

仕様を作ってもらう→要件定義してもらう→タスク分解してもらう→タスクを一つずつ実行してもらう→完成という流れです。
cc-sddは詳細なタスクをtask.mdで出力してくれて、それをこちらで手を加えつつ細かく実装してくれるので、通常のバイブコーディングより正確性が遥かに高いです。

分割されたタスク例

## タスク一覧

- [x] 1. プロジェクトセットアップと基盤構築
- [x] 1.1 Flutterプロジェクトの依存関係を設定する
  - pubspec.yamlにflutter_riverpod、google_fonts、confetti、freezed、build_runnerを追加
  - iOS専用の設定を確認(Android設定を無効化)
  - 必要なアセットフォルダ構造を作成
  - _Requirements: 12.1, 12.2, 12.3, 12.4_

- [x] 1.2 (P) デザインシステム(テーマ)を実装する
  - パステルカラー(ピンク、イエロー、ミント)のカラーパレットを定義
  - Zen Maru Gothicフォントを使用したタイポグラフィスタイルを作成
  - 角丸とスペーシングの定数を定義
  - グラデーション背景の設定を追加
  - _Requirements: 11.1, 11.2, 11.3_

- [x] 1.3 (P) ドメインモデルを実装する
  - Playerモデル(ID、名前、割り当て番号、スコア)を作成
  - Questionモデル(ID、タイトル、シチュエーションリスト)を作成
  - Situationモデル(番号、説明)を作成
  - GameStateモデル(ラウンド情報、フェーズ、投票リスト)を作成
  - Voteモデル(投票者、対象者、推測番号)を作成
  - GamePhase列挙型を定義
  - freezedによるイミュータブル化とコード生成を実行
  - _Requirements: 1.5, 3.4, 4.6, 5.6_

- [x] 2. 状態管理(Provider)の実装
- [x] 2.1 PlayersProviderを実装する
  - プレイヤーリストの状態管理機能を作成
  - プレイヤー数の設定機能(3〜8人の制約付き)を実装
  - プレイヤー名の更新機能を実装
  - 番号のシャッフル割り当て機能を実装
  - プレイヤーリストのクリア機能を実装
  - _Requirements: 1.1, 1.2, 1.3, 1.4, 1.5, 4.6_

上記を実行してもらうだけでアプリが完成します!
frontend-designを使用して指定したデザインに則るようにプロンプトでお願いしているのでかなりイメージに近いデザインで完成しました。

※ダウンロードはこちら→https://x.gd/58scz

当然、AIは完璧でないのでエラー等も発生しましたが、エラーメッセージと共に修正を依頼すれば一発で治ります。

お題もClaude君と一緒にたくさん考えました

image.png
ちょっと「?」ってのもありますが人の気持ちも理解しつつありますな...

手動でソースを変えてももちろんOK

image.png
cursorよ...そんなことまで予測するんかい...

できた!でもまだ終わらない戦い

初めてのApp Store Connectとの格闘
・プライバシーポリシーや問い合わせ先の設定
・プレビュー画像、アイコン画像の作成
・広告の設定
・概要欄の記入
などなど...
審査も細々としたものを小出しで指摘してくるので、開発は数時間程度で終わったものの、そこからリリースまでは3~4日かかっています...

アプリを開発して

今回開発したアプリケーションはこちらで公開していますのでぜひ遊んでいただけると嬉しいです!

AIで自分の専門領域ではないネイティブアプリの敷居も数段下がったように思えます。
なので、実装力を重視せずともアイデア次第でいくらでもいいものが作れるなと思えます。
僕はエンジニアの端くれで多少なりとも知識があるので、そのメリットが活かせるうちに
(クソ)アプリケーションをたくさん世に出したいなと思いました!

3
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?