Day 5 - 12/5
でんせつのゆうしゃ - スマホで遊べるドラクエ風RPG
ReactJavaScript
Claude
概要
概要
スマホブラウザで5〜10分で遊べる、ドラクエ風のレトロRPGゲームです。懐かしいファミコン時代の雰囲気を再現しながら、タップ操作で手軽に冒険を楽しめます。
主な機能
- ターン制バトル: たたかう・じゅもん・どうぐ・ぼうぎょの戦略的コマンド選択
- 4種類の敵+ボス: スライム、ドラキー、ゴースト、ゴーレム、そして魔王との最終決戦
- 特殊攻撃システム: 敵の吸血、呪い、岩石落としなど多彩な攻撃パターン
- 8bit風BGM/効果音: Web Audio APIによるレトロサウンド
- 洗練されたドット絵風キャラ: SVGで描かれた鳥山明風のキャラクターデザイン
遊び方
1. 「ぼうけんをはじめる」でスタート
2. フィールドをタップで進む（ランダムエンカウント）
3. 敵を倒しながら魔王の城を目指す
4. 魔王を倒せばクリア！（途中で力尽きることも...）
リンク
制作時間
1.5時間
学んだこと・振り返り
技術的な学び
- 単一HTMLファイルでReactアプリを動かす方法（CDN経由のReact + Babel）
- Web Audio APIを使った8bit風サウンドの生成
- SVGでゲームキャラクターを描画するテクニック
- GitHub Pagesでの静的サイト公開の手軽さ
AIとの協働で気づいたこと
- 最初に要件を明確にすることで、手戻りが少なくなる
- 「MVPを先に作って、そこから改善」というアプローチが効果的
- デザインの指示は「〇〇風」のような参照があると伝わりやすい
次に活かしたいこと
- セーブ機能やレベルアップシステムの追加
- より多くのダンジョンや仲間システムの実装
- 他のレトロゲームジャンルにも挑戦してみたい
初回プロンプト（計画）
スマホ画面で動く、5-10分で完結するドラクエテイストなRPGゲームを作成して。
デザインはレトロ感があり、洗練された鳥山明風のキャラクターが躍動する感じで。
まずは簡単に動く必要な機能がついたデモ版を制作して欲しい。
制作する前に、まずは要件をまとめてください。
ちなみにゲームの公開は最もシンプルで簡単な方法でお願いしたい
チャレンジ生成ツールで作成した最初の計画です
メインAIツールの評価
Claude
⭐⭐⭐⭐
良かった点
- 要件定義から実装まで一貫してサポートしてくれた - 「鳥山明風のデザイン」という曖昧な指示も汲み取ってSVGで表現してくれた - MVP→改善版と段階的に機能追加する流れがスムーズだった - Web Audio APIでのBGM実装など、技術的に複雑な部分も一発で動いた
改善してほしい点
最初にArtifact形式で出力しようとしたが、スマホアプリでは動作しなかった。単一HTMLファイルでの出力を最初から指定すればよかった
総合コメント
「ドラクエ風RPGを作って」という一言から、要件整理→デモ版→改善版と対話しながら完成度を上げていけた。特にキャラクターデザインのSVG実装と8bit風サウンドの品質が高く、想像以上のクオリティになった。AIとの協働でゲーム開発がここまで手軽にできる時代になったことに驚き。
公開日: 2025/12/4