【Marp】Markdownでスライド作成！使い方完全ガイド｜VS Code導入・記法一覧・テーマ＆PDF/PPTX出力まで徹底解説

プレゼン資料や社内勉強会のスライドを作成する際、「PowerPointのレイアウト崩れや位置合わせに膨大な時間を取られてしまう」「過去の資料を探したりテキストを修正するのが面倒」「資料をGitでバージョン管理・チームレビューしたい」と感じたことはありませんか？

そんな悩みを一瞬で解決するのが、Markdownから美しいプレゼンテーションスライドを自動生成できるデファクトスタンダードツール「Marp（マープ / Marpit）」です！

Marpを使えば、普段使い慣れたエディタ（VS Codeなど）でテキストとMarkdown記法を記述するだけで、プロ並みの洗練されたスライドが爆速で完成します。さらに、PDFやPowerPoint（PPTX）、スタンドアロンHTMLへのエクスポートもワンクリックで完了します。

本記事では、Marp（Marp for VS Code）のインストール手順から、スライド区切り（—）やディレクティブ（設定）記法一覧、テーマ・レイアウトのカスタマイズ、PDF/PPTX書き出し手順、よくあるトラブル対処法までをわかりやすく完全解説します！

1. 【結論】Marpとは？Markdownでスライドを作る圧倒的メリット

Marp（マープ）は、Markdown（マークダウン）で記述されたプレーンテキストから、美しいプレゼンテーションスライドを瞬時にレンダリング・出力できるオープンソースツール群（エコシステム）です。

PowerPoint vs Marp の比較表

従来のプレゼンソフト（PowerPointやKeynote）とMarpの特徴を比較すると、それぞれの得意領域がはっきりと分かります。

【コピペ用】今すぐ試せるMarpスライドの最小コード

Marpの書き方は驚くほどシンプルです。ファイルの先頭に marp: true と書き、スライドの区切りに ---（ハイフン3つ）を記述するだけです。

---
marp: true
theme: gaia
_class: lead
paginate: true
backgroundColor: #f5f5f5
---

# 🚀 Marpへようこそ！
Markdownで爆速スライド作成を始めよう

---

## 📌 本日のアジェンダ

1. Marpの概要とメリット
2. 基本的な記法とディレクティブ
3. テーマとレイアウトのカスタマイズ
4. PDF・PPTXへのエクスポート方法

---

## 💻 コードも綺麗にハイライト表示

```python
def hello_marp():
    message = "Hello, Marp Presentation!"
    print(message)

hello_marp()
```

- シンタックスハイライトが自動適用
- 技術LTや勉強会資料に最適！

2. VS CodeでMarpを導入する簡単3ステップ

Marpを利用する最も手軽で強力な方法は、Visual Studio Code（VS Code）の公式拡張機能「Marp for VS Code」を使うことです。専門的な環境構築なしに、数クリックで導入できます。

ステップ1：拡張機能「Marp for VS Code」をインストール

1. VS Codeを起動し、左側のアクティビティバーから「拡張機能アイコン（四角いブロックのマーク）」をクリックします（ショートカット：Ctrl + Shift + X / Macは Cmd + Shift + X）。
2. 検索ボックスに marp と入力します。
3. 検索結果の最上位に表示される「Marp for VS Code」（作者：Marp team）の「インストール」ボタンをクリックします。

ステップ2：Markdownファイルを作成＆フロントマターを記述

インストールが完了したら、新しいファイル（例：presentation.md）を作成します。

ファイルの最上部に、以下のようにフロントマター（設定情報）を記述します。

---
marp: true
---

※marp: true を記述することで、VS Codeが「このMarkdownファイルをMarpスライドとしてプレビュー・出力する」と認識します。

ステップ3：リアルタイムプレビューを起動

Markdownファイルを開いた状態で、エディタ右上に表示される「プレビューを横に表示（本のアイコン、またはMarpアイコン）」をクリックします（ショートカット：Ctrl + K を押した後に V / Macは Cmd + K ➔ V）。

エディタの右側に実際のスライド画面がリアルタイムでレンダリングされます。左側でテキストを編集すると、右側のスライドが即座に同期して更新されます！

3. 【早見表】Marpで使える主要ディレクティブ（設定記法）一覧チートシート

Marpでは、スライドの見た目や動作を制御するための特別な設定構文を「ディレクティブ（Directives）」と呼びます。

4. Marpの基本スライド作成テクニック＆書き方実例

① スライドのページ区切り（—）

Marpでは、水平線記法である ---（ハイフン3つ）を記述することで、新しいスライドページが作られます。

# 1ページ目のタイトル
ここに1ページ目の内容を書きます。

---

# 2ページ目のタイトル
ここに2ページ目の内容を書きます。

② 表紙・タイトルスライドの作成（中央揃え）

スライドの表紙（タイトルページ）は、文字を上下左右の中央に配置したいケースがほとんどです。Marpでは ディレクティブを使うことで、瞬時に中央揃えの表紙レイアウトを作成できます。

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




# 🌟 新規事業戦略プレゼンテーション
### 〜AI技術を活用した業務効率化〜

**発表者：マーケティング部 山田 太郎**  
日付：2026年8月28日

---

## 1. 事業の背景
ここから通常の左揃えスライドが始まります。

※ を併記することで、表紙スライドからページ番号を非表示にできます。

③ 見出し・箇条書き・リスト記法

標準的なMarkdown記法がそのまま利用可能です。

## 📊 本施策の3大メリット

- **コスト削減**
  - 外部委託費を年間30%削減
  - 修正にかかるリードタイムを半減
- **品質の均一化**
  - テンプレート化による属人化の解消
- **スピード向上**
  - 資料作成時間を1件あたり2時間短縮

④ 画像の挿入・サイズ変更・背景画像（bg / fit / 左右分割）

Marpは画像の配置機能が非常に強力です。画像のAlt属性に特別なキーワードを付与することで、サイズ調整や背景配置、左右2分割レイアウトが簡単に行えます。

![width:400px](https://example.com/sample.png)
![w:300px h:200px](image.jpg)


![bg](background.jpg)


![bg fit](architecture-diagram.png)


![bg left:40%](profile.jpg)

## 登壇者プロフィール
- 株式会社〇〇 技術顧問
- 著書『Markdown完全入門』

⑤ ソースコードのハイライト＆行番号

コードブロックに言語名を指定するだけで、美しいカラーハイライトが適用されます。

## 🛠️ サンプル実装コード

```typescript
interface User {
  id: number;
  name: string;
  role: 'admin' | 'member';
}

const getAdminUsers = (users: User[]): User[] => {
  return users.filter(u => u.role === 'admin');
};
```

⑥ 表（テーブル）・引用・数式（KaTeX）

## 📈 各プランの機能比較

| プラン名 | 月額料金 | ストレージ | ユーザー数 |
| :--- | :--- | :--- | :--- |
| **Free** | ¥0 | 5 GB | 1名 |
| **Standard** | ¥980 | 50 GB | 最大10名 |
| **Enterprise**| ¥2,980 | 無制限 | 無制限 |

> 💡 **ポイント**：初期導入時はStandardプランでの検証を推奨します。

数式記法（MathJax/KaTeX）も標準でサポートされています（$E = mc^2$ または $$ ... $$）。

5. スライドのデザインをカスタマイズする応用記法

・組み込みテーマの切り替え（default / gaia / uncover）

Marpには標準で3種類の洗練されたテーマが組み込まれています。

• default：クリーンで実用的な標準テーマ。技術文書や社内報告に最適。
• gaia：温かみのあるモダンなプレゼンテーションテーマ。class: gaia invert でダークモードにも対応。
• uncover：全スライドが中央揃えになるダイナミックなテーマ。Keynote風のインパクトあるLTやキャッチコピー発表に最適。

---
marp: true
theme: gaia
class: gaia invert
---

# 🌙 ダークモードでスタイリッシュに発表

・スライドサイズ（16:9 / 4:3）の変更

現在のプロジェクターやモニターの主流であるワイド画面（16:9）がデフォルトですが、古いプロジェクターやiPad向けの（4:3）比率にも簡単に切り替えられます。

---
marp: true
size: 16:9  
---

・ページ番号（paginate）とヘッダー・フッターの設定

---
marp: true
theme: default
paginate: true
header: "社内エンジニア勉強会 2026"
footer: "Confidential - 社外秘"
---

・2カラム（左右2分割）レイアウトの作り方

「左側に箇条書き、右側に画像や補足説明を並べたい」という場合、CSSのFlexboxやGridスタイルを埋め込むことで簡単に2段組レイアウトを作成できます。

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

## 左右2カラム（2段組）レイアウト




### 👈 左カラム：現状の課題
- マウス操作での位置調整が煩雑
- バージョン管理ができず先祖返り
- デザインの統一感が崩れやすい




### 👉 右カラム：Marpの解決策
- Markdown入力で爆速化
- Gitで差分レビュー可能
- テーマ機能で自動デザイン統一

・カスタムCSS（styleタグ）でフォントや色を調整

ファイル内に <style> タグを記述することで、フォントサイズや見出しカラー、背景グラデーションを自由に上書きカスタマイズできます。

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



# 🎨 カスタムスタイルを適用したスライド

6. Marpスライドをエクスポート（PDF・PPTX・HTML・画像）する手順

作成したスライドは、VS Code上から簡単に各種フォーマットへ書き出すことができます。

各エクスポート形式の特徴と使い分け

• PDF（.pdf）：【最も推奨】レイアウトやフォントが完全に保持され、印刷や社内配布、実際のプレゼン本番に最も安心なフォーマットです。
• PowerPoint（.pptx）：PowerPointで開けるスライド形式です。各スライドが背景画像として埋め込まれた状態で出力されるため、Office環境での再生・配布に適しています。
• HTML（.html）：スタンドアロンのWebページとして出力されます。ブラウザさえあれば、矢印キーやフルスクリーン（Fキー）でそのままスライドショーが実行できます。
• PNG / JPEG（.png / .jpg）：各スライドを1枚ずつの画像ファイルとして一括出力します。SNSでのスライド共有やブログへの埋め込みに便利です。

7. プレゼンテーションモード（発表者ノート＆タイマー）の使い方

Marpには、本番のプレゼン発表時に役立つ「発表者ノート（スピーカーノート）」と「プレゼンターモード」が標準搭載されています。

発表者ノートの書き方

スライド内に HTMLコメント（<!-- コメント -->） を記述すると、スライド画面上には表示されず、発表者ビューにのみ表示されるカンペ・メモとして機能します。

## 2026年度 開発ロードマップ

- Q1: 基盤システムのマイクロサービス移行
- Q2: AIアシスタント機能のβ版リリース
- Q3: グローバル展開と多言語対応

発表者モード（プレゼンタービュー）の起動

1. コマンドパレット（Ctrl + Shift + P / Cmd + Shift + P）を開きます。
2. Marp: Open Presentation Mode と入力して実行します。
3. 別ウィンドウで発表者用の画面が開き、「現在のスライド」「次のスライドプレビュー」「経過時間タイマー」「発表者ノート」が同時に確認できます。

8. 「PDF/PPTXが出力できない・崩れる」時の原因と解決策

9. Marpに関するよくある質問（FAQ）

10. まとめ＆関連Markdown活用ガイド一覧

Marpを導入することで、プレゼン資料の作成効率は劇的に向上します。レイアウト調整のストレスから解放され、ドキュメントの「内容（コンテンツ）」に集中して爆速で質の高いスライドを仕上げましょう！

Markdown記法の基礎や、他のエディタ・ツールでのMarkdown活用法については、以下の解説記事もあわせて参考にしてください！

👉 【MkDocs】Material for MkDocsで作る美しいドキュメントサイト！導入・日本語化・GitHub Pages公開まで完全ガイド