tech・2分で読める

Marp入門ガイド：Markdownでスライドを作る

Markdownだけでスライド資料を作れるMarpの基本的な使い方と、テーマ設定・画像挿入・ビルド方法をまとめました。

#marp#markdown#presentation#slides#tool

Marp入門ガイド：Markdownでスライドを作る

Marp（Markdown Presentation Ecosystem）は、Markdownからスライドを生成できるツール群です。 普段書いているMarkdownの延長で、PowerPointやKeynoteのようなスライド資料を作れます。

  • Gitでバージョン管理しやすい（テキストベース）
  • エディタだけで完結（VS Code + プラグインなど）
  • PDF / HTML / 画像など、いろいろな形式に書き出せる
  • テーマでデザインを切り替えられる

ここでは、基本的な書き方から、画像や図の入れ方、ビルド方法までをまとめます。

基本構成とフロントマター

Marpのスライドは、先頭にYAML形式のフロントマターを書くMarkdownファイルです。

---
marp: true
title: xxxxxシステム 概要資料
theme: default
paginate: true
backgroundColor: #ffffff
---
  • marp: true: Marpスライドであることを宣言
  • title: スライドのタイトル（メタ情報）
  • theme: テーマ（default / gaia / uncover など）
  • paginate: true: ページ番号（1 / 10）の表示
  • backgroundColor: 背景色

このフロントマターのあとに、通常のMarkdownでスライド内容を書いていきます。

スライドの区切り方

スライドは --- （水平線）で区切ります。

---
marp: true
---

# タイトルスライド

ここが1枚目のスライドです。

---

## 2枚目のスライド

本文…
  • # / ## / ### などの見出し
  • 箇条書き、番号付きリスト
  • 太字 / 斜体

といったMarkdown記法は、そのままスライドの内容として表示されます。

テーマとページ番号

テーマの指定

---
marp: true
theme: default  # 他に gaia, uncover など
---
  • default: シンプルで汎用的なテーマ
  • gaia: やわらかい雰囲気のテーマ
  • uncover: 落ち着いたデザインで本文が読みやすいテーマ

同じ内容のファイルを複製して theme だけ変えると、デザインの比較が簡単にできます。

ページ番号（paginate）

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

paginate: true を指定すると、スライド下部などに 1 / 10 のようなページ番号が自動表示されます（表示位置はテーマに依存）。

画像・図の挿入

通常の画像挿入

Marpは、通常のMarkdownの画像記法がそのまま使えます。

## システム構成イメージ

![システム構成図](./images/system-architecture.png)
  • .md ファイルからの相対パスで指定
  • PNG / JPGだけでなく、SVGも利用可能です

サイズ指定（Marp拡張）

Marp独自のショートハンドで、画像サイズを簡単に指定できます。

![w:800 服薬支援システムの利用フロー](./images/safe-medication-user-flow.svg)
  • w:800: 幅（px）を指定
  • h:400 のように高さ指定も可能

背景として使う（bg）

![bg](./images/bg-architecture.svg)

# システム構成（概要）
  • ![bg](...) で、スライド全体の背景画像として扱われます
  • その上に見出しやテキストを重ねて表示できます

レイアウト調整のテクニック

タイトルスライド用のクラス

---
marp: true
---

<!-- _class: lead -->

# 服薬支援システム 概要
Safe Medication System

<!-- _class: lead --> を付けると、テーマによってはタイトルスライド用のレイアウト（中央寄せ・大きな文字など）になります。

セクションごとに区切る

少し長い資料の場合は、セクションの先頭に見出しスライドを入れると読みやすくなります。

---

## 5. 機能一覧（MVP）

- アカウント・認証
- 服薬スケジュール管理
- 服薬記録
- レポート表示

---

## 5. 機能一覧（将来拡張）

- リマインド・通知
- 家族・医療者連携
- 安全性向上機能

ビルド・プレビュー方法

1. Marp CLIでHTML / PDF出力

ローカルでMarp CLIを使う場合は、プロジェクト直下などで次のように実行します。

# 例: プロジェクトルートで実行
cd /path/to/project

# HTMLに変換（ローカル画像を使う場合は --allow-local-files が必要）
npx marp marp/safe-medication-system.md \
  --allow-local-files \
  -o marp/safe-medication-system.html

# PDF出力
npx marp marp/safe-medication-system.md \
  --allow-local-files \
  -o marp/safe-medication-system.pdf

--allow-local-files を付け忘れると、ローカル画像がスライドに表示されない点に注意してください。

1-1. HomebrewでMarp CLIをインストールする

macOSでは、Node経由だけでなく Homebrew経由でも Marp CLI をインストール できます。

# 一度だけ tap する
brew tap marp-team/marp-cli

# インストール
brew install marp-cli

# 動作確認
marp --version

アップデートしたいときは、次のように実行します。

brew upgrade marp-cli

which marp で、どのパスの marp が使われているか確認できます。 npmグローバルとHomebrewの両方にインストールしている場合は、プロジェクト内では npx marp を使うなど、運用ルールを決めておくと混乱が少なくなります。

2. VS Code拡張でプレビュー

  1. VS Codeの拡張機能で 「Marp for VS Code」 をインストール
  2. .md ファイルを開く
  3. コマンドパレット（Cmd+Shift+P 等）から 「Marp: Open Preview to the Side」 を実行

Markdownを編集しながら、右側にスライドプレビューをリアルタイムで表示できます。

Marpが向いているユースケース

  • Gitで管理したい 技術資料・設計資料
  • READMEやドキュメントから、スライド版をすぐ用意したいとき
  • チーム内勉強会・LT・社内共有用の資料
  • このブログのような技術記事とスライド資料をセットで管理したい場合

特にエンジニアにとっては、「コードと同じリポジトリで資料も管理できる」点が大きなメリットです。

まとめ

  • Marpは、Markdownで書けるスライド環境で、エンジニアとの相性がとても良い
  • フロントマターでテーマやページ番号を設定し、--- でスライドを区切るだけで始められる
  • 画像やSVGをうまく使うと、設計図・利用フロー・UIイメージもきれいに表現できる

Markdownベースで資料を管理したい人は、一度Marpで1本スライドを書いてみるのがおすすめです。

RK

1997年生まれ

ITエンジニア

インフラ・SRE