MCP×生成AI：スライド作成の効率化 - MCP Ops LT大会！！！

MCP×生成AI：スライド作成の効率化 サイバーエージェント 李 俊浩（じゅん） 2025/06/02 1

アジェンダ 1. 自己紹介 2. スライド作成に何時間かけてますか？ 3. 本日のゴール 4. 結論 5. 資料作成フロー 6. スライド作成の効率化紹介 7. Marpでスライド作成 8. Playwright MCP + Deep Researchでリサーチ 9. スライドの図解&描画 10. まとめ 2

自己紹介 3

スライド作成に何時間かけてますか？ 4

本日のゴール 情報収集からスライドのデザイン・画像作成までを、AI(Cursor)の 力で効率化したワークフローを紹介 5

結論 体感50%は削減できます！ 6

スライド作成フロー ▶ 人がやること ▸ 目標設定と構成案をCursorのエージェントが参照できる形にする(.cursor/rules/global.mdc) ▸ スライドの画像生成に関する部分では、「構成案 + 〇〇画像生成」の文言を追加する。 ▸ スライドのデザイン・文章など微調整 ▶ AIがやること ▸ Playwright MCPを利用し、Deep Researchを実行して情報収集する ▸ スライドの画像生成・図解・デザインなど生成 7

スライド作成の効率化紹介 1. Marpでスライド作成 2. Playwright MCP + Deep Researchでリサーチ 3. スライドの図解&描画 8

Marpでスライド作成 --theme: default backgroundImage: url('https://marp.app/assets/hero-background.svg') --# こんにちは、Marp！ - 簡単なリスト - 強調も** ** 可能  ▶ Marpは、Markdownを使ってプレゼンテーション資料を作成するツールです。 ▶ プレゼン資料をHTML, CSS, Javascriptでスライドのデザインをカスタマイズが可能 ▶ 基本コードベースなので、生成AIで生成できます。 9

Playwright MCP + Deep Researchでリサーチ ▶ .cursor/rules/research.mdにPlaywright MCPを使ったDeep Research操作手順を作成する ▶ ユーザーの指示に基づいて、Deep Researchで関連情報を収集し、Markdownファイルと して保存する 10

スライドの図解&描画 ▶ 画像生成はopenai-gpt-image-mcpを利用 ▶ .cursor/rules/generate_image.mdにOpenAIの画像生成の手順を作成する ▶ Marpスライドに画像の生成・挿入、Mermaid図の作成などは生成 11

まとめ ▶ MCPと生成AIの連携で、スライド作成はもっと速く・簡単に！ ▶ Marpスライド: Markdownで手軽にスライド構造を作成し効率化 ▶ Playwright MCP + Deep Research: AIによる情報収集を効率化 ▶ スライドの図解&描画: 画像を作成・Mermaid図を作成して効率化 さあ、あなたもAIと一緒に効率的なスライド作りを始めましょう！ 12