はじめに
はじめまして！2025年度に新卒エンジニアとして株式会社レアゾンホールディングスに入社した、鈴木です。
私たちは2025年度の新卒全体研修で、様々な職種のメンバー（3〜4人）でチームを組み、生成AIのみを用いてWebで遊べるゲームを開発しました。この記事では、この研修でエンジニアとして何に取り組み、どのような学びを得たのかをお話しします！
プロダクト作成経緯とAI活用の方向性
私たちのチームはゲーム運営1名、デザイナー1名、エンジニア2名の計4名で構成されました。Webで遊べるゲーム開発にあたり、運営から以下の条件が提示されました。
- ゲームであること
- フロントエンドで完結して動作すること
- 使用技術はHTML、CSS、JavaScriptのみ
- 開発期間は5日間（アイデア出し、開発、発表を含む）
この限られた期間で「AIのみを用いて」という制約の中、私たちは1〜2日をアイデア出し、2〜3日を開発、残り1日を発表準備・発表に充てるスケジュールで進めました。
アイデア出しでは、全体23チームの中から印象に残るものを作るため、ブレーンストーミングを重ねました。当初は様々なアイデアが出ましたが、なかなか決め手に欠けました。そこで、以下のようなゲームの絶対に入れたい要素と対象を具体的に定義することにしました。
- 要素: 2Dゲーム、1人で遊べる、運要素、ユーザーの選択で勝敗が変わる
- 対象: 老若男女問わず楽しめる、操作が単純
これらを満たすジャンルとしてカードゲームが良いのではないかと気づきましたが、既存ゲームの模倣は避けたいと考えました。そこで、ゲーム運営メンバーの専門知識を活かし、全く新しいオリジナルカードゲームを作る方針を固めました。
開発前に、本当にゲームとして成立し、楽しいのかを確認するため、紙にカードを書いてチームで遊びました。この紙でのプロトタイピングは非常に重要で、ゲームが単調に終わってしまうという課題が浮き彫りになりました。そこで「アイテム」の概念を導入して駆け引きの要素を加えたり、カード枚数を見直したりすることで、ゲーム性を大幅に向上させることができました。
AIのみでの開発という制約は、企画段階から影響を与えました。複雑すぎるロジックはAIでの実装が難しいと判断し、シンプルなルールでありながら奥深さも持たせられるカードゲームを選択しました。エンジニアとしては、AIが生成しやすいように、各コンポーネントや機能の役割を明確に定義することを意識しました。
ゲームの仕様
私たちが開発したカードゲームの仕様は以下の通りです。
タイトル:「フォー・クリエイターズ」
コンセプト：勝利条件である4つの役職を揃える意味での「フォー・クリエイターズ（For Creators）」。また、「フォー（4）」を「For」とかけ、登場するクリエイター（カードやアイテム）たちの世界観を表現しました。
【ジャンル】
1対1のカードゲームバトル
【カードの種類】
- クリエイターカード（4種）
- ディレクター、プランナー、プログラマー、デザイナー
- 詳細：1つの役職につきポイントが1～4点まで割り振られています（役職4種 × ポイント1～4点 = 合計16枚）
- スキルカード（3種類）
- 展開を有利にするための強力なカード。1ターンにつき1枚使用可能（同じアイテムの複数回使用は不可）。
- リジェクト
- 効果：ポイント戦突入時、相手の手札の合計値を-3ポイント減少
- 名前の意味：相手のアイデアを「却下（リジェクト）」するイメージ。シャープで決定的な響きが、相手の計画を直接的に妨害する効果を表現します。
- ペルソナシフト
- 効果：自分の手札1枚の役職を好きな役職に変える
- 名前の意味：自分がほしい架空の役職（ペルソナ）に変える（シフト）
- 最終調整（テスター）
- 効果：ポイント戦突入時、自分の手札の合計値に+3ポイント追加
- 名前の意味：手札で揃えた役職でゲームを作るイメージであるため、テスターがゲームの品質を向上させるという意味。
【勝利条件】
- 手札に4つの役職（ディレクター、プランナー、プログラマー、デザイナー）が全て揃えられた時点で勝利。
- 6ターン以内に役が揃わなかった場合、手札3枚の合計値の高い方が勝利。
【コンセプト】
-
手札を揃える（4つの役職カードをそれぞれ1枚ずつ持つ）
意味：1つのゲームを完成させるイメージ。役職が揃うと高品質のゲームが完成します。 - 揃わずターン（制作期限）がすぎると、ポイントの合計値がゲームの品質に直結する
【ゲームの進行】
- シャッフルした山札16枚から、互いにクリエイターズカード3枚ずつ、スキルカード3種類から1枚ずつランダムで配られます。
- ランダムで先攻、後攻を決めゲームスタート。
- （先行ターン）山札から1枚取って手札に加え、手札4枚の中から1枚伏せて墓地に捨てます。その後、スキルを1つ使用できます（しなくても良い）。
- （後攻ターン）3．と同じ流れを行います。
- これを互いに3回ずつ（計6ターン）行います。
生成AIとの格闘！プロンプトコーディングの舞台裏
ここが今回の開発で最も試行錯誤を重ねた部分です。ゲームの特性上、ゲーム全体をコントロールするマネージャー的なロジックが必要になります。
まず、プロンプトコーディングを始めるにあたり、ゲームの概要をAIに正確に理解してもらうことから始めました。今回のゲームの仕様を大まかに伝え、カードゲームであること、ターン制であることなどを具体的に記述しました。
プロンプトコーディングで最も意識したのは、初めから複雑な仕様をプロンプトに流し込まないことです。最初はHTMLの骨格やCSSの基本的なスタイルなど、シンプルな部分からGeminiに生成させ、その後にJavaScriptのロジックを段階的に追加していくアプローチを取りました。
しかし、Geminiの出力にはいくつかの制約がありました。一度に大きなプロンプトを投げると、出力時間の制限にかかったり、コード出力に制限があったりしました。また、一度プロンプトを入力して生成してもらうまでに5分以上かかることもあり、毎回プロンプトを投げるたびに大幅な時間ロスが発生することに気づきました。
そこで私たちは、ファイルを機能ごとに分割して生成させる戦略を採用しました。例えば、HTML、CSS、JavaScriptをそれぞれ別のプロンプトで生成させたり、JavaScriptの中でも「カードの配布ロジック」「ターン管理ロジック」「UI更新ロジック」のように機能を細分化してプロンプトを投げました。これにより、以下のメリットが得られました。
- 出力時間の短縮: 小さな単位でプロンプトを投げることで、AIの応答時間が短縮されました。
- コードの管理性の向上: 生成されたコードが機能ごとに分かれているため、全体像を把握しやすくなりました。
- 再生成の効率化: 特定の機能に問題があった場合、その部分のプロンプトを調整してAIに再生成させればよいため、全体の開発効率が向上しました。
生成されたコードは、必ずしも一発で完璧に動作するわけではありません。意図しないロジックや、特定のHTML要素に依存した記述などが見受けられました。しかし、今回のプロジェクトではコードに人間が直接手を加えることができないため、問題が見つかった場合は、その解決策や修正指示をプロンプトとしてGeminiに渡し、Geminiにデバッグや修正を行わせるという徹底したAI中心のアプローチをしました。
例えば、以下のような具体的な対話を通じて開発を進めました。
- 初期レイアウト作成: Figmaで作成したレイアウト画像をGeminiに提示し、HTML、CSS、JavaScriptでの実装を依頼しました。
- レイアウト調整とインタラクション追加: 生成されたレイアウトのカードサイズ変更や、カードクリックでCPUがランダムにカードを選択するターン制の導入など、細かな調整を依頼しました。
- 不具合発生時の対応: 「カードが表示されない」「CPUの手札が公開されない」といった不具合が発生した際は、スクリーンショットやエラーログをGeminiに共有し、原因調査と修正を依頼しました。場合によっては、Geminiが原因を特定できない場合に「一旦原因となっているコードについてログを吐くように指示」し、そのログをもとにさらに具体的に原因に言及しながら対話を続けました。
- コード提示方針の指定: 長大なコードを生成させる際には、「今後提示するコードは、省略せずにすべて記述してほしい」と明確に指示を出し、完全なコードを得るよう努めました。
- ゲームルールの追加・実装: 山札の導入、ドロー・捨てる動作、カードの種類と点数設定、勝利条件の実装など、複雑なゲームルールも仕様書に沿って段階的にプロンプトに投入し、コーディングを依頼しました。
- 機能追加と仕様変更: 「Bo3形式の導入」「タイトル画面の実装」「CPUの難易度別思考ロジック」「アイテム機能（リジェクト、ペルソナシフト、最終調整）の追加」など、多岐にわたる機能追加や仕様変更も、Geminiとの対話を通じて実現しました。特に仕様変更を行う際は、既存機能をどのように変更するのかを鮮明に記述することで、ある程度の変更にも対応させることができました。
- デザイン要素の生成: ゲーム内のカード画像や背景画像、UIパーツなど、デザインに関する画像は全てGeminiに生成してもらったもののみを利用しました。カード裏面のデザイン変更や、カードに画像を表示しサイズを調整するといった要望も、プロンプトで具体的に伝えることで実現しました。
- 大規模なコード分割: 長大になったscript.jsファイルを、config.js, dom.js, state.jsなど機能ごとに10以上のファイルに分割するよう依頼しました。分割後に発生した依存関係のエラー（例: CARD_TYPES is not defined）も、エラーメッセージと状況を伝えてGeminiに修正を依頼し、index.htmlでのスクリプト読み込み順序の調整などで解決を図りました。
短期間の開発において、生成AIは初期の骨組みや定型的なコードの生成には非常に有効でしたが、ゲームの核となる複雑なロジックや、細かなUI/UXの調整においては、やはりAIへの明確な指示出しと、その結果を評価する人間の役割が極めて重要であることを痛感しました。
今回、Geminiのみを利用して開発を進めましたが、ファイル分割と相性が悪く、複雑な仕様を実現するには限界も感じました。しかし、これはGemini単体での活用における一つの学びです。もしCursorのようなAIコーディング支援ツールを併用していれば、より複雑な仕様も効率的に実現できたかもしれません。
ゲーム画面
試行錯誤の末、最終的に画像のようなWebで動作するゲームを作成することができました！
タイトル画面
タイトル画面では、タイトル表示、ルール確認、CPUの難易度設定、そして勝利条件の選択が可能です。これにより、初めてプレイする方でもゲームの概要を把握しやすく、自分に合った難易度で楽しめるように工夫しました。
ゲーム画面
ゲーム画面には、山札、墓地、ユーザーの手札、CPUの手札、そしてアイテム（スキルカード）が配置されています。ヘッダー部分には、ユーザーとCPUの現在までの勝利数、現在のターンとラウンド、そしてプレイ中にいつでもルールを確認できるボタンを配置しました。
ゲームガイドページ
こだわったポイント
- 独自のゲーム性への配慮: 「フォー・クリエイターズ」はオリジナルゲームであるため、プレイヤーが何をすべきか迷わないように、視覚的なガイドと明確な情報表示にこだわりました。誰でもスムーズに遊べるようことを目指しました。
- AI生成デザインの活用: ゲーム内のUI要素やカードの見た目など、デザインに関する画像は全てGeminiに生成を依頼し、プロンプトでの調整を通じてゲームの世界観に合ったビジュアルを実現しました。
- シンプルさと拡張性: 生成AIでの開発効率を考慮し、初期はシンプルなUIとゲームロジックに限定しましたが、将来的には機能を追加しやすいようなコード構造を意識しました。
生成AIだけでここまでできるのか、と私たち自身も驚くほどの成果を出すことができました。
研修を終えて見えた生成AI開発の可能性と課題
今回の新卒研修を通じ、生成AIを用いたプロダクト開発の可能性と課題を肌で感じることができました。
【可能性】
- 開発スピードの向上: 特に初期のHTMLやCSSの骨組み、基本的なJavaScriptの関数などは、プロンプト一つで瞬時に生成され、開発の立ち上げが格段に速くなると感じました。
- アイデアの具現化: プロンプトの工夫次第で、抽象的なアイデアを具体的なコードとして短時間で試すことができ、プロトタイピングのサイクルを加速できます。
- 学習ツールとしての側面: AIが生成したコードを読むことで、新たな記法や効率的な実装方法を学ぶ機会にもなりました。
【課題】
- 意図通りのコード生成の難しさ: 特に複雑なロジックや、特定のフレームワークに依存しないピュアなJavaScriptでのゲーム開発においては、AIに完全に意図通りのコードを生成させるのは非常に困難でした。
- デバッグと品質保証の難易度: 生成されたコードのバグや非効率な記述を特定し、それをAIに修正させるための適切なプロンプトを作成するスキルが求められます。AIとの対話を通じたデバッグは、通常の開発とは異なる難しさがありました。
- 環境構築の制約: 今回はWebブラウザで完結するゲームだったため大きな問題にはなりませんでしたが、より複雑なシステム開発においては、AIだけでは環境構築や依存関係の解決が難しい場面も出てくると感じました。
今後もAI技術の進化に注目し、それを自身のエンジニアリングスキルと融合させることで、より価値の高いプロダクト開発に貢献していきたいと考えています。
▼採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。