Markdownで簡単プレゼンテーション作成！おすすめツールと手順まとめ

プレゼンテーション作成にWordやPowerPointを使おうとしたことがある方も多いでしょう。
しかし、スライドの構成をシンプルに保ちつつ、コードを編集するだけで即座に更新できる手段が求められています。
Markdownでプレゼン作るという選択肢は、軽量で複数人の共同作業にも優れ、ウェブに直接埋め込みやPDF化も容易です。
このブログでは、実際にMarkdownを使ってプレゼンテーションを作る際におすすめのツールと、手順をまとめて紹介します。
初心者でも分かりやすいように、まずは基礎知識から、具体的なツールのメリット・デメリット、実際の作業フローまでを追って解説します。

Markdown プレゼンテーション入門

なぜ Markdown を使うのか？

Markdown はシンプルさが魅力で、プログラマーやテック系のプレゼンに「コードフレンドリー」というイメージがあります。
しかし、それは間違いではありません。スライド数や内容が多いケースでも、見出し (## や ###) とリスト、画像、表といった基本構造だけで十分に情報を整理できます。
Markdown で作ったプレゼンテーションは、誰でもテキストエディタ一つで読み書きできるため、専門知識がなくても手軽に始められます。

用途別の活用シーン

おすすめ Markdown プレゼンツール

以下に代表的なツールをピックアップし、特徴とユースケースを整理しました。

1. Marp (Markdown Presentation Ecosystem)

Marp は「プレゼン用マークダウン」用の言語を拡張しており、--- でスライド区切り、<!-- .slide: data-background-color=#F00 --> で背景色指定が可能です。
VSCode の拡張機能でライブプレビューが確認できるので、リアルタイムに見た目を確かめながら作業できます。
また、PDF だけでなく PowerPoint へ出力できる点は、既存の資料と混ぜて使う場合に大きなメリットです。

2. Deckset (Mac 専用)

Deckset は macOS のみに対応したアプリですが、ユニークな機能として「スライド全体にマウスカーソルを合わせると自動でハイライトされる」という機能があります。
そのため、プレゼンの中で指し示したい箇所をすぐにハイライトして、聞き手にとって重要なポイントを際立たせることができます。

3. Reveal.js

Reveal.js は 「Markdown → HTML via Pandoc」 のワークフローがお勧めです。
スライドは --- で区切り、<img> タグや # 見出しで構成します。
--css オプションにカスタム CSS を指定すれば、自社ロゴやデザインに合わせたスライドを作成でき、スライド内のインタラクション（JS を使ったアクション）も追加できます。

4. remark.js

remark.js は 「スライドを Markdown で書き、サーバー/ビルドツールを使わない」 という点が特徴です。
スライド番号は <!-- slide-number --> のように書くと自動でカウントしてくれます。
また、slides.css をカスタマイズすれば、企業のブランドカラーに合わせたスライド作りが容易です。

5. DeckTape (PDF で発表)

DeckTape は Reveal.js のスライドを 高解像度 PDF に変換したい場合に大活躍です。
コマンドラインだけで完結し、CI/CD パイプラインに組み込むことで、資料作成の時点ですぐに PDF を配布できます。
自動で PDF のメタデータを入力したり、ページ番号を挿入する機能があるため、書類として保管する際にも便利です。

Markdown プレゼン資料作成手順（実践例）

以下では、Marp を使った最小構成のワークフローを例に、Markdown プレゼン作成の一連の流れを示します。
他ツールでもほぼ同じステップで進められます。

1. 開発環境を準備

Node.js と npm の バージョン管理 には nvm を使うと便利です。
Marp CLI は npm でインストールでき、コマンドラインだけで PDF/Docker 変換が可能です。

2. テンプレートを作成

presentation.md を作り、以下のようにサンプルを入れます。

---
marp: true
theme: default
class: lead
paginate: true
---

# タイトルスライド

- メインテーマ
- スライドのアウトライン

---

## 目的

プレゼン資料を Markdown で簡単に作るポイントを紹介します。

---

## 手順

1. **マークダウンを編集**  
2. **プレビュー**  
3. **PDF に変換**  

---

## まとめ

Markdown のメリットを活かすことで、資料作成が効率的になります。

ポイント

• --- でスライド区切り。
• class: lead はスライド全体にカスタムクラスを付与し、CSS でスタイル変更が可能です。
• paginate: true でページ番号を自動表示。

3. スライドをプレビュー

VSCode の Marp 拡張をインストールすると、画面を分割表示し Live Preview できます。
Ctrl+Shift+M でプレビューを開くか、右上のアイコンをクリックします。
変更すると自動でプレビューが更新されるので、即座にデザイン確認が可能です。

4. PDF へ変換（コマンドライン）

Marp CLI で PDF を生成します。

marp presentation.md --pdf --theme default -o output.pdf

オプション

• --pptx：PowerPoint 形式で出力
• --html：HTML で出力
• --watch：監視モード（編集時に自動再生成）

PDF の DPI を上げたい場合は、--dpi 300 を付与してみてください。

5. （Optional）GitHub Pages で公開

index.html を出力して GitHub Pages で公開する手順です。

marp presentation.md --html -o index.html

生成した index.html と index.css をリポジトリにコミットし、GitHub Pages の設定で公開即可。
※ marp には --standalone オプションがあり、全ての依存を HTML 内に埋め込むことができます。

よくある質問と対処法

実際に使うときのベストプラクティス

1. シンプルなレイアウトを基本
   Markdown では階層が重要です。見出しを使って論理的にスライドを分割しましょう。

2. 統一したテーマとフォント
   Marp の theme を使うと、全スライドに対して統一感を保てます。会社カラーがある場合は data-theme に自前 CSS で追加。

3. 画像は適度に圧縮
   imagemagick の convert -quality 80% で軽量化。ファイルサイズが小さいほどローカルでのプレビューも高速化。

4. スライド番号とページ番号の統一
   PDF で流したい場合は --paginate を入れ、 # でページ番号のスタイルを CSS で調整します。

5. CI/CD で自動化
   GitHub Actions で marp を走らせると、毎回のプルリクエストで PDF が作られ、レビューが容易です。

name: Build PDF
on: [push, pull_request]
jobs:
  marp:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: marp-team/marp-cli@v2.0.1
        with:
          command: marp presentation.md --pdf -o build.pdf
      - uses: actions/upload-artifact@v2
        with:
          name: presentation
          path: build.pdf

まとめ

• Markdown だけでプレゼン資料を作ることは十分に可能で、スライド数が増えても読みやすさと編集の容易さが保たれます。
• Marp は VSCode の拡張が強力で、PDF・PPTX 出力までワンステップ。
• Deckset は macOS で UI が直感的。
• Reveal.js / remark.js は HTML 化が必須の場面で選択肢。
• DeckTape は PDF 出力が必要な場面に最適です。

自分のワークフローに合ったツールを選び、Markdown の軽量さと 自動化 のメリットをフルに活用してみてください。
作成したスライドは簡単に共有・公開でき、さらに Git で管理すれば共同編集もスムーズに行えます。

ぜひ一度、この記事で紹介したツールを試し、手軽さと 拡張性 を体感してみてください。
プレゼン資料作成のストレスが一気に減るはずです！