Marp入門：Markdownから始めるプレゼンテーション作成

調べた内容、整理した情報を他の人に共有する際、プレゼンテーション形式で表示できるとわかりやすく伝えやすい内容になります。一からプレゼンテーションファイルを作成するとそれなりに時間がかかりますが、Marpを利用するとMarkdown形式でまとめた情報をそのままプレゼンテーション形式で表示することができます。 Marpで作成して、PDFやプレゼンテーション形式(.pptx)等に出力できます。

知っているとすぐに情報を共有したい際等、ライトに使いやすいので知っておいて損はないかなと思います。

以下、Marpの使い方等まとめておきます。

1. Marpとは？
- なぜMarpを使うのか？
2. Marpの基本的な書き方
- スライドの区切り
- ヘッダーとフッター
3. Marpの使い方 (VS Code推奨)
- 準備
- 使い方
4. 独自テーマの作成方法

1. Marpとは？

Marp（マープ）は、普段使っているMarkdownでプレゼンテーションスライドを作成できるツール群（エコシステム）の総称です。

なぜMarpを使うのか？

とにかく手軽: PowerPointなどの専用ソフトを立ち上げることなく、使い慣れたテキストエディタでスピーディにスライドが作れます。
バージョン管理が容易: スライドがただのテキストファイル（.md）なので、Gitなどで変更履歴を管理するのが非常に簡単です。
デザインの統一: 後述する「テーマ」機能を使えば、チーム内でデザインやフォーマットを簡単に統一できます。
再利用性が高い: スライドの内容をそのままドキュメントにコピー＆ペーストしたり、その逆も簡単です。

2. Marpの基本的な書き方

基本は通常のMarkdownと全く同じです。スライドの区切り方だけ覚えれば、すぐに作ることができます。

スライドの区切り

水平線（---）を書くだけで、スライドが分割されます。

# 1枚目のスライド

これは1枚目のページです。

---

# 2枚目のスライド

- リストも使えます
- もちろん**太字**も

---

# 3枚目のスライド

ヘッダーとフッター

スライドの先頭に---で囲んだ「フロントマター」と呼ばれるブロックを書き、そこでヘッダーやフッターを設定できます。

---
marp: true
header: '株式会社Example'
footer: '© 2025 Example Inc.'
---

# 最初のスライド

このスライドにはヘッダーとフッターが表示されます。

3. Marpの使い方 (VS Code推奨)

Marpを使う最も簡単で便利な方法は、Visual Studio Code（VS Code）の拡張機能を利用することです。

準備

VS Codeをインストールします。
VS Codeの拡張機能マーケットプレイスで「Marp for VS Code」を検索し、インストールします。

使い方

.mdという拡張子でファイルを作成します。（例: presentation.md）
ファイルの先頭に、Marpを有効化するためのフロントマターを記述します。
```
---
marp: true
---

# ここからスライドを書き始める
```
VS Codeの右上にあるプレビューボタン（虫眼鏡に紙のアイコン）をクリックすると、エディタの横にスライドのプレビューが表示されます。Markdownを編集すると、プレビューがリアルタイムで更新されます。
完成したスライドは、右上のMarpアイコン（Mのロゴ）から「Export slide deck...」を選択することで、HTMLやPDF、PowerPoint(.pptx)形式で出力できます。

4. 独自テーマの作成方法

MarpはCSSを使ってスライドのデザインを自由に変更できます。ここでは基本的なカスタムテーマの作成方法を解説します。

Step 1: テーマ用CSSファイルの作成

まず、テーマのスタイルを定義するCSSファイルを作成します。（例: my-theme.css）

my-theme.css の記述例:

/* @theme my-theme */

@import 'default'; /* Marpのデフォルトテーマを継承する */

/* スライド全体のスタイル */
section {
  background: #f0f0f0; /* 背景色を薄いグレーに */
  color: #333; /* 文字色を濃いグレーに */
  font-family: 'Meiryo', sans-serif; /* フォントを指定 */
}

/* h1 (スライドタイトル) のスタイル */
h1 {
  color: #005a9c; /* タイトルの色を青系に */
  border-bottom: 2px solid #005a9c; /* 下線を引く */
  text-align: left; /* 左揃えにする */
}

/* h2 のスタイル */
h2 {
  color: #005a9c;
  border-left: 5px solid #005a9c;
  padding-left: 10px;
}

/* リンクのスタイル */
a {
  color: #0078d4;
}

/* @theme my-theme */ は、このCSSが my-theme という名前のテーマであることをMarpに教えるための必須のコメントです。
@import 'default'; を書くことで、デフォルトのスタイルを引き継ぎつつ、変更したい部分だけを上書きできるので便利です。

Step 2: VS Codeに独自テーマを登録

作成したCSSファイルをMarpに認識させるために、VS Codeの設定ファイル（settings.json）に場所を教えます。

Ctrl + Shift + P でコマンドパレットを開き、「Preferences: Open User Settings (JSON)」を検索して settings.json を開きます。

以下の設定を追記します。（CSSファイルのパスは、ご自身の環境に合わせて変更してください）

{
  // ...他の設定...

  "markdown.marp.themes": [
    ".\marp_theme\my-theme.css" // 作成したCSSファイルの相対パス
  ]
}

設定を保存したら、VS Codeを再起動（ウィンドウをリロード）します。

Step 3: スライドに独自テーマを適用

最後に、スライドのMarkdownファイルのフロントマターで、作成したテーマ名を指定します。

---
marp: true
theme: my-theme  # ここで独自テーマを指定
---

# 独自テーマを適用したスライド

## 見出し2のスタイル

このスライドは、`my-theme.css` で定義したデザインになります。

[リンクの例](https://marp.app)

これで、プレビュー画面に独自テーマのデザインが適用されていれば成功です。