学習障害のある子が離脱しないアプリの設計｜「✕を出さない」から始めた4つの決めごと

漢字学習アプリを作るとき、最初に決めたのは機能ではなく「やらないこと」でした。✕を出さない、制限時間を設けない、待機中にアニメを出さない、クリーム色の背景を使う。その理由を書きます。

前提：何を作ったか

小学1〜6年生向けの漢字学習アプリを作りました。1画ごとに、かたち・書きはじめと書き終わりの位置・とめはねはらい・書き順を採点します。

作るときに最初に決めたのは、機能ではありませんでした。「やらないこと」を4つ決めました。

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

前提は「学習障害のある子が離脱しないこと」です。この制約を先に置いてから、機能を考えました。

決めごと1：✕を出さない

学習アプリで不正解を示す方法として、赤い✕は定番です。これをやめました。

理由は、✕が「できなかった」という体験として強く残るからです。学習に苦手意識がある子にとって、1回の✕が次に進む意欲を削ぎます。

では間違いをどう伝えるか。「どこがどう違うか」を示す形にしました。

• 書いた線と、正しい線の位置の差を示す
• 何画目が違ったかを示す
• とめ・はね・はらいのどれが足りないかを示す

正誤の判定ではなく、差分の提示です。同じ情報でも、受け取り方が変わります。

これは判定エンジンの精度とは別の話でした。中では厳密に採点していますが、表示のしかたを変えているだけです。

決めごと2：制限時間を設けない

タイマーを置くと、ゲーム性は上がります。しかし外しました。

時間に追われると、考える前に手が動きます。 書き順を覚えることが目的なのに、速さを競い始めると本末転倒です。

そして時間制限は、処理に時間がかかる子を構造的に排除します。 同じ問題を解いているのに、時間内に終わらないという理由だけで「できなかった」ことになります。

代わりに置いたのは、進んだ量が見える形です。何問解いたか、何字覚えたか。速さではなく積み上げを見せます。

決めごと3：待機中にアニメーションを出さない

これは見落とされやすい部分だと思います。

多くのアプリは、待機中にキャラクターを動かします。画面を賑やかにして、飽きさせないための工夫です。

動きは注意を奪います。 集中を持続させにくい子にとって、画面の隅で何かが動いているだけで、いま取り組んでいることから注意が逸れます。

だから待っている間は、画面を静かにしておくことにしました。動くのは、操作に反応したときだけです。

演出を足すほど良くなるとは限らないという判断でした。

決めごと4：クリーム色の背景とUDフォント

真っ白な背景は、まぶしさを感じる子がいます。 コントラストが強すぎて、文字が読みづらくなることがあります。

背景をクリーム色にすると、コントラストが下がって目の負担が減ります。紙のノートに近い見え方になります。

フォントはUDフォント（ユニバーサルデザインフォント）を使いました。文字の形が読み分けやすく設計されているものです。

漢字学習アプリでは、フォント選びが直接学習内容に関わります。 お手本の字形が読み取りにくければ、正しく覚えられません。

設計として効いたこと

作ったあとで振り返ると、これらの決めごとには共通点がありました。

どれも「引き算」です。

• ✕という表現を引く
• 時間制限を引く
• アニメーションを引く
• コントラストを下げる

機能を足すのではなく、離脱の原因になりうるものを取り除いた形になっています。

そして重要なのは、これらが学習障害のある子だけに効くわけではないという点です。急かされずに取り組める、画面が静かで集中できる、目が疲れにくい——誰にとっても取り組みやすくなっています。

つまずきやすい点

判定のしきい値は、実際に子どもが書くまで決まらない

書き順やとめはねはらいの判定には、しきい値が必要です。どれくらいズレたら「違う」とするか。

この数値は、机の上では決まりませんでした。 厳しすぎれば正しく書いても通らず、緩すぎれば学習になりません。

そこで、しきい値を1か所にまとめておく設計にしました。実際に子どもが使ったときの手応えを見て、そこだけを調整すればいい形です。

コードの各所に数値が散らばっていると、調整のたびに全部を探すことになります。あとから調整する前提のものは、調整する場所を1か所に寄せるべきでした。

依存パッケージを増やさない

このアプリは、npmパッケージを一切使っていません。素のHTML/CSS/JSで、ビルドも不要です。

理由は、数ヶ月後に自分が触れなくなるリスクを避けるためです。個人で作るものは、更新が止まったときにそのまま朽ちます。依存がなければ、久しぶりに開いても普通に動きます。

進捗の保存もブラウザのローカル保存だけにしました。サーバーが不要なので、維持費もかかりません。

オープンデータのライセンスを先に確認する

漢字のデータは、公開されているオープンデータから生成しました。ただしライセンスの条件があります。

使用したデータは、出典の表示が必須という条件のものでした。アプリの設定画面に出典を明記しており、これを消すことはできません。

商用化を考えているなら、データを使う前にライセンスを確認する必要があります。作ってから気づくと、作り直しになります。

よくある質問

まとめ

学習障害のある子が離脱しないアプリを作るために決めたのは、機能ではなく制約でした。

• ✕を出さず、差分を示す
• 制限時間を置かず、積み上げを見せる
• 待機中は画面を静かにする
• 背景のコントラストを下げ、UDフォントを使う

どれも引き算です。そして結果として、特定の子だけでなく、誰にとっても取り組みやすいものになりました。

配慮のための設計は、機能を制限することのように見えます。実際には、誰が使っても邪魔にならない形に近づける作業でした。

関連：Claude Codeで学習アプリを作った全記録｜同じ学習アプリをClaude CodeとChatGPTの両方で作った