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

3.1K Views

June 03, 25

スライド概要

profile-image

主に生成AIを活用アプリ開発や生成AIコンサルをやっています。

シェア

またはPlayer版

埋め込む »CMSなどでJSが使えない場合

ダウンロード

関連スライド

各ページのテキスト
1.

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

2.

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

3.

自己紹介 3

4.

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

5.

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

6.

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

7.

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

8.

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

9.

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

10.

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

11.

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

12.

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