Claude Designに触ったら1行でインベーダーゲームが生成！Google AI Studioの本命ライバルすぎる件

毎度、rorosukeです。
AI使ってますか？

今回は、2026年4月17日にAnthropicからリリースされた「Claude Design」（クラウド・デザイン）の話です。

公式の説明によると、
「会話を通じてデザイン・プロトタイプ・スライドなどのビジュアルコンテンツを作れるツール」
とされています。
多くの方は、こう思ったはずです。

なるほどUIデザインを作るためのツールか！
フロントエンドの見た目を設計するものだな

メディアも「Anthropicが、FigmaとAdobeに照準を合わせた」といった見出しです。これらを総合すれば「Claude Design」というのは、UIデザインを作るためのツール。もしくはQTデザイナーのような、フロントエンドの見た目を設計するヘルパーツール。そんなイメージではないでしょうか？

しかしかし、実際に使ってみたところ、

そんな生易しいものではない

ことが、わかってきました。それって、いったいどういうこと？
それは・・・

一発でここまで行けたインベーダーゲーム

この私、新しい開発ツールを見たら、ライフワークとして、とりあえずインベーダーゲームを作ってみることにしています。

デザインツールですよ！
今回ばかりは無茶過ぎるのでは？

と思いもしましたが、実際にやってみると、これが無茶でもなんでもありませんでした。

上記1行のプロンプトでできたのがこちらです。

次にアクセスすると実際にプレイできます
（後ほど、さらに調整したバージョンも公開していますので、それとも比較してみてください）。

まず、

デザインツールなのにゲームができてしまうことは、もう受け入れてください（笑）

そのうえでですが、ドット絵キャラクターが表示されているのに驚きます。しかも、かなりオリジナルに近いデザインで郷愁を誘います。

ゲームをプレイしてみればわかりますが、レギュレーションにも準拠しています。敵の動きもそうですし、弾ももちろん撃てますし、敵からの攻撃もあります。こうしたプログラムでは忘れられがちのトーチカも表示されていますし、定期的にUFOも現れます。

残念な部分もあります。ステージが1つしかありませんし、サウンドもついていません。他にも細かいことを言い出したらいろいろありますが、大事なことは、おおむねスペースインベーダーゲームになっていることです。

この私、過去、ChatGPT、Claude、Google AI Studioでインベーダーゲームを作ってきました。直近ではClaude Codeでも作成して、かなりレベルの高いコードになりました。しかし、今回「Claude Design」が生成したものは過去一出来が良く、AIの成熟度を感じてやみません。

「Claude Design」って何なんだ？

ここで、改めて「Claude Design」がどんなものかおさらいしておきましょう。Anthropic Labsとは、Anthropicの中で実験的なプロダクトを開発・公開する研究チームです。Claude Designはその第一弾プロダクトという位置づけで、Claude Pro・Max・Team・Enterpriseのいずれかに加入していれば、追加課金なしで利用できる開発環境です。

「Claude Design」を使うには、Claudeの左メニューから「Design」を選択するか、ブラウザに対しURLとして「claude.ai/design」と入力すれば専用画面が表示されます。

Claude Designの画面が次です。

使いかたとしては、左メニューの「プロジェクト名」に生成するアプリの名前を入力して、「Create」ボタンを押し、プロジェクトという枠組みを作成します。これで次の画面になります。

あとは左下の枠に「インベーダーゲームを作ってください」などとプロンプトを入力してしばらく待てば、右側の枠内に作成されたアプリがプレビューされます。

このスタイル、どこかで見おぼえがありますね。そう、これは、

Google AI Studioとかなり近い

です。

Claude Designの出力物は、内部的にHTML＋CSS＋JavaScriptとして生成されます。つまり、当初思い込んでいたデザインの設計図が出てくるのではなく、最初からコードが組み込まれた動作するWebアプリが生成されます。

つまり、「Claude Design」は「Google AI Studio」とほぼ同じ土俵の上で成立している開発環境と言って過言ではないかと思います。

Google AI Studioとの比較

そのような目線に立って、あらためて「Google AI Studio」と「Claude Design」を比較すると次のような特徴になります。

$$\begin{array}{|c|c|c|} \hline \text{項目} & \text{Claude Design} & \text{Google AI Studio} \\ \hline \text{基本出力} & \text{スタンドアロンHTML} & \text{デプロイ前提} \\ \hline \text{デザイン品質} & \text{最初から高品質} & \text{プロンプト次第} \\ \hline \text{APIなしアプリ} & \text{◎} & \text{◎} \\ \hline \text{AI処理込みアプリ} & \text{△} & \text{◎} \\ \hline \text{使用制限} & \text{厳しめ} & \text{ゆるめ} \\ \hline \end{array}$$

まだ、それほどClaude Designを使用したわけではないのですが、この状態であえて紹介すると、基本性能については、現段階ではClaude Designの方が上のように思います。一言でいえば「エージェントっぽいフローが組み込まれている」ように感じるからです。

それからユニークなのは、開発したWebアプリがスタンドアロンHTML形式になっていたことです。「Google AI Studio」では、生成されたアプリが通常は複数ファイルで構成されますが、「Claude Design」で生成したコードは1ファイルです。したがって、これをサーバーにアップロードすれば、そのままWebアプリとして公開できます。Netlifyでドラッグ＆ドロップすれば即デプロイも可能です（上記のインベーダーゲームも、この方法でデプロイしています）。

一方、Google AI Studioのほうが有利な部分もあります。それが、AIとの連携です。Google AI Studioであれば、Gemini APIを呼び出すようなAIアプリが簡単に作成できます。無料APIキーを使うことでコストも抑えることもできます。

Claude DesignでAPI連携する場合、Claudeが組み込みのヘルパー関数（window.claude.complete()）を提供しており、APIキーなしで呼び出せます。ただし、モデルはclaude-haiku-4-5に固定されており、出力トークンも1024トークンに制限されています。また、ユーザーのClaude利用枠から消費される仕組みのため、アプリを公開した場合、閲覧者それぞれのアカウントが必要になります。

つまり、個人利用や社内ツールには使えますが、不特定多数に公開するAIアプリには向きません。その点、Gemini APIの無料キーで誰でもアクセスできるGoogle AI Studioのほうが、公開AIアプリには有利です。

上記を考えると、Google AI StudioとClaude Designの使い分けはいたってシンプルです。

• AI処理が必要ならGoogle AI Studioの一択

• AI処理機能が不要ならClaude Designがお勧め

2025年末に、初めてGoogle AI Studioを使って大感激し、それ以来、数々のWebアプリを作ってきた私ですが、約半年して、同様な開発環境が登場するとは思いませんでした。こちらも、取り組んでいくべき対象となりそうです。

また、やることが増えたー！

インベーダーゲームのブラッシュアップ

感動もひとしおなところですが、かなり完成度が高いインベーダーゲームについて、いくつか不満があります。せっかくなので、これを解消したバージョンを作ることにしました。次は具体的なアップデート内容です。

• サウンド（効果音）がついていない　→サウンドを追加

• オープニング演出が地味　→やや凝った演出にする

• 1ステージで終了する　→ステージ制にして難易度もアップ

• UFOが左からしか出てこない　→ランダムで右からも登場

• ラスト1匹で移動が速くならない　→1.5倍の速度で移動

• 得点が増えても自機が増えない　→得点によって自機数アップ

• トーチカが壊れっぱなし　→3ステージごとにトーチカ修復

• 一時停止ができない　→Escキーでポーズ機能

最終調整して完成したのが次です。

デプロイしましたので、実際にプレイしてみてください。

まとめ：Claudeの進化には驚愕です

「とにかく驚いた」のというのが本音です。

• Claude Designは「デザインツール」という認識は、半分しか正しくありません

• プロンプト一言で、動くWebアプリが生成されます

• APIを使わないフロントエンドアプリであれば、現時点で最速・最高品質の選択肢のひとつです

• Google AI Studioとの使い分け基準は「AI処理が必要かどうか」だけです

• Claude Designは現在「リサーチプレビュー」段階です。したがって、今後さらに進化する可能性があります

といわけで、

Claude Designって、ただの「デザインツール」だろ

そんな思い込みは捨てて、一度触ってみることをおすすめします。おそらく、頭に思い描いているイメージとは隔絶の体験が待っています。

ちなみに、今回はゲームプログラムを生成してみましたが、当然ですが、インタラクティブなWebページも普通に作れます。しかも、簡単なプロンプトでプロが何日もかけているようなものが、すぐ作れます。

• 数行でアプリが動く

• コードも書かなくていい

• しかもそのまま公開できる

激ヤバです

以上！

おまけ：過去生成したインベーダーゲーム

私のnoteで、過去バイブコーディングで作ってきたインベーダーゲームの変遷をまとめておきます。これを見ると、生成AIがどれほど進化したかわかるかもしれません。

その１：ChatGPTで作ったPython版

2024年に初めてバイブコーディングで作ったインベーダーゲームです。このときにはキャラクターは四角などの図形ベーダ―でした。

その２：Claudeで移植したJavascript版インベーダーゲーム

次にこれをClaudeでJavascriptに移植しました。
図形ベーダ―はそのままです。

その３：DeepSeekとClaudeで仕上げたバージョン

私が手動して、キャラクターやBGMをつけて、ゲームとして整えばバージョンです。人手が入っているので、ここまで見栄えがよくなりました。

その４：Google AI Studioに移植したJavaScript版インベーダーゲーム

人手が入ったコードをGoogle AI Studioに読み込ませて、移植したバージョン。React上で動作しています。

その５：Claude Codeでいちから作ったバージョン

過去のコードは使わず、あらたにいちから作ったバージョンです。次のプロンプトを与えて生成しています。ゼロベースで生成しましたが、見栄えはかなりよく、「Claude Codeすごい！」と思いました。

ただし、ゲームとして評価すると、今回Claude Designで作ったもののほうが、出来栄えはずっと上だと付け加えておきます。