classmethod-logo

Classmethod Marp Theme

セットアップスライド

2025/08/19 更新

概要

クラスメソッドのスライドデザインを参考に作成したMarpテーマです。

参考リンク

サンプルスライド
こちらのリンクからサンプルスライドをみることができます。
https://classmethod.github.io/classmethod-marp-theme/sample-slide.html

Github

https://github.com/classmethod/classmethod-marp-theme

Marp 公式サイト

https://marp.app/

特徴

📝 マークダウンでスライド作成

クラスメソッドのスライドデザインのスライドがマークダウンで作成可能

🤗 豊富な要素対応

テーブル、コードブロック、引用など、マークダウン要素に対応

🤖 生成AIで作りやすい

生成AIに内容、README.md、sample-slide.mdを入力して爆速でスライド作成可能

利用方法

VSCodeやCLIで簡単に使えます

VSCodeでの設定方法


  1. Marpの拡張機能をインストール
    https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
  2. VSCodeの設定を開く(Cmd+, または Ctrl+,
  3. 検索ボックスで「Markdown › Marp: Themes」を検索
  4. 「項目の追加」をクリック
  5. 以下のリンクを入力
    https://classmethod.github.io/classmethod-marp-theme/classmethod-theme.css
    
  6. Markdownファイルの先頭でテーマを指定
  7. サンプルスライドを参考にスライドを作成
  8. このスライドと同じデザインになったらOK!

VSCode拡張機能を利用してマークダウンからスライドを表示する

右上のMarpアイコンからマークダウンをスライドで表示することができます

VSCode拡張機能を利用してHTML・PDFへの出力を行う

右上のMarpアイコンからHTML・PDFへの出力を行うことができます

CLIでの利用

  1. GithubからテーマのCSSファイルをダウンロード

  2. Marp形式で作成したマークダウンファイルを用意

  3. Markdownファイルの先頭でテーマを指定

  4. 以下のコマンドを実行

    npx @marp-team/marp-cli@latest slide.md --theme your-directory/classmethod-theme.css
    

テーマの指定方法

Markdownファイルの先頭に以下のFront Matterを記述します

---
marp: true
theme: classmethod
---

これだけでクラスメソッドのデザインテーマが適用されます!



細かい内容はサンプルスライドをご覧ください!

https://classmethod.github.io/classmethod-marp-theme/sample-slide.html

🤖AIを使ってスライドを作成する方法(オススメ)

  1. スライドの内容を考える
  2. sample-slide.mdのテキストをコピー(下図参照)
    リンク: https://github.com/classmethod/classmethod-marp-theme/blob/main/sample-slide.md
  3. AIツール(Cursor, Claude Codeなど)のチャット欄に貼り付け
{sample-slide.mdのコピペ}
このテンプレートを使って〇〇.mdの内容のMarpスライドを作成して〇〇.mdに出力してください。
  1. スライドの内容、レイアウト、画像のサイズを調整

ぜひお試しください!

このテーマはクラスメソッド社の内部使用を目的として作成されています