Cursor × Marpでプレゼン資料作成が革命された話

Cursor × Marpでプレゼン資料作成が革命された話

作成日:
CursorMarpプレゼンテーションMarkdown生産性AI

「また、PowerPointでスライド作るのか...」

デザインに凝って、レイアウトを調整して、画像を配置して...気づいたら3時間。

肝心の内容は、30分で書き終わっているのに。

デザインツールって、便利なはずなのに、なぜかめちゃくちゃ時間がかかる。

「もっと楽に資料作れないかな」と思ってたとき、Cursor + Marpに出会いました。

結論：もうPowerPointには戻れません。

きっかけ：技術プレゼンを作る必要があった

先日、技術的なテーマで、大規模なプレゼン資料を作る必要がありました。

要求仕様：

  • 複数の技術選択肢の比較
  • それぞれのメリット・デメリット
  • 具体的な構築手順
  • 実装例
  • 総スライド数：約50枚
  • 明日納品

普通にPowerPointで作ったら、徹夜確定の内容です。

でも、Cursorを使ったら、3時間で完成しました。

これが、僕のプレゼン資料作成のワークフローを根本的に変えました。

革命の主役たち

1. Cursor - AIエディタ

公式サイト: https://cursor.com/

VS Codeベースで、AIが統合されたエディタ。

特に、Composer（Agent）機能が革命的：

「こんな資料を作って」と指示するだけで、
AIが全部書いてくれる。

今回使ったのは、Composer 1モデル。

2. Marp for VS Code - Markdownでスライド

公式サイト: https://marp.app/

MarkdownをPDFやHTMLのスライドに変換してくれる、VS Code拡張機能。

---
marp: true
theme: default
paginate: true
---

# スライド1

これはタイトル

---

# スライド2

これは本文

こんな感じで書くだけで、綺麗なスライドになります。

3. Draw.io Integration - 図の作成

公式サイト: https://marketplace.visualstudio.com/items?itemName=hediet.vscode-drawio

VS Code内で図を描けるDraw.io拡張機能。

システム構成図、フロー図、UML図など、何でも描けます。

革命的なワークフロー比較

従来のワークフロー（PowerPoint）

1. PowerPoint起動（3分）
2. テンプレート選択（10分）
3. スライド作成（タイトル、本文、レイアウト調整）（1スライドあたり10分）
4. 図の挿入（写真ソフトで作成、PowerPointに貼り付け）（5分）
5. コードの挿入（フォント統一、サイズ調整）（3分）
6. 全体調整（フォント統一、色統一）（30分）
7. 印刷プレビュー（10分）

合計時間：50スライド × 28分 + 調整時間 = 約24時間

PowerPointの場合（詳細内訳）：

  • 構成を考える：30分
  • スライドを作る：8時間
  • デザインを調整：3時間
  • 図作成・挿入：2時間
  • レビュー・修正：1時間
  • 合計：14.5時間

新しいワークフロー（Cursor + Marp）

1. Cursor起動（1分）
2. Composerに指示（5分）
3. AIが50スライド生成（10分）
4. 図をDraw.ioで作成（10枚 × 5分 = 50分）
5. 微調整（20分）
6. プレビュー・エクスポート（10分）

合計時間：約1.5時間

Cursor + Marpの場合（実績）：

  • 指示を出す：5分
  • AIが生成：10分
  • 微調整：1時間
  • 図を作成：1時間
  • 合計：2.5時間

24時間 → 1.5時間（96%の時間削減） 14.5時間 → 2.5時間（83%の時間削減）

Cursorでプレゼン資料を作る流れ

ステップ1: Composerに指示

CursorのComposer（Cmd+I / Ctrl+I）を開いて、こう指示しました：

「技術的なテーマ」についてのプレゼン資料を作成してください。

以下の内容を含めてください：
1. 選択肢A
2. 選択肢B
3. 選択肢C

それぞれのメリット・デメリットを詳しく説明し、
具体的な構築手順も含めてください。

Marp形式で、50スライド程度でお願いします。

これだけ。

ステップ2: AIが資料を生成

Composerが、こんな感じで資料を生成してくれます：

---
marp: true
theme: default
paginate: true
---

# 技術プレゼンのタイトル

---

## 目次

1. 概要
2. 技術選択肢の比較
3. 選択肢Aの詳細
4. 選択肢Bの詳細
5. 選択肢Cの詳細
...

驚いたのは、構成が完璧だったこと。

  • 目次
  • 各方式の説明
  • メリット・デメリットの比較表
  • コード例
  • まとめ

すべて、論理的な流れで書かれていました。

AIの出力品質

驚いたのは、出力の品質。

  • 構成が完璧: 論理的な流れ
  • 内容が詳細: それぞれの選択肢について深く説明
  • コード例が実用的: 実際に動く設定例
  • 比較表が適切: メリット・デメリットを整理
  • まとめが的確: プロジェクト特性に応じた選択基準

人間が書くレベル以上の資料を、10分で生成。

ステップ3: 図をDraw.ioで作成

スライドに挿入する図は、Draw.io Integrationで作成。

1. 新規ファイル作成（.drawio.svg）
2. ブロック図を描く
3. SVGとして保存
4. Markdownに埋め込む

![width:900px](architecture-diagram.svg)

これだけで、スライドに図が挿入されます。

AIはテキストしか生成しないので、図は自分で作成する必要があります。

Draw.io Integrationを使って、VS Code内で作成：

1. 新規ファイル作成：architecture.png
2. ブロック図を描く
3. スライドに埋め込み：![width:800px](architecture.svg)

ステップ4: 微調整

AIが生成した内容を、少しだけ調整：

  • 言い回しの修正
  • コード例の追加
  • 図の配置調整

この微調整も、Composerに指示するだけ：

「このスライドのコード例を、もっと具体的にしてください」
「メリット・デメリットを表形式にしてください」
「この比較表を、もう少し詳しくしてください」
→ AIが即座に拡張

AIが即座に修正してくれます。

ステップ5: プレビュー & エクスポート

Marp拡張機能のプレビュー機能で、リアルタイムで確認。

Cmd+K V（Mac）/ Ctrl+K V（Windows）

完成したら、PDF・HTML・PPTXにエクスポート可能。

右クリック → Marp: Export slide deck...
→ PDF / HTML / PPTX を選択

実際に作ったスライドの内容

テーマ：技術選択肢の比較

50スライドの大規模プレゼン。

内容構成：

  1. 概要（5スライド）
  2. 技術選択肢の比較（10スライド）
  3. 選択肢Aの詳細（15スライド）
  4. 選択肢Bの詳細（10スライド）
  5. 選択肢Cの詳細（10スライド）
  6. まとめ（5スライド）

特徴：

  • 比較表：各選択肢のメリット・デメリット
  • コード例：設定ファイル、環境変数管理
  • 図解：システム構成図、ネットワーク図
  • 実例：具体的な実装手順

1. タイトルスライド

# 技術プレゼンのタイトル

![width:900px](title-diagram.svg)

シンプルだけど、図があるので見栄えが良い。

2. 目次スライド

## 目次

1. 概要
2. 技術選択肢の比較
3. 選択肢Aの詳細
4. 選択肢Bの詳細
5. 選択肢Cの詳細
6. 実装例の紹介
7. まとめ

3. 比較表スライド

## メリット・デメリット比較

| 選択肢 | セットアップ | 開発速度 | 本番環境との一致 |
|------|------------|---------|----------------|
| 選択肢A | 高 | 高 | 低 |
| 選択肢B | 中 | 中 | 中 |
| 選択肢C | 低 | 低 | 高 |

Markdownなので、表も簡単。

4. コードスライド

## 設定ファイル例

\`\`\`yaml
# 設定ファイルの例
version: '3.8'
services:
  app:
    image: example:latest
    ports:
      - "3000:3000"
    volumes:
      - ./src:/app/src
\`\`\`

シンタックスハイライトも自動。

技術プレゼンに必須のコード：

// 設定ファイルの例
const config = {
  api: 'http://localhost:3000',
  db: 'mysql://localhost:3306/dev',
  environment: 'development',
};

Marpは、コードブロックを美しくレンダリング。

5. 図解スライド

## システム構成図

![width:1000px](system-architecture.svg)

Draw.ioで作った図を、そのまま埋め込み。

Marpのスタイルカスタマイズ

Marpは、スタイルをカスタマイズできます。

このブログと同じ、Solarized Dark風のカラーにしました：

---
marp: true
theme: uncover  # テーマ選択
paginate: true  # ページ番号
style: |
  section {
    font-size: 2.4em;
  }
  h1,h2,h3 {
    text-align: left;
  }
  h1 {
    color: #268bd2;  # Solarized Blue
  }
  h2 {
    color: #859900;  # Solarized Green
  }
  code {
    background: #073642;
    color: #93a1a1;
  }
---

使えるテーマ

  • default: シンプル
  • gaia: モダン
  • uncover: 中央寄せ

カスタムテーマも作れます。

Cursorを使って良かった点

1. 圧倒的な速度

PowerPoint: デザインに時間を奪われる Marp: 内容に集中できる

結果: 作成時間が1/16に削減（24時間 → 1.5時間）

2. AIとのコラボレーション

Composerに指示を出すと：

「この比較表を、もう少し詳しくしてください」
→ AIが即座に拡張

「コード例を追加してください」  
→ AIが実用的コードを挿入

「設定ファイルの説明を、もっと初心者向けにしてください」
→ AIが、用語の説明、コメント付きコード例、図解を追加

人間 + AIのハイブリッド作業が可能。

3. 内容に集中できる

PowerPointだと、デザインに気を取られます。

「この色、どうしよう」「レイアウト、ずれてる」「画像のサイズは...」

Marpなら、内容だけに集中できます。

Markdownで書くだけ。デザインは自動で整います。

4. バージョン管理が簡単

Markdownファイルなので、Gitで管理できます。

git diff slides.md
git log --oneline slides.md

変更履歴が一目瞭然。誰が、何を、いつ変更したかが分かる。

PowerPointのバイナリファイルだと、これができません。

5. 再利用が容易

スライドの一部を、別の資料にコピペするのが簡単。

## メリット・デメリット比較

| 選択肢 | セットアップ | 開発速度 | 保守性 |
|------|------------|---------|--------|
| 選択肢A | 高 | 高 | 中 |
| 選択肢B | 中 | 中 | 低 |
| 選択肢C | 低 | 低 | 高 |

テキストなので、どこでも使えます。

6. コードが綺麗に表示される

技術プレゼンなので、コードが多い。

Marpのシンタックスハイライトは、エディタと同じレベル。

// こんな感じで、綺麗に表示される
const config = {
  api: 'http://localhost:3000',
  db: 'mysql://localhost:3306/dev',
};

7. 複数の出力形式

  1. PDF: 印刷・配布用
  2. HTML: オンライン共有用
  3. PPTX: PowerPointユーザー向け
# Marpでエクスポート
右クリック → Marp: Export slide deck...

技術プレゼンに最適な理由

1. コード例が豊富

技術プレゼンでは、コードが重要：

# 設定ファイルの例
version: '3.8'
services:
  app:
    image: example:latest
    ports:
      - "8080:80"
    environment:
      APP_ENV: development
      DB_HOST: db
      DB_USER: app_user
      DB_PASSWORD: app_password
  db:
    image: postgres:15
    environment:
      POSTGRES_DB: app_db
      POSTGRES_USER: app_user
      POSTGRES_PASSWORD: app_password

Marpは、コードブロックを美しくレンダリング。

2. 図解が簡単

Draw.io Integrationで、VS Code内で図作成：

システム構成図 → architecture.png
ネットワーク図 → network.svg  
比較フロー図 → comparison.png

3. バージョン管理

Gitで変更履歴を追跡：

git log --oneline slides.md

誰が、何を、いつ変更したかが分かる。

4. CI/CDとの連携

Markdownなので、自動化可能：

# GitHub ActionsでPDF生成
- name: Export slides
  run: |
    npx @marp-team/marp-cli slides.md --pdf --output presentation.pdf

困ったこと・注意点

1. 図は自分で作る必要がある

AIは図を生成してくれません（まだ）。

Draw.ioで手動で描く必要があります。

ただ、Draw.ioは使いやすいので、10分もあれば綺麗な図が描けます。

2. 細かいデザイン調整が難しい

PowerPointみたいに、ピクセル単位で配置を調整するのは難しい。

でも、そもそも必要ないことに気づきました。

内容が良ければ、デザインはシンプルで十分。

3. アニメーションが限定的

PowerPointのような派手なアニメーションはできません。

ただ、技術プレゼンでは、アニメーションはほぼ不要。

4. プレゼンモード

Marpのプレゼンモードは、ブラウザで開きます。

PowerPointのようなプレゼンターツールはないので、別途ノートを用意するか、PDFにして使います。

他のMarkdownスライドツールとの比較

reveal.js

  • メリット: 高機能、アニメーション豊富
  • デメリット: HTML/CSSの知識が必要、セットアップが複雑
  • 結論: オーバースペック

Slidev

  • メリット: Vue.js製、インタラクティブ
  • デメリット: Node.jsプロジェクト管理が必要
  • 結論: 技術プレゼンには過剰

Marp

  • メリット: シンプル、VS Code統合、Markdownのみ、エクスポートが簡単
  • デメリット: 機能は控えめ
  • 結論: 技術プレゼンなら、Marpが最適

実装の手順

1. 環境構築

# Cursorをインストール
# https://cursor.com/

# VS Code拡張機能をインストール
# 1. Marp for VS Code
# 2. Draw.io Integration

2. プロジェクト作成

mkdir my-presentation
cd my-presentation
touch slides.md
# または Cursorで開く: code .

3. Marpファイルの作成

---
marp: true
theme: default
---

# タイトル

これは最初のスライド

---

# 2枚目

これは2枚目のスライド

4. Composerで生成

Cmd+I（Mac）/ Ctrl+I（Windows）

「〇〇についてのプレゼン資料を、Marp形式で作成してください」

5. プレビュー

Cmd+K V（Mac）/ Ctrl+K V（Windows）

6. エクスポート

右クリック → Marp: Export slide deck...
→ PDF / HTML / PPTX を選択

実際の成果物

今回作成したプレゼン資料：

  • 総スライド数: 50枚
  • 作成時間: 1.5時間（実績）
  • ファイルサイズ: slides.md（約15KB）
  • 図の数: 10枚
  • コードブロック: 20個
  • 比較表: 5個

内容：

  • 複数の技術選択肢の比較
  • それぞれのメリット・デメリット
  • 具体的な構築手順
  • 実装例
  • 設定管理の方法

すべて、Cursor + Marpで作成しました。

品質評価

  • 内容の正確性: 95%（AI生成 + 手動修正）
  • デザインの一貫性: 100%（Marp自動）
  • メンテナンス性: 100%（Markdown）
  • 再利用性: 100%（テキストベース）

限界と改善点

現在の限界

  1. 図の生成: AIが図を生成してくれない
  2. 細かいデザイン調整: PowerPointほど柔軟でない
  3. アニメーション: 限定的

改善案

  1. AI図生成: DALL-EやStable Diffusionとの連携
  2. 高度なテーマ: カスタムテーマの充実
  3. インタラクティブ: クリック可能な要素

まとめ：プレゼン資料作成の未来

Cursor × Marpでプレゼン資料を作って、確信しました。

プレゼン資料作成は、Markdown × AI の時代になりました。

ワークフローの変化

Before（PowerPoint時代）:

  • デザインに時間を費やす
  • 内容が後回しになる
  • バージョン管理が難しい
  • 再利用が面倒

After（Cursor + Marp時代）:

  • 内容に集中できる
  • AIが下書きを作成
  • Gitでバージョン管理
  • テキストなので再利用自由

変わったこと：

  1. 作成時間が激減: 24時間 → 1.5時間（96%削減）
  2. 内容に集中できる: デザインの悩みがゼロ
  3. バージョン管理が簡単: Gitで履歴管理
  4. 再利用が容易: テキストなのでコピペ自由
  5. AIとの相性抜群: Composerで即座に修正

このブログのプレゼン資料作成フロー：

const presentationWorkflow = {
  tool: 'Cursor + Marp + Draw.io',
  model: 'Composer 1',
  format: 'Markdown',
  style: 'Solarized Dark',
  export: ['PDF', 'HTML', 'PPTX'],
  versionControl: 'Git',
  timeReduction: '96%',
};

こんな人は今すぐ試してほしい：

  • PowerPointに疲れた人: もっと楽に作りたい
  • Cursorを使ってる人: Composerが最高
  • 技術プレゼンを作る人: コードが綺麗
  • 効率重視の人: 時間を節約したい
  • エンジニア: コードを含む資料が多い
  • Markdown好き: テキストベースで管理したい
  • バージョン管理派: Gitで管理したい

実装の難易度：

  • 環境構築: ★☆☆☆☆（超簡単）
  • Markdown: ★★☆☆☆（基本的な文法だけでOK）
  • Draw.io: ★★★☆☆（図を描く経験次第）
  • 効果: ★★★★★（絶大）

最後に: プレゼン資料作成で、デザインに時間を使うのはもったいない。

内容に時間をかけて、デザインはツールに任せる。

それが、Cursor + Marpで実現できます。

もう、PowerPointには戻れません。

参考リンク:

次回は、Cursorの他の便利機能について書く予定です。お楽しみに！