Claude Artifactsでゲーム制作する方法 — 非エンジニアの試作から公開まで
コードを書かずにClaude Artifactsで簡易ゲームを試作し、修正・公開まで進める手順です。プランごとに使える機能の違いも表で示します。
Claude Artifactsとは何か
Claude Artifactsは、Claudeとの会話の中で作った文章・コード・図表などを、チャットの横の専用ウィンドウに表示する機能です。プログラミングの知識がなくても、「〇〇なゲームを作って」と日本語で頼むだけで、Claudeがコードを書き、その場で動くコンポーネントとして表示します。
対象になるのは、15行を超える分量があり、単体で完結し、後から編集・再利用したくなるコンテンツです。クイズやミニゲームのようなインタラクティブなReactコンポーネントも、この基準に当てはまる代表例として公式に挙げられています。
本記事は、ChatまたはWeb・デスクトップ版のClaudeでゲームを作る手順に絞って扱います。Claude Codeにも同名の機能がありますが、こちらは開発者がセッションの作業内容を共有するための別の仕組みです。
ゲーム制作を始める前に有効化しておくこと
Artifactsを使うには、設定の「Capabilities」で「Code execution and file creation」を有効にする必要があります。以前はこのトグルなしでもArtifacts自体は使えましたが、現在は両方が同じ設定でまとめて管理されています。
Free・Pro・Maxプランは、画面左下の名前をクリックして「Settings > Capabilities」から自分で有効化します。Team・Enterpriseプランは組織全体の設定になるため、Ownerが「Organization settings > Capabilities」で有効にします。
手順1: プロンプトだけで簡易ゲームを試作する
作りたいゲームの内容を、日本語の文章でClaudeに伝えます。ルール・見た目・操作方法まで具体的に書くほど、初回で近い形のものができます。
1〜100のあいだの数字を当てるゲームを作ってください。
プレイヤーが数字を入力すると「もっと大きい」「もっと小さい」
「正解」のいずれかを表示し、何回で当てたかも記録してください。
背景は淡い青系の配色で、スマートフォンでも操作しやすい
大きめのボタンにしてください。送信すると、Claudeがコードを書いてArtifactsのウィンドウに表示します。その場でクリックやタップを試し、意図した動きになっているかを確認します。
手順2: 動かしながら修正する
出来上がったゲームは、会話を続けるだけで直せます。「難易度を選べるようにして」「音のオン・オフボタンを付けて」のように変更したい点を伝えると、Claudeがその部分だけ直した新しいバージョンを作ります。
バージョンセレクターで以前のバージョンに切り替えられます。修正前の状態が消えるわけではないので、うまくいかない変更も気軽に試せます。
エラーが出たときは、エラーメッセージの近くに表示される「Try fixing with Claude」ボタンを押します。エラーの内容が自動でメッセージに入り、Claudeが原因を調べて修正を提案します。ただし、この修正が必ず成功するとは限らず、追加のやり取りが必要になることもあります。
1つの会話で複数のゲームを試作している場合は、画面右上のスライダーアイコンで、どのアーティファクトを操作対象にするか切り替えられます。作ったゲームは会話を離れても、サイドバーの専用セクションから一覧で確認・管理できます。
手順3: AIを組み込んでゲームを賑やかにする
クイズの問題を自動で生成する、プレイヤーの入力に応じてストーリーを分岐させるといった仕組みは、ゲームの中にClaude自身の応答機能を組み込むことで作れます。これは「AI-powered artifacts」と呼ばれる仕組みで、コードを書くClaudeに「AIによる採点機能を組み込んで」のように頼むだけで実装されます。
このAI機能を使ったゲームを公開すると、遊ぶ人はAPIキーを用意する必要がなく、作った側にも追加コストは発生しません。10人が遊んでも1万人が遊んでも、利用量はそれぞれのプレイヤー自身のClaude契約の利用上限に対してカウントされ、公開した側の上限は消費しません。
手順4: スコアを保存できるようにする
ハイスコアやプレイ履歴を残したい場合は、Persistent storageという仕組みを使います。データの持ち方は「個人用」と「共有用」の2種類から選べます。日記のように自分だけに見せたいものは個人用、リーダーボードのように全員に同じ順位表を見せたいものは共有用を選びます。
ストレージには1つのアーティファクトあたり20MBの上限があり、保存できるのはテキストのみで画像やファイルは保存できません。共有用のデータは、そのゲームを開いた全員に見える状態になるため、最初に使うときは確認のダイアログが表示されます。
Persistent storageは公開済みのアーティファクトでのみ動作し、作成中や動作確認の段階ではデータの保存操作が失敗します。試作の時点で「スコアが保存されない」と焦る必要はなく、公開してから正常に動く仕様です。アーティファクトの容量管理やProjectsとの組み合わせ方は、Claude Projects完全ガイドでも扱っています。
完成したゲームを公開する
FreeプランからMaxプランまでは、以前からのチャット体験で作ったアーティファクトを「Publish」ボタンで公開できます。公開すると公開用のリンクが発行され、Claudeのアカウントを持たない人でもサインアップなしでゲームの基本的な操作を試せます。AIを組み込んだ機能など一部の高度な操作だけ、サインアップを求められます。
公開したアーティファクトは「Get embed code」ボタンから埋め込みコードを取得できます。許可するドメインを指定すれば、自分のブログやサイトにゲームをそのまま埋め込めます。
ここで説明した「Publish」は、以前からのチャット体験で作ったアーティファクトに限られる仕組みです。新しいClaude体験で作ったアーティファクトは代わりに「Share」ダイアログから共有し、そのリンクを開く人は全員Claudeアカウントが必要になります。アカウント不要で誰でも試作を触れる公開方法は、旧体験のチャットで作った場合だけと考えておきましょう。
Team・Enterpriseプランでは「Publish」の代わりに「Share & copy link」を使います。既定では組織内のメンバーだけがリンクを開けますが、Enterpriseプランの場合はOwnerが「External sharing」を有効にすると、組織外の人にもリンクで共有できるようになります。いずれの場合も、リンクを開くにはClaudeアカウントへのログインが必要です。ただしExternal sharingを有効にしても、AIに質問する機能を組み込んだアーティファクト(AIによる採点機能付きのゲームなど)や外部サービス連携(connected apps)を使うアーティファクトは、組織外には共有できません。
一度Unpublish(公開の取り消し)をすると、同じアーティファクトを再度公開することはできません。もう一度公開したい場合は、新しくアーティファクトを作り直す必要があります。Unpublishすると、そのゲームが使っていた保存データ(個人用・共有用の両方)も削除されます。
プラン別にできることの違い
同じ「ゲームを作って公開する」でも、契約しているプランによって使える範囲が変わります。
| プラン | 試作 | AI機能の組み込み | スコアの保存 | 公開方法 |
|---|---|---|---|---|
| Free | 試作○(設定の有効化が必要) | AI機能の組み込み○ | スコアの保存× | 公開方法Publish(旧チャット体験限定・アカウント不要で誰でも閲覧) |
| Pro・Max | 試作○ | AI機能の組み込み○ | スコアの保存○(20MB上限) | 公開方法Publish(旧チャット体験限定・アカウント不要で誰でも閲覧) |
| Team・Enterprise | 試作○(管理者が有効化) | AI機能の組み込み○ | スコアの保存○(20MB上限) | 公開方法Share & copy link(組織内、Owner設定次第で組織外にも) |
※新しいClaude体験で作ったアーティファクトは、プランを問わず「Share」ダイアログでの共有になり、開く人はClaudeアカウントが必要です。上表の「アカウント不要」はPublishの対象範囲に限った話です。
Freeプランでも試作やAI機能の組み込み自体は可能ですが、MCP連携とスコアの永続保存(Persistent storage)はPro以上のプランが対象になります。組織で使う場合は、公開範囲がリンクの発行方法ごとに変わる点を事前に確認しておくと、意図しない範囲への共有を避けられます。
非エンジニアがよく踏むつまずき
- 設定の「Capabilities」を確認しないまま試作を始め、Artifactsが表示されずに戸惑う。まず設定の有効化から始めます。
- スコア保存の動作を試作中に確認しようとして、保存されないことに気づく。Persistent storageは公開後にしか動作しません。
- 公開したゲームをいったんUnpublishしてから直そうとして、同じ作品を公開し直せないことに気づく。修正は公開したまま会話で続け、Unpublishは最後の手段にします。
- 他の人が公開したゲームのコードをコピーして改造する際、信頼できる作者のものかどうかを確認しない。知らない相手から送られたファイルを開くときと同じ警戒が必要です。
- スマートフォンのClaudeアプリだけで作業を完結させようとし、公開設定を変更できずに困る。共有設定の変更はWeb版かデスクトップ版で行います。
ゲーム以外にも、Artifactsは業務手順の図解のような非エンジニア向けの使い方に広がっています。手順はClaudeでのフローチャート作成手順で紹介しています。マーケティング業務での活用例はClaudeマーケティング活用にまとめています。
まとめ
Claude Artifactsは、コードを書かずに日本語のプロンプトだけで簡易なゲームを試作できる機能です。試作・修正はChatまたはWeb・デスクトップ版のClaudeで会話を続けるだけで進み、スコアを残したい場合はPersistent storageを組み合わせます。公開はプランによって「Publish」と「Share & copy link」の2つの経路に分かれ、どこまで外部に見せられるかが変わります。まずは設定の有効化を確認し、小さなゲームの試作から始めてみてください。