初心者でもできた！Claudeでゲームを作ってスマホで遊ぶ方法|Cowork|Netlify

え、Claudeって○よぷよ風のゲームも作れるの？

こんな噂を聞いて、いてもたってもいられなくなって。笑

でも、難しいんじゃない？
本当に簡単に作れるのかなぁ〜？
って半信半疑でトライしてみたら、

落ちものパズルゲーム（〇よぷよ風ゲームのことです）が、あっという間にできちゃいました。笑

呪文のような難しいプロンプトなし。
プログラミング一切なしで。

しかも今回スマホでも遊べるようにする方法まで紹介します✨ 
意外と簡単なので、どうぞリラックスしてお付き合いください😊

🎮 今回作ったのはこちら：おちものフルーツゲーム

かわいいフルーツキャラが落ちてきて、4つつなげると消える！昔ながらの至って シンプルなゲーム。笑
みなさん、一度は遊んだことがあるはず！

息子たちに見せたら、
「え、ほんとにママが作ったの？！やば！」って驚いてました🙌

🛠️ 使うものは3つ

• ディスクトップ版のClaude （私は有料版です）

• スマホ or PC（どちらでも遊べます）

• Netlify（無料・登録なしでも使えるサービス）

Netlifyについては後ほど詳しく説明しますね！

今回はClaude  Coworkで作成しましたが、チャット（Claudeのチャット画面）でも作ることができました。なので、もしかすると無課金でも作ることができるかも？しれません😳(もし、どなたかお試しして無課金でもできたら教えてください🙏）

作り方

① Claude CoworkでHTMLゲームを作る

まずはClaude Coworkを開きます。（チャットでもOK）

上のタブはCoworkを選択。

チャット欄に、こんなふうにお願いしました。

よかったら、コピペして使ってください。

落ちものパズルゲームをHTMLで作ってください。
・フルーツのキャラクターを使ったかわいいデザイン
・4つつながったら消える
・スマホでも操作できるようにボタンを付ける
・1つのHTMLファイルで完成するようにしてください

送信して少し待つと…
今回もあっという間に完成！😳
（今回も歯磨きしている間に完成してびっくりでした）

「え、これだけでいいの？」ってなりますよね。笑
これだけでいいんです！

② HTMLファイルをダウンロードする

Claudeが作ってくれたコードの画面に、ダウンロードボタンが表示されます。

game.html というファイルがダウンロードされます。

PCのブラウザでこのファイルを開くと、もうゲームが遊べる状態になっています✨

③ Netlifyでスマホからも遊べるようにする

ここが今回の新しいポイントです！

ダウンロードしたHTMLファイルのままだと、そのPCでしか遊べません😭スマホでも遊べるようにするためには、インターネット上に公開する必要があるんです。

そこで使うのが Netlify（ネットリファイ） というサービスです。

Netlifyって何？

要するに、「ドラッグ＆ドロップするだけで自分のゲームがWebに公開できる」 ということ！すごい👏
しかも無料で使えるので本当に手軽です。

🍎Netlifyの使い方【手順】

Step 1. Netlifyを開く

ブラウザで netlify.com にアクセスします。

Googleアカウントでログインします。
アンケートに答えて、「Continue to Deploy」をクリック。（アンケートは適当で大丈夫です）

Step 2. HTMLファイルをドラッグ＆ドロップ

トップページの中央あたりに「drag and drop」エリアがあります。
さっきダウンロードした game.html をそこにドラッグ＆ドロップ。

こちら⬇︎

Step 3. URLが発行される

数秒待つと、こんな感じのURLが発行されます。

https://○○○○○○.netlify.app

これがゲームのURLです😊

④ スマホのホーム画面にアプリとして追加する

発行されたURLをコピーして、スマホのブラウザでURLを開く。
（私はiPhoneなのでSafariで開きました。）

「…」をタップ。

「共有」を選択。

「ホームボタンに追加」にします。

「Webアプリとして開く」をオン。
「追加」にする。

これでホーム画面にゲームを入れることができました！

出先でも気軽に使うことができるようになったので、
病院の待ち時間など、子供の暇つぶしにもなります⭕️

💡 今回のゲームを作ってみた感想

普通の主婦でも、昔好きだった系統のゲームが作れるなんてClaude様凄すぎます。笑

今回の単純なゲームは、年長の次男にもヒット！
まだ5歳児には難しいですが、こういう昔から愛されている定番のゲームは、令和の子供にも合うみたいですね。笑

そして、Netlifyが想像以上に簡単でびっくりでした😳他にも、スマホでアプリのように使えるツールを作ってみたい〜。ワクワク♡

まとめ

今回やったことをまとめると、

1. Claude にプロンプトを入力（チャット、 Cowork、codeどれでもOK）

2. 生成されたHTMLファイルをダウンロード

3. Netlifyにドラッグ＆ドロップ

4. 発行されたURLをスマホで開いて、ホーム画面に追加する

以上！笑

プログラミングの知識は一切不要。
お子さんと一緒に「こんなゲームにしたい」って話しながら作るのも、楽しいと思います😊
よかったら、お試しください。

追記

無課金でも作れるみたいです！
でも、少し質は変わるかもしれないです。

また、「こんなゲーム作ってみたよ」というコメントもお待ちしています！
私もいろんなアイデアを知って、もっともっと勉強したいです😆

では、また。

他にもこんな記事を書いています✒️

発信が変わる🌸AI画像生成パック
「AIで何か作ってみたい！」という気持ちが芽生えた方へ。
わたしがまとめたAI画像生成の入門マガジンもあります。 難しい専門用語なし・初心者でも楽しく読める内容です。

🤖Claudeの関連マガジンはこちら
子供むけに作った勉強ゲームの記事など収録しています。
生活にうまくAIをとり入れて、なんとか三人のやんちゃな男の子を育てています。笑

#Claude #生成AI #AIツール #プログラミング不要 #AI教育 #子育てとAI #ゲーム制作 #Claude活用 # Cowork