Linux Club - 東京工科大学Publicationへの投稿
🎚️

マークダウンでスライドを作ろう！【Marp】

Mikuto
に公開
Markdown
スライド
Marp
tech

この記事は TUT (powered by LinuxClub) Advent Calendar 2025 の 1日目です

はじめに

普通プレゼン資料作るとなるとPowerPointやCanva、Googleスライドといったツールを使いますが、「マークダウンでスライドを作ろう！」となることはそうないと思います。そんな皆さんは、本記事を読めばきっとマークダウンでスライドを作り始めること間違いないでしょう...というのは高望みすぎるので、せめていつもの選択肢にマークダウンが追加されるくらいになれば嬉しいです。

この記事で取り上げること

  • なんでマークダウンが良いのか(Mikutoの自論)
  • 一部のMarp使用方法について

やらないこと

  • Marpすべての機能紹介
  • 他マークダウン作成ツールとの比較
  • いいデザインの作り方

筆者の環境

  • Windows11
  • Node.js v25.2.1
  • npm 11.6.4
  • @marp-team/marp-cli v4.2.3 (w/ @marp-team/marp-core v4.2.0)

なぜマークダウンでスライドを作るか

GUIで作れる他ツールと違い、いったいどの様な良さがあるのでしょうか。
(他にも「こんな利点がある」というのがあればコメントしてください！)

1. 生成AIとの相性が良い

テキストベースで記述ができるマークダウンであること、これが他ツールとの大きな違いだと考えています。何度も繰り返す部分をAIに頼んだり、「この文章をスライドにしたいからマークダウンで書いて」や「レポジトリの内容をスライドにして」といったプロンプトで1からスライドを作ってもらうことも可能です。さらには、後述するデザインに関してもCSSを主に使用して変更できる点も大きなメリットと言えます。

2. VSCodeで書ける

後ほど紹介するMarpには、Marp for VS CodeというVSCodeの拡張機能があります。これを使用することにより、以下の画像の様にプレビューを見ながら作成することができます。また、GitHub Copilot や Gemini Code Assist などのエージェントモードも使用しながら作成を進めることも魅力の1つです。

3. Git/GitHub/GitLabが使いやすい

Gitで管理するレポジトリでは、README.mdを始めとしたマークダウンファイルがよくありますよね？つまり、マークダウンで作成することで普段と変わらずバージョン管理を行うことができます。さらには、GitHub Actionsと合わせることにより常に最新版のスライドをホームページなどに掲載することもできます。Googleスライドなどでは埋め込み用のiframeを作成できたり、そもそもドクセルやSpeaker Deckなどもありますが、「常に最新のPDFを直接ホームページから公開したい」場面などでは便利かもしれません。

Marpを使用したスライド作り

マークダウンからスライドを作成するツールはいくつかありますが、今回はMarpを使ったスライド作りについて、Marp for VS Codeを使用した簡単な紹介をします。

Marpについて少し補足

Marpの中核には「Marp Core」が存在します。これはスライド用フレームワーク「Marpit」に拡張機能を加えたものであり、このMarp Coreを利用して動作するツールが「Marp」です。
また、Marp及びMarpitは Yuki Hattori (@y_hatt) によって作成され、MarpチームによってGitHub上にすべてのツールと関連ライブラリがOSSとして公開されています。
詳しくはこちらをご覧ください: https://marp.app/

1. Marpの導入

VScodeの場合

まずは、Marp for VS Codeという拡張機能を追加します。

CLIの場合

ここではnpmを使用した方法を紹介します。(Homebrewやコンテナイメージでの使用方法は割愛します。他インストール方法を求める場合は marp-team/marp-cli/README.md#try-it-now をご覧ください。 )
また、.pdfや.pptx、画像形式に変換するためにはGoogle ChromeやMicrosoft Edge、Mozilla Firefoxが必要となります。こちらを用意してください。

Node.jsが使える環境で、以下のコマンドをどちらか実行してください。
ローカルインストールの場合

> npm install --save-dev @marp-team/marp-cli

**グローバルインストールの場合

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

また、以下のコマンドでインストールされているか確認してください。

marp -v
@marp-team/marp-cli v4.2.3 (w/ @marp-team/marp-core v4.2.0)

2. マークダウンでスライドを記述する

まずは、マークダウンの.md拡張子が付いたファイルを作成し、以下の記述を行います。

sample.md
---
marp: true
---

VSCodeで記述している方であれば、この状態でプレビューを開いてみましょう。Ctrl + Shift + vで開けます。
プレビューを表示すると、以下のように1枚の白い画像が写っていると思います。
プレビュー表示がスライド形式になる

続いて、文字と新しいページを追加してみましょう。マークダウンを以下のように変更してみてください。

sample.md
---
marp: true
---

# ここにタイトルを記入

---

↑区切り線でページ区切りができる

変更後のプレビューがこちら
文字と新しいページがスライドに追加されている

Marpでスライドを作る場合、マークダウン記法はCommonMarkに基づいています。これはGitHubなどで使用されているマークダウン記法となっているため、普段の記述と大きく異なることはないです。ただ、ページを分割するための区切り線---が重要な違いとなっています[1]。

3. Directivesで表示を制御する

Marpで使用されている「Marpit」には、Directivesと呼ばれる拡張構文があります。これにより、スライドデッキのページ番号やヘッダー・フッター、色などの制御を行うことができます。
実際に、Directivesを使用してページ番号や任意のヘッダー・フッターを表示してみましょう。先ほどまでのsample.mdの先頭(---に囲まれているmarp: trueが記述されている部分)を、以下のように変更してください。

sample.md
---
marp: true
header: "hogehoge"
footer: "2025/12/01"
paginate: true
---

上記の変更を行うと、左上にhogehoge 左下に日付 右下にページ番号が表示されています。

(Directivesの全容はこちらをご覧ください: https://marpit.marp.app/directives)

4. テーマを変更する

先ほどまでのsampleでは、文字の色や配置を指定していないのにかかわらず、中央揃えとなっていたり青色の文字になっていました。これは、Directivesでテーマ(theme)を指定していない場合にtheme: defaultが使用されるためです。標準で用意されているテーマにはDefault・Gaia・Uncoverがあります[2]。
これ以外のデザインのテーマを使用したい場合は、CSSを使用してテーマを追加する必要があります。方法としては、公開されている既存のテーマ(marp-speee-themeやkageori-marpなど)を使う方法と、自身で独自のテーマCSSを作成する方法です。
今回は、後者の独自のテーマCSSを作成する方法を簡単に紹介します。
(より詳細なテーマCSSについてはこちら: https://marpit.marp.app/theme-css)

【準備】VSCodeで追加する場合

VSCodeで独自のテーマを追加する場合、settings.jsonを設定することでプレビュー表示に反映させることができます。

ディレクトリ構成例

.
├── .vscode
│   └── settings.json
├── marp_themes
│   └── sample.css
└── sample.md
settigns.json
{
    "markdown.marp.themes": [
        "./marp_themes/sample.css"
    ]
}

CSSを作成する

まず最初に、テーマ名の指定とベースとするCSSをインポートします。以下のような記述になります。

sample.css
/* @theme sample */

@import 'default';

これをベースに、例としてh1(#)のデザインを変更するテーマを作成してみます。

sample.css
h1 {
    color: #5eb5e8;
    position: absolute;
    left: 50px;
    top: 90px
}

プレビュー表示が以下のようになっているはずです。

後は、別のタグなどにも装飾を加えていきましょう！
私がなんとなくで作成したCSSもよければ参考にしてみてください。
https://github.com/Mikuto0831/LTkai/blob/main/marp_themes/mikuto.css

5. PDF・PPTXに出力する

スライドが完成したら、発表のためにPDFかPPTXに出力しておきたいですよね。ということで、ここではVSCodeとCLIそれぞれで出力する方法を解説します。

VSCodeで出力する

VSCodeから出力する場合、まずは出力したいマークダウンファイルを開きます。
開くと、編集画面の上に以下の画像にある三角形が2つ重なったアイコン(Marpのアイコン)があります。

こちらを選択すると、Export slide Deck...と出てくるのでそこを選択しましょう。最後に、開いたexplorerでファイル名と拡張子を指定し、保存で完了です。

CLIで出力する

CLIから出力する場合、以下の様になります。

PDFの場合
> marp sample.md --pdf \
  --theme ./marp_themes/sample.css -o output.pdf
PPTXの場合
> marp sample.md --pptx \
  --theme ./marp_themes/sample.css -o output.pptx

編集できるPPTXを出力する

先述した出力方法では、編集することができない.pptxが作成されます。
PowerPointといった他ツールで編集したい場合は、CLIで--pptx-editable オプションを使用してください。

これにより、文字が編集できる.pptxが作成できます。(しかし、文字が意図していない場所で分割されていたりと、デザインが少々崩れる場合があります。自作テーマが影響したかは未調査であるため、何か知っている方はコメントにお願いします)

終わりに

これで皆さんもマークダウンでスライド作成ができるかと思います！
是非、簡単なスライドを作る機会があればMarpを使用してみてはいかがでしょうか。

マークダウンで作成されたスライド

このスライドの内容が、本記事の大元となっています！

TUT (powered by LinuxClub) Advent Calendar 2025

弊学のアドベントカレンダーです
良かったら見ていってくださいーー！！

脚注

  1. Marpit Markdown > How to write slides? https://marpit.marp.app/markdown ↩︎

  2. marp-team/marp-core > themes > README.md https://github.com/marp-team/marp-core/tree/main/themes ↩︎

Linux Club - 東京工科大学
Linux Club - 東京工科大学Publication

東京工科大学公認サークル ソフトウェア開発/ネットワーク/電子工作/オンプレサーバ/セキュリティなど、ITを中心に創作活動を通して得た知見・経験をお届けします。 ※このPublicationは東京工科大学「Linux Club」所属部員による見解であり、所属する大学・サークルの公式見解ではありません。

Discussion