はじめに

最近はもっぱらMarpを用いてスライド作成を行っている。Marpとはマークダウンでテキストを書くだけで美麗なスライドを生成することができるツールだ。本記事ではMarp自体については解説しない。

過去のMarp記事はこちら

Marp×AIの利点と問題点

Marpを用いると非常に高速にスライドを作ることができる。さらに、ただのテキストが基になっているので、AIによる補助を受けることができる。CursorやClaude Codeのようなファイルの直接編集ができるAIを用いれば、AIとの共同制作ということも可能だ。

AIスライド作成ツールは他にも多く存在するが、既存のツールとの明確な差別化点として、

AIで途中編集することができる

という特徴がある。既存のAIスライド作成ツールの殆どは優秀であっても作ったら作りっぱなしで、たたき台にすることしかできないことが多い。

一方で、MarpでAIを使う際には大きな問題がある。それは

AIがレイアウトを認識できない

ということだ。どれくらいの量がスライドに収まるのかがAIには分からないので、スライドの枠からはみ出しまくる。結果として手動調整が必須になってしまう。

Marp×MCPサーバー

ここでMCPサーバーを使う。MCPサーバーを用いればAIに追加機能をもたせることができる。MCPサーバー自体の解説も本記事では行わない。

過去のMCPサーバー記事はこちら

MCPサーバーではツールを使わせるためにAIに特定の関数の出力を強制させる。これを用いれば

  • title: 30文字以内の文字列
  • content: 50文字以内の文字列、8個まで

のようにAIの出力を固定化できる。この出力を基に、プログラムでテキストを編集すれば、レイアウトが絶対に崩れないスライドが作れるのではないか、と考えた。

作成したMCPサーバー

下記のようなMCPサーバーを作成した。

追加方法はMCP設定ファイルへの追記だけで良い。

{
  "mcpServers": {
    "marp-mcp": {
      "command": "npx",
      "args": ["-y", "@masaki39/marp-mcp"]
    }
  }
}

ツールは以下の3つを作成した。

ToolDescription
list_layouts使用可能なレイアウトの詳細情報を取得し、AIに仕様を理解させる
generate_slide_idsスライドに固有のIDを発行する。
manage_slideレイアウトに基づいたスライドの挿入、置換、削除を行う。

AIが編集するスライドを確実に指定するためにスライドの冒頭に固有のIDを挿入するようにした。AIが作ったスライドには自動で挿入される。コメント記法なので、スライドの表示には影響はない。

<!-- slide-id: ca7a7743-f7c2-46c6-9230-c8f7024c7de4 -->

レイアウトはひとまずtitle, section, list, table, two-column, image-right, image-centerの7種類とした。リポジトリ内の自作テーマに最適化してあるが、レイアウト定義を変更すれば他のテーマでも利用可能だ。DemoスライドをAIに作成してもらったら下記のようなスライドが作成された。

↑Demoスライド:クリックでページ移動できます

仕組み

MCPサーバーがAIとマークダウンファイルの間に入り、AIの出力を構造化データとして受け取る。例えば、two-columnレイアウトを挿入する際、AIは下記のような出力を強制される。

 {
	"filePath": "/Users/masaki/Documents/slides/presentation.md",
    "mode": "insert",
    "position": "after",
    "slideId": "ca7a7743-f7c2-46c6-9230-c8f7024c7de4",
    "layoutType": "two-column",
    "params": {
      "heading": "機械学習 vs DL",
      "column1Heading": "機械学習",
      "column1List": [
        "特徴量を手動設計",
        "小規模データでOK",
        "解釈性が高い",
        "計算コスト低"
      ],
      "column2Heading": "DL",
      "column2List": [
        "特徴量を自動抽出",
        "大規模データ必要",
        "ブラックボックス",
        "高計算コスト"
      ]
    }
  }

これを基に、テキストの編集はプログラムが行うようになっている。それぞれの出力に、「どのような内容の出力が求められるか」、「何文字以内の出力にしないといけないか」が設定でき、異なる場合はエラーを返すので、出力が絶対に安定するようになっている。

Marp×AIスライドのメリット

既存のAIスライド作成ツールと比較して、以下のような優位性がある。

  • レイアウトの安定性:MCPによる文字数制限で、スライドからはみ出す心配がない
  • 柔軟な編集性:AIによる途中編集が可能で、イテレーティブな改善ができる
  • マルチモーダル対応:PDF読み込みや画像挿入など、多様な素材を扱える
  • 再現性:マークダウンベースなので、バージョン管理や再利用が容易

おわりに

MCPサーバーを活用することで、MarpとAIの弱点を補完し合う仕組みを構築できた。スライド作成の効率化に悩んでいる方は、ぜひ試してみてほしい。

AIにプロンプトエンジニアリングで全部丸投げのやり方は最終的には残らないのではないかと思っている。プログラムでワークフローを規定し、人と協調して動作する。AIとプログラムの適材適所な組み合わせが、より良いツールを生み出すだろう。