0. 作ったのはこんなの

リポジトリURL: https://github.com/N-Y-Public/marp-slide-mcp
スター（⭐）やフィードバックをいただけると今後の開発の励みになります！

まずは、今回紹介する環境（marp-slide-mcp）を使って
Markdown から生成した実際のプレゼンテーション資料をご覧ください。

このスライドのデザイン（配色、見出し帯、フォントサイズ、配置）は、
すべてMarkdownを規約通りに記述しただけで自動生成されています。
しかも作成は付属のMCPを経由して全て自然言語で行いました！！！

1. はじめに：エンジニアのスライド作成における「4大ストレス」

エンジニアのみなさん、プレゼン資料や社内報告スライドの作成に消耗していませんか？

PowerPointを開いて、テキストボックスの位置をマウスでチマチマ合わせ、フォントサイズを揃え、図形の色を調整する……**「こんな作業をするくらいなら、コードを1行でも多く書いていたい」**と誰もが一度は思ったことがあるはずです。

「じゃあ Markdown でスライドが書ける Marp を使えばいいのでは？」

そう考えて Marp を導入したエンジニアも多いと思います。Markdown でサクサク書ける体験は素晴らしいのですが、いざビジネスの実務（社内提案、役員報告、クライアント向け提案）で使おうとすると、次の「4つの壁」に直面します。

デザインがビジネス向きでない: デフォルトのテーマでは「戦略コンサルや大手企業のような引き締まったデザイン」になりにくく、フォントや配色の調整に時間がかかる。
文字や図表がすぐ枠からはみ出る: 表やコードブロック、長めの文章を入れると、スライドの枠を突き破って画面外へ消えてしまう。手動でフォントサイズをいじったり改行を削る不毛な微調整が発生する。
「パワポで編集できるようにして渡して」と言われて困る: Marp 標準の PPTX エクスポートは、スライドを画像化して貼り付けているだけ。クライアントや非エンジニアの上司に「後からテキストを編集したい」と言われると対応しづらい。
生成AIに頼んでもレイアウトが崩れる: Claude や ChatGPT に「スライドを作って」とお願いしても、スライド枠のサイズ感を理解できず、文字数オーバーでレイアウトが崩壊する。

これらのペインを解消し、より実用的なスライド作成を目指して開発したのが、今回オープンソース（Source-Available）として公開した marp-slide-mcp です。

2. `marp-slide-mcp` とは？

marp-slide-mcp は、Markdown から洗練されたビジネス標準デザインのスライドを生成する Marp 拡張環境 と、Claude Desktop や Cursor 等の AI アシスタントと連携してスライドを全自動操作する MCP（Model Context Protocol）サーバー を統合したソリューションです。

単なる Marp テーマの配布にとどまらず、「AIエージェントにプロ品質のスライドを作らせ、人間は内容のレビューと発表だけに集中する」 体験を目指しています。

3. ここがすごい！ 5つの推しポイント

① 見出しタグで書くだけ！ MBB（戦略コンサル）風のビジネス標準デザイン

独自テーマ business-slide-theme.css は、Markdownの見出しタグ（# 〜 ######）を**レイアウトのアンカー（役割の目印）**として解釈します。

記法	通常スライドでの役割	表示イメージ
`#` (h1)	ページタイトル	上端にすっきり配置
`##` (h2)	主張・キーメッセージ	コーポレートカラーの帯内に配置（最重要メッセージ）
`###` (h3)	図表タイトル / 補足	帯の下・中央寄せ
`####` (h4)	本文 / メインコンテンツ	箇条書き、表、画像、コードブロック
`#####` (h5)	出典・脚注	右下に小さく注記
`######` (h6)	コピーライト / 機密指定	フッター左右に配置

「ワンスライド・ワンメッセージ（Pyramid Principle）」に基づき、誰が書いても自然と説得力のあるコンサル品質のレイアウトに仕上がります。

さらに、クラス指定を1行足すだけで多彩なレイアウトに対応します：

目次スライド自動生成: （スライド内の見出しを集計してクリック可能な目次を自動作成）
2段組比較: （左右の比較・対比）
画像並列:  〜 images-4（複数グラフや写真の横並び）
タイムライン対話: （チャット形式のユーザー事例）
ワイド画面: （巨大な図表やアーキテクチャ図用）

② 文字量に応じた「自動リサイズ機能」ではみ出しゼロ

Marp ユーザー最大の悩みである**「文字があふれて枠外にはみ出る問題」**を根本から解決しました。

表（Table）: 列数や文字量に応じてフォントサイズが自動縮小
コードブロック: 行数や桁数に応じて自動縮小し、スクロールバーを出さない
画像・Mermaid図: コンテンツ領域の高さ・幅に合わせて自動フィット
主張メッセージ（H2）: 箇条書きが増えても帯の高さ内で自動スケールダウン

もう「文字を削るために改行を工夫する」無駄な時間は必要ありません。

③ 【挑戦中】「パワポで文字が編集できる」ネイティブPPTX変換（実験的機能）

既存の Marp の惜しい点として、PPTX 出力した際に「スライド全画面が1枚の画像として貼り付けられるだけ」という仕様があります。これでは「後からテキストだけ微調整したい」という場合に少し困ってしまいます。

そこで marp-slide-mcp では、Puppeteer と PptxGenJS を連携させた**カスタムコンバーター（pptx_converter/convert.js）**の開発にチャレンジしています。

npm run build:pptx-custom

正直に白状しますと、現状はまだ発展途上（WIP）で、レイアウト崩れもあり「めちゃくちゃ綺麗なスライドが出力できる」という段階には至っていません。

しかし、「タイトルや本文のテキストボックス、図形を PowerPoint のネイティブオブジェクトとして書き出す」ための足がかりはできています。実用的なクオリティを目指してこれからどんどん改善していく予定ですので、「こういう実装はどう？」「ここ直してみたよ」といったフィードバックやプルリクを大歓迎でお待ちしています！

④ Claude Desktop や Cursor から呼び出せる「MCPサーバー」内包

Anthropic が提唱する Model Context Protocol (MCP) に対応した TypeScript サーバーを同梱しています。

以下の 7 つの専用ツールを提供しており、AI エージェントがスライドを自由自在に操ります：

generate_slide_deck: テーマ規約に完全準拠した新規スライド一括生成
get_slide_deck: 既存スライドの構造解析・読み込み
insert_slide: 特定位置へのスライド追加
update_slide: 指定スライドの部分修正・ブラッシュアップ
delete_slide: 不要スライドの削除
update_deck_settings: 全体テーマカラーや比率（4:3 / 16:9）の一括変更
export_to_pdf: Marp CLI を呼び出してワンクリックで高品質 PDF 出力

AI に「このリサーチ結果をもとに10枚のスライドを作って」と投げるだけで、ルールに沿った美しいスライドが一瞬で出来上がります。

⑤ 個人プロジェクトだけど設計図書も頑張って書きました！

個人開発の OSS リポジトリだと「とりあえず動くコードと簡単な README だけで力尽きる」ことも多いですが、本プロジェクトでは設計ドキュメントの整備にもかなり気合を入れました。

IPA（情報処理推進機構）のシステム開発仕様書体系を参考に構成しています：

00. プロジェクト憲章・コーディング規約
01. 要件定義書（業務要件・機能要件・非機能要件）
02. 基本設計書（機能仕様書・外部I/F仕様書）
03. 詳細設計書（構造設計書・内部I/F仕様書・プログラム仕様書）

「IPA標準に完全準拠している！」と胸を張るにはまだおこがましい部分もありますが、個人プロジェクトとしては異例なほど真面目にドキュメントを作り込んでいます。

何より、設計書がしっかり揃っていることで、Claude などの AI エージェントにコードを改修・拡張させるときの「正確無比なコンテキスト」として猛烈に機能するという副産物もありました。ぜひ docs/ ディレクトリも覗いてみてください！

4. クイックスタート：今すぐ試してみる

1. VS Code でプレビューしてみる（最短5分）

リポジトリをクローンします：

git clone https://github.com/N-Y-Public/marp-slide-mcp.git
cd marp-slide-mcp

VS Code で開き、拡張機能 Marp for VS Code（marp-team.marp-vscode）をインストールします。

VS Code の設定（.vscode/settings.json）でテーマを指定します：

{
  "markdown.marp.themes": [
    "./themes/business-slide-theme.css"
  ],
  "markdown.marp.enableHtml": true
}

slides/D01-000001_Marpの使い方/D01-000001_Marpの使い方.md を開き、右上のプレビューボタン（または Ctrl+K V）を押すと、即座にビジネスデザインが適用されたスライドを確認できます。

2. Docker による環境依存ゼロの一発ビルド

Node.js 22、ヘッドレス Chromium、日本語フォント（fonts-noto-cjk）を内包した Docker 環境を用意しているため、OSによるフォント崩れやレンダリング差異が一切ありません。

# 依存関係インストール
docker compose run --rm app npm install

# TypeScript ビルド
docker compose run --rm app npm run build

# PDF 出力
docker compose run --rm app npm run build:pdf

# ネイティブ PowerPoint（PPTX）出力（※実験的機能）
docker compose run --rm app npm run build:pptx-custom

※ Windows PowerShell の場合は .\dev.ps1 run npm run build:pdf、Linux/macOS の場合は ./dev.sh run npm run build:pdf でも実行できます。

5. Claude Desktop や Cursor と連携する（MCP 設定）

AI アシスタントから直接スライドを生成・編集できるように設定しましょう。

1. TypeScript をビルド

npm run build

build/index.js が生成されます。

2. Claude Desktop に登録

設定ファイル（claude_desktop_config.json）に以下を追加します：

Windows: %APPDATA%\Claude\claude_desktop_config.json
macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

{
  "mcpServers": {
    "marp-slide-mcp": {
      "command": "node",
      "args": ["<リポジトリの絶対パス>/build/index.js"]
    }
  }
}

3. AI への指示プロンプト

リポジトリ内の prompts/mcp_slide_generator.md に、AIに高品質なスライドを作らせるためのシステムプロンプトが用意されています。

Claude や Cursor に以下のように指示するだけです：

「prompts/mcp_slide_generator.md のルールに従って、次世代AIエージェントのアーキテクチャに関する提案スライドを新規作成して（ファイル名: slides/ai-agent.md）。主要な論点は3点、最後にPDFへエクスポートして。」

AIが自律的にレイアウトを決定し、見出し記法を構築して generate_slide_deck ツールを実行、最後に export_to_pdf で PDF を書き出してくれます。

6. ライセンスと商用利用について

本ソフトウェアは SaaS提供制限付きライセンス（Source-Available） で公開されています。

OKな利用例:
- 自社業務や個人でのスライド作成・プレゼン発表（完全無料・商用OK）
- 受託案件や顧客提案の納品物としてのスライド利用
- クライアント企業への導入支援・環境構築・サポート業務の対価取得
- 自社向け・案件向けのテーマやコードの改変
NGな利用例:
- 本ツールをクラウドにデプロイし、一般ユーザー向けに「Web上でスライドを自動生成するSaaS」として有料課金サービスを提供すること

企業の実務やフリーランスの提案業務において、安心して自由に活用いただけるライセンス体系となっています。

7. まとめ

Markdown で直感的に書ける
ビジネス標準デザイン＆はみ出し防止で見た目を気にする必要がない
ネイティブ編集可能なパワポ（PPTX）出力にも果敢に挑戦中（WIP）
MCP対応でAIエージェントがスライド作成を代行してくれる
個人開発だけど設計図書もガッツリ整備

「エンジニアが資料作成に奪われる時間を最小限にし、本質的な開発や価値創造に集中できる世界」を目指して開発しました。

ぜひ使ってみて、気に入っていただけたら GitHub で Star を押していただけると嬉しいです！

GitHub リポジトリ: https://github.com/N-Y-Public/marp-slide-mcp
Issue や Pull Request でのご要望・フィードバックも大歓迎です！