Contents
1️⃣ ノートタイプとカードテンプレートの作成手順
Anki のカードは「ノートタイプ」単位で管理されます。ここでは、デスクトップ版で自分だけのノートタイプを新規作成し、その中にオリジナルのカードテンプレート（Front／Back）を追加する一連の流れを解説します。手順を正しく把握すれば、以降のカスタマイズ作業が格段にスムーズになります。
1‑1 手順全体像
| 手順 | 主な操作 |
|---|---|
| ① ノートタイプの新規作成 | 「ツール」→「ノートタイプ」→左下の [Add] をクリック |
| ② ベースタイプと名前を設定 | 「基本 (Basic)」や「クローズド (Cloze)」などから選び、任意の名称で保存 |
| ③ カードテンプレートの追加 | 作成したノートタイプを選択し [Cards]（または「カード」タブ）を開く |
| ④ Front／Back の編集 | 「テンプレート」一覧から [Add Card Type] をクリックし、HTML と CSS を入力 |
1‑2 詳細操作
- ノートタイプの新規作成
- メニューバー → ツール → ノートタイプ を開く。
-
左下にある [Add] ボタンを押し、表示されるダイアログでベースになる既存タイプ（例：Basic）と新しい名前（例：英単語カード）を入力して OK。
-
テンプレートの追加
- 作成したノートタイプを選択し、右側の [Cards] ボタンをクリック。
-
「テンプレート」タブに [Add Card Type] が現れるので押すと、新しいカード種別名（例：正答面）を入力できる画面が表示されます。
-
Front／Back の編集
- 追加したカード種別を選び、Front と Back タブで HTML を記述。
- 必要に応じて Styling タブで CSS を入力し、全体の見た目を調整します。
ポイント：標準テンプレートはロックされているため、元データが壊れるリスクはありません【1】。
2️⃣ カードテンプレートの構成要素（Front・Back・Styling）
カードの表示は３つのテキストエリアで決定します。このセクションでは各タブの役割と、実際に書くべきコード例を示します。
2‑1 各タブの概要
- Front：カード表面に表示する HTML（問題文・画像・音声など）を記述。
- Back：裏面に表示する解答や補足情報を記述。
- Styling：全体に適用される CSS を書く領域で、フォントサイズや色、レイアウトを統一できます。
2‑2 サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!-- Front タブ --> <div class="question">{{Word}}</div> {{#Image}}<img src="{{Image}}" class="illustration">{{/Image}} <!-- Back タブ --> <div class="answer">{{Definition}}</div> {{#Example}}<p class="example">例: {{Example}}</p>{{/Example}} <!-- Styling タブ --> <style> .card { font-family: "Helvetica Neue", Arial, sans-serif; max-width: 480px; margin:auto; padding:12px; } .question {font-size:28px; color:#2c3e50; font-weight:bold;} .answer {margin-top:15px; line-height:1.6;} .illustration {width:100%; max-height:200px; object-fit:contain;} .example {font-size:14px; color:#555; margin-top:5px;} </style> |
ポイント：
{{#Field}} … {{/Field}}の条件ブロックを活用すると、画像や音声が無いカードでもエラーにならずに済みます。
3️⃣ HTML と {{Field}} の基本、実務で使える CSS カスタマイズ例
Anki テンプレートは標準的な HTML5 がそのまま利用でき、{{Field}} プレースホルダーがデータと置き換わります。ここでは最小構成から実務レベルのカスタマイズまでを網羅します。
3‑1 最小限の HTML テンプレート
|
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html lang="ja"> <head><meta charset="utf-8"></head> <body> {{Front}} <!-- Front タブで書いた内容がここに挿入されます --> </body> </html> |
3‑2 主なフィールド埋め込み例
| フィールド名 | 埋め込みコード例 |
|---|---|
| Word | <h1>{{Word}}</h1> |
| Pronunciation | <p class="pron">{{Pronunciation}}</p> |
| Image | <img src="{{Image}}" alt="画像"> |
3‑3 実務で重宝する CSS パターン
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* カード全体のベース */ .card { max-width:500px; background:#fafafa; border-radius:8px; padding:15px; } /* 見出し・発音記号の装飾 */ h1 {font-size:24px; color:#2c3e50;} .pron {font-style:italic; color:#7f8c8d; font-size:16px;} /* 画像をカード幅に合わせつつ高さ制限 */ .responsive-img { width:100%; max-height:300px; object-fit:contain; margin-top:8px; } |
ポイント：CSS は
Stylingタブに貼り付けるだけで全カードに適用でき、デザインの一貫性が保てます。
4️⃣ JavaScript の活用と AnkiDroid（Android）での注意点
Anki デスクトップ版は WebView 上で HTML を描画するため、基本的な DOM 操作やイベントハンドラを書けます。一方 Android 版（AnkiDroid）はセキュリティ上 JavaScript の実行を制限しているため、動作が異なるケースがあります。
4‑1 デスクトップで使える主な機能
| 機能 | 可否 (Desktop) |
|---|---|
| DOM 操作（class付与・要素生成） | ✅ |
audio.play() の自動再生 |
✅ |
外部スクリプト読み込み（<script src="">） |
❌（Anki 自体が禁止） |
fetch API |
✅ |
4‑2 AnkiDroid の制限概要【2】
| 機能 | 可否 (AnkiDroid) |
|---|---|
audio.play() （ユーザー操作なし） |
❌（タップが必要） |
| DOM 操作 | ✅（WebView で可能） |
fetch / ネットワーク通信 |
制限あり（HTTPS が必須・同一オリジン） |
| 外部スクリプト読み込み | ❌ |
出典：AnkiDroid 開発者ガイド「JavaScript の使用について」https://github.com/ankidroid/Anki-Android/wiki/JavaScript
4‑3 実装例 ― 音声再生ボタンに置き換える
|
1 2 3 4 5 6 7 8 9 10 |
{{#Audio}} <button id="playBtn">▶︎ 発音</button> <audio id="snd" src="{{Audio}}"></audio> <script> document.getElementById('playBtn').addEventListener('click', function () { document.getElementById('snd').play(); }); </script> {{/Audio}} |
- 理由：自動再生は AnkiDroid でブロックされるため、ユーザーがボタンをタップしたときだけ音声を再生させます。
- 追加策：
navigator.userAgent.includes('AnkiDroid')を使って端末判別し、デスクトップ版では自動再生、モバイル版ではボタン表示に切り替えることも可能です。
5️⃣ テンプレートの保存・バックアップ・共有方法
作成したノートタイプやテンプレートは万が一のデータ消失に備えてエクスポートし、さらに GitHub 等で公開すればバージョン管理とコミュニティ貢献が同時に実現します。
5‑1 エクスポート手順（.apkg）
- ツール → エクスポート を開く。
- 「エクスポート形式」で Anki デッキ (*.apkg) を選択。
- 対象デッキ（作成したノートタイプが含まれるもの）のみをチェックし、保存先を指定して Export。
エクスポートされた .apkg は「インポート」から任意の環境へ再利用できます。
5‑2 GitHub で公開する際のディレクトリ例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
anki-custom-templates/ │ ├─ README.md # テンプレート概要・使用方法・ライセンス ├─ LICENSE # MIT または CC BY-SA 推奨 └─ templates/ ├─ english_word/ │ ├─ front.html │ ├─ back.html │ └─ styling.css └─ medical_echo/ ├─ front.html ├─ back.html └─ styling.css |
- README に
anki import path/to/template.apkgでインポートできる旨を明記。 - 公開リポジトリは「Issues」や「Pull Request」でフィードバックが得られ、改良サイクルが高速化します。
5‑3 バックアップのベストプラクティス
| 方法 | メリット | デメリット |
|---|---|---|
| ローカルフォルダ | 高速・即時アクセス | ハードウェア故障リスク |
| クラウド同期（Dropbox / Google Drive） | 複数デバイスで自動同期 | 容量制限・プライバシー注意 |
| GitHub（公開） | バージョン管理＋コミュニティ貢献 | 機密情報は除外必須 |
ポイント：重要なのは「エクスポート →クラウド保存」または「Git 管理」の二層構造を持つことです。
参考文献・リンク一覧
| 番号 | タイトル | 出典 |
|---|---|---|
| 1 | 「Anki のノートタイプとテンプレートの仕組み」 | しおんブログ, https://yurudream.com/2020/01/27/anki-tenplate/ |
| 2 | 「JavaScript の使用について（AnkiDroid 開発者ガイド）」 | AnkiDroid Wiki, https://github.com/ankidroid/Anki-Android/wiki/JavaScript |
| 3 | 「カードテンプレート編集の基本」 | the right stuff, https://rs.luminousspice.com/how-to-edit-cards/ |
この記事は、2026 年 6 月時点の最新情報に基づいて執筆しています。Anki のバージョンや AnkiDroid の仕様が変更された場合は、公式ドキュメントをご確認ください。