JLPT Grammar Deck を作り始めたとき、解決したかったのは具体的な問題でした。日本語文法の資料は十分にある一方、試験勉強では「今日は何を学ぶか」「次はいつ復習するか」「まだ不安定なのはどれか」を決めることのほうが難しくなります。
最近、プロジェクトの UI とプロダクト構成を全面的に見直しました。最新版は単なるカードのデモではなく、毎日開ける学習机のような構成です。N1〜N5 の文法 955 項目、Anki 形式のカード、SM-2 間隔反復、穴埋め練習、個人文法ライブラリ、学習分析がひとつの流れにつながりました。
機能一覧ではなく、学習を始めるホームへ
今回の変更で最も目立つのは、ホーム画面が機能カードの一覧から、学習を始めるための入口に変わったことです。
反転できる文法カードを中心に置き、「学習を始める」と「文法ライブラリを見る」を最も分かりやすい操作にしました。その下では、955 項目のライブラリ、SM-2、類似文法の比較、学習データ、Guest モード、個人文法、5 ステップの学習ループを順に紹介しています。
見た目は、紙、ノート、学習手帳を思わせる暖かいオフホワイトを基本に、セリフ体の見出し、等幅の小さなラベル、細い罫線、控えめな色面を組み合わせました。管理画面のような複雑さを避け、日本語そのものに視線を戻すためのデザインです。
955 項目を保存するだけでなく、管理できる
現在の内訳は、N5 が 129 項目、N4 が 135 項目、N3 が 206 項目、N2 が 233 項目、N1 が 252 項目で、合計 955 項目です。
各文法には意味、接続、例文、翻訳、注意点、記憶のヒント、類似文法を持たせられます。キーワード検索に加え、JLPT レベル、文法の場面、学習状況、お気に入りを組み合わせて絞り込めます。
大切なのは、件数だけではありません。似た表現を並べて比較し、各項目が未学習・学習中・習得済みのどこにあるかを確認できます。文法詳細ページはサーバー側で描画し、sitemap と robots にも対応したため、個別の解説をより安定して開き、共有し、検索できるようになりました。
全機能を無料開放し、Guest ですぐ始められる
最新版では従来の Pro 境界をなくしました。文法ライブラリ、学習データと復習分析、個人文法、穴埋め練習は、すべてのユーザーが無料で利用できます。課金壁も回数制限もありません。
ログインも必須ではありません。Guest モードでは、進捗、お気に入り、SM-2 の状態、復習履歴を現在のブラウザに保存します。端末間利用や長期同期が必要になった時点でログインし、ローカル進捗を Supabase に統合できます。
まず一度、本当の学習を完了してもらい、その後で必要なら登録する。これは今後も残したいプロダクトの原則です。
以前の Pro ページは「機能と更新計画」に変更しました。公開済みの機能と、間違いノート、CSV / JSON の一括入出力、モバイル改善、内容校正などの計画を分けて掲載しています。任意の支援窓口はありますが、支援の有無は機能利用に影響しません。
今、思い出すべき情報だけをカードに残す
学習ページは Anki 形式を維持しながら、現在の一枚に集中しやすくなりました。表面に表示するのは文法、レベル、必要最小限のヒントだけです。「答えを表示」してから、意味、接続、例文、注意点が現れます。
直近の更新ではカードの非表示面を独立させ、答えを見る前に裏面の情報が想起を邪魔しないようにしました。ページ上部には学習可能数、現在位置、残り枚数、対象レベル、再開操作を表示し、練習へのショートカットも常に見える位置に置いています。
裏面を見た後は Again、Hard、Good、Easy の 4 段階で評価します。SM-2 が習熟度、間隔、次回期限を更新し、評価後はすぐ次のカードへ進みます。前のカードは読み取り専用で、連打による二重記録もロックで防いでいます。
学習直後に、そのまま練習できる
練習ページはライブラリ内の例文から選択式 cloze 問題を生成します。別の固定問題集を管理する必要はありません。出題範囲は次の三つです。
- 今日練習した文法
- これまでに学習した文法
- 全文法（JLPT レベルで追加絞り込み可能）
回答後には正解、得点、進捗、解説を表示します。新版では学習ページと今日の復習ページの上部にも練習ショートカットを追加し、カードを見てから文中で判断するまでの移動を短くしました。
これは見た目以上に実用的な変更です。色や余白を変えるだけでなく、次に必要な操作を、その操作が欲しくなる場所に出しています。
基本分析と高度な分析を一つの画面へ
学習データ画面では、次の情報をまとめて確認できます。
- 今日の新規学習、復習、完了率、連続日数
- 学習済み、習得済み、お気に入りの件数
- N5〜N1 の進捗と全体習熟率
- 直近 7 日の推移と 4 段階評価の分布
- 最近の復習履歴
- 復習間隔ごとの記憶保持率
- Again や Hard が続く弱点文法
以前は段階を分けていた分析も、現在はすべて無料です。「今日は何回操作したか」だけでなく、「何を優先して学び直すべきか」「間隔が延びても覚えているか」を判断するための画面にしています。
個人文法も同じ学習システムへ
重要な既定文法をお気に入りにし、不要な内容を非表示にし、件数制限なしで私有文法を追加できます。個人項目は孤立したメモではなく、同じ学習、復習、分析の流れに参加します。
ログイン後のデータは Supabase PostgreSQL、Auth、Row Level Security で管理します。Guest 進捗は localStorage に保存し、ログイン後に統合します。最初の利用を軽くしつつ、長期学習にはアカウント同期を用意する構成です。
新しい UI の裏側で変えたこと
現在の技術構成は次のとおりです。
- Next.js 16 App Router + React 19 + TypeScript
- Tailwind CSS 4 と独自 UI システム
- Supabase PostgreSQL + Auth + Row Level Security
- localStorage の Guest 進捗とログイン後のクラウド統合
- SM-2、復習履歴、記憶保持率分析
- 例文を使った cloze 問題生成
- Vitest によるデータ・アルゴリズム・サービス層のテスト
- Vercel デプロイ
変更は見た目だけではありません。文法詳細はサーバー描画と runtime ISR に対応し、sitemap と robots を追加、カードデッキは遅延読み込みに変更しました。データ監査、重複除去、旧 ID のリダイレクトも続けています。内容中心の学習ツールでは、安定して表示できることと正しい文法へ到達できることが、洗練された UI と同じくらい重要です。
明日も開きたくなる学習机へ
現在の JLPT Grammar Deck には明確な循環があります。ライブラリで文法を探し、カードで思い出し、4 段階評価で SM-2 キューへ送り、穴埋め問題で確認し、学習データから次の重点を決めます。
再設計後の画面が伝えたいのは、「ここに 955 件の資料がある」だけではありません。「次に何をすればよいか分かる」ことです。学習ツールでは、その方向感覚こそ機能数以上に価値があると考えています。
本記事は 2026 年 8 月時点のプロジェクトを反映しています。公開日は 2026 年 5 月 1 日のまま変更していません。スクリーンショットは未ログインの Guest モードで撮影しました。
この記事を楽しんでいただけましたか？
役に立った場合は、私の活動を支援することをご検討ください。