作品の仕組み　2026-09-09

暗記シートスクラッチの仕組み ― 参考書の赤字を、ブラウザの中だけで銀色に変える

参考書のページを撮って読み込むと、赤い重要語句が銀色のスクラッチに変わる。暗記シートスクラッチの裏側は、画像をサーバーに送らず、ブラウザの中で赤い画素を拾い、まとまりを箱にして、その上に銀を塗る、という単純な仕組みです。赤の判定式、4ピクセル刻みの走査、箱の作り方、削る処理、そして「自信」と「正誤」を掛け合わせて4状態に分ける設計の理由を書きます。

目次を見る →

この記事の位置: AIが作り、コードが検分する → [送らない（端末の中で完結する）] → 数字と実寸 → 教材の設計

試作を最初に使ったのは、高校二年の甥でした。世界史の参考書のページを撮って読み込むと、赤字が21か所、銀色になった。甥は削る前に「わかる」を押し、削って、「間違ってた」を押す、を繰り返して、21か所のうち「わかる」と言って間違えたのが4か所。「ここ、自信あったのに」。その4か所が、この作品で一番見せたかったものです。紙の赤シートでは、この4か所は「思い出せなかった」の中に紛れて、見えません。

暗記シートスクラッチは、手持ちの参考書のページを写真に撮って読み込むと、赤や朱色の重要語句が銀色のスクラッチに変わり、削って答え合わせができる学習ツールです。紙の赤シートの置き換えに見えますが、作った動機は別のところにあります。順に書きます。

最初に決めたのは、画像をサーバーに送らないことです。参考書は出版社の著作物で、利用者の学習ノートは個人の情報です。それを預かる仕組みにすると、保管と削除の責任を負い、利用者にも「送って大丈夫か」という不安が残ります。だから、画像の読み込みから赤字の検出、銀の描画、削る操作、正誤の記録まで、すべてをブラウザの中（利用者の端末の中）だけで完結させました。KuraLabのサーバーには、画像も検出結果も回答も、一切届きません。

赤字の検出は、機械学習ではなく、色の式一本です。読み込んだ画像をキャンバスに描き、画素ごとに赤・緑・青の値を見て、「赤が125より大きく、赤が緑の1.28倍より大きく、赤が青の1.18倍より大きく、三色の最大と最小の差が42より大きい」画素を「赤い」と判定します。赤字だけでなく朱色や濃いピンクの印刷も拾えるように、緑と青との比で決めています。黒い文字は三色が揃って低いので除外され、白い紙は三色が揃って高いので除外されます。この式は、実際の参考書を何冊も撮って調整したもので、赤の彩度が低い印刷や、暗い場所で撮った写真では拾いきれないことがあります。それが「簡易検出」と呼んでいる理由です。

全画素を見ると重いので、4ピクセル刻みの格子で走査します。格子の一マスの中で赤い画素が一つでもあれば、そのマスを「赤あり」にします。次に、赤ありのマスを上下2マス・左右3マスに膨らませます。文字は画数の間に隙間があるので、膨らませないと一文字が何個もの箱に割れてしまう。横に広めに膨らませるのは、横書きの語句が一つの箱にまとまるようにするためです。そのうえで、つながっている赤ありマスを一つの塊として集め（同じ色の領域を塗りつぶしていく要領です）、塊ごとに外接する長方形を作ります。小さすぎる塊（ノイズ）と、横幅が画像の85%を超える塊（赤い罫線や見出しの帯）は捨てます。残った長方形に少し余白を足したものが、銀を塗る「箱」になります。

箱には、それぞれ透明なキャンバスを重ね、銀色の塗りと「SCRATCH」の文字を描きます。指やマウスでなぞると、その軌跡の部分だけを透明に戻し（キャンバスの合成モードで「消す」操作です）、下の赤字が見えてきます。一定の割合を削ると、その箱は「開いた」扱いになります。宝くじのスクラッチと同じ仕組みで、削る手応えを残したのは、「めくる」より「削る」ほうが、答えを見る前に一瞬ためらう時間ができるからです。

その「ためらう時間」が、この作品の本題です。削る前に「わかる／わからない」を選び、削った後に「合ってた／間違ってた」を記録します。この二つの掛け合わせで、問題は四つに分かれます。自信あり×正解は「盤石」、自信なし×正解は「まぐれ」、自信あり×不正解は「落とし穴」、自信なし×不正解は「のびしろ」。紙の赤シートは、隠して思い出すことしかできず、「思い出せた」と「分かっている」を区別できません。試験で事故を起こすのは、分かったつもりで間違える「落とし穴」で、それを選び出して次の周回の先頭に置く。過去問ループの記事で書いた「確信度で周回する」考え方を、参考書の赤字に持ち込んだのが、この作品です。

試作の段階で、色の式は五回変えました。最初の式は「赤が緑と青より大きい」だけで、肌色の写真や、黄ばんだ紙の影まで拾って、ページの半分が銀色になりました。二回目で「赤が緑の1.28倍より大きく、青の1.18倍より大きい」の比を入れ、三回目で「三色の最大と最小の差が42より大きい」を足して、彩度の低い部分を落としました。四回目と五回目は、実際の参考書で試した結果の微調整です。試したのは、英単語帳、日本史、世界史、公務員試験の問題集、行政書士の民法のテキスト、の五冊。赤の印刷の濃さは本によって違い、朱色寄りの本と、ピンク寄りの本で、閾値の効き方が変わります。今の式は、この五冊で、赤字をできるだけ拾い、黒字と紙を拾わない、という線で決めたものです。どのくらいの割合を拾えたかは記録を残していないので、数字では書けません。

箱の作り方も、二回作り直しました。最初は赤い画素を一つずつ箱にしていたので、「憲法」の二文字が、画数の隙間で七つの箱に割れました。格子を4ピクセルにして、上下2マス・左右3マスに膨らませる、という今の形にしてから、横書きの一語がほぼ一つの箱にまとまるようになりました。それでも、赤い罫線と語句がくっついた場所や、行間が狭い本では、二語が一つの箱になることがあります。手動で箱を分ける機能がないのは、本文に書いたとおりで、改善の一番上に置いています。

甥の「自信あったのに」の4か所は、その週の周回の先頭に置かれました。次の週、同じページで、4か所は全部正解。代わりに、別の3か所が「わかる」で間違えました。落とし穴は、なくなるのではなく、移動します。それを毎週、先頭に出し続けるのが、この作品の役割です。

現在はβ版で、画像1枚ずつ、記録はその場限りです。PDFや複数ページ、保存と再開、検出漏れの手動修正は、まだありません。改善は工事日誌に残しています。仕組みとしては単純ですが、「送らない」「学習の判断を利用者に残す」「落とし穴を先に出す」の三つは、機能が増えても変えない部分です。

甥が最初に見つけた4か所は、参考書の赤字21か所のうち、紙の赤シートでは見えなかった4か所です。画像を送らない、判断を利用者に残す、落とし穴を先に出す。この三つを変えない、と本文の最後に書きました。三つ目が、この4か所のことです。

執筆：長澤 湊（宅地建物取引士・行政書士・測量士補）　内容確認日：2026-10-03

この記事は制度と手続きの一般的な説明で、個別の事案についての法律・税務の相談や判断ではありません。制度や数字は内容確認日の時点のものです。ご自身の事案は、弁護士・司法書士・税理士・行政書士など、該当する専門家に確かめてください。

あわせてどうぞ

• 暗記シートスクラッチ ― あなたの参考書を、問題集に。
• 海事代理士の勉強法 ― 確信度で周回する
• 土地価格スキャンの仕組み

解説記事一覧