【Ankiテンプレート】シンプルで綺麗なデザインのmodern-anki-card-template導入方法

2025年3月19日PC・ソフトウェア設定

1. このページについて
- 1.1. このテンプレートの特徴
2. ダウンロード方法
3. 使い方と注意事項
4. まとめ

このページについて

シンプルで良い感じのテンプレートを作られている方がいたので、ご紹介します。
基本の裏表カードと、クローズ問題用のカードテンプレートです。

このテンプレートの特徴

ダークモードとライトモードのサポート
ネイティブ感覚のシステムフォント
フラッシュカードのメタデータ: カードが属するデッキ、残りのカードの数、アクティブなフラグを一目で簡単に確認できます。
デスクトップ UI ボタン: フラグボタンと元に戻すボタン – フラッグアイコンはアクティブなときに色付きになります。
科目名に基づいて変化するアクセントカラー

答えを明らかにするためのささやかなアニメーション

可能な限り「ネイティブ」スタイルに近いもの（例：Android の Material 3 カラーパレット）

ふりがなと日本語テキストのサポート（正しい印刷スケール付き）

ダウンロード方法

こちらのページを開く。
https://github.com/tyuichis/modern-anki-card-template/releasesopen_in_new
このテンプレートには、「Undoボタン」「フラッグボタン」「残りカード表示」の機能がついているので、その機能を使えるようにしたい方は次の別途他のアドオンをあらかじめ追加します。
card_ui_status_buttons (ID: 1230570706)
JS API add-on (ID: 1490471827)
下部に【Assets】という見出しがあり、複数のapkgファイルがあるのが見えると思います。もしここにapkgファイルが見えなければ【Assets】をクリックして展開してください。
※この記事の執筆時点での最新はv1_1_0です。ページ下に行くにつれて過去にリリースされたものが並んでいますので、ページ一番上の最新バージョンの【Assets】を見るようにしてください。
そこで勉強したいカテゴリーの名前のついたapkgファイルをダウンロードします。
言語を学びたいなら「modern_qa_cloze_languages_v1_1_0.apkg
」、物理なら「modern_qa_cloze_physics_v1_1_0.apkg
」と言った具合です。ここに科目がない、あるいはわからない場合は「modern_qa_cloze_v1_1_0.apkg
」を選び、後ほど手動で色を設定します。
もしAnkiで勉強したいのがプログラミングでコードをハイライトしたい場合には、ハイライトを有効にするため、highlight_js.7zも一緒にダウンロードしてください。

GitHub - tyuichis/modern-anki-card-template: A modern Anki card framework that helps build focused cards and improve readability.

使い方と注意事項

テンプレートインポート方法

通常のインポート方法と同じです。

上部メニュー［ファイル］→［インポート］でダウンロードしたapkgファイルを選択します。
画面右上［インポート］ボタンを押して完了です。

このテンプレートを利用したカード作成方法

通常のカード作成方法と同じです。

上部メニュー［ツール］→［ノートタイプを管理］を選択します。
ノートタイプのダイアログで、右側の［追加］ボタンを押します。
ノートタイプを追加ダイアログで、例えば今から作るのが通常の表裏のQ&A形式のものなら「クローン:Modern Q&A ~(ここにはダウンロード時選んだテンプレート名が入ります)」を選び［OK］を押します。
新しいノートタイプ名を入力します。
今追加した新しいノートタイプを選択し、［フィールド］ボタンを押します。
追加したいフィールドがあれば追加します。
［保存］ボタンを押し、「ノートタイプ」のダイアログに戻ります。
今追加した新しいノートタイプを選択した状態で、［カード］ボタンを押します。
カードのテンプレートソースが表示されるので、レイアウトや、先ほど追加したフィールドがあればその値がカードに反映されるよう、変更したい場所を修正追加します。
カード裏面についても同様に必要な追加修正を行います。
画面右下［保存］ボタンを押して完了です。
あとはCSV経由でデータを読み込む場合にこのテンプレートを指定するだけです。
(※先ほどフィールドを確認したと思いますので、そのようなフィールドに入れる値を持つCSVデータを作成してください。)

注意事項：カラーリングについて

テンプレートのイメージ画像を見たとき、カラーリングされている部分があると思います。
これは、「テンプレート側であらかじめ設定されているカテゴリー名」を「カテゴリーフィールドに入れる」と、色がつく仕組みになっています。例えば言語のテンプレートで言うと、「grammer」「vocabulary」「reading」などです。逆に言うと、想定されてないカテゴリー名を入れると色がつきません。
しかし、カテゴリー名は自分でも登録できますので、テンプレート該当箇所に、自分の好きな言葉と好きな色を指定してお使いください。

表面のソースで143行目辺りです。裏面も同様にします。

以下の箇所辺りを


  // subjects DOES change depending on the card, so we need to re-assign (fixes card preview)
    subjects = {
  // Purple - Fundamentals/Core Concepts
  "vocabulary": "purple",
  "grammar": "purple",
  "pronunciation": "purple",
  "syntax": "purple",
  "semantics": "purple",
  "morphology": "purple",
  "pragmatics": "purple",
  "phonology": "purple",

例えば以下のように変更(もしくは追加)します。
想定ワードがかなり沢山設定されているため、例として一部しか表示していませんが、ここあたりのソースに各色毎に長いリストがありますので見てみてください。


  // subjects DOES change depending on the card, so we need to re-assign (fixes card preview)
    subjects = {
  // Purple - Fundamentals/Core Concepts
  "vocabulary": "purple",
  "文法": "purple",
  "pronunciation": "purple",
  "syntax": "purple",
  "semantics": "purple",
  "morphology": "purple",
  "pragmatics": "purple",
  "phonology": "purple",

注意事項：コードのハイライトについて

highlight_js.7zを解凍後、languagesフォルダの中のファイルと、_highlight.min.js、_github-dark.min.cssをAnki の collection.media フォルダーに追加し、テンプレートの前面と背面でsyntaxHighlighting = falseをsyntaxHighlighting = trueに変更して有効化します。