Markdownからスライドへ：完全ガイド

Markdownからスライドへ：完全ガイド

端的な答え： markdownをスライドに変換するには、.md ファイルをスライド区切りとして --- 水平線で構成し、テーマとメタデータ設定用のYAMLフロントマターを追加し、SlidesMate やそのAPIのようなツールでスタイル付きプレゼンに変換します。区切り間の各セクションが一枚のスライドになります。見出しはスライドタイトル、箇条はコンテンツ、コードブロックはシンタックスハイライト付きでレンダリングされます。CI/CDパイプラインで自動化し、ドキュメントリポジトリへのすべてのプッシュでプレゼンを再生成できます。

markdownで書くなら、プレゼンに必要なものはすでに揃っています。markdownの見出しベースの構造はスライドに自然に写り、プレーンテキスト形式（CommonMark specification に基づく）によりプレゼンコンテンツをGitリポジトリに置き、ドキュメントワークフローに統合し、テンプレートやデータからプログラム生成できます。

本ガイドでは基本的なmarkdownからスライドへのフォーマットから、CI/CDパイプラインによる高度な自動化、YAMLフロントマター設定、リッチコンテンツのサポート、エンジニアリングチーム、デベロッパーアドボケイト、テクニカルライターが使う実世界のワークフローまでを扱います。

プレゼンにMarkdownを使う理由

従来のプレゼンツールはマウスを使いキャンバス上で要素をドラッグし、バージョン管理で差分が取りにくいバイナリ形式を管理することを要求します。markdownはこれらすべての摩擦を取り除きます。

Markdownスライドの利点

このアプローチで最も恩恵を受けるのは開発者、テクニカルライター、デベロッパーアドボケイト、ドキュメントチームです。ドキュメント、README、社内wiki向けにすでに markdownファーストのワークフロー があるなら、プレゼンへ拡張するのは自然な次のステップです。

基本的なMarkdownからスライドへの構造

SlidesMateは水平線（---）でスライドを区切ります。ルール間の各セクションが一枚のスライドになります。各セクションの最初の見出しがスライドタイトルになります：

# Welcome to Our Product

A brief introduction to what we build and why it matters.

---

## The Problem

Engineering teams waste 3 hours per week on manual reporting.
That is 156 hours per year per team.

---

## Our Solution

Automated reports generated from your existing data pipelines.
Delivered to Slack every morning before standup.

---

## Key Results

- 3 hours saved per week per team
- 95% adoption within first month
- NPS score of 72 from engineering managers

---

## Thank You

Questions? hello@example.com

これで五枚のプレゼンが生成されます。各 --- が新しいスライドを示します。見出し階層（H1、H2、H3）がスライドタイトルのスタイルを決め、H1はタイトルスライド、H2はセクションスライドを作ります。

スライドレイアウトのルール

markdown要素がスライドコンポーネントにどうマッピングされるかを理解すると、よく構造化されたスライドを生むmarkdownが書けます：

設定用YAMLフロントマター

プレゼンテーマ、著者情報、表示設定を制御するためにmarkdownファイルの先頭にメタデータを追加します：

---
title: "Q4 Product Update"
theme: "modern"
author: "Engineering Team"
date: "2026-02-15"
---

# Q4 Product Update

Here is what we shipped this quarter and what is coming next.

---

## New Features

- Real-time collaboration — 3 teams in beta
- API v2 launch — 200% throughput improvement
- Mobile app beta — 1,200 beta testers enrolled

利用可能なフロントマター項目

テーマはタイポグラフィ、カラーパレット、余白、背景スタイリングを制御します。modern テーマは余白十分のクリーンなサンセリフフォントを使用します。corporate テーマはブランド向けデフォルトのより伝統的なレイアウトを使用します。一つに決める前に SlidesMateエディター でテーマをプレビューしてください。

リッチコンテンツのサポート

シンタックスハイライト付きコードブロック

SlidesMateはフェンス付きコードブロックをフルシンタックスハイライトでレンダリングします。技術プレゼン、エンジニアリングオールハンド、開発者向けカンファレンストークに不可欠です：

```python
def calculate_mrr(customers: list[Customer]) -> Decimal:
    """Calculate monthly recurring revenue from active subscriptions."""
    return sum(
        c.plan_price
        for c in customers
        if c.status == "active"
    )
```

サポート言語にはPython、JavaScript、TypeScript、Go、Rust、SQL、Bash、YAML、JSON、およびPrism.js経由で40以上のその他があります。シンタックステーマはプレゼンテーマに自動で合わせます。

数式

技術および学術プレゼン向けにKaTeX経由でLaTeX数式をサポートします：

The compound growth formula: $MRR_t = MRR_0 \times (1 + g)^t$

Where $g$ is the monthly growth rate and $t$ is months elapsed.

スライド上で適切に整形された数学表記としてレンダリングされます——財務プレゼン、研究講演、データサイエンスデモに有用です。

表

標準markdown表は整形されたスタイル付きスライド表としてレンダリングされます：

| Metric | Q3 2026 | Q4 2026 | Change |
|--------|---------|---------|--------|
| MRR | $45K | $62K | +38% |
| Active Users | 1,200 | 1,800 | +50% |
| Churn Rate | 4.2% | 3.1% | -26% |
| NPS | 58 | 72 | +24% |

表は交互の行色、適切な整列、読みやすいタイポでスタイルされます。読みやすさのためスライドあたり最大5〜6行に抑えてください。

画像

標準markdown構文で画像を参照します。画像はスライド内で自動的にサイズ調整され配置されます：

![Product dashboard showing real-time analytics](/images/dashboard.png)

最良の結果のため、1920x1080解像度（標準スライド寸法に一致）の画像を使用し、アクセシビリティ のため説明的な代替テキストを付けてください。

スピーカーノート

HTMLコメントでスピーカーノートを追加します。プレゼンタービューには表示されますが可視スライドには表示されません：

## Q4 Revenue Results

Revenue grew 38% quarter-over-quarter, driven by enterprise expansion.

<!-- Speaker notes: Mention the Acme Corp deal specifically. Highlight that 60% of growth came from existing customer expansion, not new logos. Prepare for questions about Q1 pipeline. -->

SlidesMate APIの利用

RESTエンドポイント

markdownコンテンツをAPIエンドポイントに送り、生成されたプレゼンを受け取ります：

curl -X POST https://slidesmate.com/api/markdown \
  -H "Authorization: Bearer $SLIDEMATE_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "markdown": "# Hello World\n\nThis is my presentation.\n\n---\n\n## Slide 2\n\nMore content here.",
    "theme": "modern",
    "format": "pptx"
  }'

リクエストパラメータ

レスポンス

APIはダウンロードURL、スライド数、メタデータを含む生成プレゼンデータのJSONオブジェクトを返します。大きいファイルの場合、レスポンスには24時間有効なプリサインURLが含まれます。

markdownファイルを直接送信する

ローカルのmarkdownファイルの場合、API呼び出しにコンテンツをパイプします：

cat docs/presentations/quarterly-update.md | \
  curl -X POST https://slidesmate.com/api/markdown \
    -H "Authorization: Bearer $SLIDEMATE_API_KEY" \
    -H "Content-Type: application/json" \
    -d @- \
    -o quarterly-update.pptx

CI/CD連携

GitHub Actions：プッシュ時のスライド自動生成

ドキュメントリポジトリからスライド生成を自動化し、プレゼン用markdownファイルへの変更がプッシュされるたびに対応するPowerPointファイルを再生成します：

name: Generate Slides
on:
  push:
    paths:
      - 'docs/presentations/*.md'

jobs:
  generate:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Generate presentations
        env:
          SLIDEMATE_API_KEY: ${{ secrets.SLIDEMATE_API_KEY }}
        run: |
          for file in docs/presentations/*.md; do
            filename=$(basename "$file" .md)
            curl -X POST https://slidesmate.com/api/markdown \
              -H "Authorization: Bearer $SLIDEMATE_API_KEY" \
              -H "Content-Type: application/json" \
              -d @"$file" \
              -o "output/${filename}.pptx"
          done

      - uses: actions/upload-artifact@v4
        with:
          name: presentations
          path: output/

このワークフローはプレゼンディレクトリ内のすべてのmarkdownファイルをループし、それぞれにPowerPointを生成しビルド成果物としてアップロードします。

GitLab CIの例

generate-slides:
  stage: build
  script:
    - mkdir -p output
    - |
      for file in docs/presentations/*.md; do
        filename=$(basename "$file" .md)
        curl -X POST https://slidesmate.com/api/markdown \
          -H "Authorization: Bearer $SLIDEMATE_API_KEY" \
          -H "Content-Type: application/json" \
          -d @"$file" \
          -o "output/${filename}.pptx"
      done
  artifacts:
    paths:
      - output/
  only:
    changes:
      - docs/presentations/*.md

実世界の自動化シナリオ

週次エンジニアリングレポート： Pythonスクリプトがデータウェアハウスから指標を取得し、埋め込み表とチャート付きmarkdownを生成し、SlidesMate APIを呼び出して毎週月曜の朝共有ドライブに届くスライドデッキを作成します。

カンファレンストーク管理： スピーカー準備資料はGitリポジトリに置かれます。各トークはmarkdownファイルです。コンテンツが更新されるたびにCIが新しいスライドを生成し、ライブデッキが常に最新版と一致することを保証します。

スケールでのクライアント成果物： コンサルと代理店チームはプレースホルダ付きmarkdownテンプレートを維持します。スクリプトがCRMまたはスプレッドシートからクライアント固有データを埋め、APIを呼び、各案件向けにカスタムデッキを生成します。詳細なパターンは プレゼン作成の自動化 ガイドを参照してください。

より良いMarkdownスライドのコツ

1. 一枚につき一アイデア。 --- 区切りを惜しまず使用する。詰まった10枚よりクリーンな20枚の方がよい。
2. 箇条を短く。 スライドあたり三〜五項目、各15語未満。長い箇条は視覚的プレゼンの目的を損なう。
3. 見出しを一貫して使う。 スライドタイトルは ##、スライド内のサブセクションは ###。見出しレベルが不揃いだとスライドスタイルも不揃いになる。
4. HTMLコメントでスピーカーノートを追加する。 詳細なトーキングポイントは可視スライドコンテンツの外に置く。
5. プッシュ前にプレビュー。 リポジトリにコミットする前に SlidesMateエディター でmarkdownをレンダリング済みスライドとしてプレビューする。
6. 画像をmarkdownの横に置く。 相対パスを使いエディタープレビューと生成出力の両方で画像が動くようにする。
7. 表はシンプルに。 スライドはスプレッドシートではない。表が5列超または8行超なら複数スライドに分割するかチャートの使用を検討する。

はじめに

最初のmarkdownファイルを SlidesMateエディター またはMarkdown APIでプレゼンに変換してください。すでに愛用のエディターでコンテンツを書き、デザインはSlidesMateに任せ、パイプラインを自動化してプレゼンをコンテンツと同期させます。

既製構造は テンプレートライブラリ を参照するか、AIプレゼンツール、ピッチデッキ、データ可視化 のガイドは ブログ を参照してください。