ObsidianでMarpスライドを作って、そのまま発表まで完結させるプラグインを作った

Posted at 2026-03-31

こんにちは🌤 駆け出しフルスタックエンジニアのここあです！

普段はWeztermとObsidianを行き来している生活をしております。

今回は「ObsidianでMarpのスライドを作る → そのまま全画面で発表する」を一気通貫で実現するプラグイン「Marp Slides Presenter」を作ったので紹介します。

Marp自体を知らない方向けに「そもそもMarpって何？」から書いているので、ぜひ最後まで読んでみてください！

Marpとは

Marp（Markdown Presentation Ecosystem）は、マークダウンでスライドを書けるオープンソースのフレームワークです。
例えば、markdownでパワポチックなスライドを作成することができます。

守秘義務の観点から業務用ではなく、適当に作ったtheme.cssなのはご勘弁ください💦

---
theme: cocoa-works-light-theme
paginate: true
header: My Presentation
footer: 2026
---
<!--class: title-->

# Marp用のスライドテーマ
## 2026/03/25

エンジニア＠ここあ

<!-- 
これが発表者のノートになります。
-->
<!-- 
発表時のメモを書きましょう。
-->

---
<!--class: contents-->
 
# 目次

&nbsp;
１．はじめに
&nbsp;
２．あああああ
&nbsp;
３．いいいいい
&nbsp;
４．ううううう

---

# スライドの例

## 小見出し

１．ああああ
１．ああああ
１．ああああ

* 箇条書きのテスト（第1レベル）
  * 箇条書きのテスト（第2レベル）
    * 箇条書きのテスト（第3レベル）

**太字が赤字に**、*斜体の文字が青文字に*
---

<!--class: thanks-slide-->

## エンジニア＠ここあ

デザインへのこだわりが強い方も、エンジニアらしくコードでスライドをGit管理したい方にも、非常に相性の良いツールです。

ObsidianでMarpを使う：samuele-cozzi さんのプラグイン

ここで重要な話をしておきます。

ObsidianでMarpを使えるようにしてくれたのは、samuele-cozzi さんが開発した obsidian-marp-slides プラグインです。

173 stars / 22 forks（2026/3/25時点）

このプラグインがあることで、ObsidianのMarkdownファイルに marp: true を書くだけで、サイドペインにリアルタイムプレビューが表示されるようになります。HTML・PDF・PPTX・画像へのエクスポートも備えており、Marpの主要機能をほぼすべてObsidian上で使えるようにしてくれています。

samuele-cozzi さん、素晴らしいプラグインをオープンソースで公開していただき、本当にありがとうございます！

このプラグインがなければ、そもそもObsidianでMarpを使うという発想自体が生まれていませんでした。

obsidian-marp-slides の主な機能

機能	内容
リアルタイムプレビュー	サイドペインにMarpスライドをレンダリング
エクスポート	HTML / PDF / PPTX / 画像に書き出し
カスタムテーマ	自作のCSSテーマを読み込める
基本的な発表機能	シンプルなプレゼンテーションモード

インストール方法

Obsidianのコミュニティプラグインから簡単に導入できます。

Obsidian の設定 → コミュニティプラグイン → 閲覧
「Marp Slides」を検索
インストール → 有効化

既にVSCode等で自社のスライドテーマができているのであれば、上記のプラグインでobsidianに移行できると思います。

私が感じた「足りなかった部分」

obsidian-marp-slides を使い始めて、日常的にスライド作りに活用するようになりました。

ところが、いざ発表の場面になると毎回こういう運用になっていました。

ObsidianでMarpファイルを仕上げる
pptxにエクスポート
パワーポイントアプリで開いて発表する
発表が終わったらまたObsidianに戻る

「なぜ発表のためだけにObsidianを離れないといけないのか」

具体的に足りていないと感じた機能は次の3つです。

全画面の発表モード（そもそもパワポなんて使いたくない）
発表者ビュー（手元で発表者ノートを見ながら話したい）
レーザーポインター（どこを指しているか聴衆に伝えたい）

これらを追加するために、obsidian-marp-slides をフォークして開発したのが「Marp Slides Presenter」です。

まずは概要から

Marp Slides Presenter：追加した機能

① 全画面発表モード

ツールバーの発表ボタンを押すと、スライドが黒背景で全画面表示されます。キーボードだけで操作が完結します。

キー	動作
`→` / `Space` / `↓`	次のスライドへ
`←` / `↑`	前のスライドへ
`L`	レーザーポインターのオン・オフ
`Esc`	発表モードを終了

② 発表者ビュー

現在のスライドと次のスライドを並べて表示し、下部に発表者ノートが表示されます。タイマーも内蔵しているので、時間を確認しながら発表できます。

③ レーザーポインター

L キーでレーザーポインターモードをオンにすると、マウスカーソルが赤い光点（グロー付き）に変わります。カーソルは非表示になり赤い点だけが画面に残るので、パワポとそん色ありません。

発表者ノートの書き方

MarpのMarkdownでは、HTMLコメント形式でノートを書けます。スライドには表示されないので、補足情報を好きなだけ書いておけます。

---
marp: true
---

# セクション1のタイトル

スライドの本文

<!-- 
発表者ノート：
- このスライドで伝えたいこと
- 想定される質問
- 次のスライドへのつなぎ：「では実際に見てみましょう」
-->

---

## 次のスライド

発表者ビューを開くと、コメントの内容がノートとして表示されます。

全体のワークフロー

Before（プラグイン導入前）

Obsidianでスライドを書く
    ↓
obsidian-marp-slidesでプレビュー確認
    ↓
PPTXにエクスポート
    ↓
パワポで開く
    ↓
発表 → Obsidianに戻る

After（Marp Slides Presenter導入後）

Obsidianでスライドを書く
    ↓
リアルタイムプレビューで確認
    ↓
発表ボタンを押して発表 ← ここで完結！
（発表者ビューも同時に開ける）

技術的なメモ

obsidian-marp-slides のコードベースをベースにしているので、Marpのレンダリングエンジン（@marp-team/marp-core）はそのまま使用しています。今回追加したのは主にUI層の実装です。

全画面オーバーレイ

position: fixed で全画面を覆うオーバーレイを生成し、すべてのスライドを事前に配置しておきます。アクティブなスライドだけ visibility: visible に切り替える方式を採用しました。

display: none ではなく visibility: hidden にしているのは、レイアウトを保持したまま切り替えることでちらつきを抑えるためです。

/* 非アクティブは非表示 */
[data-marp-vscode-slide-wrapper] {
    visibility: hidden !important;
}
/* アクティブのみ表示 */
[data-marp-vscode-slide-wrapper].active {
    visibility: visible !important;
}

カーソルの自動非表示

一定時間操作がなければ opacity: 0 でフェードアウト。マウス移動またはキー入力で再表示させています。

.marp-presentation-counter {
    transition: opacity 0.3s ease;
}
.marp-presentation-counter.hidden {
    opacity: 0;
}

インストール方法

手動インストール

GitHubリリースページから最新版をダウンロード

Vault の .obsidian/plugins/marp-slides-presenter/ フォルダを作成
main.js・manifest.json・styles.css を配置
※それ以外は起動後に自動で作成されるファイルになります。

Obsidian を再起動 → 設定 → コミュニティプラグイン → 有効化

コミュニティプラグインから（リリース予定）

今しばらくお待ちくださいませ(+_+)

使い方

Markdownファイルのフロントマターに以下を追加
- marp: true（必須）
- theme:（任意）
- pagenate:true（任意）
- header:自社のヘッダー（任意）
- footer:自社のフッター（任意）

3. リボンアイコンまたはコマンドパレットからMarpプレビューを開く

4. ツールバーの発表ボタンで全画面発表モードを開始、発表者ノート付きのビューを開く

まとめ

課題	解決
ObsidianでMarpのプレビューができない	obsidian-marp-slides（samuele-cozziさん作）
発表のたびにエクスポートが必要	Marp Slides Presenter の全画面発表モード
発表者ノートを手元で確認できない	発表者ビュー
レーザーポインターが使えない	内蔵レーザーポインター

ObsidianとMarpの組み合わせは、テキストベースのスライド管理として非常に強力です。
そこに発表機能を足したことで、スライドに関わるすべての作業がObsidianの中で完結するようになりました。

Marpでスライドを作っているObsidianユーザーの方はぜひ試してみてください！

GitHubでオープンソースとして公開していますので、バグ報告や機能要望はIssuesでお待ちしています。

リンク

謝辞

このプラグインはclaude様とペアプロをして作成しました。
毎度毎度ありがとうございます。☕

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up