Marpでスライドを作る
情報この手順でできるようになること
ビジネス資料の作成にMarpを使う方法を紹介します。スライド作成ツールは他にもありますが、Marpを選んでいる理由は2つあります。原稿の文章がそのままスライドに変換されるため修正が簡単なこと、デザインをあらかじめ用意しておけるため出力品質が安定することです。書式はAIが書いてくれるので、覚える必要はありません。
セットアップ
VSCodeに拡張機能を入れる
- VSCodeを開き、左端の「拡張機能」アイコンをクリックします
- 検索欄に「Marp」と入力します
- 出てきた「Marp for VS Code」の「Install」をクリックします
使い方 - Marpでスライドを作る
① AIにスライド原稿を渡す
AIに「〇〇についてのセミナースライドの構成と本文を、Marp形式のMarkdownで書いてください」と頼むだけです。
テーマについて
フォント、配置、配色や余白などのデザインは、原稿とは別の「テーマ」が受け持ちます。
最初から3種類のテーマ（default／gaia／uncover）が同梱されているので、まずはこの中から試してください。
※下部にて、自作テーマの作成を紹介します。
フロントマター（ファイル冒頭の---で囲んだ部分）にtheme:を1行足すだけでテーマを切り替えられます。この1行もAIに書かせればよく、書式を覚える必要はありません。
例AIへのプロンプト例
「〇〇についてのセミナースライドの構成と本文を、Marp形式のMarkdownで書いてください。Marpテーマは◯◯を使ってください。1枚目はタイトル、以降は1つの見出しにつき1スライドでお願いします。（スライド原稿を貼る）」
② プレビューで確認する
出てきたMarkdownを.mdファイルに貼り付けて保存すると、画面右上のプレビューアイコン（赤丸の位置）から仕上がりを確認できます。
クリックすると、左に原稿、右にスライドの仕上がりが並んで表示されます。
文章や構成が気になったら、スライド資料を直すのではなく、テキストファイルを直します。 テキストファイルを直すと、その場でスライド資料にも反映されます。
③ 書き出す
- 画面右上のMarpアイコンをクリックします
- 出てきたメニューから「Export Slide Deck...」を選びます（コマンドパレットで「Marp」と検索しても同じ項目が出てきます）
- 書き出す形式を選びます
| 形式 | 向いている用途 |
|---|---|
| 配布・印刷 | |
| PowerPoint（.pptx） | 見た目そのままの配布・共有（文字の直接編集は不向き） |
| HTML | ブラウザでの共有 |
| PNG／JPEG | 1枚ずつ画像として使う |
メモ✏️ PowerPointに書き出しても、文字は編集できない
初期設定では、PPTXへの書き出しは各スライドを1枚の画像として保存する仕組みです。見た目はそのまま再現されますが、PowerPoint側では「画像が貼られたスライド」として開くだけなので、文字を直接編集することはできません。
VSCodeの設定（markdown.marp.pptx.editable）をonにすると、文字を実際のテキストボックスとして書き出す「編集可能なPPTX」を試せます。ただしこの機能を使うには、追加でLibreOffice Impressのインストールが必要なうえ、デザインが複雑なテーマだと変換に失敗したりレイアウトが崩れたりすることがあります。細かい修正はMarp側（原稿とAIへの指示）で完結させ、PowerPointへの書き出しは「見せる・配る」用途に割り切って使うのが現実的です。
応用 オリジナルテーマ（デザイン）を準備する
本格的に使うなら、自作のCSSテーマを1つ用意しておくのがおすすめです。 私は、サイト、スライド、ドキュメントにはすべてこのデザインで統一しています。CSS自体もAIに書かせられます。
例AIへのプロンプト例（自作テーマを作りたい場合）
「Marp用のオリジナルテーマ（CSS）を作ってください。
配色は次のとおりです：背景は白（#FFFFFF）、文字は紺（#222F42）、差し色として朱（#BF3B2B）を使ってください。
フォントは、見出し・タイトル・大きな数字は明朝体、本文は視認性を優先してゴシック体にしてください。サイズと太さにもメリハリを付けてください：表紙のタイトルは画面の中でいちばん大きく太く、章タイトルはその半分程度、本文は読みやすい標準サイズ、注記やキャプションは本文より小さく色を少し薄くしてください。強調したい数字や短い言葉は、太字にしたうえで差し色（朱）を使ってください。斜体は基本的に使わず、引用のページでだけ使ってください。
レイアウトは、以下のような場面をすべてカバーする形で、数十パターン用意してください。
- 扉：表紙／章区切り／アジェンダ
- メッセージ：キーメッセージ（1行を大きく）／大きな数字／引用
- テキスト：箇条書き／段落本文／2段組み・3段組みのテキスト
- 比較：2カラム比較／左右非対称／3ボックス／4象限
- データ：表（テーブル）／グラフ・図表／フロー・ステップ図
- 画像：全面画像／画像＋テキスト／複数画像／キャプション付き画像
- 締め：まとめ／Q&A
ページごとにMarkdown側で1行指定するだけで切り替えられるようにしてください。」
出てきたCSSファイルを保存し、VSCodeの設定（markdown.marp.themes）にそのファイルのパスを登録すると、theme:に指定できるようになります。このテーマでの運用は私の事例：Marpの自作テーマで紹介しています。
⚠️ つまずきやすいポイント
- 図・画像を自由な位置に置こうとする：PowerPointのようなドラッグ配置はできません。図解が主役のページは他のツールと組み合わせてください
- テーマ指定を忘れて既定のまま使う：
theme:を書かなければdefaultテーマが使われます。会社のロゴや配色を反映したい場合は自作テーマの登録が必要です