Claude無料プランで子供と作る！HTMLモンスタークイズアプリ
当サイトは、アフィリエイト広告を利用しています。
こんにちは！今回の記事はClaude（無料プラン）で子供とゲームアプリを作ってみたという記事になります。我が家の作る過程を紹介しています。先日、子供と「何か一緒に作ってみたいね。」と話していて、簡単なアプリをつくってみることに。
Claudeは有料版じゃないとコード生成できないのでは？無料プランでもアプリって作れるの？
そんな疑問もあったので、実際に無料版だけでどこまでできるのかを確かめながら進めています。
結論としては、無料版Claudeでも、ブラウザで動くシンプルなアプリなら十分作れました。 （※長いコードや複雑な修正は無料枠の制限に当たりやすいので、そこは割り切りが必要だったりはします。）
まずは完成したアプリから：モンスタークイズ
今回作ったのは「モンスタークイズ」。子供が「クイズに正解したらモンスターが育つゲームがいい！」と言い出したのがきっかけです。アプリのざっくり仕様はこんな感じです。
- クイズに正解するとモンスターが少し成長
- 30段階で進化
- 進化時には簡単なエフェクト
- クイズは自分で問題を登録できる
- 設定画面とクイズ画面はタブで切り替え
- HTMLファイル1つで動作（ブラウザだけでOK）
実際に出来上がったものは、こちら。○×クイズを解いて正解すると進化。解答後は解説も表示できるようになっています。
4択クイズもこの通り。全て解き終わると結果画面に移行します。
クイズは自分で問題を作るようにしたかったので、設定画面も作成されていました。
ClaudeにHTMLを書いてもらい、ダウンロードしたファイルをそのまま開くだけで動く仕組みになっています。
実際に打ったプロンプト（指示文）
今回、Claudeに送ったプロンプトはこれです。
クイズアプリを作ります。
モンスターを卵から育てる形にしたいです。1問クリアするごとに少しずつ大きくなって進化して、30段階にしましょう。進化の時にはエフェクト付けてね。
クイズですが、自分で設問（4択か○×）を設定できるようにしてその問題が出題される形式にしたいです。
クイズ設定画面とクイズを解く画面をタブで分かれる形にしてください。
HTML形式でダウンロードできて他パソコンでも動くようにしてください。
この指示だけで、Claudeが生成してくれました。モンスターの見た目や名前、画面構成なども特に細かく指定していなかったのですが、かなり良い感じに仕上げてくれて驚きました。
Claudeアプリで「+ New chat」を押して、プロンプトを入力し、「↑」ボタンで送れば準備完了です。インストール方法などは他サイトでもたくさん紹介されているので、ここでは省略します。
プロンプトはどう考えていけばいいんだろう？
私が子供にプロンプトを作らせるときに伝えている“考え方”や“手順”を、次の章でまとめていきます。
プロンプト作成手順（子供にも教えた内容）
ここからは、私が子供に「こう書くと作りやすいよ」と伝えた内容です。4ステップに分けています。
1.何のアプリを作るかを定義
最初に“ジャンル”を宣言しました。
- 「クイズアプリを作りたい」
- 「育成ゲームアプリを作りたい」
- 「ToDo管理アプリを作りたい」
2.内容を具体的に設定（キャラ・仕組み・動き）
子供の頭の中にある“やりたいこと”をできるだけ引き出します。キャラのイメージや動き方、ゲームの仕組みなど、思いついたことをどんどん具体的に出してもらうことで、正確に形にできるようにします。
- キャラは何にする？
→ モンスター、うさぎ、魔法使いなど - どう成長する？
→ 正解で進化、餌をあげる、撫でると愛情が深まる - クイズ形式は？
→ 4択、○×、ランダム出題
親が少し深掘りして質問してあげると、子供もイメージを言葉にしやすくなると感じました。
3.画面構成を伝える
どんな画面イメージにしたいかをあらかじめ言葉にしておきます。
- 色味（明るい・黒背景・ポップなど）
- タブ構成にしたい
- ホーム画面を付けたい
- ボタンの位置や雰囲気
ざっくりでも「こうしたい」があると、仕上がりが子供の持っているイメージにぐっと近づいていくかと思います。
4.最後に技術的な条件を付与（大人が担当）
ここは子供というより、大人が補足する“技術的な部分”になります。 今回は単体ファイルでオフラインでも動くアプリにしたかったので、「HTML形式でダウンロードできて、他のパソコンでも動くようにしてください。」と書き加えました。
するとClaudeが、
- HTML1ファイルで完結する構成
- ブラウザにデータを保存する仕組み
など、必要な処理を自動で整えてくれ、ファイルをダウンロードできるようにしてくれました。
作ってみた感想
実際に作ってみて感じたのは、こちらが簡単な要望を伝えるだけで、あとはClaudeが良い感じに整えてくれるということでした。 ものの10分ほどでアプリが形になってしまい、「未来ってこういうことか…！」と感動するほどの体験でした。
無料プランでも、シンプルなアプリなら十分に作れますし、何より子供のアイデアがそのまま形になっていく過程が本当に楽しい。ワクワクしながら画面をのぞき込む子供の顔を見るのも嬉しかったです。そして何より、「こうしたいね」「じゃあ書いてみよう」と親子で相談しながら作る時間が、とても良い経験になりました。
もちろん、あまりに複雑すぎる要望やコードを何度も修正したり、長いやり取りを続けると無料枠の制限に当たりやすいかとは思います。ヘビーに使うなら課金という選択になるかなと思います。
さいごに
いかがだったでしょうか。今回は我が家の“作ってみた”紹介でした。
もちろん、プロンプトの書き方もアプリの内容も自由ですし、あくまで一例です。生成されたものに責任を持つことはできませんが、AIプログラミング学習の最初の一歩としてはとても良い体験になりました。親子で「作れるかも！」というワクワクを感じられました。
無料プランでも十分すごいのですが、使っているうちに“これは有料版も気になる”と思うほど便利でした。我が家はきっと、課金します。それでは、また！
