PowerPointを一度も開かずに、マークダウンとAIだけで成果発表スライドを作った話

はじめに

初めまして、DeltaXでWebエンジニアをしているmurakです。
普段はユーザーと塾をつなぐ機能である塾選の各種問い合わせフォームの開発を担当しています。

「前回のスライドをちょっと修正したいんだけど、どこを変更したか分からない......」
「過去のスライドからコードブロックをコピペしたら、フォントやインデントが崩れた」
「レビューで『ここ直して』と言われたけど、PowerPointファイルをいちいち開いて確認するのが面倒」

技術的なプレゼン資料を作る時、こんな経験はありませんか？

エンジニアにとってPowerPointの何が辛いかというと：

• バージョン管理ができない: git diffで何が変わったか見られない
• テキストベースじゃない: grepできない、エディタで一括置換できない
• コードの扱いが面倒: シンタックスハイライトを手動で設定する必要がある
• レビューがしづらい: 「3ページ目の2行目を修正」みたいな指示になる

一方、普段の開発では：

• READMEはMarkdownで書く
• ドキュメントの変更はGitでレビューする
• コードはVSCodeで編集する

「スライドも同じように作れたら楽なのに......」

そう思っている人に朗報です。Marp（Markdownベースのスライド作成ツール）とClaude Code（AI開発アシスタント）を使えば、それが実現できます。

この記事では、実際に業務の成果発表で使用した15枚のスライドを例に、「いつもの開発環境」でプロフェッショナルなスライドを作る方法を紹介します。

この記事で紹介すること

• Marpの基本: Markdownからスライドを生成する仕組み
• 実践例: 実際の成果発表スライド（15枚）の作成過程
• AI活用のコツ: Claude Codeとの効果的な協働方法

Marpとは？

Marp（Markdown Presentation Ecosystem）は、Markdownからスライドを生成するツールです。

エンジニアにとっての利点

Marpが開発者にとって魅力的な理由は、普段の開発で使っているツールや知識がそのまま活かせることです。

• Markdown記法: READMEやドキュメントと同じ書き方
• Git管理: バージョン管理、差分確認、レビューが可能
• VSCode: 使い慣れたエディタで完結（拡張機能でリアルタイムプレビュー）
• CSS: Webの知識でデザインカスタマイズ
• コードハイライト: プログラムコードがそのまま綺麗に表示

基本的な使い方

Marpの基本構文は非常にシンプルです：

---
marp: true
theme: default
---

# タイトルスライド

これが最初のスライドです

---

## 次のスライド

- 箇条書き
- も簡単

---

## コード例も綺麗に

\`\`\`python
def hello():
    print("Hello, Marp!")
\`\`\`

---（3つのハイフン）でスライドを区切るだけ。あとは普通のMarkdownを書くだけです。

上記のMarkdownから生成されるスライドは以下のようになります：

スライド1: タイトルスライド

スライド2: 箇条書き

スライド3: コード表示

Markdownで書いた内容が、シンプルで読みやすいスライドに自動変換されます。コードも自動的にシンタックスハイライトされ、プロフェッショナルな見た目になります。

出力形式

Marpは以下の形式で出力できます：

• PDF: 配布用
• HTML: Web公開用
• PPTX: PowerPoint形式（必要に応じて）

よく使うディレクティブ集

Marpには独自のディレクティブ（設定記法）が用意されています。よく使うものを紹介します。

ページ番号を表示するには

paginate: true を設定すると、スライド右下にページ番号が表示されます。

---
marp: true
paginate: true
---

タイトルスライドなど、特定のスライドだけページ番号を非表示にしたい場合は、ディレクティブ名の前に _ を付けます。_ 付きのディレクティブは、そのスライドだけに適用される「スコープ付き」の指定になります。

<!-- _paginate: false -->

# タイトルスライド（ページ番号なし）

ヘッダー・フッターを表示するには

header と footer でスライド上部・下部に固定テキストを表示できます。Markdown記法（太字やイタリック）も使えます。

---
header: '**会社名** プレゼン資料'
footer: '© 2025 会社名'
---

途中のスライドからヘッダー・フッターを消したい場合は、空文字を設定します。

<!--
header: ''
footer: ''
-->

# ここからヘッダー・フッターなし

アスペクト比を変更するには

size でスライドのアスペクト比を指定します。プロジェクターや画面に合わせて選択してください。

---
size: 16:9
---

サイズ	用途
16:9	ワイドスクリーン（デフォルト）
4:3	従来のプロジェクター向け

数式を表示するには

math: katex を設定すると、LaTeX形式の数式が使えます。インライン数式は $...$、ブロック数式は $$...$$ で囲みます。

---
math: katex
---

二次方程式の解: $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$

$$
\sum_{n=1}^{\infty} \frac{1}{n^2} = \frac{\pi^2}{6}
$$

これらのディレクティブは覚えなくても、Claude Codeに「ページ番号を表示して」「ヘッダーに会社名を入れて」と指示すれば、適切な記法を生成してくれます。

実践例

準備

必要なツールは以下の3つだけ：

1. Marp CLIのインストール

npm install -g @marp-team/marp-cli

2. VSCode拡張機能「Marp for VS Code」をインストール

3. Claude Codeのインストール

npm install -g @anthropic-ai/claude-code

インストール後、プロジェクトディレクトリで claude コマンドを実行すると起動します。初回は認証が必要です。

cd your-project
claude

プロジェクト構成

Marpには特定のディレクトリ構成の制約はありません。プロジェクトの規模や用途に応じて自由に構成できます。

構成	特徴
単一ファイル	最もシンプル。試作や小規模向け
画像フォルダ分離	画像とMarkdownが整理される
複数プレゼン管理	共通テーマを複数プレゼンで使い回せる

単一ファイル:

project/
└── slide.md

画像フォルダ分離（本記事で採用）:

presentation/
├── slide.md
└── images/
    ├── profile.png
    └── ...

複数プレゼン管理:

slides/
├── 2024-q1-report/
│   ├── slide.md
│   └── assets/
├── 2024-q2-report/
│   ├── slide.md
│   └── assets/
└── themes/
    └── company.css   # 会社のブランドカラーやフォントを統一

themes/に共通CSSを置き、各プレゼンから参照することで、デザインの一貫性を保てます。

画像パスはMarkdownファイルからの相対パスで指定します（例: ./images/profile.png）。

Marpでは、Markdownファイル内に<style>タグでCSSを直接記述できます。

作成プロセス

今回は例として、実際に作成した15枚のスライドから代表的な3枚の作成過程を紹介します：

1. タイトルスライド - 発表タイトルと日付・名前
2. 目次スライド - 発表の構成を視覚的に表示
3. 自己紹介スライド - プロフィール画像とテキストの2カラムレイアウト

なぜHTMLを使うのか？

MarpではMarkdownだけでなく、HTMLタグをそのまま記述できます。これにより：

• 複雑なレイアウト: Flexboxやグリッドを使った2カラム構成
• 細かなスタイリング: クラス名を付けてCSSでデザインを制御
• 再利用性: 同じクラスを複数のスライドで使い回し

通常のMarkdown記法（#見出しや-箇条書き）で対応できるスライドはそのまま書き、レイアウトを細かく制御したい場合にHTMLを使うというのが基本的な考え方です。

Claude Codeにスライドの内容を伝えると、自動的に適切な構造（Markdownのみで十分か、HTMLが必要か）を判断して生成してくれます。

---

ステップ1: タイトルスライドの作成

最初に、スライドの全体構成と基本的なスタイルをClaude Codeに依頼しました。

プロンプト例：

「Marpで成果発表のスライドを作成したい。タイトルスライドは青いグラデーション背景で、タイトルの下に水平線を入れて、日付と名前を表示して。右上に『DeltaX 成果発表 | murak』というヘッダー、右下にページ番号も表示して」

生成されたMarkdown：

---
marp: true
theme: default
paginate: true
header: 'DeltaX 成果発表 | murak'
---
<style>
section {
  background: white;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  padding: 20px 40px;
  color: #333;
  border: 12px solid white;
  box-shadow: inset 0 0 0 1px #e0e0ff;
  position: relative;
  font-size: 22px;
}

/* ヘッダーのスタイル調整 */
header {
  color: #3a6ea5;
  font-size: 12px;
  opacity: 0.7;
}

/* 見出しスタイル */
h1 {
  color: #1a365d;
  border-bottom: 4px solid #3a6ea5;
  padding-bottom: 8px;
  margin-bottom: 40px;
  background: linear-gradient(90deg, #3a6ea5 0%, rgba(58,110,165,0.7) 100%);
  padding: 10px 20px;
  color: white;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

h2 {
  color: #3a6ea5;
  border-left: 5px solid #3a6ea5;
  padding-left: 15px;
  margin-top: 25px;
  font-size: 28px;
}

/* 特別ページ背景 */
section.title-slide {
  background: linear-gradient(135deg, #3a6ea5 0%, #1a365d 100%);
  color: white;
}

section.title-slide h1 {
  background: none;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  color: white;
  box-shadow: none;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

section.title-slide header {
  color: rgba(255,255,255,0.7);
}
</style>

<!-- _class: title-slide -->
# 成果発表

2025年3月14日
murak

結果:

基本的なスタイルとページ番号が設定され、統一感のあるベースが完成しました。<style>タグ内のCSSは、以降すべてのスライドに適用されます。

---

ステップ2: 目次スライドの作成

通常の箇条書きではなく、視覚的な目次を作成しました。ここでHTMLを使うことで、番号付きのボックスレイアウトを実現しています。

プロンプト例：

「目次スライドを追加して。1. 自己紹介、2. 今月の取り組み、3. 来月の目標、の3項目で。番号は青いボックス内に白文字、テキスト部分はグレー背景で、カード形式の角丸デザインにして」

生成されたMarkdown：

<style>
/* ステップ1で定義した共通スタイルは省略 */

/* 目次スタイル（追加分） */
.modern-toc {
  width: 75%;
  margin: 40px auto;
  font-family: 'Arial', sans-serif;
}

.toc-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.08);
}

.toc-number {
  background-color: #3a6ea5;
  color: white;
  padding: 16px 20px;
  font-weight: bold;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
}

.toc-content {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  flex-grow: 1;
  background-color: #f8f9fa;
  min-height: 30px;
}

.toc-text {
  font-size: 24px;
  line-height: 1.4;
}
</style>

# 目次

<div class="modern-toc">
  <div class="toc-item level-1">
    <div class="toc-number">1</div>
    <div class="toc-content">
      <div class="toc-text">自己紹介</div>
    </div>
  </div>

  <div class="toc-item level-1">
    <div class="toc-number">2</div>
    <div class="toc-content">
      <div class="toc-text">今月の取り組み</div>
    </div>
  </div>

  <div class="toc-item level-1">
    <div class="toc-number">3</div>
    <div class="toc-content">
      <div class="toc-text">来月の目標</div>
    </div>
  </div>
</div>

結果:

<div>タグにクラス名を付けて構造化し、CSSのFlexboxで番号とテキストを横並びにしています。このCSSは<style>タグ内に追加されます。

---

ステップ3: 自己紹介スライドの作成

プロフィール情報をカード形式で表示するスライドを作成しました。

プロンプト例：

「自己紹介スライドを作って。プロフィール情報（名前：murak、所属部署：開発部、入社：2024年12月）を、青いグラデーション背景のカード形式で表示して。カードの左端に青い縦線、ラベルは『プロフィール』として青文字で強調して」

生成されたMarkdown：

<style>
/* ステップ1で定義した共通スタイルは省略 */

/* 自己紹介スタイル（追加分） */
.profile-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile-text {
  flex: 1;
  line-height: 1.6;
}

.profile-image {
  flex: 1;
  text-align: center;
}

.styled-image {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

/* プロフィールカードスタイル */
.summary-item {
  margin-bottom: 25px;
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.summary-label {
  font-weight: bold;
  color: #1976d2;
  font-size: 26px;
  display: block;
  margin-bottom: 12px;
}
</style>

# 自己紹介

<div class="profile-container">
  <div class="profile-text">
    <div class="summary-item summary-item-with-margin">
      <span class="summary-label">プロフィール</span>
      <ul class="no-list-style">
        <li>👤 名前：murak</li>
        <li>🏢 所属部署：開発部</li>
        <li>📅 入社：2024年12月</li>
      </ul>
    </div>
  </div>

</div>

結果:

プロフィール情報を見やすいカード形式で表示しています。青いグラデーション背景と左端の縦線がアクセントになっています。

---

スライドの出力

Markdownファイルが完成したら、Marp CLIを使って各種形式に出力できます。

PDF出力

marp slide.md --pdf

PPTX出力

marp slide.md --pptx

HTML出力

marp slide.md -o slide.html

※ HTMLはデフォルト出力のため、marp slide.md だけでも生成されます。

---

Claude Codeを使うメリット

Marpスライド作成にClaude Codeを活用するメリットを紹介します。

1. CSSを書かなくていい

Marpのデザインカスタマイズには CSS の知識が必要ですが、Claude Code を使えば自然言語で指示するだけで済みます。

「青系のシンプルなデザインで」
「見出しにグラデーションをつけて」
「カード形式で影をつけて」

Flexbox、グラデーション、box-shadow などのプロパティを自分で調べて書く必要がありません。デザインの試行錯誤も、プロンプトの言い換えだけで済みます。

2. 修正指示が自然言語でできる

CSSのプロパティ名や値を知らなくても、意図を伝えるだけで修正できます。

「余白をもう少し広げて」→ padding/margin を調整
「フォントサイズを大きく」→ font-size を調整
「この部分をもっと目立たせて」→ 色、サイズ、影などを総合的に調整

「何を変えたいか」だけ伝えれば、「どう変えるか」はClaude Codeが判断してくれます。

3. Marp特有の記法を覚えなくていい

Marpには独自のディレクティブ（設定記法）があります：

<!-- _class: lead -->      <!-- このスライドだけにクラスを適用 -->
<!-- _paginate: false -->  <!-- このスライドのページ番号を非表示 -->
<!-- _backgroundColor: #f5f5f5 -->  <!-- 背景色を変更 -->

これらの記法を覚えなくても、「タイトルスライドはページ番号なしで」「このスライドだけ背景を変えて」と伝えれば、適切なディレクティブを挿入してくれます。

4. 段階的なアプローチ

最初から完璧を目指さず、以下の順序で進めました：

1. 構造: スライドの全体的な流れと基本スタイル
2. スタイリング: 個別スライドのデザイン調整
3. 細部調整: 画像サイズ、余白、フォントサイズなどの微調整

5. コンテキストの共有

プロジェクト全体の情報を Claude Code が理解できるように、最初にデザインの方向性を伝えました。これにより、一貫性のあるデザインが生成されやすくなります。

6. イテレーションを前提とする

一度で完璧なものが生成されることは稀です。プレビューで確認しながら、調整を重ねることで、完成度を高めていきました。

開発体験

この方法の最大の利点は、すべてがエンジニアにとって馴染みのある環境だということです：

• VSCode: いつものエディタで編集・プレビュー
• Git: バージョン管理、差分確認、レビューが可能
• Markdown: README書くのと同じ感覚
• CSS: Webアプリのスタイリングと同じ知識

まとめ

Marp + Claude Codeを使えば、エンジニアにとって馴染みのある環境だけでプロフェッショナルなスライドを作成できます。

この方法の魅力

• Markdown: README書くのと同じ感覚
• Git: バージョン管理が普段通り
• VSCode: いつものエディタで完結
• AI: デザインの試行錯誤を支援
• CSS: Web開発の知識がそのまま活かせる

「新しいツールを学ぶ必要なし。普段の開発環境がそのままスライド作成環境に」

これが最大のメリットです。

始めるには

1. Marp CLIとVSCode拡張機能をインストール
2. Markdownファイルを作成
3. Claude Codeに「スライドを作って」と依頼

たったこれだけです。

次のプレゼン資料作成で、ぜひ試してみてください。PowerPointを開く必要はもうありません。

参考リンク

• Marp公式サイト
• Marp CLI
• Marp for VS Code
• Claude Code