Marpについて-スライド作成方法-

0. 概要

MarpはMarkdown（マークダウン）形式で記述したテキストから、プレゼンテーションスライドを作成できる無料のオープンソースツールです。

また基本的な使用方法とAIモデルを使用した生成方法について紹介します。

1. Marpの特徴

• Markdown（マークダウン）形式で記述したテキストから、プレゼンテーションスライドを作成
• 組み込みテーマやCSSをあてることでスライドのデザインを整える事が可能
• Markdownの画像構文の拡張によりスライドに差し込むことや背景にすることが可能
• 出力方法はpdf、htmlおよびpowerPoint（※LibreOfficeのインストール必要）など形式で出力が可能

2. VSCode拡張機能

MarpはVSCodeの拡張機能を用意しており、Markdownを編集しながらスライドの出力プレビューで確認が出来ます。

3. 基本的な使い方

ファイル配置例

.project
├───img
│    ├──sample01.png
│    └──sample02.png
└──sample.md

下記のsample.mdを参考にMarkDowon記法で記述します。

編集もしくは作成後、「プレビュー」画面で内容が確認できます。

4. ClaudeCodeでの出力方法

ファイル配置例

.project
├───doc
│    └──headless_cms.md
├───出力
└── CLAUDE.md　(※CLAUDE.mdに関しては触れません)

上記の様に配置した後に下記の様にプロントをmodelに投げます。

「 docs/headless_cms.md 」を読んで、「出力/」配下にMarp形式のスライド（headless_cms_slides.md）に変換して作成してください。
「theme」・「size」・「paginate」・「style」は下記を適応してください。
\```md
---
marp: true
theme: default
size: 16:9
paginate: true
style: |
  section {
    justify-content: flex-start;
    padding: 130px 70px 70px;
    font-size: 26px;
  }
  section h1,
  section h2 {
    position: absolute;
    top: 48px;
    left: 70px;
    right: 70px;
    margin: 0;
    padding: 0 0 10px 18px;
    font-size: 34px;
    text-align: left;
    color: #1a4d8f;
    border-left: 8px solid #1a4d8f;
    border-bottom: 2px solid #d5dde8;
  }
  section.title {
    justify-content: center;
    text-align: center;
    padding: 70px;
  }
  section.title h1 {
    position: static;
    border: none;
    padding: 0;
    font-size: 52px;
    text-align: center;
    color: #1a4d8f;
  }
  section.toc ol {
    font-size: 30px;
    line-height: 1.8;
  }
  section.toc a {
    color: #1a4d8f;
    text-decoration: none;
    border-bottom: 1px dotted #1a4d8f;
  }
---
\```
スライド（headless_cms_slides.md）のみ作成し、「出力/」配下に設置してください。

出力例

• Markdownファイル(Marp)

5. ローカルLLMでの出力方法

ローカルLLMでMarp形式のスライドを作成する事も可能となります。
また、セクションごとに分けて最後に結合させる仕組みを入れることで、軽量のローカルLLMでも出力可能になります。

技術概要

• NVIDIA GeForce RTX 4060 Laptop
• 標準メモリ構成: 8 GB
• モデル：gemma4:e4b
• Python
• Ollama
• LangChain/LangGraph

ファイル配置例

.project
├───doc
│    └── headless_cms.md
└── marap.py

出力ソースは下記を参考に「py marap.py "headless_cms.md"」を実行する事でMarp形式のスライドが作成できます。

6. おススメツール

MarkdownおよびMarp形式のスライドを作成する際に便利なツールを紹介します。

テーブルを作成するツール

図形などを描画する際のツール

7. さいごに

Marpを使うことで1つのエディター画面(VSCode)で資料を見ながら作成する事が可能となるので作業効率が上がると思います。

設計書やドキュメントを作成し、スライドは生成AIに作成を依頼する事でスライド作成の手間が減ると思います。

【参考】