Claude Codeで学習アプリを作った全記録｜漢字1026字の書き順判定まで内製した話

Claude Codeで小学生向けの漢字学習アプリを作り、公開までやりました。1画ごとに「とめ・はね・はらい」を採点する部分まで内製しています。何ができて何ができなかったかを、実物ベースで書きます。

結論：Claude Codeはこういう人向け

• 向いている人：作りたいものが具体的にあり、動くものを自分で確かめながら進められる人
• 向いていない人：仕様を丸投げして完成品が出てくることを期待する人
• 料金：Claude Pro（月額20ドル／2026年8月時点。円での請求額は為替と消費税で変動します）

「AIがコードを書いてくれる」より、「設計判断を自分がして、実装を任せる」道具と考えたほうが実態に近いです。

何に使ったのか

小学1〜6年生向けの学習Webアプリ「ブロックがくしゅう」を作りました。マイクラ風の見た目で、中心は漢字の書き取り判定です。

このアプリには、はっきりした設計上の制約がありました。

学習障害のある子が離脱しないことを前提にする。 具体的には次の4つです。

• ✕を出さない
• 制限時間を設けない
• 待機中にアニメーションを出さない
• クリーム色の背景とUDフォントを使う

この制約は自分で決めたものです。ここを決めるのは人間の仕事で、AIは決めてくれません。 逆に言えば、これさえ決まっていれば実装はかなり任せられます。

実際に作ったもの

漢字の書き順判定エンジン

一番手応えがあったのがここです。strokeEngine.js が、1画ごとに次の4点を採点します。

判定のしきい値は、同じファイルの CONFIG に全部まとめてあります。実際に子どもが書いたときの手ごたえを見て、そこだけを調整すればいい設計にしました。

この「あとから調整する場所を1箇所に寄せる」という判断も、自分で指示して作らせています。放っておくとしきい値がコードの各所に散らばります。

漢字データ1026字

1〜6年生の全1026字を収録しました。データはオープンデータから生成しています。

• KanjiVG（CC BY-SA 3.0）
• KANJIDIC2（CC BY-SA 4.0）

CC BY-SAなので、アプリの設定画面下にある出典表示は消せません。 ライセンスの確認と、それに沿った実装をどうするかは、生成する前に決めておく必要がありました。

依存パッケージゼロ

npmパッケージを一切使っていません。素のHTML/CSS/JSで、ビルドも不要です。進捗の保存はブラウザのlocalStorageだけ。

個人開発では、数ヶ月後に自分が触れなくなるのが最大のリスクです。依存を持たない構成にしておくと、久しぶりに開いても普通に動きます。

良かった点

決めたことは正確に実装される

「しきい値を1箇所に集約する」「✕を出さない」といった制約は、指示すればその通りに実装されました。しかも一度伝えておけば、その後の実装でも守られます。

大量データの整備が現実的な時間で終わる

1026字分のデータをオープンデータから生成する処理は、手作業なら現実的ではありません。この種の「単調だが量が多い」作業は、明確に得意分野でした。

公開までが一続きでできる

コードを書く、動作を確認する、デプロイする、までが同じ画面で完結します。

netlify deploy --dir . --prod

つまずいた点・デメリット

設計判断は肩代わりしてくれない

これが最大の注意点です。「学習障害のある子が離脱しない設計」という要件は、AIからは出てきません。何を作るか、どんな制約を置くかを決めるのは、最初から最後まで人間の仕事でした。

要件が曖昧なまま頼むと、それらしいけれど的外れなものが出てきます。手戻りの原因はほぼ全部これでした。

動作確認は自分でやらないと信用できない

「実装しました」と返ってきたものが、実際に触ると期待通りでないことがあります。特に判定のしきい値のような、感覚で良し悪しが決まる部分は、自分で触って確かめるしかありません。

書き順判定のしきい値は、結局のところ実際の子どもの手ごたえを見て調整する前提にしました。数値だけでは正解が決まらないからです。

生成物の置き場所に注意が要る

このアプリはNetlifyで publish = "." の設定にしていました。この状態だと、フォルダに置いたものが全部そのまま配信されます。 元データの作業ファイルを置きっぱなしにすると、意図せず公開されてしまいます。

作業用ファイルは公開フォルダに残さない、という運用ルールが必要でした。

使用量に上限がある

Proプランには利用量の上限があります。長時間まとめて作業する日は、途中で待ちが発生することがありました。

腰を据えて一気に作りたいタイプの人は、まず1ヶ月Proで使って自分の消費ペースを把握してから、上位プランを検討するのが確実です。最初から上位プランを契約する必要はありませんでした。

料金は妥当か

契約しているのは Claude Pro（月額20ドル／2026年8月時点） です。

判断材料として、自分がWeb制作を受注するときの基準を出します。当方はLP制作を5万円から、サイト制作を10万円から受けています。このアプリは、書き順判定エンジンという中核部分を含めて、外部に発注すれば明らかにその範囲を超える規模です。

それが月20ドルの範囲で内製できたので、費用対効果としては明確にプラスでした。

ただし、これは「設計は自分でやる」という前提が成立している場合の話です。要件を決められないまま契約しても、月20ドルが無駄になるだけだと思います。金額の問題ではなく、使い方の問題です。

まとめ

Claude Codeで作った実物はブロックがくしゅうで公開しています。

やってみて分かったのは、AIに任せられる範囲と、任せられない範囲がはっきり分かれているということでした。

設計を自分でやる覚悟があるなら、個人開発の速度は確実に変わります。逆に、そこを期待して導入すると失望します。