Marp と GitHub Copilot を使って効率よくプレゼンし隊

GitHub で管理しているブログ記事を題材に、Marp を使ってプレゼン資料を作成する方法について紹介します。特に、GitHub Copilot を活用することで効率的にプレゼン資料を作成できるようになった体験をまとめました。

本記事は GitHub Copilot を活用して作成しています。

使用シナリオ

先に私の場合の使用シナリオを紹介します。
コミュニティ登壇などで LT と呼ばれる 5 分程度の短い発表を担当するときがあります
せっかくならブログ記事の内容をスライドにまとめて発表したいと考えていました

Marp に出会い、Marp × Coding Agent で爆速で効率よくプレゼン資料を作成できるようになりました

Marp は HTML 出力すると PowerPoint のようにプレゼンテーションモードが使えるのもうれしい点です

marp_presentation_mode — **Marp のプレゼンテーションモード**:

なお、お仕事でのプレゼンはテンプレートが決まっていたり、図などの位置を微調整したいというニーズがあるため Marp は使っていません

あくまでも自分のブランディングとしてのコミュニティ登壇や勉強会での発表に利用しています

ざっくり手順

Marp について理解する
生成 AI と Marp の相性を把握する
初回は手作業でテンプレートを作成
2回目以降は Coding Agent を活用
メリット・デメリットを評価

執筆環境として、以下を利用しています。

GitHub : ブログの管理
GitHub Codespaces
Visual Studio Code or web ブラウザ：Codespace に接続するため
Marp for VS Code 拡張機能
GitHub Copilot 拡張機能

Marp とは

Marp（Markdown Presentation Ecosystem）は、Markdown でプレゼンテーション資料を作成できるツールです。

主な特徴

Markdown ベース：普段の文書作成と同じ記法でスライドを作成
CSS カスタマイズ：独自のテーマやスタイルを適用可能
エクスポート機能：PDF、HTML、PowerPoint など様々な形式で出力
Git 管理：テキストファイルなのでバージョン管理が容易

基本的な書き方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


---
marp: true
theme: default
---

# タイトルスライド
## サブタイトル

---

# コンテンツスライド
- 箇条書き1
- 箇条書き2
- 箇条書き3

このブログでも既に Marp を活用していて、カスタムテーマを作成して統一感のあるプレゼン資料を作成しています。

画像のプレゼンテーションは 2025年 8月 21日開催の「YonaYona Azure Club」で利用した資料です。
登壇資料はこちらです
YonaYona Azure をゆるっと学ぶ会 - connpass

生成 AI と Marp の相性

Marp と生成 AI は非常に相性が良いと感じています。

相性が良い理由

テキストベース：Marp は Markdown なので、AI が理解しやすい
構造化されたフォーマット：スライドの構造が明確で AI が生成しやすい
繰り返しパターン：スライドには決まったパターンがあり AI が学習しやすい
既存コンテンツの再利用：ブログ記事から抜粋して構成しやすい

GitHub Copilot での活用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


# AI が得意なパターン
## 箇条書きの整理
- 長いブログ記事 → 要点を抜粋
- 手順の説明 → スライド化
- 図表の説明 → 視覚的なレイアウト提案

## AI が提案してくれる要素
- 適切なスライド分割
- 見出しの階層構造
- 画像配置の提案

初回は手作業でテンプレート作成

Marp では色味やフォントなどをカスタマイズすることができます。
プレゼン資料のブランディングのために、最初は手作業でテンプレートを作成することをお勧めします。
個人的にはプレゼン資料のフォントはできる限り大きくしたいので、そのあたりをテンプレートに入れ込みました

【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る #VSCode - Qiita の記事が非常にわかりやすく参考にさせてもらいました

カスタムテーマの作成

私は marp.css というファイルにカスタムテーマを作成しています。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


/* @theme marp */
@import 'default';

section {
    font-family: 'Noto Sans JP', 'Arial';
    font-size: 28px;
    padding: 40px;
    background-color: #fdf7e3;
    color: #697c80;
}

section.title {
    color: #b58900;
    font-family: 'Noto Sans JP', 'Arial';
    font-size: 48px;
    text-align: center;
}

section.slides h1 {
    color: #cb4b16;
    font-size: 60px;
    position: absolute;
    left: 50px;
    top: 50px;
}

Marp でカスタムテーマを利用するときは Visual Studio Code の拡張機能でインプットしておく必要があります
詳しくは【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスライドを作る #VSCode - Qiita で解説してくれています

基本スライド構造の確立

テンプレートでは以下の要素を標準化しました：

タイトルスライド：class: title
コンテンツスライド：class: slides
中央配置スライド：class: centered
自己紹介スライド：決まったフォーマット

最初のプレゼン作成

手作業で最初のプレゼンを作成する際のポイント：

ブログ記事の構造を理解してスライドに落とし込む
画像の配置パターンを決める
フォントサイズや余白の調整
色やレイアウトの統一

これらの作業を通じて、自分なりのプレゼン作成のパターンを確立します。

初回は AVD on Azure Local の検証環境を作成し隊 – クラウドを勉強し隊の内容でプレゼン資料してはこちらを使用しました

2回目以降は Coding Agent 利用

パターンが確立された後は、GitHub Copilot Coding Agent を活用できます。

Coding Agent の活用方法

copilot-instructions.md を使った効率的な指示：
リポジトリの .github/copilot-instructions.md にプロジェクト固有のルールを定義することで、より効率的に指示を出すことができます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


## Marp プレゼンテーション作成

### 使用するレイアウトとテーマ
- CSS テーマファイル: `marp/css/marp.css`
- テーマ名: `marp`
- 主要なクラス: `title`, `slides`

### スライド構造とクラス指定
- タイトルスライド: `<!-- class: title -->`
- コンテンツスライド: `<!-- class: slides -->`

この設定により、Coding Agent は事前に定義されたルールに従って一貫性のあるプレゼンを生成できます。

copilot-instructions.md の作成も Coding Agent に

最初に手作業でテーマおよび Marp プレゼンテーションを作成しました
それを参考に copilot-instructions.md も Coding Agent に作成してもらいました

copilot_instructions_md_generated — **Copilot が生成した copilot-instructions.md**:

Issue での指示：
たとえば下記のような Issue を立てます

タイトル: [ブログ記事タイトル] のプレゼン資料を作成

内容: 
- 既存のブログ記事を元に Marp プレゼンを作成
- 既存の marp.css テーマを使用
- 画像配置のプレースホルダーを含める

Copilot のアサイン：Issue に @copilot をアサインするだけ
自動生成：Copilot が以下を自動実行
- ブログ記事の解析
- スライド構造の検討
- Marp ファイルの生成
- 画像プレースホルダーの配置
レビューと微調整：生成されたプレゼンを確認し、必要に応じて手動で微調整

実際の活用例

RBAC の権限付与を安全に丸投げし隊の記事から、Copilot が自動でプレゼンを生成しました。

生成されたファイルの例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


---
marp: true
theme: marp
footer: '<img><a href="https://twitter.com/kenakay01">@kenakay01</a>'
---

<!--
class: title
-->

# RBAC の権限付与を安全に丸投げし隊
## 中山 賢斗

詳しくはブログを見てください
https://www.kentsu.website/ja/posts/2025/rbac_conditional_delegation/

---
<!--
class: slides
-->

# 自己紹介
## 中山 賢斗
- 所属：日本マイクロソフト
- クラウドを勉強し隊
- すきやねん Azure!!

![bg right:60%](../../../../../static/images/whoami/profile_jat.png)

実際に Copilot が作成し、微調整を加えたのが RBAC の権限付与を安全に丸投げし隊です

メリット・デメリット

メリット

作業効率の向上

大幅な時短：プレゼン作成時間が劇的に短縮
反復作業の削減：テンプレート適用が自動化

品質の向上

一貫性：統一されたデザインとレイアウト
再利用性：過去のコンテンツを効率的に活用

バージョン管理

Git 管理：プレゼンもソースコード同様に管理
変更履歴：修正内容が明確に追跡可能
共同編集：複数人での編集が容易（自分でしか使っていないですが）

デメリット

初期コストの課題

学習コスト：初回のテンプレート作成のため、Marp の習得が必要
設定コスト：Mermaid で作成した図を挿入するのに手こずったりしました

AI の制約

創造性の限界：ブログ記事の内容に依存する仕組みを今回は活用しているので問題ではないです。利用シナリオによっては制約になりえると思います
微調整の必要性：生成後の手動調整が必要

総合評価

継続的にプレゼンを作成する場合、初期投資を考慮しても十分にメリットがあります。特に：

技術系プレゼン：定型的な構造が多く AI が得意
継続的な発表：同じパターンの繰り返しで効果大
ドキュメント化重視：内容の再利用性が高い

flowchart TB
    subgraph 従来の作業フロー
        direction TB
        T_Read[記事を読んで要点を抽出]
        T_Draft[スライドを手作業で作成]
        T_Design[画像・図表を作成]
        T_Review[レビュー・修正]
    end

    subgraph AI支援の作業フロー
        direction TB
        A_Parse[AI が記事を解析]
        A_Extract[要点抽出・スライド候補生成]
        A_Apply["`テンプレート適用
                    ・画像プレースホルダ挿入`"]
        A_Review[レビュー・微調整]
    end

    T_Read --> T_Draft --> T_Design --> T_Review --> Publish[公開・発表]
    A_Parse --> A_Extract --> A_Apply --> A_Review --> Publish

    classDef ai fill:#f0fff4,stroke:#2d7a2d,color:#0b6623;
    class A_Parse,A_Extract,A_Apply,A_Review ai;

まとめ

Marp と GitHub Copilot を組み合わせることで、プレゼン資料作成が大幅に効率化されました。
最初は手作業でしっかりとしたテンプレートとパターンを確立することがよかったと思います

ブログ記事とプレゼン資料の一元管理により、コンテンツの価値を最大化できるようになりました。継続的に技術発表をする方には、ぜひ試していただきたいワークフローです。