中野竜之介 Ryunosuke Nakano 数学博士学生/プログラマ Mathematics Researcher · Programmer

触って理解する日本語の数学学習サービス「テデトク」

2026/07 - 運用中 / 企画 / 設計 / 実装 / 教材執筆・全コース監修 / 運用

触って理解する日本語の数学学習サービス「テデトク」

概要

テデトク(tedetoku.jp)は, 「読む前に、動かす。」をコンセプトにした日本語のインタラクティブ数学学習サービスです. スライダーやドラッグで図が動く教材を中学数学から大学数学まで全13コース, 118章, 260超のレッスンとして提供し, 月額課金(通常1,480円, 学割500円)で商用運用しています. 大学範囲は線形代数, 微積分, 統計学, 機械学習の数学, 微分方程式, フーリエ解析, 複素解析, 偏微分方程式, ベクトル解析, 微分幾何, トポロジーの11コースです.

  • ポジション: Brilliant.org 型の「触って学ぶ」形式が日本語圏に存在しない空白を狙い, 日本のカリキュラム(高校課程, 大学1〜2年, 院試, 統計検定2級)に適合させた日本語ネイティブ版. 動画(見る)でも書籍(読む)でもない第三の形式
  • ビジネスモデル: 中学と高校の2コースを全編無料の入口とし, 大学11コースは序盤無料+後半と発展章をプレミアム化するフリーミアム
  • 体制: 開発, インフラ, 運用, デザインは単独. 教材はコース別の執筆担当制で, 全コースの監修と数学的な最終責任を自分が担当

背景と課題

  • 「式は追えるのに何をしているのか分からない」という大学数学のつまずきに対し, 操作して確かめられる日本語教材が存在しなかった
  • 数学教材は 1 つの定義ミスや条件漏れで信頼が崩れる. 個人規模でも「誰が何を確認したか」を公開できる品質保証の仕組みが必要だった
  • 有料サービスとして成立させるには, 教材だけでなく課金, 解約, 法務表示, プライバシー, アクセシビリティ, SEO まで商用水準が求められる
  • 競合が日本語化される前に市場へ出すため, 短期間で公開し, 公開後も継続的に出荷できる開発体制が必要だった

解決したこと

  • 市場調査から2日で本番公開(tedetoku.jp)し, その翌日に Stripe 実課金を開始. 以後も教材拡張, 品質監査, アクセシビリティ対応を継続的に出荷
  • 「体感 → 体系 → 演習」の3層に教材を構造化し, 動かして掴んだ直観を定理と計算に接続する学習ループを設計
  • 可視化の数値を教材表示コードとは別実装の検算スクリプトで再計算する体制を作り, 「もっともらしいが誤り」な図を機械検査で排除
  • 執筆, 監修, 独立レビュー, コード検算, AI補助の役割分離をサイト上で公開し, 外部のデスク評価で 54点から90点(100点満点) まで改善

サービス全体構成

画面構成

  • / LP(無料の行列変換デモ, 3つの学習ルート, 品質保証, 料金比較, FAQ, チェックリスト登録)
  • /courses/[courseId]/[slug] レッスン本体(MDX + インタラクティブ図 + 確認クイズ + 操作チャレンジ)
  • /roadmap /roadmap/[track] 中学から大学までの接続グラフと, 専攻別(機械学習, 物理など)の学習順提案
  • /shindan 学習ルート診断
  • /mock-exam 統計検定2級の模試モード(35問, 90分, 5択)
  • /subscribe /account 課金, プラン管理, 解約(期間末解約), 学割申請
  • /studio /admin/* 編集者CMS(下書き執筆から承認公開まで)と管理画面
  • /about /changelog 執筆と監修の体制, コース別レビュー状況, 更新履歴の公開

アーキテクチャ

flowchart LR U[利用者] -->|HTTPS| V["Vercel
Next.js 16 App Router"] V --> S[("Supabase
PostgreSQL + RLS")] V --> ST["Stripe
Checkout / Webhook"] V --> R["Resend
メール配信"] V --> GA["GA4 / Speed Insights"] subgraph 教材パイプライン MDX["MDX + KaTeX"] --> EMB["埋め込みレジストリ
(ホワイトリスト)"] EMB --> VIZ["Mafs 2D / three.js 3D"] CHK["検算スクリプト群
(教材表示とは別実装)"] -.数値検証.-> VIZ end V --- MDX
  • コンテンツの正本は git 管理の静的 MDX と純粋 TS データ. DB(Supabase)は下書き, 進捗, 課金状態などの動的データだけを持ちます
  • DB 読み取りは全経路 fail-open にしています. Supabase の障害時やテーブル未作成時は静的データやローカル JSONL へ縮退し, 教材閲覧を止めません. 環境変数を空にするだけで本番非接触の隔離テスト環境になります
  • レッスン Markdown の描画は rehype-sanitize と埋め込みコンポーネントのホワイトリスト(レジストリ)を通します. CMS 由来の下書きが混ざっても, XSS と不正な埋め込みはこの境界で遮断されます

教材設計(3層構造)

  1. 体感レッスン: Mafs, canvas, three.js の図(計100超)をドラッグ, スライダー, 数値入力で操作し, 概念を掴む. 「触る → 定義へ戻る → 式で確かめる」の一貫構成
  2. 体系まとめ: 定理カード511枚(コース別の純粋 TS データ). 定理は成立条件を明記する理系水準の方針で, 検査スクリプトが全カードを機械検証
  3. 計算演習: 数値が毎回変わる演習テンプレート333種. 手計算可能な整数や簡単な分数になるよう生成を構造的に制約し, 200 seed × 全テンプレートの検算で退化(自明解, 誤答衝突)を検出

これに加えて次の3つを備えます.

  • 模試モード: 統計検定2級の実試験形式(35問, 90分, 5択, 全12分野). 出題ブループリントで毎回全範囲をカバーし, 誤答選択肢は「正答と衝突しない」ことを生成時に保証. 46テンプレートを 1,500 seed で検算
  • 接続ロードマップ: コース間の前提関係グラフ(lib/bridges)を土台に, 「いまどこにいるか」「次にどこへ進むか」を中学から大学まで一本の線で提示
  • 章メタデータ: 全118章に到達目標と目安時間を執筆(全レッスン本文を実読して作成)

主要機能

1. 認証とアカウント

  • メール確認, パスワード再設定, アカウントロック, Google OAuth
  • セッションは HMAC-SHA256 署名 cookie と session_version による全端末即時失効. パスワードは scrypt
  • 規約とプライバシーポリシーへの同意を版付きで記録(consent log). 改定時は定数と表示を連動更新

2. 課金(Stripe)

  • Checkout(月額1,480円), Webhook 署名検証, Customer Portal(期間末解約)の三重の加入状態同期
  • 学割(500円)は学校発行メール(.ac.jp 等)の確認制で自動適用
  • テスト環境での E2E(4242)を全通過させてから本番切替. コードは API キーの値だけで test/live が切り替わる設計
  • 解約後も支払い済み期間の終わりまで利用可能なことを, 実装(cancel_at_period_end)と法務表示(規約, 特商法, 料金ページ)の両方で一致させて明示

3. 編集者CMS

  • 編集者ロールがブラウザ上でレッスン下書き(Markdown + KaTeX + 名前指定の埋め込み)と新規コース構成を執筆し, 管理者が承認して公開
  • DB 由来コースは静的データとマージ(ID 衝突は静的優先). 承認済み下書きは MDX 書き出しで git 管理へ昇格できます
  • 確認クイズのヒントと解説はレッスン画面上でインライン編集でき, 静的 MDX と正誤ロジックには触れない安全なオーバーレイ構造

4. メール配信

  • 登録直後に線形代数1〜3章の操作チェックリストを1通配信(Resend)
  • 配信停止は RFC 8058 One-Click 対応. トークンは stateless HMAC(DB 照会なし)で, List-Unsubscribe ヘッダーと timingSafeEqual 検証まで実装
  • 「現在の配信は1通のみ」という実態を登録前に明示し, 保存期間(配信完了から90日)をプライバシーポリシーに明記

5. 学習体験

  • レッスン完了記録, コース進捗率, 「続きから再開」, 復習キュー
  • 確認クイズ(選択, 数値)は誤答フィードバックと段階ヒント, 定義への戻り導線つき
  • 操作チャレンジは「スライダーで条件を満たす状態を作る」形式で, 明示的な判定ボタンとホールド判定を共通部品化

数学の品質保証

誤りが一つでも見つかれば信頼を失うという数学教材の性質に対し, 個人規模でも利用者が検証できる形の品質表示を作りました.

  • 役割分離の公開: 執筆(コース担当者), 監修と最終責任(自分), 独立数学レビュー(コミュニティ協力者, 実名), 数値検算(コード), AI(誤植や条件漏れの候補抽出のみ)を分けて運営ページに明記. AI を品質保証の主体として表示しない方針
  • 別実装検算: 可視化に使う固有値, 係数, 判定値は, 教材表示コードとは別実装の check スクリプト群で再計算して一致を確認. 定理カード511枚, 演習333種×200seed, 模試46種×1,500seed を, 編集のたびに全件パスするまで直す運用
  • 全コース品質監査: 誤り(BLOCKER)が残っていないことを指摘1件ずつの検証で実証したうえで, 厳密性(成立条件の明記, 過度な一般化, 図と本文の整合)の指摘141件を台帳管理して解消. ε-δ の全称量化, グリーン/ストークスの C¹ と向きの条件, 同相と ambient isotopy の区別など, 入門可視化にありがちな「言い過ぎ」を修正
  • 誤り報告の窓口: 各レッスンフッターに執筆者, 最終更新日, 報告先を明示し, 指摘は更新履歴に公開反映. Discord の監修コミュニティからの査読は cron 回収, 検収, 実名クレジットのパイプラインで運用

アクセシビリティ(WCAG 2.2)

「図を動かして学ぶ」というサービスの中核は, 放っておくとドラッグ前提になり, 支援技術の利用者を締め出します. 操作部品を共通化して全図へ展開することで, 触って学ぶ体験と支援技術対応を両立させました.

  • 可動点を持つ全47図に共通部品(数値入力, 増減操作, プリセット, 現在状態の文章表示)を実装し, ドラッグなしでも課題を完遂可能に(SC 2.5.7 Dragging Movements)
  • 入力ラベルは「KaTeX の本物の組版(視覚)+読み上げ用テキスト(SR)」の二層構成. NVDA 実機テストで特殊グリフ(î, ĵ 等)の読み飛ばしを発見し, 約46コンポーネントを一括是正
  • 数式は KaTeX の MathML 併用でスクリーンリーダーが式の意味を読み上げ, 視覚用 HTML は読み上げ対象から除外
  • 3D図(10図)にキーボードカメラ操作(方位, 仰角, ズーム)を実装. prefers-reduced-motion で自動回転を静止
  • 正誤や系列の区別は色だけに依存しない(ラベル, 線種, 形状の併用を22箇所是正). タップターゲット44px以上, 状態変化の aria-live 通知, フォームの可視ラベルとエラー通知

セキュリティ

  • 認可, IDOR, 注入, 秘密漏洩, 認証暗号の自己監査を実施し, 11件を是正(署名なし cookie によるペイウォール回避, 未確認アカウントへの OAuth 連携乗っ取り, JSON-LD Stored XSS, 認証トークンの GA 送信, オープンリダイレクト等)
  • セキュリティヘッダー(HSTS 2年, nosniff, X-Frame-Options, Referrer-Policy, Permissions-Policy), 全テーブル RLS, Vercel Firewall のレート制限, npm overrides による脆弱性解消(audit 0件)
  • Webhook 署名検証, HMAC トークンの timingSafeEqual 比較, レート制限つきの計測 API(イベント allowlist)

SEO, 計測, 運用

  • sitemap, robots, canonical, OGP, 構造化データ(Organization, Course, LearningResource, BreadcrumbList)を整備し, コース別に章タイトル実データから SEO タイトルを生成
  • 計測は GA4(ファネルイベント), Vercel Analytics, Speed Insights(RUM). クライアントエラーは自前の収集エンドポイント(レート制限つき)で監視
  • Lighthouse CI を GitHub Actions で週次実行(本番5テンプレートを計測)
  • 本番デプロイごとにスモークテスト(主要パスのステータスと今回変更点の文言確認)を実施し, 変更内容を Discord へ自動通知

外部評価による改善イテレーション

公開直後から外部のデスク評価(100点満点)を継続的に受け, 指摘, トリアージ, 実装, 再評価のループを回しました.

  • 54点(公開2日目): 信頼資産(著者と品質保証の公開), 課金導線, 確認クイズの導入
  • 68点: 数学的言い切りの精密化, 外部検証可能な著者情報(researchmap 連携)
  • 80〜81点: 全図の非ドラッグ操作化, 構造化データ, グローバルナビ, 継続UX(続きから再開)
  • 87〜88点: 同意ログ, 3Dキーボード操作, 色識別の是正, 章メタ全118章, 課金透明性
  • 90点(現在): 執筆と監修のコース担当制公開, AI 役割の分離明記, メール配信の実態一致, 保存期間の適正化

評価者の誤読には実測で応答しました. たとえば「数式の機械可読性が不安定」という指摘に対しては, 本番16ページ, 約550数式ブロックを Playwright で自動検査し, 構造欠陥ゼロを示して反証しています.

開発プロセス

  • AI コーディングエージェントを並列に運用する開発体制を構築し, 単独でも1日に複数機能を出荷する速度を維持. ただし数学コンテンツは全件を人手で検収(数値検証と概念対応の確認)し, AI の役割は候補抽出に限定するという方針をサイト上でも公開
  • 教材の実装規約(新コース追加, 埋め込み, データ層の作法)と品質チェック(check スクリプト必須)を文書化し, 誰が書いても品質バーを割らない仕組みに

今後の改善余地

  • 独立数学レビューの対象コース拡大(統計と機械学習を優先)
  • 支援技術での全学習フロー完遂の実機検証(NVDA / VoiceOver)
  • 受講前後での学習成果の測定(定着率, 章完了率, 誤答パターン分析)
  • ログイン後のパーソナライズドロードマップ(完了状況と誤答に応じた, 次の1レッスンの提案)

サービス: https://tedetoku.jp/