202610/16【無料/1時間】AIの使い方を覚えたいならゲームを作ろう

このサイトで遊んでいるようなゲーム、作る側もやってみませんか。
ゲームの中身は全部AIで作っています。話しかけるだけで、自分が考えたゲームが動きます。無料プランから試せます。

ちょっとしたブラウザゲームの例

上のゲームは、この記事のお願い文で作ったものです。生成例はこちら。
コメントでも、もう作ってくれた人がいます。akt-akuさんのカードゲーム。ver2まで作っていて、「AIで作るの楽しい」とのこと。

準備:おうちの人と一緒にClaudeを開こう

今回はClaude(クロード)を使います。無料プランでもゲームを作って遊ぶところから試せます。
友達に見せるための公開は、あとで紹介するNetlify Dropを使います。まずは自分で遊べればOK。

Claudeはこちらから使えます。
 Claude(claude.ai)

ただし、Claudeのアカウントは18歳以上の人しか作れません。 
未成年の方は、家族にアカウントを作ってもらってください。

下の「おうちの人へ」のところを、そのまま見せればOKです。

おうちの人へ(ここを押すと開きます)

はじめまして。この記事を書いている阿久澤です。
WEB企業に勤めていて、仕事の大半はAIを使って社内ツールやサービスを作ることです。

お子さんが、WEB企業で使われているAI・「Claude(無料プラン)」を使って自分でゲームを作る体験をするため、力を貸していただけないでしょうか。

  • Claudeは18歳以上でないとアカウント作成できないです。
     このため、保護者の方のGoogleアカウントで、
     スマホ or パソコンを使ってClaudeにログインし、お子さんに貸していただきたいです。
  • 1時間くらいで終わります。
     Claudeにログイン済みのスマホかパソコンが1台あれば、
     1時間ほどあれば最初のゲームが完成します。
  • 料金は発生しないです。
     Claudeは無料プランでもゲーム生成できるため、
     課金は発生しません。

「AIに目的を伝えて、何かを作ってもらう」経験は、これからの時代に勉強にも仕事にも役立つスキルの入り口になります。

自分のアイデアが目の前で動くゲームになる成功体験は、お子さんにとってこれからAI活用のやる気や自信の源になります。
何卒よろしくお願いします。

いよいよゲームを作る:Claudeに話しかけよう

たとえば、こんな感じで話しかけます。

下の文章をコピーして、好きなゲームやハマっているものを自分のものに変えてみてください。

私は中学生です。
特にポケモンやヴァンパイアサバイバーズのようなゲームが好きです。
最近は〇〇にハマってます。

私は、ためしにClaudeでゲームを作って、実際に動くのを見て、「すごい!」って思いたいです。
今までゲームを作ったことがないので、どんなゲームにするかは基本おまかせでお願いします。

完成したら、友達にも遊んでもらいたいです。
Netlify Dropで公開できるように、画像や音も含めてindex.htmlという1つのHTMLファイルにまとめてください。
外部のAPIや有料サービスを使わず、ブラウザだけで動く形にしてください。

作ってくれますか?

Claudeには、音声入力ボタンをクリックしてから、適当に話しかけましょう。

誤字があっても全然大丈夫です。 Claudeはいい感じに推測してくれるので問題ありません。
大事なのは、とりあえずやってみること! 試してみてください。

「自分はこんな人です」「自分が楽しめるゲームを作ってほしい」。
どんなゲームにするか、操作にするかとか、どうやって作るかは、全部Claudeに任せてOKです。
(どんなゲームにするかを伝えるとさらに楽しいんですけど、初回はClaudeに任せた方が、Claudeが実力を発揮しやすいジャンルでやってくれるので・・・)

※無料プランは使える量に限りがあるので、途中で「今日はここまで」となることがあります。その場合は時間をおいてから続きをやりましょう。

作ったら、遊んで・直してみよう

ゲームができたら、まずは実際に遊んでみてください。

初期武器を選べるサバイバーゲームが出てきた

遊んでみると「ここ、もっとこうしたら面白いのに」というアイデアが色々出てきます。
それをどんどんClaudeに伝えましょう。

  • 「敵がもっと増えたらいいな」
  • 「ボスを出してほしい」
  • 「スマホでも遊びやすくして」
  • 「見た目をかっこよく」

内容は適当でOK。ゲームをプレイして思ったことを、音声入力でそのまま言えばOKです。
阿久澤もほとんど音声入力で、適当に改善指示を出しています。

阿久澤の音声入力。ぐちゃぐちゃでもClaudeは意図を把握してくれる

作ったゲームを、友達に見せよう

2026年10月16日追記:コメントで「無料プランでは共有できなかった」と教えていただきました。以前の「Claudeなら無料プランのまま公開できる」という説明を訂正します。現在、新しく作ったアーティファクトをリンクで共有する機能は有料プラン向けです。古い形式には無料公開できる例外がありますが、これから作るゲームで同じように公開できるとは限りません。

参考:Claude公式の共有機能の説明。プランや画面は変更されることがあります。

無料プランで共有できないときは:Netlify Dropで公開

ゲームのHTMLファイルを、ネットに置いてくれるサービスに渡す方法です。パソコンで、おうちの人と一緒に進めると操作しやすいです。スマホだけなら、まずClaudeの中で遊ぶところまでで大丈夫。公開はあとからでもできます。

  1. Claudeに、下のお願いを送ります。
  2. できたindex.htmlをダウンロードし、新しいフォルダ(例:my-game)の中に入れます。フォルダを開いてすぐindex.htmlが見える形にしてください。
  3. Netlify Dropを開きます。おうちの人と一緒に無料プランを確認し、ログインして進めると、あとから更新・管理しやすくなります。
  4. index.htmlが入ったフォルダごと、画面のアップロード欄へドラッグ&ドロップします。
  5. 表示されたURLを開き、ゲームが動くか確かめます。公開設定が出たら確認し、友達に見せられる状態にしてからURLを送りましょう。
このゲームをNetlify Dropで公開したいです。
画像・音・プログラムを、index.htmlという1つのHTMLファイルにまとめて、ダウンロードできる形でください。
外部のAPIや有料サービスを使わず、ブラウザだけで動くようにしてください。

Netlifyには無料プランがあり、利用量の上限があります。最初は無料プランで試し、有料プランや独自ドメインの購入は不要です。わからない画面が出たら、おうちの人と確認してください。

参考:Netlify Dropの公式手順 / 無料プランと利用上限

友達から「ここが難しい」「こういうキャラ欲しい」と感想をもらって、それをまたClaudeに伝えれば、どんどん自分たちだけのオリジナルゲームになっていきます。

作れたら、コメントに貼ってみてください

公開できたら、この記事のコメントにゲームのURLと「どんなゲームか」を貼ってみてください。共有できなければ、「こんなゲームが作れた」という感想だけでも歓迎です。

何を作ったか、どこを変えたか、どこが気に入っているか。
適当でOKです。友達に遊んでもらって、感想をまたClaudeに伝えてみてください。

ゲームの次は、あなたの「困った」をAIで解決しよう

ゲームを作って、実際に動かせたという体験をすると、
「AIってこんなことまでできるんだ。じゃあ、あれもAIでやってみようかな」という発想が、だんだんと自然に出てくるようになります。この「AIでやってみようかな」と思えることが、AI活用の上達にものすごく大事なことです。

この先は、阿久澤にもわかりません。阿久澤みたいにゲームを作り続けて楽しむのもいいし、あなたが、学校生活や、これから大人になっていく中で、現実で出会う「困った」「もっと便利にしたい」をAIで解決していくのも良いです。

ゲームが作れた面白さが心の中に残れば、きっと、勝手にAI活用できる人になっていくはずです😊

著者について

阿久澤はフルリモートのWEB企業に勤めてます。

直近の勤務時間の8割は、AIを用いて社内ツールを作ったり、顧客向けにChrome拡張機能を作ったりなど、「AIで〇〇を作る」のが主な仕事です。

阿久澤のレベル感は、WEB業界の関係者としては低めですが、初心者の「AIはどうすれば使えるようになるのか?」という質問には、ある程度答えられる自信があります。

コメント(10件)

  1. akuzawa 🛠 作者

    https://claude.ai/artifact/Cn2Fzna63aHeCUkDrj7PvA

    記事に貼ったプロンプトコピペと、無料プランでも使える Claude Sonnet 5.5 で生成したもの。
    修正なしでもちゃんとゲームになりますねえ

  2. akt-aku

    今ゲームを作ってます。今度GitHubでできたらウェブサイトを入れます

  3. akt-aku

    genuine-rolypoly-747764.netlify.app/
    GitHubで作りたかった

    1. akt-aku

      URL変わりました
      https://cardbattlever1.netlify.app/

      1. akt-aku

        https://cardbattlever2.netlify.app/
        ver2作りました。AIで作るの楽しい。全クリすると隠し難易度が、、、?

        1. akuzawa 🛠 作者

          絵文字がついてわかりやすくなってる

          1. akuzawa 🛠 作者

            カードゲームをWebサイトに落とし込むとき、操作方法をどう解説したものか悩みますが、都度ガイドを出しちゃえばいいのか 勉強になります

  4. akuzawa 🛠 作者

    すごい
    記事を綺麗に整理して みんなが作ったゲームを見られるような構成に仕上げていきたい
    現状 ちょっと記事が長すぎる感じがする 

  5. akt-aku

    私はClaudeの無料プランで作ったんですけど共有ができなかったのでClaudeにHTMLファイルにさせてnetlify dropに入れて作りました

    1. akuzawa 🛠 作者

      今できないんですね、書き込み感謝です
      とりあえず記事をAIで仮修正済
      あとで書き直します

コメントを書く

いただいたコメントは、Claude(AI)が中身を確かめてから載ります(1時間ほどかかることがあります)。本名・学校名・住所・連絡先は書かないでください。

  1. ホーム
  2. テクノロジー・WEB周り
  3. 【無料/1時間】AIの使い方を覚えたいならゲームを作ろう