VS Codeの拡張機能「Marp for VS Code」を使えば、Markdownファイルからプレゼンスライドを作成できます。ファイル先頭に marp: true と書くだけで、いつものテキストエディタ上でスライド制作が完結します。
Markdownでスライドを作るツールにはSlidevやreveal.jsもありますが、セットアップの手軽さと出力形式の幅（PDF・PowerPoint・HTML対応）から、Marpが最初の選択肢になりやすいツールです。
この記事では、Marpの導入から実践テクニック、出力時の注意点までを手順に沿って解説します。デザインや出力形式の制約も踏まえ、凝りすぎずに使い続けるための運用の考え方までお伝えします。
なお、Markdownで書いた資産は、置き場所を決めておくとスライド以外にも使い回せます。作った資料をNotePMのような社内wikiに集めて検索できるようにする方法も、あわせて考えておいてください。
目次
Markdownでスライドは作れる？ Marpと主要ツールの全体像
Markdownでプレゼンスライドは問題なく作れます。その代表格がMarpで、VS Code拡張を入れるだけで即座に使い始められます。テキストで管理できること、Git連携ができること、生成AIを活用しやすいことの3つが、エンジニアにとってMarpを第一選択肢にする理由です。
以下でMarpの概要、Markdownで作る利点、Slidev・reveal.jsとの選び方の順に確認します。
Marpはどんなツールか
Marpは「Markdown Presentation Ecosystem」の略で、Markdown記法でスライドを作成できるオープンソースのエコシステムです。書いた内容はHTML・PDF・PowerPoint（PPTX）へ出力できます（出典：Marp team「Marp公式サイト」）。
利用形態は2つあります。1つはVS Codeの拡張機能「Marp for VS Code」で、もう1つはコマンドラインで動かすMarp CLIです。CLIはビルドの自動化やCIへの組み込みに向きますが、これから始めるならVS Code拡張を選んでください。
プレビューを見ながらテキストエディタ上でスライド制作が完結し、追加の環境構築もいりません。
Markdownでスライドを作る3つの利点
PowerPointやGoogle Slidesでもスライドは作れますが、Markdownには別の強みがあります。ここでは内容への集中・差分管理・AIとの親和性という3つの利点を順に見ていきます。
1. テキストベースで内容に集中できる
Markdownで書くとき、目の前にあるのは装飾ではなく文章そのものです。テキストベースで書くためデザイン調整に時間を取られず、頭の中のアウトラインをそのままスライドへ落とし込めます。フォントや位置合わせをマウスでいじる作業から解放され、「何を話すか」に集中できます。
2. Gitで差分管理できる
Markdownファイルはプレーンテキストなので、そのままGitで管理できます。どこを直したかが差分として明確に残り、レビューやチームでの共同編集がしやすくなります。バイナリ形式のスライドファイルでは難しかった変更履歴の追跡が、コードと同じ感覚で行えます。
3. 生成AIとの相性が良い
テキスト形式であることは、生成AIとの組み合わせでも効いてきます。AIはスライドの原稿をそのまま生成・編集でき、下書きから清書までを一緒に進められます。この点は制作時間の短縮に直結するため、後半の章で具体的なワークフローとして詳しく扱います。
Marp・Slidev・reveal.jsの使い分け
Markdownでスライドを作るツールはMarpだけではありません。よく比較対象になるSlidevとreveal.jsを含め、導入ハードル・表現力・出力形式の3軸で並べると違いがはっきりします。
| ツール | 導入ハードル | 表現力 | 出力形式 |
| Marp | 低い（VS Code拡張のみ、Node.js不要） | 標準的（Markdown＋CSS） | HTML・PDF・PPTX |
| Slidev | やや高い（Node.js環境が必要） | 高い（Vueコンポーネント・アニメーション） | HTML・PDF・PNG |
| reveal.js | 中程度（HTML/JSの知識が前提） | 非常に高い（HTML・JavaScript APIで拡張） | HTML・PDF |
MarpはVS Code拡張のみで動作しNode.js環境が不要なので、LTや社内発表のように短い資料を頻繁に作る用途に向きます。SlidevはNode.js 20.12.0以降が必須でVueとViteに依存しますが、インタラクティブなデモやアニメーション表現に強みがあります（出典：Anthony Fu / Slidev contributors「Slidev公式ドキュメント」）。reveal.jsはHTMLプレゼンテーションフレームワークとして最も歴史が長く、MarkdownだけでなくHTMLやJavaScript APIで自由に拡張できます（出典：Hakim El Hattab「reveal.js公式サイト」）。
整理すると、手早くLTや社内発表を作るならMarp、技術カンファレンスで凝ったデモを見せるならSlidev、Webの表現力をフルに使いたいならreveal.jsという選び方になります。まず試すなら、環境構築のいらないMarpから入るのが無理のない一歩です。
Marpをどう始める？ インストールから最初の1枚まで
Marpは特別な環境構築なしに始められます。手順は「①Marp for VS Codeのインストール → ②フロントマターとスライド区切りの記述 → ③Directivesでの全体設定」の3ステップで、これだけで最初のスライドが完成します。
1. Marp for VS Codeのインストール
最初にVS Codeへ拡張機能を入れます。VS Codeの拡張機能マーケットプレイスで「Marp for VS Code」を検索し、インストールボタンを押せば準備は完了です。
ここでのポイントは、Node.jsやnpmのインストールが不要なことです。拡張機能を入れた時点でプレビューも出力も使えるようになるため、環境構築でつまずく心配がありません。
2. フロントマターとスライド区切りの書き方
拡張機能を入れたら、Markdownファイルを新規作成してMarpを有効化します。ファイル先頭のフロントマターに marp: true を書き、スライドの区切りは水平線（—）で表します。
—
marp: true
—
# 最初のスライド
– 箇条書きもそのまま使えます
—
# 2枚目のスライド
区切り線の後が次のスライドになります
書いた内容はVS Codeの標準Markdownプレビュー（Ctrl+Shift+V、macOSは Cmd+Shift+V）で自動的にスライドとして表示されます。テキストを直しながらプレビューで結果を確認する往復が、Marpの基本的な作業の流れです。
1つ気をつけたいのは、区切りの — の前後に空行を入れておくことです。空行がないと直前の見出しや段落と結合して解釈され、意図しない位置で区切られることがあります。
3. ページ番号・ヘッダー・フッターを設定する（Directives）
スライドが書けたら、全体の表示をDirectives（ディレクティブ）で整えます。ディレクティブはフロントマターに記述する設定項目で、ページ番号やヘッダー・フッターを一括で指定できます。
—
marp: true
paginate: true
header: ‘2024年度 社内勉強会’
footer: ‘© Your Name’
theme: gaia
—
paginate: true で各スライドにページ番号が付き、header と footer に書いたテキストが全スライドの上下に表示されます。theme ディレクティブでは、組み込みテーマの default・gaia・uncover を切り替えられます。それぞれ配色や余白の雰囲気が異なるので、まずは3つを切り替えて好みを探すとよいでしょう。
テーマを自作するなど踏み込んだカスタマイズは、次の章で扱います。
Marpで画像・テーマ・レイアウトを整える
画像の配置には bg 構文、全体のデザインにはテーマCSS、Marpでは難しい複雑な表現には外部ツールと、目的に応じて手段を使い分けます。
画像の配置とサイズ指定（bg構文の使い方）
Marpには画像を扱うための拡張構文があります。画像のaltテキスト部分にキーワードを書くことで、背景やレイアウトを制御する仕組みです。
まず基本は背景画像です。 と書くと、その画像がスライド全体の背景になります。ここに right や left を加えると、画像を片側に寄せて反対側にテキストを置く2カラムレイアウトが作れます。
# タイトル
– 右半分に画像
– 左半分にこの箇条書き
画像サイズを調整したいときは、altテキストに width や height を書きます（例: ）。複数の画像を横に並べたい場合は、bg 構文を連続して書くだけで自動的に横並びになります。
この3行で、3枚の画像が均等に横並びの背景として配置されます。位置とサイズをテキストだけで指定できるのがMarpの画像まわりの手軽さです。
テーマの切り替えとカスタムCSSの作り方
デザインの土台となるのがテーマです。組み込みテーマをそのまま使う方法と、CSSで自分専用のテーマを作る方法があります。
組み込みテーマの切り替え
組み込みテーマは default・gaia・uncover の3種類です。フロントマターの theme 指定を変えるだけで切り替わります。
—
marp: true
theme: uncover
—
default は無難な標準スタイル、gaia は余白を活かした落ち着いた印象、uncover は中央寄せで見出しが映えるスタイルです。多くのLTや社内発表なら、この3つのいずれかで十分に見栄えがします。
カスタムCSSテーマの作成手順
組み込みテーマでは物足りないときは、CSSで独自テーマを作ります。手順は次の3ステップです。
- CSSファイルを用意し、先頭に /* @theme mytheme */ のコメントでテーマ名を宣言します。
- VS Codeの settings.json に markdown.marp.themes を追加し、作成したCSSファイルのパスを登録します。
- フロントマターの theme に宣言したテーマ名（この例では mytheme）を指定して適用します。
CSSをゼロから書くのは大変なので、marp-coreリポジトリで公開されている組み込みテーマのCSSを参考にするのが効率的です。既存テーマのファイルをコピーして色やフォントだけ差し替えれば、破綻の少ないカスタムテーマを短時間で用意できます。
とはいえ、CSSに馴染みのない人にとって画像配置やテーマ調整の学習コストが高く感じられるのも事実です。細部を追い込むほど時間を取られるので、まずは組み込みテーマで運用し、必要になった箇所だけCSSに手を入れるくらいの距離感がちょうどよいでしょう。
凝った表現はMarpの外で補う
Marpはテキスト中心のツールなので、苦手な表現もあります。複数の要素を線でつないだ複雑な図、ピクセル単位で位置を合わせたい画像の合成などは、CSSで頑張るより外部ツールに任せたほうが速く仕上がります。
現実的なのは、Draw.ioのような作図ツールで図を完成画像として書き出し、それをMarpに挿入する運用です。図の編集はDraw.io側で行い、Marpは配置と文章に専念させると、それぞれの得意分野で作業が進みます。
どうしてもレイアウトを1枚ずつ細かく詰めたいときは、MarpからPPTXに出力してPowerPointで最終微調整するという割り切りもあります。8割をMarpで一気に書き、残りだけ別ツールで仕上げると考えると、デザインの深追いで消耗せずに済みます。
生成AI × Marpでスライド制作を加速する
Markdownスライドはテキスト形式なので、AIがアウトライン作りから本文展開、CSS調整まで原稿を直接生成・編集でき、制作時間を短縮できます。
なぜMarkdownスライドはAIと相性が良いのか
MarkdownはプレーンテキストなのでAIがスライド原稿をそのまま出力したり、既存の記述をリファクタリングしたりできます。PowerPointのようなバイナリ形式では、AIが中身を直接編集するのは容易ではありません。
編集の対象は本文だけにとどまりません。テーマのCSSもテキストである以上、AIに書かせられます。「見出しをもう少し大きく」「配色を青系に」といった要望を伝えれば、CSSの知識がなくてもデザインの方向性を調整できます。
AIとの共同執筆ワークフロー（構成→本文→CSS）
AIとの共同執筆は、段階を分けて進めると崩れにくくなります。おすすめは構成→本文→CSS調整の3段階です。
- まず伝えたい話の骨子を、Markdownの箇条書きでアウトラインとして書き出します。ここは自分の頭の中を整理する工程なので、AIに丸投げせず要点だけ自分で決めます。
- 次にアウトラインをAIに渡し、各項目をスライド用の本文へ展開させます。marp: true やスライド区切りを含めた形で出力するよう指示すると、そのまま貼り付けられます。
- 最後に見た目の要望を伝え、テーマCSSやレイアウトを調整させます。
この流れは、CursorやGitHub CopilotのようなAIコーディングツールと特に噛み合います。Markdownファイル全体をコンテキストに読み込ませられるので、スライド全体の文脈を踏まえた修正提案を受けられます。1枚だけでなく資料全体のトーンを揃えたいときに効いてきます。
ただし、AIが出力したMarkdownはそのままだとレイアウトが崩れることがあります。1枚に文字を詰め込みすぎたり、区切りの位置がずれたりするので、生成後は必ずプレビューで確認する習慣をつけてください。AIに任せるのは下書きまでで、最終的な見え方は自分の目で確かめる、という分担が安全です。
PDF・PPTX出力と共有時の落とし穴
スライドが完成したら、出力して共有する段階です。PDF出力は安定していますが、PPTXはデフォルトで編集できない構造上の制約があり、プレビューと出力のズレも起こります。
VS Code・CLIからのエクスポート手順
もっとも手軽なのはVS Code拡張からの出力です。エディタ右上のMarpアイコンをクリックし、「Export Slide Deck」を選ぶと形式を選ぶダイアログが開きます。ここでPDF・PPTX・HTMLのいずれかを選んで保存すれば完了です。
複数ファイルをまとめて変換したい、あるいは自動化したい場合はMarp CLIを使います。marp –pdf slide.md や marp –pptx slide.md のようにコマンド一発で変換でき、CIパイプラインにも組み込めます。CLIは npm install -g @marp-team/marp-cli でインストールできますが、単発の資料作成ならVS Code拡張だけで十分です。
PPTX出力の制約と編集可能オプション（–pptx-editable）
PPTX出力で注意したいのが、通常の出力ではPowerPointで中身を編集できない点です。Marpの通常PPTX出力はスライドごとに内容が背景画像として焼き込まれるため、PowerPointを開いてもテキストを選択・修正できません（出典：Marp team「marp-cli README」）。非エンジニアに渡して直してもらう、といった使い方はこのままでは難しいということです。
これを緩和するのが –pptx-editable オプションです。marp –pptx –pptx-editable slide.md のように指定すると、テキストが編集可能な形でPPTXに変換されます。
ただし制約もあります。このオプションはCLI v4.1.0で追加された実験的機能で、変換にはLibreOffice Impressが必要なうえ、複雑なスタイルでは出力が崩れる場合があります（出典：Marp team「Marp CLI v4.1.0リリースノート」2025年）。プレゼンターノートに対応しないなどの割り切りもあるので、渡す前に一度PowerPointで開いて確認しておくと安心です。
プレビューと出力のズレを防ぐチェックポイント
VS Codeのプレビューでは問題なくても、PDFやPPTXにするとレイアウトがずれたり文字が見切れたりすることがあります。原因の多くは次の3点に集約されます。
- フォント未インストール: プレビューで使えていたフォントが出力環境に入っておらず、別のフォントに置き換わってサイズが変わる。
- 画像パスの相対指定ミス: 相対パスの基準がずれて画像が読み込まれない。
- スライドサイズの不一致: 想定と違う縦横比で出力され、要素がはみ出す。
対策として、出力前にフロントマターの size 指定（16:9 など）が意図どおりか確認します。フォントについては、ローカルフォントに依存せずWebフォントを使うと環境差の影響を受けにくくなります。日本語フォントやMermaidで描いた図はPDF出力時に再現性が下がりやすいので、共有前に実際に書き出したファイルを開いて見切れがないかを確かめる工程を、出力作業の一部として組み込んでおくと確実です。
Markdownスライド導入のポイント
Marpを使えば、Markdownを書くだけでスライド制作が完結します。「テキストで書く→プレビュー→出力」というシンプルなループで回せるため、制作速度を重視するLTや社内発表に特に向いています。いつものエディタとGit、そして生成AIをそのままスライド作りに持ち込めるのが、エンジニアにとっての最大の価値です。
一方で、デザインの作り込みや編集可能なPPTX出力はMarpの得意分野ではありません。だからこそ、8割をMarpで書いて残りは外部ツールやPowerPointで補うという割り切りが、長続きのコツになります。
自分の技術スタックにスライド作成を組み込みたいなら、まずは次のLTや社内発表の1本をMarpで作ってみるのがおすすめです。
始めるにあたって押さえておきたい要点を、最後に整理しておきます。
| 観点 | 押さえどころ |
| 始め方 | VS Code拡張「Marp for VS Code」を入れ、marp: true と書くだけ（Node.js不要） |
| 向いている用途 | LT・社内発表など、短い資料を素早く数多く作る場面 |
| 強み | テキストベースで内容に集中、Gitで差分管理、生成AIと共同執筆 |
| 弱み・制約 | デザインの作り込みが苦手、通常PPTXは編集不可（–pptx-editableは実験的機能） |
| 運用のコツ | 複雑な図は外部ツール、細かい微調整はPowerPointに任せて凝りすぎない |
Markdownで書いた内容は、スライドの外でも手順書や説明資料として使えます。NotePMは、Word・Excel・PDFをアップロードするだけでAIがMarkdown形式に変換し、後から探せる形で蓄積します。資料を組織の資産として残したい場合は、30日間の無料トライアルで確かめてみてください。