結論：プログラミング知識ゼロでも、本格的なサイトを作れる！
プログラミングの実務経験ゼロの僕が、Claude Code を相棒にして、
リアルタイムで対戦できる日本語タイピング練習サイトを本番公開しました。
それがこの カケルタイピング（https://kakeru-typing.com）です。
「AIでToDoアプリ作ってみた」みたいな話ではなく、
- 複数人が同時に同じ文章を打って競うリアルタイム対戦
- 漢字にふりがなを振って打てる日本語エンジン
- 一人で延々練習できるエンドレスモード＋スコア記録
- Googleログイン＆プレイ履歴の保存
- 記事を投稿できる管理画面（予約投稿つきの自作CMS）
- Google Analytics の数値を管理画面に表示するダッシュボード
- sitemap / Search Console / OGP まで含めたSEO対応
——ここまでを、コードを自分でゼロから書く力が無い状態から作りました。
この記事は「どうやって作ったか」と「未経験者がAIと開発するときのコツ」を、正直にまとめたものです。
何が一番すごかったか：自分は「監督」に徹せた
一番の発見は、自分が手を動かすのではなく、Claude Code に手を動かしてもらうという働き方でした。僕の仕事は、
- 何を作りたいかを日本語で伝える
- 出てきた画面を見て「ここをこう直して」とフィードバックする
- エラーが出たらそのまま貼る
の3つだけ。設計・実装・デバッグ・デプロイ・DB設計・SEO設定まで、実際の作業はAIが進めてくれました。サッカーで言えば、僕は監督で、Claude Code が選手です。
うまくいったコツ
コツ1：1回に1機能だけ頼む
「全部いい感じに作って」だと迷子になります。「エンドレスモードのリザルトに WPM を足して」「対戦の待機画面の文言を1行にして」のように、画面 → 次の1アクションの粒度で頼むと、確実に積み上がります。
コツ2：スクリーンショットが最強の仕様書
言葉で説明しづらいUIのズレは、スクショを撮って渡すのが圧倒的に速いです。「ヘッダーの高さがホーム画面と違う」「ミスした時の表示がキャラと被る」みたいな指摘は、画像1枚で一発で伝わりました。
コツ3：エラーは理解せずそのまま貼る
PERMISSION_DENIED だの commit author email is not valid だの、最初は意味不明でした。でも全文コピペして渡せば、原因の切り分けから直し方まで面倒を見てくれます。「分からないなりに、分からないものをそのまま渡す」が正解でした。
コツ4：怖い所こそレビューしてもらう
管理画面を作ったとき、「ログインした自分以外が記事を消せたら困る」と不安でした。そこでセキュリティ観点でレビューしてと頼むと、「サーバー側で管理者メールを必ず検証」「非管理者には404を返して存在を隠す」といった対策まで入れて、危ない箇所を潰してくれました。未経験者にとって、この“壁打ち相手”の安心感は大きいです。
詰まったところと、その乗り越え方
正直に言うと、何度も詰まりました。でも全部、貼って・聞いて・直してもらう、で越えられました。
- デプロイがなぜか止まる：原因は「コミットの作者メールの形式」と「請求先住所の未登録」。エラー文を貼ったら特定してくれました。
- 対戦サーバーが時々固まる：無料プランは15分で寝てしまう仕様。死活監視で5分おきに起こす、という定番テクで解決。
- アクセス解析の連携で権限エラー：Googleの設定が浸透するまで数分待つ必要があった、という切り分けまで一緒にやってくれました。
- 漢字のふりがながズレる：読みと表記の対応づけを自動チェックする仕組みを入れて、データ追加のたびに全件検証するようにしました。
「エラー＝終わり」ではなく「エラー＝次のヒント」になったのが、続けられた理由です。
未経験者がAI開発で本当に大事だったこと
- 完璧を目指さない：まず動くものを公開して、後から1つずつ良くする。
- 小さく刻む：大きな注文より、小さな注文の連続。
- 見せて直す：スクショとエラーログは、言葉より雄弁。
- 任せきらない：何を作りたいか・どこが嫌かは、人間（自分）にしか決められない。ここだけは手放さない。
技術力そのものより、「作りたいものを言語化する
X(旧Twitter)でも情報などを発信していっています！
ぜひフォローしてもらえると嬉しいです！
https://x.com/ryo_ai_program