英語学習にもGeminiとか、ChatGPTとかいろいろなAIを学習に取り入れ流ことが普通になりました。本当に便利なことだと思いますがAIの進歩って感じているよりずっとはやくて、いろいろ勉強することもおおくなってきたと感じてます。
AIとチャットする時、ずっと前に聞いたことや尋ねたことが流れていきますよね。 前の会話覚えていてくれたらなぁとか、同じことを聞いたとき、前もなんか聞いたことあったような。 ってなりませんか？
AIとの会話って本当に便利だけど、英語学習で使うとなるとどうしても昔のミスとか添削ってずっと前の会話を遡ってスクロールして復習したり、どっか別のとこにコピペでストックしておかないといけないし、その場で聞くだけなら最強ですが復習する面においてはあまり効率的じゃないのかなって言う部分も感じていました。
このAIとの会話で、自分がよく間違えるポイントや、英文の致命的エラーなど、このCLAUDE君（Claude Code）から出てきた情報をそのままAnkiカードにスーッといれられて、自分の弱点だけをひたすらめくっていけるカードができたら最強だよなとずっと思ってました。
CLAUDE君にVSCodeで英文を添削してもらうたびに、自分の英文の直すべき点・例文・別表現・関連単語まで整理してカードかしてもらおうと考えたわけです。
そうなんです、できちゃうんですよ。自然にルールさえつくれば勝手にバンバンつくってくれます。
ただカードをつくっていっても、Ankiのデフォルトのカードって正直ちょっと味気ないんですよね。デフォルトの設定だと文字だけでシンプルすぎて情報が整理されてないし、復習してるときに「あれ、なんでこれ間違えたんだっけ」とか、「どういうシチュエーションでまちがえたんだっけな」というのがパッと見でわかりにくい。
デフォルトのままで満足してる人もいると思うんですけど、自分は結構気になるタイプで。色とか文字の太さ大きさにメリハリあった方が視覚的に脳に入ってきやすいし、効率的だとおもうんです。
なので、CLAUDE君の添削結果をそのまま流し込める、英語添削専用のカードデッキ作って、HTMLでガッツリデザインしてみました。あもちろんCLAUDE君にです。
ミスがそのままカードになる、2つの仕組み
海外の友達に英語でメッセージを送るときや、英文を書いたときに、CLAUDE君に添削してもらうのが日常の習慣になっています。なんか友達とやりとりする英語こそ、自分が目指してる日常会話であり、その英文で致命的なエラーなどは癖になって、もう治すのが難しくなるまえになおしたい。わかりたい。
その会話ベースで出てきたミスは、毎回コピペしてはってくと手間ななので、ルールはないですが、「あ、添削してもらお」と思った瞬間、その場で流さずに全部蓄積するようにしています。
ただ、何でもかんでもミスを貯めると膨大な数になりそうで( ﾟдﾟ)
自信をずたずたにされないよう、エラーの蓄積のルールはミスの種類によって2つに分けました。
①意味が変わる・伝わらないレベルのミスは、その場で即カード化
そう、もう単純にね。難しいルールはいらないんすよ。 たとえば、なんとか法で、このbe動詞がなんちゃらなんちゃら・・・・になったとき、
・・・・と言うルールなんて自分には向いてない。もう単純にいこうよ！ってことで、
「ネイティブが『ん？』と考えないとわからないレベル」
「意味が変わってしまって伝わらない単語、表現」
上記のミスは、何回か繰り返したらカード作成とかじゃなく、ミスの1回目でもその場でカード化を提案してもらい、自分がOKを出したら作成しています。
最近、実際にカード化されたものを何個か挙げると、こんな感じです。
| 元の文（ミス） | 修正後 |
|---|---|
| My daughters were kimono there. | My daughters wore kimono there. |
| We had a lot of fun with there friends. | We had a lot of fun with their friends. |
| I’m going to explore town by my foot. | I’m going to explore town on foot. |
| How have you been up to? | What have you been up to? / How have you been? |
「wear（着る）の過去形はwore。wereはbe動詞」「there（場所）とtheir（所有格）は発音が同じだからこそ書き間違える」みたいに、間違えた理由までPointフィールドに一緒に残しているので、後で見返しても「あ、これで間違えたんだった」とすぐ思い出せます。
②スペルミス・軽微な表現は、回数が貯まったらカード化
一方、スペルミスのような軽微なものは、1回目でいちいちカード化していたらキリがありません。なので文法・表現のミスは「苦手パターン」というObsidianのノートに、スペルミスは「軽微ミスBOX」という別のノートに、それぞれ回数付きで記録するようにしています。
スペルミスの方はルールがシンプルで、同じスペルミスが3回続いたら、自動的にAnkiカードが作られる仕組みにしています。実際、自分の記録を見返すと corster（正しくは coaster）というスペルミスが3回続いたタイミングでちゃんとAnkiカード化されていました。
| ミス | 正解 | ミス回数 | Anki化 |
|---|---|---|---|
corster | coaster | 3 | ✅ カード化済み |
espesially | especially | 1 | – |
untill | until | 1 | – |
vegitable | vegetable | 1 | – |
reletives | relatives | 1 | – |
地味に「あ、自分ここ苦手なんだな」って気づける瞬間です。ちなみにこのカード化は普通のAnkiカードに加えて、Card 2としてタイピング練習カードも自動で追加される設定にしています
Ankiってタイピングのカードもつくれちゃうんですよね。びっくり。
文法・表現の軽微なミスも同じ考え方で、繰り返しの回数で優先度を判断しています。今のところ、冠詞（7回）・前置詞の脱落（5回）・時制（4回）あたりが自分の頻出ミスの上位でした。
重大なミスは即座に、軽微なミスは繰り返した分だけ確実にカード化されるので、本当に苦手なところだけがAnkiに残っていく感覚があります。
英文を投げるだけで自分の弱点が勝手にノートにまとめられていくの、すごいですよ。
Obsidian_to_Ankiでの書き方（最終版）
Obsidian側のノートは、こんな形式で書いています。
START
英語添削カード
Front: 元の文章
Back: 修正後（修正箇所は <span style="color:#1D9E75;font-weight:500;">修正箇所</span> で色付け）
Point: 解説（複数ミスは①②③で整理）
Example: 例文1<br>例文2
Alternatives: 別表現1<br>別表現2
Words: <b>単語名</b><br>① 意味1<br>② 意味2
Spelling: <span style="color:#E24B4A;text-decoration:line-through;">誤スペル</span> → <span style="color:#1D9E75;font-weight:500;">正スペル</span> <span style="font-size:11px;background:#FCEBEB;color:#A32D2D;padding:1px 6px;border-radius:99px;">2回目</span>
Level: 高
ENDこれは、Ankiにカードを作成したい時に書くフォーマットで、この書き方で書かれたものがAnkiのカードになります。
Obsidian_to_Ankiプラグイン（同期の設定はまた別記事にまとめています）を使えば、このままObsidianの同期ボタンをポチっとするだけでAnkiにカードが作られます。
いままでこれをコピペとか、手打ちでずーっとつくってたんですよ。好きだったので苦ではなかったですが、AIに取って代わられてから、あの時間なんだったのって・・・・・
デッキカードのフィールド設計（最終版）
| フィールド | 内容 |
|---|---|
| Front | 元の文章 |
| Back | 修正後（修正箇所だけ緑） |
| Point | 解説＋意味が違った場合の説明。複数ミスは①②③で整理 |
| Example | 例文 |
| Alternatives | B2/C1レベルの別表現 |
| Words | 関連単語・複数の意味・コロケーション（よく一緒に使う前置詞など） |
| Spelling | スペルミス（回数バッジ付き） |
| Level | 重要度（高・中・低） |
8個もフィールドがあるので、最初に見たら「多すぎない？」って思われるかもしれません。でもこれ、最初から8個作ったわけじゃなくて、復習しててストレスを感じるたびに1個ずつ足していった結果、こうなったんですよね。
あ、音声も欲しかったらすぐフィールドで追加して、AIに頼めば音声も入れてくれます。
ここから先は、この仕組みを実際にどうカードの見た目に落とし込んだか——HTMLデザインの話です。
重要度の定義
- 高：意味が伝わらない・ネイティブに不自然
- 中：伝わるけど不自然
- 低：軽微なミス
重要度を3段階に分けたことで、復習の優先順位がひと目でわかるようになりました。全部同じ扱いだと、どれから見直せばいいのか毎回悩んでたんですよね。
デザインのポイント
細かいところですが、こだわったポイントをまとめておきます。
- BEFORE/AFTER/POINT/EXAMPLE/ALTERNATIVES/WORDS/SPELLINGのラベルで統一感を出す
- 修正箇所だけ緑色にする（全体を緑にしない。最初は文章全体を緑にしてみたら、どこが直ったのか逆にわかりにくくなって、結局ピンポイントに戻しました(；´Д｀A）
- 赤い波下線で間違い箇所を示す
- スマホでもスクロールが少なくて済む、コンパクトなレイアウトにする
- 表現と単語は分けて改行で表示する
- 単語には複数の意味を記載する（正確に調べてから）
- 重要度バッジは右下にさりげなく置く
長い文章・複数ミスでもレイアウトが崩れないように、①②③と番号をつけてミスごとに整理しました。BEFORE/AFTERでミス箇所だけ色付けするので、長い文でも一目でわかります。セクションごとに区切り線を入れているので、スクロールしても迷子になりません。
Wordsフィールドにコロケーションを入れる理由
単語単体だけじゃなく、コロケーション（よく一緒に使う前置詞・動詞など）もセットで入れるようにしています。
dauntedという単語、意味を知っててもdaunted by以外の前置詞を使うと途端に不自然になるんですよね。excitedもaboutならいいのにinやbyだと違和感が出る。単語だけ覚えても、結局使うときに前置詞で詰まるので、コロケーションごと覚えるようにしたんです。
<b>daunted</b><br>
① 気おじした<br>
コロケーション：be daunted <b>by</b> ～（〜に気おじする）<br>
⚠️ 注意：byの代わりにatやofは使わない単語とコロケーションを切り離して覚えると、本番でまた同じ前置詞ミスをすることに気づいてからは、Wordsフィールドに必ずセットで書くようにしています。
SPELLINGフィールドの工夫
スペルミスだけは、他のセクションと区別するために黄みがかった背景にしています。誤ったスペル（赤・打ち消し線）から正しいスペル（緑）への変換を見せて、2回目・3回目のミスは赤いバッジで強調するようにしました。
同じスペルミスを繰り返してることに気づけるようにしたのが、このフィールドの一番の狙いです。スペルミスの回数は、Obsidian側の苦手パターンをまとめたノートで一元管理していて、添削のたびにそのノートを参照して「これ何回目か」を確認してからバッジをつけています。何回目かが見えるだけで、地味に効くんですよ、これが。
Anki側のHTMLテンプレート（コピー用）
ここまでのフィールド設計をもとに、実際にAnkiの「ノートタイプを管理」→カード→表面テンプレート／裏面テンプレートに貼っているHTMLをそのまま公開します。コピペしてフィールド名だけ自分の環境に合わせれば、同じ見た目のカードが作れます。
表面テンプレート
<div style="font-family: sans-serif; padding: 20px 22px;">
<p style="font-size: 16px; color: #333; margin: 0 0 10px; line-height: 1.6;">{{Front}}</p>
<div style="display: inline-flex; align-items: center; gap: 6px; background: #f5f5f5; border-radius: 99px; padding: 3px 10px;">
<span style="display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #E24B4A;"></span>
<span style="font-size: 12px; color: #888;">どこが不自然でしょう？</span>
</div>
</div>裏面テンプレート
<div style="font-family: sans-serif;">
<div style="padding: 20px 22px 16px;">
<p style="font-size: 11px; color: #aaa; margin: 0 0 6px; letter-spacing: 0.06em;">BEFORE</p>
<p style="font-size: 15px; color: #333; margin: 0; line-height: 1.6;">{{Front}}</p>
</div>
<div style="height: 0.5px; background: #eee; margin: 0 22px;"></div>
<div style="padding: 16px 22px;">
<p style="font-size: 11px; color: #1D9E75; margin: 0 0 6px; letter-spacing: 0.06em; font-weight: 500;">AFTER</p>
<p style="font-size: 15px; color: #333; margin: 0; line-height: 1.6;">{{Back}}</p>
</div>
<div style="background: #f9f9f9; padding: 16px 22px;">
<p style="font-size: 11px; color: #aaa; margin: 0 0 6px; letter-spacing: 0.06em;">POINT</p>
<p style="font-size: 14px; color: #333; margin: 0 0 12px; line-height: 1.6;">{{Point}}</p>
{{#Example}}
<div style="border-left: 2px solid #1D9E75; padding-left: 12px; border-radius: 0;">
<p style="font-size: 11px; color: #aaa; margin: 0 0 4px; letter-spacing: 0.06em;">EXAMPLE</p>
<p style="font-size: 13px; color: #666; margin: 0; line-height: 1.7;">{{Example}}</p>
</div>
{{/Example}}
</div>
{{#Alternatives}}
<div style="height: 0.5px; background: #eee;"></div>
<div style="padding: 14px 22px;">
<p style="font-size: 11px; color: #aaa; margin: 0 0 8px; letter-spacing: 0.06em;">ALTERNATIVES</p>
<p style="font-size: 13px; color: #333; margin: 0; line-height: 1.9;">{{Alternatives}}</p>
</div>
{{/Alternatives}}
{{#Words}}
<div style="height: 0.5px; background: #eee;"></div>
<div style="padding: 14px 22px;">
<p style="font-size: 11px; color: #aaa; margin: 0 0 8px; letter-spacing: 0.06em;">WORDS</p>
<p style="font-size: 13px; color: #333; margin: 0; line-height: 1.9;">{{Words}}</p>
</div>
{{/Words}}
{{#Spelling}}
<div style="height: 0.5px; background: #eee;"></div>
<div style="padding: 14px 22px; background: #FFFBF0;">
<p style="font-size: 11px; color: #B8860B; margin: 0 0 8px; letter-spacing: 0.06em; font-weight: 500;">SPELLING</p>
<p style="font-size: 13px; color: #333; margin: 0; line-height: 1.9;">{{Spelling}}</p>
</div>
{{/Spelling}}
<div style="height: 0.5px; background: #eee;"></div>
<div style="padding: 12px 22px; display: flex; align-items: center; justify-content: space-between;">
{{#Level}}
<span style="font-size: 11px; background: #FCEBEB; color: #A32D2D; padding: 3px 10px; border-radius: 99px; font-weight: 500;">重要度：{{Level}}</span>
{{/Level}}
</div>
</div>完成したカードのイメージ
表面は元の文章に「どこが不自然でしょう？」という赤いバッジを添えるだけのシンプルな作り。裏面はBEFORE→AFTER→POINT/EXAMPLE→ALTERNATIVES→WORDS→SPELLING→重要度の順に並べています。
プレビューモードですが、これがカード前面です。
カード裏面はこんな感じ。
長文でも複数ミスでも崩れない設計になったので、復習のたびに「なぜ間違えたか」が一瞬でわかるようになったのが、一番の変化でした。以前は裏面を見ても「あれ、これどこが違うんだっけ」って考える時間があったんですが、それがなくなったのが地味に大きいです。
感想
正直、最初はここまで凝るつもりはなかったんです。あ、ちなみに最初のバージョンはフィールドが3つくらいしかなかったんですけど、「なぜ間違えたか」がわかりにくいというストレスを解消しようとしたら、自然とここまで作り込むことになりました。
色分け・バッジ・区切り線、どれも地味な工夫なんですけど、積み重なると復習体験がだいぶ変わります。同士の皆さん、Ankiのデフォルトカードに何かモヤモヤしてるなら、フィールドを1個足すところから始めてみてください。同じように英語添削カードを作ってる人の参考になれば嬉しいです。
今日学んだの英語表現（B2〜C1）
一応英検１級目指してるスーツマンのこの記事のトピックから使えるフレーズをAIがピックアップ。
① at a glance（= 一目で、パッと見て） > The priority is clear at a glance thanks to the color coding. 「色分けのおかげで、優先順位が一目でわかる」。今回のデザインの狙いそのものを表す表現でした。
② recurring（= 繰り返し起こる） > The badge highlights recurring spelling mistakes. 「そのバッジは繰り返し起こるスペルミスを強調する」。SPELLINGフィールドの話にそのまま使えます。
③ clutter（= ごちゃごちゃしたもの、雑然とした状態） > I wanted to avoid visual clutter on mobile. 「モバイルで視覚的なごちゃつきを避けたかった」。コンパクトなレイアウトを目指した理由にぴったりの単語です。
コメントを残す