Cursor × Marp で技術プレゼンを Markdown で書く - 50枚資料を素早く作るワークフロー実例

「PowerPoint でスライド 50枚、明日まで」と言われると、内容が固まっていてもデザインで半日〜1日溶ける覚悟が必要です。

このタスクを Cursor + Marp + Draw.io Integration の組み合わせで進めたところ、実績で約1.5時間で完成しました。本記事では、その時に組んだワークフローを、Markdown 構文・AI エージェントへの依頼例・運用上の注意点まで含めて整理します。

なお、本記事は2025年11月の初版を 2026年5月11日に全面リライトしたものです。Cursor 3 / Composer 2 世代の使い勝手と、Marp の現行構文（![w:300]、![bg left:33%] など）に合わせて再構成しています。

ツール構成 - 3つだけ

このワークフローで使うのは、Cursor + Marp 拡張 + Draw.io 拡張の3つだけです。

Cursor は VS Code 拡張をそのまま使えるので、Marp と Draw.io はマーケットプレイスから普通にインストールするだけで動きます。

ビフォー / アフター - 同じ50枚を作るのに

実案件（技術選択肢の比較プレゼン、約50枚）で、PowerPoint 想定見積もりと、実際の Cursor + Marp 実績を並べると以下のとおりです。

主な短縮要因は 「AI による一括生成」 と 「デザイン調整がそもそも要らない」 の2点で、特に後者の効果が大きいです。

数字の前提: 上記は「自分が同じ案件を PowerPoint で作るとしたらこれくらい」という個人見積もりと、Cursor + Marp で実際に計測した実績を比較したものです。チームや題材によって倍率は変わるので、参考値としてどうぞ。

6ステップのワークフロー

Step 1: プロジェクト作成

mkdir my-presentation && cd my-presentation
touch slides.md
cursor .

Cursor で開いたら、slides.md を編集していきます。

Step 2: フロントマターを書く

最低限これだけ書けば Marp プレビューが立ち上がります。

---
marp: true
theme: default
paginate: true
---
 
# タイトル
 
最初のスライド
 
---
 
## 2枚目
 
スライドは `---` で区切る

Step 3: AI エージェントに「下書き」を作らせる

Cmd + I（Mac）/ Ctrl + I（Win）で Composer を開き、構成と要件を渡します。

@slides.md
コンテナ開発環境の選択肢比較プレゼンを Marp 形式で作って。
 
要件:
- 対象オーディエンス: バックエンド開発チーム（中級者）
- 比較対象: Docker Compose / Devcontainer / ローカル直実行
- 各選択肢: 概要・セットアップ手順・メリット・デメリット・推奨シーン
- 比較表を1枚、コード例を各選択肢に1〜2個
- 全体で約50スライド
- 各セクションの先頭に章扉スライド (<!-- _class: lead -->) を入れる
- 末尾に「まとめ」と「Q&A」スライドを追加

ポイントは 「対象オーディエンス」「使いたいディレクティブ」「全体ボリューム」を最初に明記すること。これらが曖昧だと、生成結果のバラツキが大きくなります。

Step 4: 図を Draw.io で作る

AI はテキストは強いですが、システム構成図のような図は手で描いた方が早いです。

1. Cursor 上で右クリック → New File → architecture.drawio.svg
2. ダブルクリックで Draw.io エディタが開く
3. ブロック図を描いて保存
4. Markdown 側に埋め込み

![w:1000](./images/architecture.drawio.svg)

.drawio.svg 形式で保存すると、SVG として埋め込めるうえ、後から再編集も同じファイルで可能です。

Step 5: 微修正も AI に頼む

完成した下書きを眺めて、気になった箇所はそのまま AI に依頼します。

12枚目の比較表に「学習コスト」列を追加して。
そのあと、20〜25枚目の Devcontainer のコード例を、
最新の devcontainer.json v2 仕様に合わせて書き直して。

「全部書き直す」よりも「枚数指定で部分修正」の方が安定します。

Step 6: プレビュー → エクスポート

PPTX で書き出せば、PowerPoint 文化のクライアントへもそのまま納品できます（編集可能な形で出力されます）。

押さえておきたい Marp 構文

知っているだけで完成度がぐっと上がる、現行の Marpit 拡張構文をまとめます。

画像のサイズ指定

![w:300](photo.jpg)              # 幅 300px
![w:50%](photo.jpg)              # 幅 50%
![w:200 h:150](photo.jpg)        # 幅 200 / 高さ 150
![blur:3px](photo.jpg)           # ぼかし
![brightness:1.2](photo.jpg)     # 明度

スライド全面の背景画像

![bg](./hero.jpg)                # 全面背景
![bg cover](./hero.jpg)          # cover（デフォルト）
![bg contain](./hero.jpg)        # 全体収まり
![bg](#073642)                   # 単色背景

Split レイアウト（左に画像、右に本文）

![bg left:40%](./diagram.svg)
 
## アーキテクチャ
 
- 右側にテキスト
- 左 40% に画像

技術プレゼンでは Split がかなり重宝します。「コードと図を並べたい」「キャプチャと説明を並べたい」場面に最適です。

ヘッダー / フッター / ページ番号

---
marp: true
paginate: true
header: 'プロジェクト名 - 2026'
footer: '© printemps tokyo'
headingDivider: 2  # ## が来たら自動でスライド区切り
---

headingDivider を指定すると、--- を毎回書かなくても見出しごとに自動でスライドが切れます。

個別スライドへのスタイル適用（Spot directive）

<!-- _class: lead -->
<!-- _backgroundColor: #002b36 -->
<!-- _color: #93a1a1 -->
 
# 章扉スライド
 
ここだけ別デザイン

_ 接頭辞付きディレクティブは そのスライドだけに効きます。章扉や強調スライドで便利。

数式（KaTeX / MathJax）

---
math: katex
---
 
インライン: $E = mc^2$
 
ブロック:
$$
\int_{-\infty}^{\infty} e^{-x^2}\,dx = \sqrt{\pi}
$$

機械学習・統計系のプレゼンに必須。デフォルトは MathJax ですが、レンダリングが速い KaTeX に切り替えるのがおすすめです。

Solarized Dark 風のテーマ例

このブログと同じ配色をスライドにも持ち込んだサンプルです。フロントマターに style: を直書きしているので、ファイル単体で完結します。

---
marp: true
theme: default
paginate: true
style: |
  section {
    background: #002b36;
    color: #93a1a1;
    font-family: 'Inter', 'Noto Sans JP', sans-serif;
    font-size: 28px;
  }
  h1, h2, h3 { color: #268bd2; }
  h2 { border-bottom: 1px solid #073642; padding-bottom: 0.2em; }
  strong { color: #b58900; }
  code {
    background: #073642;
    color: #93a1a1;
    padding: 0.1em 0.4em;
    border-radius: 4px;
  }
  pre code { padding: 1em; display: block; }
  table { border-collapse: collapse; }
  th, td { border: 1px solid #073642; padding: 0.4em 0.8em; }
  th { background: #073642; color: #2aa198; }
  section::after {
    color: #586e75;
  }
---

実際のテーマファイルを theme.css に切り出して theme: ./theme.css を読み込ませる運用もできますが、最初は style: 直書きの方が試行錯誤が速いです。

採用してよかった点

実案件で半年ほど運用してみて、特に効いたのは以下の5つでした。

1. デザイン判断のコストがゼロになる — フォント・色・余白で悩む時間が完全に消える。これが時間短縮の本丸
2. AI との往復が爆速 — 「20枚目の表に学習コスト列を足して」レベルの細かい依頼が秒で返ってくる
3. Git 差分が読める — .pptx のバイナリ差分地獄から解放される。誰が・いつ・何を変えたかが git log で分かる
4. 再利用が effortless — 「あの比較表、別資料にも使いたい」がコピペで完結。スニペット化も楽
5. マルチ出力 — PDF / HTML / PPTX を1ソースから出せる。納品形式に合わせて切り替えられる

PowerPoint と比較したとき、5番目の「PPTX 出力」の存在は意外と効きます。「最終納品は PPTX で」と言われるクライアントワークでも採用ハードルが下がります。

注意点と現状の限界

良いことばかりではないので、デメリットも正直に書いておきます。

1. 図はやっぱり手で描く

「テキスト → 図」を AI に任せるのはまだ厳しいので、Draw.io で手描きが基本です。Mermaid を Marp 上で描く運用も可能ですが、複雑な構成図は Draw.io の方が早く綺麗に仕上がります。

2. ピクセル単位のレイアウト調整は不向き

PowerPoint のように要素をドラッグして1px単位で揃える、という作業はできません。ただ、技術プレゼンでそこまで凝る必要はほぼないので、「割り切れるかどうか」の話です。

3. アニメーションは控えめ

CSS で簡単なフェードは付けられますが、PowerPoint の派手なトランジションは無理です。技術プレゼンには不要なので個人的には困っていません。

4. プレゼンターモードがない

Marp のプレゼンモードはブラウザ全画面表示のみで、PowerPoint の「発表者ノートを別画面に」のような機能はありません。 回避策としては、PDF 化して Adobe Acrobat / Skim のプレゼンモード + ノート併用、あるいは Marp CLI で生成した HTML を別ウィンドウで開く運用がおすすめです。

Markdown スライドツールの比較

Marp 以外にも有力な選択肢はあります。技術プレゼン用途で比較してみました。

普段の社内プレゼンや顧客向け技術提案であれば、Marp で十分というのが結論です。Slidev は登壇用にデモを動かしたいときに、reveal.js は派手さが要る場面に、と棲み分けています。

2026年の新展開

リライト時点（2026年5月）の周辺ツール状況も触れておきます。

• Cursor 3 / Composer 2 — Composer の応答品質が上がり、@slides.md でファイルを参照させながらの長文プロンプトでも文脈が安定。50枚規模を1リクエストで生成しても破綻しにくくなった
• Marp Core の安定 — 画像背景 + Split + KaTeX の組み合わせが実用レベルに完成。最近は破壊的変更が少なく、安心して長期運用できる
• Marp CLI の CI 利用 — リポジトリに push したら自動で PDF/HTML を生成して GitHub Pages に公開、という運用が一般化
• PPTX 出力品質の向上 — テーブル・コードブロックの再現性が上がり、PowerPoint で開いても崩れにくい

CI 連携の最小サンプルだけ載せておきます。

name: Build slides
on:
  push:
    branches: [main]
    paths: ['slides.md']
 
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: docker://marpteam/marp-cli:latest
        with:
          args: slides.md --pdf --allow-local-files -o dist/slides.pdf
      - uses: actions/upload-artifact@v4
        with:
          name: slides
          path: dist/

slides.md を更新して push するたびに、最新の PDF がアーティファクトとして手に入ります。

まとめ

• 技術プレゼンに限れば、Cursor + Marp + Draw.io の3点セットで PowerPoint をほぼ置き換えられる
• 50枚規模の比較プレゼンで、実績1.5時間まで短縮できた（個人見積もりベースで約 90% 削減）
• 効いたのは「AI による一括生成」よりも、「デザイン判断が要らなくなる」こと
• Marp は ![bg] ![bg left:40%] <!-- _class: lead --> headingDivider あたりを覚えると一気に表現力が増す
• PPTX 出力に対応しているので、PowerPoint 納品案件でも採用しやすい
• 図とプレゼンターノートまわりは弱いが、回避策はある

「明日までに50枚」と言われた瞬間に、まず Cursor を起動して slides.md を作る。これが2026年の自分のスタンダードになりました。

参考リンク

• Cursor 公式サイト
• Marp 公式サイト
• Marpit ドキュメント - Image syntax
• Marpit ドキュメント - Directives
• Marp CLI
• Draw.io Integration（VS Code 拡張）
• 当ブログ: Cursor 3 リリース解説
• 当ブログ: AI時代のデザインツール「Pencil」徹底解説