結論：プログラミング知識ゼロでも、本格的なサイトを作れる！

プログラミングの実務経験ゼロの僕が、Claude Code を相棒にして、
リアルタイムで対戦できる日本語タイピング練習サイトを本番公開しました。

それがこの カケルタイピング（https://kakeru-typing.com）です。

「AIでToDoアプリ作ってみた」みたいな話ではなく、

複数人が同時に同じ文章を打って競うリアルタイム対戦
漢字にふりがなを振って打てる日本語エンジン
一人で延々練習できるエンドレスモード＋スコア記録
Googleログイン＆プレイ履歴の保存
記事を投稿できる管理画面（予約投稿つきの自作CMS）
Google Analytics の数値を管理画面に表示するダッシュボード
sitemap / Search Console / OGP まで含めたSEO対応

——ここまでを、コーディングの知識が全く無い状態から作りました。

この記事は「どうやって作ったか」と「未経験者がAIと開発するときのコツ」を、まとめたものになります。

未経験者のAI開発で本当に大事だと感じたこと

完璧を目指さない：まず動くものを公開して、後から1つずつ良くする。
小さく刻む：大きな注文より、小さな注文の連続。
見せて直す：スクショとエラーログは、言葉より雄弁。
任せきらない：何を作りたいか・どこが嫌かは、人間（自分）にしか決められない。ここだけは手放さない。

何が一番すごかったか：自分は「指示」に徹せた

一番の発見は、自分が手を動かすのではなく、Claude Code に手を動かしてもらうという開発方法でした。僕の仕事は、

何を作りたいかを日本語で伝える
出てきた画面を見て「ここをこう直して」とフィードバックする
エラーが出たらそのまま貼る(スクショでOK)

の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の設定が浸透するまで数分待つ必要があった、という切り分けまで一緒にやってくれました。
漢字のふりがながズレる：読みと表記の対応づけを自動チェックする仕組みを入れて、データ追加のたびに全件検証するようにしました。

「エラー＝終わり」ではなく「エラー＝次のヒント」になったのが、続けられた理由です。

技術力そのものより、「作りたいものを言語化する力」と「気になった所を妥協せず指摘する力」が効きました。これは、たぶんプログラミング未経験でも持っている力です。

技術的にどう動いているのか（深掘り編）

「中身が気になる」という人向けに、実装の詳細は別記事に分けて書いていく予定です。
今回はとりあえず完成した！という結果の報告でした。
技術面が気になる方はぜひフォローして待っていただけると幸いです。

まとめ

プログラミング技術ゼロでも、Claude Code と二人三脚なら、
リアルタイム対戦・日本語対応・管理画面・SEOまで揃ったちゃんとしたサービスを、無料で公開できました。

「やってみたいけどできるかな？」と思っている人ほど、一度試してほしいです。
完成品はここで遊べます → カケルタイピング（https://kakeru-typing.com）。

同じように「作りたいものはあるけど技術が無い」人の、最初の一歩になればうれしいです。

X(旧Twitter)でも情報などを発信していっています！
ぜひフォローしてもらえると嬉しいです！
https://x.com/ryo_ai_program