Marpを使って手軽にスライドを作成するハンズオン

Marpを使って手軽にプレゼン資料を作りたい

PowerPointにみっちり時間をかけてかっこいいスライドを作るのは、出来栄えには満足できるが社内のちょっとした講義とか、準備に時間をかけたくないときは生成AI使ってサラッと整えてしまいたい。

という時に、さっと調べた感じだとMarkdown編集からのスライド作成は、今のところMarpが一番スタンダードっぽかった。

環境を整える

VSCodeに、Marp for VS Codeという拡張機能を入れるだけ。

ベーシックな使い勝手

Markdownをエディタでパチパチしながら、スライドの出来栄えをリアルタイムでプレビューして、編集にかったるい要素とかが出てきたらGithub Copilotさんに指示をする。うん、やりたかったやつ。

しかしまあ、出てくるスライドは、さすがにデフォルトだとしょぼいのなんので、流石にもう少し工夫したい。

使いたくなりそうな機能の確認

Mermaid

こちらの先人の手法で行けそうに見えた。が。

ここを緩くする必要があって、それはまあ変なコンテンツ食らってやられないように注意する覚悟だけなのでよい。

ただし、どうしても表示が崩れて崩れて、CSSとか何をどうやってもだめだった。標準対応してないのを無理やりやっている感じだからしょうがないかも知れないけど、CSSがMarpのスタイルと喧嘩するんだろうな。

SVG画像に出してそれを読み込むっていうのもうまく行かず。

PowerPointへのエクスポート

pptxでのエクスポートは設定を少し書き換えるとすぐにできる。

ある程度の見栄えの確保

ささっと作業を始めようとした時に、見栄えのしょぼさが解消されているのは重要。気持ちのノリが変わる。

• フォントを、まあ、MS Officeいつも使ってるとMeiryo UIが落ち着くのでそれに
• ヘッダーとフッターにブランドカラーを適用してみる
• 弊社のロゴを右上に表示
• スライドの本体が上下で真ん中に来るのがデフォルトの要だが、上に寄るのが落ち着くので修正
• キーメッセージのスライドを作ってみる（インパクトがあるひとことだけのやつ）

色々と調整してこうなった。

Markdownの自分用Marpテンプレ

---
marp: true
theme: default
paginate: true
header: "Marp Dummy Presentation"
footer: "Copyright © 2099 Accenture. All rights reserved."
published: false
---

<style>
@import url('https://fonts.googleapis.com/css?family=Noto Sans JP&display=swap');
section {
    font-family: 'Meiryo UI', 'Noto Sans JP', serif;
    background-color: white;
    text-align: left;
    align-items: flex-start;
    /* section内のコンテンツを上揃えにする */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: 80px 60px 60px;
}

/* Logo */
section::before {
    content: '';
    background: url('https://upload.wikimedia.org/wikipedia/commons/archive/c/cd/20241209170217%21Accenture.svg') no-repeat;
    background-size: contain;
    position: absolute;
    top: 20px;
    right: 20px;
    width: 180px;
    height: 60px;
}

header {
    width: 100%;
    color: #3C006C;
    top: 10px;
    text-align: left;
    padding: 33px;
    font-size: 11pt;
}

footer {
    width: auto;
    color: white;
    font-family: 'Tahoma', sans-serif;
    background: linear-gradient(to right, #280957, #8D01E8, #D33FB7);
    text-align: left;
    font-size: 10pt;
    padding: 0 10px;
    height: 18px;
    margin: 0;
    display: flex;
    align-items: center;
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
}

/* Title slide */
section.title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

section.title h1 {
    font-size: 48pt;
    text-align: center;
}

section.title h2 {
    font-size: 32pt;
    text-align: center;
}

/* Lead slide (Last, Key Message) */
section.lead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: linear-gradient(62deg, #280957, #8D01E8, #D33FB7);
}

section.lead h1 {
    font-size: 48pt;
    color: white;
    text-align: center;
}

section.lead h2 {
    font-size: 32pt;
    color: white;
    text-align: center;
}

section.lead::before {
    display: none;
}

section.lead header,
section.lead footer {
    display: none;
}

/* Code block style */
pre code {
    font-family: 'Fira Code', monospace;
    font-size: 8pt;
    line-height: -2px;
}
</style>


<!-- _class: title -->

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

作成者: ユーザー名

---

# 目次

1. はじめに
2. Marpとは
3. コード例
4. まとめ

---

# はじめに

これはMarpで作成されたダミーのプレゼンテーションスライドです。
Markdownで簡単にスライドを作成できます。

- シンプル
- 高速
- PDF/HTML/PPTX エクスポート可能

---

# Marpとは

> Marp: Markdown Presentation Ecosystem

VS Codeの拡張機能として利用するのが一般的です。

![bg right:40% w:400px](https://marp.app/assets/marp.svg)

---

# コード例

def hello_world():
    print("Hello, Marp!")

hello_world()

---

![bg right:40%](https://picsum.photos/720?image=29)
# 右に画像を入れるパターン

これは本文だよ。

そう、本文なんだよ。

ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。ながーい本文だよ。


---

<!-- _class: lead -->

# キーメッセージ
## 重要なポイントをここに

---

# まとめ

- Markdownでスライドが書ける
- テーマもカスタマイズ可能
- プレゼンテーションが楽しくなる！

結果

もしかしたらまあまあ使えるかも

これから、社内向けに軽いプレゼン資料がほしいときとかはこのテンプレと一緒に、こういう資料がほしいよって各種LLMに指示したらラクができる気がする。各種LLMに「私は～～～というスピーチをする必要があるので、このスライドを参考にして、レイアウトやCSSはそのままに、キーメッセージや画像の挿入を効果的につかってプレゼン資料にしてください。」とかいえばいい。そして、出てきたやつに画像とか微調整をすればよくて、そこはMarpのママやってもいいし、PPTXにエクスポートしてから仕上げてもいい。

ここまで、まあまあ色々調べて3時間くらい使ったので、取り返せることを祈る。

ただまあ、読ませる系のビチっと情報量を詰めるスライドの作成は無理だなー。喋り聞かせる系の補助スライド専用。そういう意味だとだいぶ出番は少ないか。