ENECHANGE Developer Blog

ENECHANGE開発者ブログ

前編：非エンジニアでもできる！Marp&Cursorで始める、爆速🚀！AIプレゼン資料作成術🗒️（サンプルテンプレート付き）

AIエージェント活用リレーブログ

こんにちは、ENECHANGEの石橋です！

前回の利廣さんの記事では、Claude Codeを活用したスペック駆動開発のワークフローが紹介されていました。AIエージェントが自律的にテストコードやドキュメントを生成し、開発を効率化する様子は、まさに「適切なツールの選択と組み合わせ」の重要性を物語っていましたね。

今日は、その「選択」という観点から、プレゼン資料作成におけるゲームチェンジャー「Marp」「Cursor」について、非エンジニアの方でも今すぐ始められる実践ガイドをお届けします！

📄 今回使用するテンプレート

この記事では、すでに用意されているMarpテンプレートを使用します。実際の仕上がりは以下でご確認いただけます：

speakerdeck.com

このテンプレートには以下の要素が含まれています：

  • 表紙デザイン
  • 2カラムレイアウト
  • 強調ボックス
  • グラフ・チャート表示
  • 画像配置パターン

💡 ポイント: このテンプレートをベースに、AIに指示するだけで様々なトピックのスライドが作成できます。

なぜ今、Marpなのか？プレゼンツール「選択」の新時代

従来のプレゼンツールの限界

PowerPointやKeynote、Googleスライドを使っていて、こんな経験ありませんか？

  • 🎨 デザインで時間を消費：フォントサイズやレイアウトの調整で内容作成の時間がない
  • 🔄 更新作業の手間：少し変更するだけでも全体のレイアウトが崩れる
  • 👥 共同編集の課題：「誰かが開いています」で編集できない
  • 🤖 AI活用の壁：AIで生成したテキストをいちいちコピペ作業

Marpが解決する3つのポイント

  1. 内容作成がAI任せ：「〇〇についてスライド作って」と依頼するだけ
  2. デザインはそこそこでOK：テンプレートがあるから最低限の見た目は確保
  3. とにかく手軽：5分でサクッと作れるお手軽さが魅力

【実践編】15分でMarpマスター！

前提：Cursorエディタを使用

このガイドでは、Cursorエディタがインストール済みであることを前提とします。 まだの方はCursor公式サイトからダウンロードしてください。

ステップ1：ターミナルを開こう（1分）

Cursorでターミナルを開く方法

Mac・Windows共通の方法：

方法 Mac Windows
ショートカット `Control + `` (バッククオート) `Ctrl + `` (バッククオート)
メニューから メニュー → ターミナル → 新しいターミナル メニュー → ターミナル → 新しいターミナル

💡 バッククオートとは？ キーボードの左上、数字の「1」の左隣にある「`」記号です

ターミナルが開いたら成功！ 黒い画面（または白い画面）にカーソルが点滅しているのが確認できます。

ステップ2：Node.jsのインストール（3分）

macOSの方

# Homebrewをインストール（まだの方のみ）
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Node.jsをインストール
brew install node

# インストール確認
node --version

Windowsの方

# Chocolateyをダウンロードしてインストールする：
powershell -c "irm https://community.chocolatey.org/install.ps1|iex"

# Node.jsをダウンロードしてインストールする：
choco install nodejs --version="22.18.0"

# Node.jsのバージョンを確認する：
node -v # "v22.18.0"が表示される。

ステップ3：Gitのインストール（2分）

GitHubからテンプレートをダウンロードするのに必要です。

macOSの方

# Homebrewでインストール（推奨）
brew install git

# インストール確認
git --version

Windowsの方

  1. Git公式サイトにアクセス
  2. 「Click here to download」をクリック
  3. ダウンロードしたファイルを実行してインストール
  4. ターミナルで確認：
git --version

💡 すでにインストール済みの方 は次のステップへ進んでください

ステップ4：Cursorでの拡張機能セットアップ（1分）

  1. 拡張機能のインストール：

    • Cursorの左側のアクティビティバーから「拡張機能」アイコン（□が4つのマーク）をクリック
    • 検索ボックスに「Marp for VS Code」と入力
    • 「インストール」ボタンをクリック

  2. 重要！ セキュリティ設定の変更：

    • Cmd+Shift+P（Windows: Ctrl+Shift+P）でコマンドパレット
    • 「Markdown: Change Preview Security Settings」と入力して検索
    • 「Disabled」を選択

💡 なぜ必要？ カスタムテーマのCSSファイルを読み込むために必要な設定です

ステップ5：Marpドキュメントテンプレートをダウンロード（3分）

すでに用意されているMarpツールを使用しましょう！

github.com

# テンプレートプロジェクトをGitHubからクローン
git clone https://github.com/RyuyaIshibashi/marp-docs.git
cd marp-docs

# ダウンロードしたフォルダーをCursorで開く
cursor .

# 必要なツールをインストール
npm install

ダウンロードしたプロジェクトの構成：

marp-docs/
├── README.md            # ← 使い方ガイド（今読んでいるファイル）
├── slide.md            # ← サンプルスライド
├── images/             # ← 画像用フォルダー
├── themes/             # ← デザインテーマ
├── package.json        # ← 設定ファイル
└── scripts/            # ← 便利スクリプト

ステップ6：新しいスライドを作成（2分）

専用コマンドで簡単作成：

# 新しいスライドプロジェクトを作成
npm run new -- my-first-presentation

📝 「my-first-presentation」は好きな名前に変更してください

このコマンドが自動でやってくれること：

  • ✅ 新しいスライド用フォルダーを作成
  • ✅ 美しいテーマファイルを自動生成
  • ✅ サンプルスライドを用意
  • ✅ 必要な設定を最適化

ステップ7：🤖 CursorのAI機能でスライド内容を自動生成（5分）

手順：

  1. slide.mdファイルを開く

    • 作成したフォルダ内に、既にサンプル内容が入ったslide.mdファイルが用意されています

  2. AI機能でスライドを生成

    Cursorショートカット一覧：

    操作 Mac Windows 機能
    AI Chat Cmd+L Ctrl+L チャット形式で相談
    Inline Edit Cmd+K Ctrl+K 選択範囲を直接編集

    実際の操作：

    • slide.mdファイルを開いた状態でCmd+L（Windows: Ctrl+L）でAI Chatを開始
    • チャットウィンドウが右側に表示されたら、以下のようにプロンプトを入力：
   slide.mdファイルの内容を、マーケティング戦略について5枚のスライドに置き換えてください。
   Marp形式で、既存のテンプレート構造を活用して以下の構成でお願いします：
   1. 表紙
   2. 現状分析
   3. 戦略概要
   4. 実行計画
   5. まとめ

🎉 実際の生成結果がこちら！

AIが生成したマーケティング戦略スライド

💡 実際の仕上がり このシンプルなプロンプトだけで、それなりに見られるスライドができました！

AI機能の活用例

具体的なプロンプト例：

  • 「新商品発表会のスライドを8枚で作成して」
  • 「プロジェクト進捗報告のスライドを6枚で作成して」
  • 「会社紹介のスライドを10枚で作成して」

AI Chatでの相談例：

  • Cmd+L（Windows: Ctrl+L）でチャット開始
  • 「効果的なプレゼンテーションの構成について教えて」
  • 「このスライドをもっと分かりやすくするには？」
  • 「slide.mdの内容を営業向けのプレゼンに変更して」

🚀 エクスポート＆共有

PDF出力（1クリック）

Cursorでの操作：

エクスポート手順

  1. ① slide.mdファイルを開いた状態で、エディター右上の △二重アイコン（Marpエクスポートボタン）をクリック
  2. ② 表示される「Export Slide Deck...」メニューをクリック
  3. PDF形式を選んで保存！

💡 ポイント: slide.mdファイルを開いている時のみ、右上にエクスポートボタンが表示されます

まとめ：「AIに依頼するだけ」の新時代へ

Marp×AIの組み合わせにより、プレゼン資料作成は根本的に変わりました。

従来必要だったもの：

  • デザインスキル
  • 細かいレイアウト調整
  • ソフトの操作方法の習得

このツールで必要なもの：

  • AIへの簡単な指示（「〇〇についてのスライド作成」など）
  • PDF出力の操作

🚀 今すぐ始めよう！

AIに「○○についてのスライドを5枚作って」と依頼するだけで、あなたのプレゼンが完成します！

スライド作成の基本から、さらに「プロフェッショナルな資料に仕上げるテクニック」について深掘りしてみませんか？
次回は後編として、MarkdownやMermaidの使い方、細かいレイアウト調整や画像の配置方法、効果的なプロンプトのコツをお伝えできればと思います！