はじめに
こんにちは、アプリケーションチームの小沼、大市です。 今回はAWSのキャンペーンイベントの「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」に挑戦してみました。
今回のキャンペーンの要件には、
Step 3 : Amazon Q CLI とのチャットセッションを開始し、チャット内のプロンプトだけでゲームを作成しましょう。
とあったため、コードを直接書かずにAmazon QとのVibeCoding を実践してきました。
キャンペーンの題材となっているのは、作ったことのない「ゲーム」の分野です。 私たちが未開拓の分野にどのように立ち向かったのかをご紹介します。
作成したゲーム
作成したゲームは、AWSのサービスをテーマにした横スクロールアクションゲーム「ばんにゃのAWS冒険」です。 プレイヤーはMOTEXのマスコットキャラクターである「ばんにゃ」を操作し、AWSサービスのアイテムを集めながら、敵を避けて進みます。 難易度は、「EASY」「NORMAL」「HARD」の3段階です。難易度を選択するとゲームが始まります。 壁や特定の障害物に当たるとゲームオーバーになり、スコアが決まります。スコアが高ければランキングに登録も可能です！
作成の様子
初めての VibeCoding ということで、どのようなプロンプトを渡すと良さそうかを二人で試行錯誤しながら取り組みました。 そのうえで、ゲームの作成は想像以上のスピードで仕上がりました。それぞれどんなペースで、どういうやり取りがあったかお伝えします。
ベースの要件定義 ( 10 分 )
普段、プライベートでゲームをすることはありますが、作ったことなんてありません。
「これくらい決まっていれば良さそうか？」くらいのざっくりとした仕様をマークダウンで仕上げます
q chat を実行し、/editorでvimモードにしたあと、ひたすら要件を伝えます
# タイトル AWS のサービスで自社サービスを強化して、売上(スコア)の向上を目指すゲーム ## 概要 - 猫の横スクロールゲーム - アイテム収集要素もある ## 機能要件 ### ゲームモード - 下記の難易度がある - EASY - NORMAL - HARD ### ゲームの流れ 1. タイトル画面 2. ゲーム画面 3. ランキング画面 ### ゲーム中の仕様 略
Qと壁打ちして要件を詰める ( 30 分 )
ここからVibeCodingが始まります。 まずは、要件の整備です。
もう少し詰めたほうがいいところありますか？
と聞いてみます。 そうすると、いくつかの確認だったり、新しく「これ必要なんじゃない？」という提案も行ってくれました。 この時点で、未開拓の分野に挑戦する際のフォローを実感できています。
ゲームの要件を見たよ！猫の横スクロールゲームでAWSサービスのアイテム収集要素があるんだね。もう少し詰めたほうがいいところをいくつか提案するね： 1. アイテム強化内容の具体化 略 4. ゲームの進行度 ゴールまでの距離や目標は？無限スクロール？ステージ制？ 6. サウンド要素 BGMやSE（効果音）の方針 10. チュートリアル 初心者向けの操作説明や遊び方ガイド
要件整備は、何回かの質問を繰り返すことで固まりました。 開発着手前の要件を詰める時間ですが、ここまで約30分です。Qを使うことによる作業効率化を実感しています。
作成 ( 10 分 )
作成は一言、「作って」で終わります。要件については前のやり取りで理解してもらっているので、ここでは細かい指示にしていません。 約10分で作成が終わります。 ただ、1回の生成での完成とまでは行きませんでした。
初回の生成は上記のようなゲームとなり、
- 文字化け
- クリア不可能な壁の配置
- AWSアイコンが使えていない
という課題点が見えてきました。
修正と要望出し ( 2 時間 )
ここからは、成果物を実際にプレイしながらQに指示を出していきます。
/editor を使いながら、追加の要望を並べていきました。
- 文字化けして□がたくさん表示されてるので、日本語が表示できるようにして - ゲーム中の画面のスコア表示が、背景の色と重なって見えなくなちゃってる。色変えて - 背景描画に雲も欲しい - アイテムや敵が、ジャンプで届かない範囲に生成されてる。アイテムや敵の生成範囲をジャンプで届く範囲にして - 地面に穴が空いたり、壁があるようにしてほしい。落ちたり、壁に接触でもゲームオーバー。 - AWSのアイコンは、AWS公式のアイコンを使うようにして
自分のイメージを言葉で伝えるのがなかなか難しかったですが、2時間ほどで要件に定めた動きを実装することができました。
苦戦ポイント
日本語表示の文字化け
最初の実装段階では、日本語が文字化けで◻︎が並び、何が書いてあるのかよく分からない状態となっていました。「文字化けしているから直して」といってもなかなか直らず...。 「このPCで使えるフォント確認して、ゲームでそのフォントを使うようにして」とお願いすることでようやく日本語がちゃんと表示されるようになりました。 AIに指示をする際には、「いい感じにして」のような指示ではなく、「◯◯を使って」とのような指示が必要という良い気付きになりました。
AWSアイコンの生成
AWSのアイコンとお願いしても、Q だけではどうにもならず、アイコン画像を用意してそれを使ってもらうことでひとまず解決としました。
要件の実装漏れ
要件として「サウンド」や「チュートリアル画面」をQに伝えましたが、初期実装には含まれておりませんでした。 追加要望を出すと、実装してくれたため、一度に多くの指示をしたことが原因だったのかもしれません。
キャラクターのこだわり
ゲームのタイトルにもある通り、プレイヤーのキャラクターは「ばんにゃ」です。初めは猫のキャラクターとして実装を Q にしてもらいましたが、やはり弊社なら「ばんにゃ」にしなければ...！！（熱い想い）
「ばんにゃ」の特徴を伝えて、描画関数で実装してもらいましたが、思うような形にならず...。こだわりを持って何度もやり取りをしました。（こだわりを持ちすぎて、記録としてあまり残せず、改修に集中してしまいました。）
「まあ、見えなくもない」という妥協ラインにはできたかなと言うことで、今の形に落ち着きました。
ちょっと試してみた
今回のVibeCoding はClaude3.7 のモデルで実践しています。 完成後に、
ようやく形にすることができました。ゼロベースでもう一度作成できるように、詳細設計書を作成してほしい
として、詳細設計書.mdを生成してもらいました。 この詳細設計書.mdを用いて Claude3.7, Claude4.0それぞれのモデルで
詳細設計書.md に基づいて、ゲームを作って
と伝えた成果物がこちらになります。
頑張ってつくったばんにゃが・・・・・いなくなりました それぞれのモデルでの再生成の結果をまとめると以下になります。
- Claude Sonnet3.7
- 効果音がなくなった
- ランキング登録機能がなくなった
- Claude Sonnet4.0
- 背景に謎の黒色空間が生まれた
- AWSのアイコンが使われていない
- 共通
- 文字化け
- 壁が高すぎて進めない
- プレイヤーがばんにゃでなくなった
Qと一緒に完成させたゲームの詳細設計書を書かせて、新しいQに読み込ませても同じものは生成されません。 AI を活用したコーディングにおいては、「設計書の100点を目指しすぎない」「AI に任せるのではなく、一緒に開発を進める意識」が大事だと感じました。
おわりに
AWSのキャンペーンイベントの「Amazon Q CLI でゲームを作ろう Tシャツキャンペーン」に挑戦した結果の記録、いかがでしたでしょうか？ チャット内のプロンプトだけという縛りは、慣れていなささがすごく、試行錯誤しながらの指示出しになりました。 実践した感覚としては、「めちゃくちゃ手が早いドライバーとのペアプロ」でした。 今後「AIへの指示の出し方」のスキルも磨いていかないと、常に手が早いドライバーとペアプロする人との作業効率の差は広がっていく一方になりそうという危機感も覚えました。
ただ、デザイン周りはそれ用のAIと組み合わせるか自作をしないと、AmazonQだけでは厳しいかもしれません。 ばんにゃの再現具合がただただ悔しいです。
ここまでお読みいただきありがとうございました。
