MarpやMarkdownからスライドへ｜技術者向け定番パターン

技術資料の作成において、Microsoft PowerPointのGUI操作にストレスを感じるエンジニアは少なくありません。フォントサイズの微調整やオブジェクトの整列といった「非本質的な作業」を排除し、コンテンツの構造化と執筆に集中するための解が、Markdownをベースとしたスライド作成手法です。

本記事では、エンジニアの間でデファクトスタンダードとなっているMarpやSlidevを中心に、Markdownから高品質なプレゼン資料を生成する実務的なパターンを網羅的に解説します。単なるツールの紹介に留まらず、CSSによるブランドカスタマイズ、Mermaidを用いた図解、そしてGitHub ActionsによるCI/CD連携まで、現場で即戦力となる構成案を提示します。なお、バックオフィス業務の自動化全般に関心がある方は、Excelと紙の限界を突破する「Google Workspace × AppSheet」業務DX完全ガイドも併せて参照してください。

なぜ今、Markdownによるスライド作成が選ばれるのか

PowerPointの「マウス操作」というボトルネックを解消

PowerPointやGoogleスライドは、自由なレイアウトが可能な反面、ページ数が増えるほど「全ページのタイトル位置を数ピクセルずらす」といった手作業が発生します。Markdownベースのツールは、テキストによる構造定義が主役であり、デザインはCSSなどのスタイルシートで一括管理されます。これにより、情報の記述と見た目の制御を完全に分離できます。

Gitによるバージョン管理と差分管理の実現

バイナリファイルである.pptx形式とは異なり、Markdownはプレーンテキストです。Gitでの管理が容易であり、GitHub上でのPull Requestベースのレビューや、いつ誰がどの文言を変更したかの差分（Diff）確認が明確になります。これは、複数人で技術ドキュメントをメンテナンスする際に決定的なメリットとなります。

技術者向けスライド作成ツールの主要3選と比較

現在、Markdownからスライドを生成するツールには複数の選択肢があります。自身の用途に最適なツールを選ぶための比較表を以下に示します。

Marp (Markdown Ecosystem for Ready-to-Present)

最も導入ハードルが低いのがMarpです。VS Codeの拡張機能として動作し、特別なランタイムをインストールすることなく、書いたその場でプレビューが可能です。企業の標準テンプレートをCSSで定義しておけば、エンジニア全員が同じ品質のスライドを即座に作成できます。

Slidev (The slide maker for developers)

「エンジニアのためのスライド作成ツール」として急速に支持を広げているのがSlidevです。Vite、Vue.js 3、Windi CSS（またはTailwind CSS）を活用しており、スライドの中に「動くReact/Vueコンポーネント」を埋め込むことが可能です。デモを交えた登壇には最適です。

Marpによるスライド作成の完全手順

VS Code拡張機能の導入と設定

1. VS Codeの拡張機能マーケットプレイスで「Marp for VS Code」を検索し、インストールします。
2. 新規ファイル presentation.md を作成します。
3. ファイルの先頭（Front-matter）に以下のコードを記述します。

--- marp: true theme: default paginate: true header: "株式会社サンプル - 技術勉強会" footer: "© 2026 Sample Inc."

この marp: true という宣言により、通常のMarkdownファイルがMarpスライドとして認識されます。右上のプレビューアイコンをクリックすることで、スライド形式のレンダリングが開始されます。

Marp Directives（ディレクティブ）による基本構文

スライドの区切りは --- （水平線）で行います。また、個別のスライドに対して設定を行う場合は、HTMLコメント形式のディレクティブを使用します。

# 1ページ目のタイトル
スライドの内容

2ページ目（色が反転したスライド）

特定のページだけデザインを変える場合は _class を使います。

テーマのカスタマイズ（CSSインジェクション）

MarpはCSSによるカスタマイズが強力です。独自のフォント設定やロゴの配置が必要な場合、Markdown内に <style> タグを記述するか、外部CSSファイルを読み込ませます。

<style>
section {
font-family: 'Hiragino Sans', sans-serif;
background-color: #f0f4f8;
}
h1 {
color: #003366;
}
</style>

企業での導入時は、これらのスタイルを共通アセットとしてリポジトリに含めることで、デザインの統一性を担保できます。こうしたツール選定による標準化は、インフラ管理における「負債の解消」にも通ずる考え方です。詳細はSaaSコストとオンプレ負債を断つ。バックオフィス＆インフラの「標的」と現実的剥がし方をご覧ください。

実務における図解・コード・数式の運用方法

Mermaid.jsによるフローチャートの自動生成

アーキテクチャ図やフロー図を画像ファイルとして作成し、スライドに貼り付ける作業はメンテナンス性が極めて低いです。MarpやSlidevはMermaid.jsをサポートしており、テキストベースで図を描画できます。

```mermaid
graph TD;
A[ブラウザ] -->|リクエスト| B(ロードバランサ);
B --> C{サーバー};
C -->|データ取得| D[(Database)];

</code></pre>

<p>この記述により、スライド上に動的にフローチャートが生成されます。仕様変更時はテキストを1行修正するだけで図が更新されるため、ドキュメントの鮮度を高く保つことが可能です。</p>

<h3>シンタックスハイライトとコード行の強調</h3>
<p>エンジニア向けスライドで最も重要なのがコードの可読性です。Slidevでは特定の行を強調表示する機能（Line Highlighting）が標準で備わっています。</p>

<pre><code>```ts {2,4-5}
// 2行目と4〜5行目がハイライトされる
const message = "Hello World";
console.log(message);
const data = fetchData();
return data;

KaTeXによる数式レンダリング

データサイエンスやアルゴリズムの解説において、数式の表示は不可欠です。MarpではKaTeXを利用した数学記法が利用可能です。$ または $$ で囲むことで、美しい数式を出力できます。

例： E=mc
2

PDF出力とWeb公開（CI/CD）の自動化

作成したMarkdownは、最終的にPDFやHTMLとして配布する必要があります。手作業でのエクスポートを廃し、GitHub Actionsを用いて自動化するのが実務的なパターンです。

GitHub Actionsを用いた自動ビルド・デプロイ

リポジトリに .github/workflows/deploy.yml を作成し、以下のステップを定義します。

1. Checkout: ソースコードの取得。
2. Marp CLI Action: MarkdownからHTML/PDFへの変換。
3. Deploy to GitHub Pages: 生成されたファイルをWeb上に公開。

これにより、main ブランチにPushするだけで、最新のスライドが特定のURLで閲覧可能になります。この構成は、モダンデータスタックにおけるデータ基盤構築の考え方（dbt等でのドキュメント自動生成）とも非常に親和性が高いものです。データ活用基盤の設計については、高額なCDPは不要？BigQuery・dbt・リバースETLで構築する「モダンデータスタック」で詳しく解説しています。

導入時によくあるトラブルと解決策

日本語フォントがPDF出力時に文字化けする

Marp CLIを使用してPDFを出力する際、実行環境に日本語フォントがインストールされていないと、文字化けや「中華フォント（いわゆる豆腐）」現象が発生します。
対策： Dockerコンテナ内でビルドを行う場合は、fonts-noto-cjk などのパッケージを明示的にインストールするか、Google FontsからWebフォントを読み込む設定をCSSに追加してください。

画像のパス解決

ローカル環境の /images/fig1.png を参照している場合、HTML書き出し後に画像が表示されないことがあります。
対策： 画像を外部ホスティング（S3等）に置くか、Marp CLIの --allow-local-files オプションを使用します。ただし、セキュリティの観点からは画像をBase64形式で埋め込むか、相対パスを厳密に管理する運用が推奨されます。

結論：目的に応じたツール選定の基準

Markdownからスライドを作成する手法は、一度環境を構築してしまえば、PowerPointには戻れないほどの生産性をもたらします。最後に、選定の決め手を整理します。

• とにかく早く、VS Codeだけで完結させたい → Marp
• リッチなアニメーションやVueコンポーネントを使いたい → Slidev
• Webサイトの一部として高度にカスタマイズしたい → Reveal.js

まずはMarpから着手し、テキストがスライドに変わる快適さを体感してください。ドキュメントをコードとして扱う「Documentation as Code」の実践は、個人の生産性向上だけでなく、組織全体のナレッジ共有の質を劇的に高めるはずです。