MCP×生成AI：スライド作成の効率化

Transcript

1. MCP× 生成AI ：スライド作成の効率化 サイバーエージェント 李 俊浩（じゅん） MCP 実装のリアル：現場エンジニアが語る成功と落とし穴 - W&B ミートアップ #25 in 東京 2025/09/24 1
2. アジェンダ 1. 自己紹介 2. スライド作成に何時間かけてますか？ 3. 本日のゴール 4. 結論 5. 資料作成フロー 6. スライド作成の効率化紹介 7. Marp でスライド作成 8. Playwright MCP + Deep Research 9. スライドの図解& 描画 10. まとめ 2
3. 自己紹介 李 俊浩( じゅん) サイバーエージェント > AI オペレーション室 生成AI で、働き方を変える人。 CyberAgent で生成AI による業務効率化でビジネスを 支援しています。 X: @buddypia Zenn: https://zenn.dev/buddypia 3
4. スライド作成に何時間かけてますか？ 4
5. 本日のゴール 情報収集からスライドのデザイン・画像作成まで AI エージェント×MCP の力で効率化したワークフローを紹介します。 5
6. 結論 体感50% は削減できます！ 6
7. システムフロー図 7
8. スライド作成フロー 人がやること 目標設定と構成案をCursor のエージェントが参照できる形にする（エージェントに必要な追加情報） Cursor (.cursor/rules/global.mdc) Claude Code (CLAUDE.md) OpenAI Codex (AGENTS.md) スライドの画像生成に関する部分では、 「構成案 + 〇〇画像生成」の文言を追加する。 スライドのデザイン・文章など微調整 AI がやること Playwright MCP を利用し、Deep Research を実行して情報収集する スライドの画像生成・図解・デザインなど生成 8
9. スライド作成の効率化紹介 1. (Marp でスライド作成) 2. Playwright MCP + Deep Research 3. スライドの図解& 描画 9
10. Marp でスライド作成(1) --- theme: default backgroundImage: url('https://marp.app/assets/hero-background.svg') --- # こんにちは、Marp！ - 簡単なリスト - 強調も**可能**  Marp は、Markdown を使ってプレゼンテーション資料を作成するツールです。 プレゼン資料をHTML, CSS, Javascript でスライドのデザインをカスタマイズが可能 基本コードベースなので、生成AI で生成できます。 10
11. Marp でスライド作成(2) 11
12. Marp でスライド作成(3) 12
13. Playwright MCP + Deep Research(1) .cursor/rules/research.md にPlaywright MCP を使ったDeep Research 操作手順を作成する ユーザーの指示に基づいて、Deep Research で関連情報を収集し、Markdown ファイルとして保存する 13
14. Playwright MCP + Deep Research(2) AI エージェントが自律的に考えてキーワードを選定し、リサーチを行ってスライドを作成する 14
15. Playwright MCP + Deep Research(3) あなたはプレゼンテーションの専門家です。 これから指定するテーマについて、Deep Researchツールを利用し、プレゼンテーションをMarkdown形式で作成してください。 以下の制約条件と入力文をもとに、出力してください。 # プレゼンテーションのテーマ {input} # 制約条件 - Marp形式で出力すること - 1スライドあたりの文字数は30文字以内に抑えること - スライド数は10枚以内に抑えること - 必ずDeepResearchツールを利用して情報収集すること - 出力はDocsフォルダーに保存 その他AI エージェントの指示はチャットで指示 15
16. スライドの図解& 描画(1) 画像生成はopenai-gpt-image-mcp を利用 .cursor/rules/generate_image.md にOpenAI の画像生成の手順を作成する Marp スライドに画像の生成・挿入、Mermaid 図の作成などは生成 16
17. スライドの図解& 描画(2) # 構成案 - Claude Code vs Codex CLIのどっちを選ぶべき？（悩む画像を生成） - Claude Code vs Codex CLI 概要 - ベンチマーク性能比較 - 機能・使い勝手比較 - コスト分析 - 結論：どっちを選ぶべき？ 構成案のMarkdown に悩む画像を生成と入れるだけ AI エージェントがopenai-gpt-image-mcp を利用して画像を生成してくれる 17
18. まとめ MCP とAI エージェントの連携で、スライド作成はもっと速く・簡単に！ Marp スライド: Markdown で手軽にスライド構造を作成し効率化 Playwright MCP + Deep Research: AI による情報収集を効率化 スライドの図解& 描画: 画像を作成・Mermaid 図を作成して効率化 18
19. ご清聴ありがとうございました 19