生成AI時代のMarp によるスライド環境の構築

この記事は、3-shake Advent Calendar 2025 19日目のエントリ記事です。

はじめに

エンジニアがプレゼン資料を作るとき、PowerPointやKeynoteにもどかしさを感じることがあります。コードを書くようにスライドを作りたい。Gitでバージョン管理したい。テーマを一括で変更したい。Marpはこれらの願望を叶えるマークダウンベースのスライド生成ツールです。

marp.app

しかし生成AI時代の今、新しい課題が生まれています。AIにスライドの下書きを依頼できるようになった反面、「AIっぽいプレゼン」が量産されるようになりました。整然としすぎて、話者の思考が見えない資料です。この記事では、AIの力を借りつつ「自分のプレゼン」を取り戻す仕組みを紹介します。

AIっぽいプレゼンの正体

生成AIにプレゼン資料を依頼すると、「まず、次に、最後に」と整った構成で返ってくることがあります。けれど、きれいに整理されていても、その中で自分が一番伝えたいことが見えない。私が直したいのは、項目数や接続詞よりも、話の重みが全部同じになっている点です。

Marpを選んだのは、MarkdownをAIが直接編集でき、Textlintやカスタムルールで確認しやすいからです。Gitで文章の差分を読めて、CSSでデザインを一括変更できる。自分が既に使っている開発の道具で、スライドも扱えます。

プロジェクト構造

実際に運用しているMarpプロジェクトの構造を紹介します。

github.com

3shake-marp-templates/
├── templates/              # 再利用可能なテンプレート
├── themes/                 # CSSテーマ
├── slides/2025/           # 実際のプレゼンテーション
├── assets/images/         # 画像資産
└── .claude/               # Claude Code統合
    ├── commands/          # スラッシュコマンド
    ├── agents/            # 専門家エージェント
    └── rules/             # 執筆ルール

ポイントは.claude/ディレクトリです。Claude Codeと統合することで、スライドのレビューを自動化しています。CommandsやSub-agentsの詳細については、以前の記事で解説しています。

syu-m-5151.hatenablog.com

Marpの基本設定

.marprc.ymlでMarpを設定します。

allowLocalFiles: true
html: true
bespoke:
  progress: true

設定項目はMarp CLIの説明で確認できます。Mermaidの図は、この設定だけで描画できるとは限りません。描画用の拡張を別途用意するか、あらかじめ画像にして埋め込み、HTMLとPDFの両方で見え方を確認します。

package.jsonのスクリプトは以下の通りです。

{
  "scripts": {
    "start": "marp -s . --html --allow-local-files",
    "build": "marp --html --allow-local-files"
  }
}

npm startでローカルサーバーが起動し、ファイル保存のたびに自動リロードされます。

テーマによるブランディング

CSSテーマで全スライドに統一感を持たせます。

/* 3shake-theme.css */
:root {
  --3shake-blue: #4AADDD;
  --3shake-blue-dark: #0a1929;
  --3shake-yellow: #ECBE30;
}

section {
  background: white;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 全スライドにロゴを自動配置 */
section::after {
  content: '';
  background-image: url('../assets/images/logo.png');
  position: absolute;
  left: 30px;
  bottom: 20px;
}

これはテーマの一部を抜粋した例です。実際にテーマとして登録するには、テーマCSSの仕様に従って@themeを指定し、ロゴの表示領域にも幅と高さを設定します。ページ番号にはpaginate: trueが必要です。また、section::afterはページ番号の表示にも使われるため、上のようにcontent: ''で上書きする場合は、ロゴを別の要素に配置するなどの調整が必要です。共通テーマへ設定をまとめれば、スライドごとにロゴやページ番号を配置する手間を減らせます。

AIっぽさを排除するルール

ここからが本題かもです。.claude/rules/slide-writing.mdには、レビューで見てほしい点を書きます。

箇条書きの数を揃えるためだけに、論点を足したり削ったりしていないか
接続詞だけで話を進めず、前のスライドとの関係が伝わるか
大事な話に、必要な説明や具体例を割いているか
抽象的な表現を、話者が見たことや判断したことに置き換えられるか

以前は「3項目を避けて2つか4つにする」といった形式のルールも考えていました。ただ、3項目だから印象に残らないとは言えません。機械検査は似た構成の繰り返しに気づく手掛かりとして使い、項目数を変えるかは内容を読んで決めます。

身体性の供給

以前の記事で「AIに記事を書かせるとは何か」について書きました。プレゼンにも同じことが言えます。

AIは構造化が得意です。しかし「身体性」は供給できません。

ここで言う身体性は、自分が試し、困り、判断した経緯です。たとえば「このツールを導入したら開発効率が上がった」と説明するだけでは、その過程が見えません。「設定で3時間ハマり、ドキュメントの不備に気づいてPRを送った」と話せれば、何に困り、どう動いたかが伝わります。これは説明のための例で、実際の資料には自分が経験したことを入れます。

「なぜこのトピックを選んだのか」「どこで躓いたのか」「何に感動したのか」。AIはそれらしい話を作れても、私が経験した事実までは知りません。資料やメモとして渡す必要があります。

私の作業フローはこうです。