Marp with Claude Code

AI と協業するスライド制作。直せる・再現できる・管理できる。

📅 2026-03-10・Tue
谷口 健太 (Kenta Taniguchi)

Marp with Claude Code

自己紹介

profile
谷口 健太 (Kenta Taniguchi)
and roots株式会社 / グロースハックチーム
アナリティクスエンジニア

趣味

  • 研究
  • 料理、カレー、コーヒー
  • アニメ、読書
  • ゲーム (Minecraft、スプラトゥーン)
  • ボードゲーム、1103 遊戯王
  • ドライブ、キャンプ、温泉

特技

  • データサイエンス
  • データエンジニアリング
  • データモデリング
  • データビジュアライゼーション

経歴

2015-10

株式会社はぐくみプラス

CS 部署
新規企画部署
BI 部署

2020-01

株式会社Hide&Seek

BI 部署

2021-07

and roots株式会社

グロースハックチーム

Marp with Claude Code

今日のゴール

テキスト × AI で、スライド制作の体験がどう変わるかを知る

Marp with Claude Code

アジェンダ

  1. 導入 (なぜ作ったか)
  2. 何を作ったか
  3. どのように作ったか
  4. まとめ
Marp with Claude Code

アジェンダ

  1. 導入 (なぜ作ったか)
  2. 何を作ったか
  3. どのように作ったか
  4. まとめ
Marp with Claude Code › 導入 (なぜ作ったか)

スライド制作に、こんな悩みはありませんか？

手作業だろうが、AI だろうが、スライドのデザインは悩ましい

🫠 時間が溶ける Without AI

色・フォント・余白等を毎回手で揃えていたら、気づけば数時間...

♻️ 使い回しにくい Without AI

デザインを変えたくなったら全ページやり直し

✏️ 直しにくい With AI

AI の出力が画像や独自形式で、手軽に自分で修正できない

🎲 再現性がない With AI

厳密なデザインシステムやブランドイメージを再現できない

Marp with Claude Code › 導入 (なぜ作ったか)

もし、テキストを書くだけで
スライドが完成するとしたら？

Marp with Claude Code › 導入 (なぜ作ったか)

このスライドは、テキストだけで出来てます

---
marp: true
theme: custom
---

# Marp with Claude Code{.mb-0}

==AI と協業するスライド制作。直せる・再現できる・管理できる。=={.text-lg .text-accent}
==📅 2026-03-10・Tue=={.text-xs .highlight}
谷口 健太 (Kenta Taniguchi)

---

## 自己紹介

<!-- 省略 -->
Marp with Claude Code › 導入 (なぜ作ったか)

これを可能にするのが「 Marp 」

Marp with Claude Code › 導入 (なぜ作ったか)

Marp = Markdown Presentation Ecosystem

Markdown (テキストファイル) をスライドに変換するツール

書き方

## Slide 1

foobar

---

## Slide 2

foobar

特徴

  • 日本製 OSS、無料
  • --- で区切るだけでスライド分割
  • テキストだけでスライド作成可能
  • デザインは CSS テーマが一括管理
  • コンテンツとデザインが完全に分離✨
Marp with Claude Code › 導入 (なぜ作ったか)

テキストベースの 3 つのメリット

全て「テキストであること」から派生する

✏️ 直せる

Markdown だから人間も AI も直接編集できる

🎨 再現できる

CSS でデザインが定義されているから品質が保証される

📚 管理できる

Git でバージョン管理できる。差分も編集履歴も追跡可能

Marp with Claude Code › 導入 (なぜ作ったか)

でも、Marp を導入しただけでは
理想を実現出来ませんでした

Marp with Claude Code › 導入 (なぜ作ったか)

デフォルトの Marp に足りなかったもの

🎨 デザインシステム

汎用テーマ (gaia, default 等) しかなく、自分のブランドカラーや色の意味体系が適用できない

🧩 コンポーネント

アイコンやカード、カラムレイアウト、ハイライト等の表現パーツが用意されてない

📊 図解・チャート

Mermaid や Vega-Lite をテキストで書いてスライドに埋め込む仕組みがない

🚀 配信・運用

OGP 画像生成、パスワード保護、自動デプロイ、スライド公開機能がない

Marp with Claude Code › 導入 (なぜ作ったか)

Marp は拡張前提のミニマムなツール
自分でカスタマイズする必要がある

Marp with Claude Code

アジェンダ

  1. 導入 (なぜ作ったか)
  2. 何を作ったか
  3. どのように作ったか
  4. まとめ
Marp with Claude Code › 何を作ったか

開発したもの一覧

約 1 週間で作ったスライド基盤の全体像

カテゴリ 成果物 概要
ドキュメント roadmap.md 開発のフェーズ管理と進捗（261 行）
ドキュメント design-system.md デザインの設計根拠（748 行）
ドキュメント architecture.md システム構成と技術選定（247 行）
ドキュメント slide-rules.md スライド制作の運用ルール（216 行）
デザイン custom.css + marp.config.js カラーテーマ + ユーティリティクラス + プラグイン 3 種
デザイン Mermaid, Vega-Lite テキストから図解・チャートを自動生成
デザイン /design-review スキル AI がデザインをチェック → 自動修正
ビルド・配信 build.js, dev.js Markdown → HTML 変換 + ウォッチモード
ビルド・配信 deploy.yml git push → GitHub Actions → Cloudflare Workers
ビルド・配信 generate-index.js トップページ + OGP 画像の自動生成
ビルド・配信 パスワード保護 StaticCrypt で暗号化（社外秘スライド対応）
ビルド・配信 エンバーゴ機能 公開予定日時まで閲覧を制限
Marp with Claude Code › 何を作ったか › デザイン

カスタムカラーテーマ: dark-poison

毒をモチーフにしたダークテーマ。テーマは差し替え可能

カラーパレット

役割 HEX 用途
背景 ■ #16161a スライド背景
緑 ■ #2cb67d プライマリー・ポジティブ
紫 ■ #7f5af0 セカンダリー・ネガティブ
見出し ■ #fffffe 見出しテキスト
本文 ■ #94a1b2 通常のテキスト
サブ ■ #72757e 補足・注釈

テーマの差し替え

今見ているこのスライドが dark-poison テーマの実例
light-poison・dark-ocean・light-forest など、テーマを差し替えるだけで、スライドの雰囲気が変わる設計

Marp with Claude Code › 何を作ったか › デザイン

Markdown 拡張プラグイン

3 つのプラグインで Markdown の表現力を拡張

1. markdown-it-mark

==text== でハイライト記法。ビルド後は <mark> タグに変換される

2. markdown-it-attrs

{.class} でブロック要素に任意のクラスを付与

3. markdown-it-container

:::col のコンテナ記法。ビルド後は <div class="col"> タグに変換される

✅ mark と attrs との合わせ技

==text=={.class} でインライン要素に任意のクラスを付与

Marp with Claude Code › 何を作ったか › デザイン

ユーティリティクラス

Tailwind CSS に倣った命名。クラス名を見れば意味が分かる

カテゴリ クラス例
テキストサイズ .text-3xl .text-2xl .text-xl .text-lg .text-sm .text-xs（7 段階）
フォント .font-light .font-normal .font-bold
字間 .tracking-tight .tracking-wide
色・装飾 .text-accent .text-muted .highlight .text-muted
.text-heading .text-link .text-bg
余白 .mt-0 〜 .mt-8 / .mb-0 〜 .mb-8
配置 .text-left .text-center .text-right .content-center
コンポーネント .col .card .icon .icon-lg .icon-xl
テーブル .table-compact
Marp with Claude Code › 何を作ったか › デザイン

Mermaid.js の追加

テキストから図解 (フローチャート・シーケンス図、ER 図など) を自動生成。画像編集ソフト不要

コード

flowchart TD
  A[Markdown] --> B[Marp]
  B --> C[HTML] & D[PDF]

レンダリング結果

diagram

Marp with Claude Code › 何を作ったか › デザイン

Vega-Lite の追加

テキストから視覚的なチャート (棒グラフ、折れ線グラフ、散布図など) を自動生成

コード

{
  "$schema": "https://vega.github.io/schema/vega-lite/v6.json",
  "data": {
    "values": [
      {"month": "1月", "product": "Apple", "sales": 120},
      {"month": "2月", "product": "Apple", "sales": 95},
      {"month": "3月", "product": "Apple", "sales": 180},
      {"month": "4月", "product": "Apple", "sales": 150},
      {"month": "1月", "product": "Banana", "sales": 80},
      {"month": "2月", "product": "Banana", "sales": 140},
      {"month": "3月", "product": "Banana", "sales": 110},
      {"month": "4月", "product": "Banana", "sales": 160}
    ]
  },
  "layer": [
    {
      "mark": {"type": "line", "strokeWidth": 3},
      "encoding": {
        "x": {"field": "month", "type": "nominal", "title": "月", "axis": {"labelAngle": 0}},
        "y": {"field": "sales", "type": "quantitative", "title": "売上", "scale": {"domain": [60, 200]}, "axis": {"titleAngle": 0}},
        "color": {"field": "product", "type": "nominal", "legend": null}
      }
    },
    {
      "mark": {"type": "text", "align": "left", "dx": 8, "fontSize": 13, "fontWeight": "bold"},
      "encoding": {
        "x": {"aggregate": "max", "field": "month", "type": "nominal"},
        "y": {"aggregate": {"argmax": "month"}, "field": "sales", "type": "quantitative"},
        "text": {"field": "product", "type": "nominal"},
        "color": {"field": "product", "type": "nominal", "legend": null}
      }
    }
  ]
}

レンダリング結果

visualization

Marp with Claude Code › 何を作ったか › デザイン

デザインレビュー・修正の自動化

/design-review スキルで、運用ルールやデザインシステムに準拠しているか、AI が評価し自動修正する

diagram

  • デザインレビューの全工程を AI が実行。人間はレビュー結果を確認するだけ
  • スクリーンショットとドキュメントのルールを照合し、問題を検出 → 修正まで実行
Marp with Claude Code › 何を作ったか › ビルド・配信

ビルドパイプライン

Markdown を Web 公開用の HTML に変換する仕組み。図解やチャートの画像変換 (SVG)、OGP 画像などを自動生成 や OGP 画像などを生成

diagram

Marp with Claude Code › 何を作ったか › ビルド・配信

CI/CD

git push するだけで世界中に公開

diagram

  • Mermaid.js の SVG 変換に Puppeteer（Chrome）が必要 → Cloudflare Pages の CI/CD では動かない
  • GitHub Actions でビルドし、wrangler で Cloudflare Workers にデプロイする構成に
Marp with Claude Code › 何を作ったか › ビルド・配信

スライド一覧ページの自動生成

スライドデッキを追加するたびに、トップページ (slides.quantanu.net) が自動で更新される

  • generate-index.js が全スライドをスキャンし、一覧ページを自動生成
  • タイトルスライドの OGP 画像もビルド時に自動生成
Marp with Claude Code › 何を作ったか › ビルド・配信

パスワード保護 (StaticCrypt)

非公開スライド（社内研修、機密情報など）をクライアントサイドで暗号化

🔒 ビルド時

HTML を StaticCrypt で AES 暗号化

🔑 閲覧時

パスワード入力 → クライアント側で復号

🛡️ セキュリティ

サーバーにパスワードを送信しない。静的ホスティングでも安全

Marp with Claude Code › 何を作ったか › ビルド・配信

エンバーゴ機能

公開予定日時まで本番環境でスライドの閲覧を制限する

⏰ 公開制御

フロントマターに x-publish-at ディレクティブを指定するだけ

🛡️ 閲覧ブロック

オーバーレイ表示 + スライド遷移を無効化 + 2枚目以降を非表示

🔓 自動解除

公開時刻を過ぎると 10 秒以内に自動解除。リロード不要

  • ローカル環境（localhost）では無効。開発中は一切影響なし
  • このスライドも x-publish-at で公開日時が設定されている
  • DevTools で解除可能だが、「うっかり見える」を防ぐカジュアルガードとして十分
Marp with Claude Code

アジェンダ

  1. 導入 (なぜ作ったか)
  2. 何を作ったか
  3. どのように作ったか
  4. まとめ
Marp with Claude Code

テキストの恩恵は AI も享受する

Marp with Claude Code › どのように作ったか

テキストと AI は相性抜群

バイナリか、テキストか。それが AI 協業の分かれ道

❌ PowerPoint / 画像ベース

  • バイナリ形式で AI が中身を読み書きしにくい
  • レイヤー構造が複雑で、深い修正に手間がかかる
  • 修正のたびに GUI 操作が必要

✅ Markdown / テキスト

  • AI が直接読み書きできる
  • 差分が明確で、変更点が一目瞭然
  • 修正指示もテキストで完結
Marp with Claude Code › どのように作ったか

選ばれたのは、Claude Code でした。

Anthropic 社が開発したターミナルで動く AI エージェント

🖥️ 環境非依存

ターミナルで動くため、エディターや実行環境に縛られない

⚡ 自律的な実行

コードの読み書きから Git 操作まで自律的に実行できる

📂 フォルダ構造の理解

プロジェクト全体のフォルダ構造を理解できる

🛠️ スキル

定型作業をコマンド一発で自動化したり、熟練者の技を再現できる

Marp with Claude Code › どのように作ったか

AI エージェント (Claude Code) との役割分担

設計や計画、意思決定は人間が行い、実装は AI エージェントが行う。丸投げではなく協働することが大事

フェーズ 担当
リサーチ 🤖 AI
設計・計画 🤖 AI + 🧑 人間
実装 🤖 AI
意思決定 🧑 人間
Marp with Claude Code › どのように作ったか

ドキュメントが人間と AI の共通言語になる

ドキュメントが AI の仕様書になる。暗黙知 (期待、ルール) をドキュメントに明示化することが大切

🗺️ roadmap.md（261 行）

開発のフェーズと進捗管理。何を・いつ・どの順で作るかの計画

🎨 design-system.md（748 行）

デザインの設計根拠。色・フォント・余白の「なぜ」を全て記録

🏗️ architecture.md（247 行）

システム構成と技術選定。ビルドからデプロイまでの意思決定を記録

📏 slide-rules.md（216 行）

スライド制作の運用ルール。情報量・見出し・文体の基準

Marp with Claude Code › どのように作ったか

スペック駆動開発

ドキュメントを読ませて開発することで、その場のノリ (Vibe) ではなく、一貫した開発を実現できる

diagram

Marp with Claude Code › どのように作ったか

実装は退屈であるべき

時間は、準備に 90%、実装に 10% かける。リサーチ → 計画 → 実装の 3 段階で進める

🔬 リサーチ

徹底的に調べる。既存コード・ドキュメント・先行事例を隅々まで読み、research.md にまとめる

📝 計画

plan.md を作り、人間がインラインコメントで何度もブラッシュアップする（アノテーションサイクル）

⚙️ 実装

計画通りに機械的に実行するだけ。創造的な判断は計画段階で完了済み

スライド制作に関わらず、/structured-workflow で、AI との協業を実現しています。

https://github.com/tanuuuuuuu/dotfiles/blob/main/.claude/skills/structured-workflow/SKILL.md

Marp with Claude Code

アジェンダ

  1. 導入 (なぜ作ったか)
  2. 何を作ったか
  3. どのように作ったか
  4. まとめ
Marp with Claude Code › まとめ

まとめ

Marp with Claude Code で 直せる・再現できる・管理できる スライド基盤を手に入れよう

🖊️ Marp

テキストでスライドを作成するツール。コンテンツとデザインが分離しているから AI フレンドリー

🤖 Claude Code

フォルダ構造を理解し、コードの読み書き・Git 操作まで一貫して実行する AI エージェント

📝 スペック駆動開発

ドキュメントが AI への仕様書になり、その場のノリ (Vibe) ではなく、一貫した開発を実現する

Marp with Claude Code › まとめ

これからの展望

🌐 SaaS 展開

この仕組みをサービスとして提供したい（Marp は MIT ライセンスで商用利用可）

🧩 レイアウトテンプレート

タイムライン、比較表、KPI ダッシュボードなどの定型レイアウトをクラス指定だけで実現したい

🎨 マルチテーマ切り替え

1 つの slide.md を SSoT に、クエリパラメータ（?theme=light-corporate 等）でテーマを動的に切り替えたい

🎬 動画化 + AI ナレーション

Remotion でスライド → アニメーション動画、TTS で発表動画を自動生成たい