Marp

Description:

Markdownで美しいスライドを作成するオープンソース・プレゼンテーションエコシステム。VS Code拡張機能、CLIツール、カスタムテーマで直感的なプレゼン作成を実現

URL: https://marp.app/

GitHub:

https://github.com/marp-team/marp

Tags:

Explore:

Qiita Zenn note Hatena X

Updated:

2026/01/31

特徴

Markdownベースの直感的編集: CommonMark準拠のMarkdown記法でスライドを作成。水平ルール（---）でページを分割し、コンテンツ構造に集中して美しいプレゼンを作成可能。
リッチなテーマ機能: デフォルトで3つの内蔵テーマ（default、gaia、uncover）を搭載。カスタムCSSやMarkdownディレクティブで独自テーマ作成も完全にサポート。
リアルタイムプレビュー: VS Code拡張機能やCLIツールで編集中にリアルタイムプレビューを表示。変更が即座にスライドに反映。
多彩なエクスポート機能: HTML、PDF、PowerPoint（PPTX）、PNG、JPEGなど主要フォーマットに対応。Google Chrome/Chromiumベースのレンダリングで高品質な出力を実現。
拡張構文と数式: 画像構文、数式組版（MathJax対応）、自動スケーリング機能で高度な表現力をサポート。
AIツール連携: ChatGPT、Claude、GeminiなどのAIアシスタントと親和性。Markdown形式のAI生成アウトラインをMarpで直接読み込み可能。
完全なオープンソース: MITライセンスで全機能が無料。コアエンジンはMarpitフレームワークとして公開。
プラグインアーキテクチャ: 拡張機能をプラグインで追加可能。開発者コミュニティによる機能拡張が盛ん。
マルチプラットフォーム対応: Windows、macOS、Linuxで完全に動作。VS Code、JetBrainsなどの主要IDEに統合。

活用例

技術プレゼンテーション: コードアーキテクチャの説明、システム設計、API仕様を図解。開発チーム内での情報共有や意思決定に最適。
製品紹介: 新機能やサービスのローンチ。マーケティング資料としての使用可能な美しいスライドを効率的に作成。
教育・研修: コース資料、研修マニュアル、学習教材をMarkdownで作成。テキストベースの編集で誰でも簡単にコンテンツ更新が可能。
会議・イベント: 企業ミーティング、カンファレンス、社内報告資料を迅速に作成。テンプレート機能で統一感のあるプレゼンに。
研究発表: 学術論文、研究結果の発表スライドを構造化。数式や図表の挿入、引用機能で専門的な発表に。
ブログ・コンテンツ: ブログ記事、SNS投稿、マーケティングコピーを作成。テキスト中心の編集で写真や動画と組み合わせた表現力。
ポートフォリオ: 作品やプロジェクトの実績を視覚的に発表。コードスニペットやデモンストレーションを組み合わせた魅力的なスライドに。

技術仕様とアーキテクチャ

コアコンポーネント:

Marp Core: MarpitフレームワークベースのHTML/CSS変換エンジン
Marp CLI: コマンドラインインタフェース
Marp for VS Code: VS Code拡張機能
テーマシステム: CSSとMarkdownディレクティブによるテーマ管理

技術スタック:

主要言語: TypeScript、JavaScript、CSS
レンダリングエンジン: Google Chrome/Chromium
フレームワーク: Electron（デスクトップアプリ）、Marpit
パッケージ管理: npm、Yarn

ファイル形式:

入力: Markdown（.md）、MDX対応
出力: HTML、PDF、PPTX、PNG、JPEG
テーマ: CSS、カスタムCSSファイル

他のプレゼンテーションツールとの比較

機能	Marp	PowerPoint	Google Slides	Keynote
入力形式	Markdown	GUI	GUI	GUI
バージョン管理	Git対応	限定	iCloud同期
協業機能	Markdownベース	リアルタイム	リアルタイム
カスタマイズ性	CSS/テーマ	限定	限定
コスト	無料	有料	有料
オフライン作業	✅ 完全	❌ 要オンライン	❌ 要オンライン
プログラマビリティ	✅ 高い	❌ 中程度	❌ 中程度
AI連携	✅ 可能	❌ なし	❌ なし
オープンソース	✅ MIT	❌ プロプライエタリ	❌ プロプライエタリ

ユニーコミュニティとエコシステム

開発者コミュニティ:

GitHubスター: 12,000+
貢献者: 50名以上のアクティブな開発者
Discordコミュニティ: 活発なユーザー間の情報交換
プラグイン開発者: 多様な機能拡張
ドキュメント貢献: チュートリアルや事例の共有

関連プロジェクト:

Marpit: Marpのコアフレームワーク
Marp CLI: コマンドラインツール
テーマギャラリー: コミュニティ制作のカスタムテーマ
VS Code拡張: IDE統合
各種プラグイン: PDFエクスポート、アニメーション、特殊効果

ワークフローと統合

開発ワークフロー:

# 1. プロジェクト初期化
npm init marp-presentation

# 2. Markdownファイル作成
mkdir slides
echo "# $(whoami)'s Presentation" > slides/title.md

# 3. Marp CLIでプレビュー
marp --preview slides/title.md

# 4. スライド編集（VS Code使用）
code slides/title.md

AI統合の例:

# AIでアウトライン生成
curl -X POST https://api.openai.com/v1/chat/completions \
  -H "Content-Type: application/json" \
  -d '{
    "model": "gpt-4",
    "messages": [{"role": "user", "content": "技術プレゼンのアウトラインを作成"}]
  }' > ai-outline.md

# 生成されたアウトラインをMarpで変換
cat ai-outline.md | marp -o presentation.html --theme gaia

自動化スクリプト:

#!/bin/bash
# Watchディレクトリの変更を監視し自動再生成
inotifywait -m modify -r slides/ -e modify,create --format '%e' --event 'modify,create' |
while read path action file; do
  if [[ $path =~ slides/.*\.md$ ]]; then
    echo "変更検出: $file"
    marp --output-dir dist/ --theme gaia "$(cat $file)"
  fi
done

今後の展望と開発ロードマップ

短期的機能強化:

AI生成機能の統合: Marp内蔵でのAIアウトライン生成
リアルタイム協業: 複数ユーザーでの同時編集機能
高度なアニメーション: CSSアニメーションやトランジション効果
インタラクティブ要素: クリック可能なチャート、埋め込み動画

中期的目標:

クラウドベースの協業機能: Webベースのリアルタイム共同編集
プレゼンテーション管理システム: スライドのバージョン管理、テンプレートライブラリ
モバイルアプリ: iOS/Androidでの完全な編集・表示機能
高度なAI機能: プレゼン内容の自動最適化、AIの提案反映

長期的なビジョン:

完全なプレゼンテーションプラットフォーム: PowerPointやGoogle Slidesを超える包括的ソリューション
知的コンテンツ自動生成: AIとの深度な統合でプレゼン構成の完全自動化
VR/AR対応: 没没型プレゼンテーションや3D空間でのスライド表示
エンタープライズ機能: 企業向けの高度な機能、チーム管理、分析ツール

始め方：クイックスタートガイド

インストール:

# 方法1: npmグローバルインストール
npm install -g @marp-team/marp-cli

# 方法2: VS Code拡張機能のインストール
# VS Codeで「Marp」を検索してインストール

# 方法3: デスクトップアプリ
# GitHubから最新リリースをダウンロード

最初のプレゼン作成:

---
theme: gaia
backgroundColor: #ffffff
backgroundImage: url('https://images.unsplash.com/photo-1518700619352-f023c9b36d9.jpg?auto=compress&cs=tinysrgb')
---

# タイトルページ

# 自己紹介

- 名前：〇〇 〇〇
- 役職：ソフトウェアエンジニア
- 経験：5年間のWeb開発

# はじめに

近年の技術トレンドと市場機会について...

# 技術的な側面

## アーキテクチャ概要

```mermaid
graph TD
    A[クライアント要求] --> B[要件定義]
    B --> C[システム設計]
    C --> D[実装]
    D --> E[テストとデプロイ]

使用技術

フロントエンド：React + TypeScript
バックエンド：Node.js + Express
データベース：PostgreSQL
インフラ：AWS + Docker

まとめ

ご清聴ありがとうございました。


**プレビューと出力**:
```bash
# リアルタイムプレビュー
marp --preview slides.md --watch

# PDF出力
marp --pdf slides.md --output presentation.pdf

# HTML出力
marp --html slides.md --output presentation.html

結論：なぜMarpが開発者の選択となるのか

Marpは、伝統的なプレゼンテーションツールの制約を打ち破る革命的なアプローチを提供します。Markdownという開発者が親しみ形式でコンテンツを記述し、それを美しいスライドに変換するというシンプルながら強力なコンセプトは、プレゼン作成の本質を「構造と内容の創造」に戻します。

PowerPointやGoogle SlidesがGUI操作の複雑さやデザインの制約に悩まされているのに対し、Marpはテキストエディタでの快適な編集体験を提供し、バージョン管理や共同編集の容易さを実現します。オープンソースであることの透明性とカスタマイズ性、そして活発なコミュニティによる継続的な機能拡張は、長期的に信頼できるツールとしての地位を確立しています。

AI時代のプレゼンテーションにおいて、Marpは単なる変換ツールではなく、思考の整理と視覚的表現を結びつける理想的なインタフェースを提供すると言えるでしょう。