こんにちは、iPhone先生（@ren_works）です。
💡 この記事のキモ
プログラミング経験ほぼゼロの僕が、ClaudeAIとチャットしただけで2-3時間でブラウザゲームを作った全記録です。専門用語ゼロの依頼で動くものができ、フィードバックで磨いていく感覚は「方向性決める仕事」に近い。コード書けない人ほど刺さる体験でした。
過去にChatGPTで挫折した人にこそ読んでほしい。長いコードを丸ごと扱えるのがClaudeの強みです。
「TikTokフォロワーに何か遊んでもらえる仕掛けが欲しい」
そう思ってClaudeAIにふわっと依頼しただけで、数時間でブラウザゲームが完成しました。
完成したのが 「iPhone先生RUN」。マリオ風のオートランナーで、片手タップで遊べます。
🎯 なぜClaudeAIでゲームを作ろうと思ったか
TikTokのフォロワー 7.3万人 に、動画見てもらうだけじゃなく 「一緒に何か遊べる」体験を提供したかったんです。視聴者参加型って、距離がぐっと縮まります。
正直、過去に ChatGPT でコード書きを試して、長いコードになると分断されたり、修正のたびに別物になったりして挫折した経験があります。
そこで今回 Claude AI で再挑戦してみたら、想像以上にスムーズだったので記録しておきます。
🛠️ 使ったツール：Claude AI Chat
Claude AI（Anthropic社のAI）。Webブラウザで使うチャット型のAIです。
| 項目 | ChatGPT | Claude AI |
|---|---|---|
| 長いコード扱い | 分断されがち | 800行超でも一発で出せる |
| 指示の汲み取り | 具体的な指示が必要 | ふわっとしててもOK |
| バグ報告→原因分析 | 表面的な修正 | コード読み直して根本原因を特定 |
| アーティファクト機能 | なし | チャット内で実行可能 |
結論：コード未経験者が 「動くもの」 を作るならClaude一択。Pro契約（月¥3,000）で長文・長尺コードがガッツリ扱えるようになります。
📝 実際にやったこと（時系列・全記録）
① ふわっと依頼するだけで設計してくれた
最初に投げたメッセージはコレです。
💋 れんれん（ボク）
「TikTokのアカウント情報をもとに簡単なスクロールゲーム（まりお風）ゲームをスマホ用に作ってショート動画で公開して配布しようかとおもう（ネタ）僕のアカウントを熟読してマリオ風のゲーム作成して、何か競えるような形がいいな、コメ欄にスクショで何点いったみたいなゲームになればいいな」
専門用語ゼロ。「マリオ風」「ふわっと」「コメ欄でスクショ」みたいな 素人言葉 だけ。これだけでAIが具体的に動き出してくれました。
Claudeの返答（要約）：
🤖 Claude AI
- 片手タップで遊べるオートランナー型（電車内でも片手で）
- iPhoneネタの世界観：充電ケーブル(コイン)、空き容量警告(敵)、低電池(穴)、壁紙(背景)
- スクショ前提：ゲームオーバー画面に @ren_works とスコアを大きく表示
- 競技性：距離(m)とコインの2軸＋ランクS〜E判定
このタイミングで方向性が固まりました。僕は「OK、それでいって」と言うだけ。
② 1発目で動くものができた
Claudeが HTMLファイル1個（800行超） を生成してきました。ローカルで動作確認するだけで、ゲームが動きました。
# PCで簡易サーバー起動
python -m http.server 8000
このコマンド1行コピペするだけ。あとはスマホのブラウザでローカルIP叩けば実機テストできます。ここまで開発時間：約30分。
③ フィードバックで磨いていく（記事のキモ）
ここからが面白い。実際に遊んでみて感じたことをチャットに投げると、AIが即座に反映してくれる。このやり取りループが制作の本質でした。
💋 ターン1：体感の改善
「穴は落ちても何も起こらないのと、上に飛んでくるアイテムがポイントにつながるのがわかりにくいから、もうちょっと説明ほしいかな」
→ Claudeが ①バグ修正 ②タイトルにアイテム凡例追加 ③OK/NG表示追加 を即実装。
💋 ターン2：UIの整理
「ゲーム後にホームに戻るボタンほしい、せっかくのタイトル画面が説明で埋まってるのはもったいない」
→ HOMEボタン追加＋タイトル画面すっきり化（凡例は「？」ボタンで開くモーダル形式に）。
💋 ターン5：穴のバグの真の原因
「穴は死なない場合の方が高い」
→ AIがコードを読み直して原因分析：「穴に落ち始めても、穴が画面外に流れ去ると着地判定が誤発火して復活してた」。doomed フラグ方式で「一度穴に踏み込んだら絶対戻れない」状態を作って解決。
ここがClaudeの真骨頂。「死なない」と一言伝えただけで、800行のコードを精査して根本原因まで特定してくれる。
④ スーパーモード実装（派手な要素を盛り込む）
💋 ターン6：派手な機能要望
「ケーブルチャージが50個貯まったら無敵モードみたいなのできる？その時キャラがスーパーサイヤ人みたいに、スーパースマホみたいに金色になるとかどうよ」
→ Claudeが 8秒間のSUPER MODE を実装。
- 金色のキャラ＋脈動オーラ＋エネルギースパイク
- 敵を破壊（ストレージ満タン・ウイルスが触れると爆散）
- 上昇音階のファンファーレSE
- 画面フラッシュ＋シェイク
- HUDにチャージゲージ＋カウントダウン表示
ここまで合計開発時間：約2-3時間。チャットでのやりとり込みでこの速さは衝撃でした。
📊 数字で見るインパクト
| 項目 | 数値 |
|---|---|
| コード行数 | 847行 |
| ファイル数 | 1個（index.html単体） |
| 開発時間 | 約2〜3時間 |
| 追加コスト | ¥0（Claude Pro契約のみ） |
| 使った言語 | HTML / CSS / JavaScript（全部AIが書いた） |
💡 Claudeでゲーム作るときの3つのコツ
コツ① 「方向性の判断」はクリエイターの仕事
AIに「全部任せる」のは無理ですが、「ほぼ全部任せる」は可能。クリエイターの役目は「これがいい」「あれは違う」という判断を下すこと。コードは書かなくていい。
コツ② 実機テスト → フィードバックは必須
1発目は動いたけど、穴に落ちても死なないバグがありました。「動く」と「正しい挙動」は別物。実機で遊んで感じたことをチャットに投げる、このループが本質。
コツ③ 公開はWordPressに埋めるのが楽
WordPress固定ページに カスタムHTMLブロックでiframe srcdoc方式で埋め込みました。コピペ1個で完結します。これも初心者には少しハードルなので、別記事で詳細手順を書く予定。
⚠️ 正直に言う：注意点とAIの限界
誇張なしで書きます。AIに任せきりじゃない部分もあります。
- 「動く」と「面白い」は別物。ゲームバランスは人間が遊んで判断する必要あり
- 細かいUI調整（色味・余白・フォント）は 「もうちょっと派手に」 みたいな曖昧指示でも反映してくれるが、最終ジャッジは人間
- ローカル動作確認の 初期セットアップ（Pythonインストール等）は初心者にハードル
- WordPress埋め込み時の iframe srcdoc 方式を知らないと詰まる
でも、これらを差し引いても 個人クリエイターの武器が一個増えた感覚は強烈でした。
🚀 あなたも作れる：Claudeを始めるには
無料で試せます。claude.ai にアクセスしてアカウント作成するだけ。
無料プランでも短いコードは書けますが、ゲーム1個まるごと作るならPro契約（月¥3,000）がおすすめ。長文・長尺コードを一気に扱えるようになります。
1ヶ月だけPro契約してゲーム1個作って解約する、みたいな使い方でもOK。サブスク不要なクリエイターの強い味方です。
🎯 まとめ：個人クリエイターはClaude使うべき
- コード書けない僕でも2-3時間でブラウザゲームが完成した
- 専門用語ゼロのチャットで意思疎通可能
- バグ報告から原因特定まで自動でやってくれる
- 個人クリエイター（TikToker / YouTuber / ブロガー）の武器が一個増える
- 過去ChatGPTで挫折した人ほど刺さるはず
動画見てもらうだけより、「一緒に遊べる」体験を提供できると、フォロワーとの距離がぐっと縮まります。
遊んでスコア出たら TikTokのコメ欄に貼ってくれたら反応します！ ぜひスクショで自慢してね。
TikTok：@ren_works
コメント