Claude のコーディング性能は評判が高く一度試してみたいと思っていました。2月末に3.5を上回るClaude 3.7 Sonnetが登場しましたので、早速試してみました。今回は1日で何本のゲームを作れるかを検証してみました。
開発手法 GoogleCloudのAnthropicAPIを利用
APIを使ってみたかったのでGoogleCloudのVertexAIにあるのClaudeのAPIを利用してみました。直接AnthropicのAPIをコールすることもできますが、GoogleCloudではボタン一つでプロジェクト内の認証やColabでの実行環境が完備されていますので立上げが圧倒的に楽です。GoogleクラウドのVertexAIの中のModel GardenからClaude 3.7 Sonnetを有効にすることですぐに使えます。ノートブックを開くを押すとColabEnterpriseが立ち上がりサンプルプログラムが開きます。
APIの料金
25年3月3日時点でGoogleクラウドの公式ページには3.5 SonnetのAPI利用料しか掲載されていません。おそらく3.7 SonnetもAnthropic公式と同じ料金だと思います。入力は１Mトークンで3ドル。出力は１Mトークンで15ドルです。今回は10個ゲームを作ってだいたい8ドルぐらいの課金になっていたので、少し試す程度の利用であればClaudeの月額20ドルよりも安く済むかもしれません。
- Googleクラウドの料金ページ
- anthropic公式のAPI料金ページ
作ったゲーム
1日で10個のゲームを作りました。一発出力で3分程度作れたものから、修正を繰り返し30分ぐらいで完成したものがありますが、本当に簡単にゲームを作ることができます。今回開発したゲームを紹介します。Githubにアップしましたのでよかったら遊んでみてください。バグはまだあるのでその点ご容赦ください。
作ったゲームの一覧 URL https://yasirosyokuhin.github.io/game/index.html
- ピカデリーサーカス風ゲーム
- クロッシーロード風ゲーム
- ビデオポーカー
- 大富豪
- 倉庫番
- 魚釣り
- 間違いさがし
- ワニワニぱにっく
- フロッピーバード
- 倉庫番
作る時の流れとポイント
大きく「デザインを決める」→「ゲームのルールを与える」→「ゲームを改善する」の順番です。最初の回答からほとんど完成した状態で作ってくれるので時間はかかりません。
１．デザインを決める
最初に参考にするデザインを決めると、手直しが減り効率が良くなります。 デザインからゲーム性を推論して開発しているのかとも思います。 手書きでも良いですし、個人で試す範囲であればゲームの筐体を参考にしてもよいかと思います。 例として今回駄菓子屋さんに設置されているピカデリーサーカス風のゲームを真似して作ってみましたが、その時の添付した画像はこちらです。左がゲームの筐体。右側が今回作成したゲーム。再現度が高いかと思います。プロンプト入力時に画像も一緒に含めて指示をだします。
prompt = prompt1 + """
添付の画像のような見た目でゲームを開発して
"""
with client.messages.stream(
max_tokens=20000,
messages=[
{
"role": "user",
"content": [
{
"type": "image",
"source": {
"type": "base64",
"media_type": image_media_type,
"data": image_base64,
},
},
{"type": "text", "text": prompt},
],
}
],
model=MODEL,
) as stream:
for text in stream.text_stream:
print(text, end="", flush=True)
余談ですが、私は元々エンジニアなのでコードは一定わかりますがデザインの知見は乏しく、一人で開発する時にはデザイン周りにはすごく時間がかかっていました。手動でやると参考にするWEBデザインを探して、移植してと。すごい手間と時間がかかる作業です。それが全部Claudeがやってくれるので大変重宝しています。
２．ゲームのルールを与える
箇条書きでゲームのルールを書いていきます。一般的なゲームであれば特段ルールを与えないでも調べて作ってくれます。以下はポーカーの例ですが、多少間違っててもClaudeが行間を読んで上手に作ってくれます。以下実際に使用したプロンプト例を貼ります。
ビデオポーカーの要件
・スマホに対応して
・一つのHTMLにまとめて。
・持ち込員は３００から始まる
・役ごとが揃うと、コインが増えている。
・1プレイ10コイン
・交換は1回まで
・ジョーカーは1枚入れて
・トランプの絵柄はかわいく
ワンペア 5
ツーペア 20
スリーカード 30
ストレート 50
フラッシュ 50
フルハウス 100
フォーカード 150
ストレートフラッシュ 150
ファイブカード 200
ロイヤルストレートフラッシュ 1000
・役が揃うとハイアンドローのダブルアップ。引き分けは再度ダブルアップをやり直し。
・ダブルアップは負けると0、勝と倍になり、さらにダブルアップができる。
・ダブルアップは継続かやめるを選ぶことができる。
大富豪の要件
・スマホに対応して
・トランプはかわいい絵柄にして
・革命に対応
・8ぎりはなし
・コンピューターを入れて4人プレイ
・一つのHTMLにまとめて魚釣りの要件
・スマホに対応して
・ひとつのファイルにまとめて
・釣れる魚は100以上で魚の画像も多彩にして。
・エサは5個からスタート。
・それぞれ釣った魚の点数でつけて
・レアな魚ほどつれないで餌を取られるようにして。
・エサがなくなったら終了
・釣り人はかわいくして。
・魚は前向きにおよぐように。
・タップ（クリック）したところに餌がおちるようにして。
・さなかと餌の位置が重なったときに釣り上げるおすと魚が釣れるように３．ゲームを改善する
実際にプレイしてみて違和感があれば、改善事項を箇条書きで修正指示をします。
コツとしてはまとめて改善事項を与えすぎないように、多くても３つぐらいにして指示していました。多くすぎると直っていない箇所が出たり、デグレが発生しました。そして修正箇所のみを出力してもらうことでトークンの省略になるかと思います。（もっと効率よいのやり方はありそうですが）
prompt = prompt1 + """
このファイルはレトロゲームのピカデリーサーカス風のゲームです。
改善のために次の修正をして。直した箇所のみください。
・スマホの時に数字の外側にある青線をすこしだけ距離をあけてほしい。数字の丸と重なるので。
"""
with client.messages.stream(
model="claude-3-7-sonnet@20250219",
max_tokens=40000,
messages=[
{
"role": "user",
"content": prompt,
}
],
) as stream:
for text in stream.text_stream:
print(text, end="", flush=True)
result.append(text)
SVG画像の作成能力がすごい
何気にすごいと感じているのがSVGでの画像出力です。何かサービスを作るときに、UIデザインも苦労しますが、同じぐらいデザイン素材（画像）を準備をするのが手間がかかるものです。
その手間を埋めてくれるのがClaudeの高いSVGでの画像作成能力です。例としてこれはアプリのランチャーアイコンですが、すべてSVG描画で専用の画像を使ってません。
この釣りのゲームでも同様に１００種類の海洋生物をＳＶＧ画像を使って表現してくれました。ウニがかわいいです。
まとめ
Claude3.7Sonnetのコーディグ性能能力はもちろんですが、画像を元にしたデザイン模倣力や、SVGの画像表現が素晴らしく、あいまいな指示でも要求どおりのプログラムを作ることができました。1日でデザインも含めて10個のゲームが作れるのはすごい事です。
今回はゲームで試してみましたが、WEBサイトや、ネイティブアプリでも同様の性能を発揮することが多くの文献でも証明されていて、よりAIにおける開発範囲が広がっていると痛感しています。利用金額もWEBサービスで２０ドル、API料金もそこそこ安い。開発者を雇ったり、時間を費やすコストから比べるとはるかに安いと思いますし、これからの進化にも目が離せません。
コメント