以下の内容はhttps://syu-m-5151.hatenablog.com/entry/2025/12/19/183148より取得しました。


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

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

はじめに

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

marp.app

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

AIっぽいプレゼンの正体

生成AIにプレゼン資料を依頼すると、だいたい同じ構成になります。「まず、次に、最後に」という接続詞。きれいに3項目並んだ箇条書き。当たり障りのない結論。これは決して間違っていません。しかし聴衆の記憶には残りません。

なぜでしょうか。聴衆の脳は「予測を裏切られた瞬間」に活性化します。「まず、次に、最後に」という予定調和な構成では、脳は省エネモードで聞き流します。3項目の箇条書きを見た瞬間、聴衆は「ああ、3つあるのね」と思考を止めます。AIが生成するプレゼンは、統計的に最も頻出するパターンの再現です。だから誰が作っても似たような資料になります。

Marpを選んだ理由はシンプルです。マークダウンはプレーンテキストなので、AIが直接編集でき、人間がTextlintやカスタムルールで機械的にチェックできます。PowerPointのようなバイナリ形式では「AI生成→ルール検証」の流れが困難です。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
mermaid: true
bespoke:
  progress: true
options:
  engine: '@marp-team/marp-core'

mermaid: trueでMermaid記法の図表が使えます。しかし正直なところ、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;
}

ロゴとページ番号が自動配置されます。プレゼン作成者はブランディングを意識する必要がなくなります。

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

ここからが本題かもです。.claude/rules/slide-writing.mdに以下の禁止事項を定義しています。

  • 箇条書きを3項目で揃えない(2つか4つにする)
  • 「まず、次に、最後に」という機械的な接続詞を使わない
  • 完全に等分な説明をしない(メリハリをつける)
  • 抽象的で当たり障りのない表現を避ける

なぜ2つか4つなのか。 聴衆の「3つだろう」という予測を外すためです。2つなら対比が明確になり、4つなら網羅感が出ます。3つは「ちょうどいい」ゆえに印象へ残りません。意図的にパターンを崩すことで、聴衆の能動的な思考を促します。

PowerPointでも同じルールを適用できる」という反論があるでしょう。確かにその通りです。しかしPowerPointでは、このルールを機械的にチェックする手段がありません。Marpならテキストベースなので、「3項目の箇条書きを検出したら警告」というルールを自動実行できます。人間の意志力に頼らず、仕組みで品質を担保します。

身体性の供給

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

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

ここで言う身体性とは、知識が「情報」から「経験」へと変容する過程で生じる一人称的な認知の軌跡です。たとえば「このツールを導入したら開発効率が上がった」という情報と、「導入時に設定で3時間ハマってドキュメントの不備に気づきPRを送った」という経験は別物です。

プレゼンにおける身体性とは、「なぜこのトピックを選んだのか」「どこで躓いたのか」「何に感動したのか」という、話者固有の軌跡です。これはAIには生成できません。

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

  1. 伝えたいメッセージを箇条書きで書き出す(5-7個)
  2. 各メッセージに「自分だけが語れる具体例」を追加
  3. AIにレビューを依頼し、構成を整える
  4. /review-slideで「3項目の箇条書き」「まず・次に」の指摘を確認
  5. 指摘箇所を修正

AIは足す。人間は削る。 AIは情報の網羅性を最適化しますが、プレゼンの核心は何を省くかにあります。「このトピックは聴衆の関心外」と判断するには、聴衆の反応を想像する力が必要です。この能力は現在のLLMには実装されていません。だからアウトラインは自分で考え、AIにはレビューを任せます。

おわりに

Marpとルールベースのチェック、そしてClaude Codeのエージェント。この組み合わせで実現したのは、「AIの力を借りながら、自分の思考を残す」環境です。

完璧に整った資料より、少し不格好でも話者の考えが透けて見える資料のほうが、聴衆の記憶に残ります。AIが生成した「もっともらしい」スライドではなく、自分の経験に根ざした「本物の」スライドを作る。そのための環境がMarp×Claude Codeです。

まずは既存のスライドを1枚だけMarkdown化してみてください。それがMarp×AI環境構築の第一歩です。




以上の内容はhttps://syu-m-5151.hatenablog.com/entry/2025/12/19/183148より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14