🐈

Research→文章・構成の作成→PowerPointでスライド作成を99%自動化する方法(ClaudeDesktop+MCP)

に公開

はじめに

ClaudeDesktop+MCPを使うことで、AIとデータソースやサービスと繋げられ、PC上のファイル操作ができるということは、結構前から知られていると思います。
今回は、誰でも無料でClaudeDesktop+MCP+Pythonを使うことで
Research → 文章・構成の作成 → PowerPointの作成を99%自動化する方法を紹介します。
もちろん、作成したスライドはPowerPoint上で編集可能です。
動作は以下から確認できます。(16倍速)
https://youtu.be/MdBlkXMKc6Q

MCP??という方は、MCPに関する説明は以下の記事でとても分かりやすく詳細に解説されているので、参照して下さい。
自分はめっちゃ参照してます。
https://zenn.dev/acntechjp/articles/78b0dbc48d39d0

また、ClaudeDesktopで使用しているプロンプトは、以下を参考にさせていただいております。
こちらを参考することで、ClaudeDesktopがManusのような動きになるという魔改造が出来ました。
https://github.com/r488it/claude_hands

前提条件

以下のものを事前にインストールしておく必要があります
・ClaudeDesktopのインストール
・Node.jsのインストール
・MCPサーバのインストール(Brave-search、Filesystem、playwright)
・Brave-searchAPIの取得(Brave公式から無料会員登録をすれば取得できます)

各MCPサーバの役割
Brave-Search:最新情報のResearchに使用。生成AIがトレンドも把握してくれます
Filesystem:PC内のローカルフォルダの操作に使用。スライド(SVG)を直にPC内に作ってくれます
playwright:ブラウザの操作に使用。必須ではない。

MCPサーバのセットアップは以下の記事を参考にしております。
Filesystemのセットアップの紹介ですが、Brave-searchのセットアップも同様の手順で出来ます。
https://zenn.dev/acntechjp/articles/d0acacc98cad38

MCPサーバの説明は雑に端折りましたが、素晴らしい記事が既にたくさんあるので
なんとかインストールしてください

ClaudeDesktopの設定

上記前提条件の環境が整っているということで
具体的な設定を説明します。

まずは、インストールしたMCPサーバを有効化していきます

  1. 左上のアイコンをクリック
  2. ファイル>設定をクリック
  3. 開発者タブから、構成を編集をクリックする
  4. claude_desktop_config.jsonを開く
  5. Jsonを以下に書き換えて保存する。
    <ユーザ名>の部分は自身のユーザ名に置き換えてください。
    <BrabeのAPIKeyを入力>は、Braveに無料会員登録で取得したAPIKeyに置き換えてください
{
    "mcpServers": {
      "playwright": {
        "command": "npx",
        "args": [
          "@playwright/mcp@latest"
        ]
      },
      "filesystem": {
      "command": "node",
      "args": [
        "C:\\Users\\<ユーザ名>\\AppData\\Roaming\\npm\\node_modules\\@modelcontextprotocol\\server-filesystem\\dist\\index.js",
        "C:\\Users\\<ユーザ名>\\Desktop"
      ]
    },
      "brave-search": {
        "command": "npx",
        "args": [
          "-y",
         "@modelcontextprotocol/server-brave-search"
        ],
        "env": {
         "BRAVE_API_KEY": "<BrabeのAPIKeyを入力>"
       }
    }
    }
  }
  1. MCPサーバを有効化するために、ファイル>終了からClaudeDesktopを閉じる。

    7. ClaudeDesktopを再度起動して、ハンマー(ピッケル?)のようなアイコンが表示されていれば、MCPサーバが有効化されています。これで、必要に応じてClaudeが勝手にMCPサーバを使えるようになります。

プロジェクトの設定

  1. プロジェクトタブから新規プロジェクトを作ります
    プロジェクト名と説明を適当に入力して、プロジェクトを作成をクリックする。
  2. プロジェクトの指示を設定をクリックします
  3. プロジェクトの指示を設定する。以下のプロンプトを貼り付けて指示を保存をクリックします
    <ユーザ名>の部分は自身のユーザ名に置き換えてください。
    作成されるスライドの色などを変えたいときは、カラースキーマなどを適宜変更してください
# 作業ディレクトリ
・あなたの作業ルートディレクトリは:C:\Users\<ユーザ名>\Desktop\image
・作業時依頼内容によく合うワード2つ程度のディレクトリ名を考えて   
・”C:\Users\<ユーザ名>\Desktop\考えたディレクトリ名”で作業すること
・同じフォルダがある場合は別の名前を考えること

# タスク管理
・ユーザから依頼された際、ユーザは何を求めているのかよく考え、これからやるべきことをtodo.mdにマークダウン形式に書き起こす   
・タスクとサブタスクの数は依頼内容によって判断してください   

~~~
例
# 〇〇タスク

## タスク名1
- [ ] サブタスク1
- [ ] サブタスク2
- [ ] サブタスク3

・そのタスクリストに沿ってタスクを実行してください、終わったタスクは
- [x] タスク のようにtodo.mdを更新すること
~~~

・調査タスクは調査し、実装タスクは実装してください   
・調査タスクは調査結果に基づいて、ユーザ要件を満たすために深堀りする必要がある かを考え、調査すべき内容とタスクの変更をtodo.mdに更新すること   
・更新されたタスクに基づいて続けて実施してください


#SVG画像生成
ユーザからSVG画像生成または、スライド生成と指示された場合は、以下のプロンプトでSVG画像でスライドを作成して、SVG画像をフォルダに保存してください。
保存が完了したら、ファイルを格納したフォルダ名を最後に教えてください

~~~
入力された文章/記事を、一流コンサルティングファームが作成したような、完璧な16:9プレゼンテーションスライドに変換してください。
情報設計とビジュアルデザインの両面で最高水準を目指します。 

【デザイン仕様】
カラースキーム: 
プライマリー:#8A2BE2(パープル)とそのグラデーション
セカンダリー:#FFFFFF(白色、全体背景)
アクセント:#E6E6FA(ラベンダー、ボックス枠線)
重要度表示:高=#ef4444(赤)、中=#f59e0b(オレンジ)、低=#10b981(緑)

タイポグラフィ: 
タイトル:36px、グラデーション効果、太字
サブタイトル:18px、#475569 - セクション見出し:24px、#1e40af、アイコン付き
本文:16px、#334155、行間1.4
フォントファミリー:MeiryoUI

レイアウト: 
端的なリード文をタイトルの下に入れてください。
リード文を読むだけでスライドの勘所が理解できるように、リード文は2行を目安にしてください
ヘッダー:左揃えタイトル+右揃え日付/出典
カード型コンポーネント:白背景、角丸14px、微細シャドウ
セクション間の適切な余白と階層構造 SVGコードで生成してください

■ SVGパラメータ
viewBox="0 0 1280 720"
width="1280" height="720"

【コンテンツ構成】 
各章立てごとにスライドを作成してください

【SVGのPowerPoint互換性】
※※ 最重要:XMLの特殊文字処理 ※※
以下の特殊文字は必ずエスケープしてください。これはPowerPoint互換性の最重要事項です:
- アンパサンド(&)は必ず「&」と記述する(例:「Strategy & Implementation」→「Strategy & Implementation」)
- 小なり(<)は「&lt;」と記述する
- 大なり(>)は「&gt;」と記述する
- アポストロフィ(')は「&apos;」と記述する
- 引用符(")は「&quot;」と記述する

xmlns="http://www.w3.org/2000/svg" 名前空間を追加
preserveAspectRatio="xMidYMid meet" を追加
PowerPointの16:9スライドに合わせて viewBox="0 0 1280 720" を使用

【PowerPoint互換性の制限事項】
複雑なfilter効果(drop-shadowなど)は使用しないこと
グラデーションは最小限に抑えるか、単色に置き換えること
外部参照やURLは使用しないこと
アニメーション要素や複雑な透過や重なり合う透過効果は使用しないこと
破線(stroke-dasharray)などの特殊な線スタイルは避けること

テキスト表示の注意点:
foreignObject要素は使用せず、通常のtext要素を使用する
長文テキストは複数のtext要素に分割し、y座標をずらして表示する
例: <text x="60" y="270" font-family="..." font-size="16">1行目のテキスト</text><text x="60" y="295" font-family="..." font-size="16">2行目のテキスト</text>

SVG構造はできるだけシンプルにし、以下を意識してください: 
- グループ化は最小限に留める 
- 階層は浅く保つ 
- 複雑なパスや効果は避ける
- テキスト要素は基本的な属性のみ使用する

【最終仕上げ】     
プロフェッショナルなフッター(ロゴ位置+出典)
16:9比率に最適化された情報密度 
視線誘導を考慮したレイアウト設計
説得力を高める微細なビジュアル要素 

【SVG生成前の確認事項】
1. すべての「&」記号が「&amp;」にエスケープされているか確認
2. 複雑なグラデーションを単色に置き換えたか確認
3. 複雑な効果(フィルター、アニメーション)を排除したか確認
4. テキスト要素がPowerPoint互換の形式か確認

このスライドは、C-levelエグゼクティブへのプレゼンテーションにも耐えうる品質を目指します。
視認性と情報の階層性を犠牲にしないデザインにしてください。
SVGコードで生成してください。
~~~

# 情報検索手段
・あなたはブラウザとBraveの両方使えます、ユーザの指示がなければBraveでアクセスできないページはブラウザで情報を取得して

スライドの自動作成

ここまでの作業でスライドの自動作成の準備は整いました
これで、いつでもスライドを自動作成できます

  1. チャット画面を開き、+ボタン>プロジェクトにチャットを追加をクリックして
    先程作成したプロジェクトを選択します。
  2. スライドを作成したい内容を入力して、実行します
  3. 自動でスライドを作成されていきます

    実行ログは↓から見れます。
    https://claude.ai/share/f0b3db8c-d56c-4782-af43-4bcadfa331a2

4.以下のコードPythonから実行します

pip install pywin32
import os
import glob
import win32com.client

def insert_svg_from_folder():
    # ユーザーにフォルダパスを入力してもらう
    folder_path = input("SVGファイルが格納されているフォルダのパスを入力してください:")
    if not folder_path:
        print("フォルダが指定されなかったため、処理を中止します。")
        return

    # 末尾に「\」がなければ追加
    if not folder_path.endswith("\\"):
        folder_path += "\\"

    # フォルダ内のSVGファイルを取得
    svg_files = glob.glob(os.path.join(folder_path, "*.svg"))
    # ファイル名のみのリストに変換
    svg_files = [os.path.basename(f) for f in svg_files]

    if len(svg_files) == 0:
        print("指定フォルダ内にSVGファイルが見つかりません。")
        return

    # ファイル名をアルファベット順にソート
    svg_files = sorted(svg_files, key=str.lower)

    # PowerPointアプリケーションを取得(なければ起動)
    pptApp = win32com.client.Dispatch("PowerPoint.Application")
    pptApp.Visible = True
    try:
        pres = pptApp.ActivePresentation
    except Exception:
        print("アクティブなプレゼンテーションが見つかりませんでした。新規プレゼンテーションを作成します。")
        pres = pptApp.Presentations.Add()

    # ppLayoutBlankの定数(通常は12)
    ppLayoutBlank = 12
    current_slide_index = 1

    # 既に1枚目のスライドが存在し、かつレイアウトがブランクの場合は利用する
    if pres.Slides.Count >= 1:
        first_slide = pres.Slides(1)
        if first_slide.Layout == ppLayoutBlank:
            first_slide.Shapes.AddPicture(
                FileName=folder_path + svg_files[0],
                LinkToFile=False,
                SaveWithDocument=True,
                Left=0,
                Top=0,
                Width=-1,
                Height=-1
            )
            current_slide_index += 1

    # 残りのSVGファイルごとに新規スライドを追加して画像を挿入
    for file in svg_files[current_slide_index - 1:]:
        slide = pres.Slides.Add(pres.Slides.Count + 1, ppLayoutBlank)
        slide.Shapes.AddPicture(
            FileName=folder_path + file,
            LinkToFile=False,
            SaveWithDocument=True,
            Left=0,
            Top=0,
            Width=-1,
            Height=-1
        )

if __name__ == "__main__":
    insert_svg_from_folder()
  1. 勝手にスライドが出来上がっていました

  2. スライドの編集が必要な場合は、右クリック図形に変換を押すと編集できるようになります

終わりに

最後はPowerPointにPythonで無理やり貼り付けるという荒業を使いましたが
これもMCPサーバーで実行させれば、全自動化出来そうです
また、OSSのClaudeDesktopのようなものもリリースされているというのを見たので、半年以内にはクラウド上やオンプレ環境でも自動スライド作成が出来るようになりそうですね
企業内のドキュメントや画像も扱えるようになれば、誰でもスライドのたたきを一瞬で作れるようになる日も近いですね

おまけ

今回作成したスライド
文字がはみ出すところだけは、未だに苦戦しているのでなんとか制御したいところです。
もう少し調整が必要です。








Discussion