【Marp とは？】Markdown をスライド形式で表示する方法をご紹介！

2024-04-18

情報をまとめる際に、スライド形式で情報をまとめることで、プレゼン時などに活用しやすいアウトプットが可能になります。

Markdown で情報をまとめる際には「Marp」というツールを活用することで、Markdown でまとめた情報をスライド形式で表現することが可能です。また、スライド形式でまとめた情報を、スライドショーで表示する際にはもちろん整形されたアウトプットが可能になります。

この記事では、Makrdown を活用した際のスライド表示に使える「Marp」について詳しくご紹介します。

Markdown でスライドを作成できる Mrap とは？

Marp とは、Markdown でプレゼンテーションスライドを作成することができるツールです。Marp で作成するスライドでは、組み込みテーマや CSS テーマによるデザインを適用して、HTML, PDF, PowerPoint などの各種形式でエクスポートすることができます。

Marp でスライドを作成するメリット

効率的にスライドを作成することができ汎用性が高い

PowerPoint と比較すると、デザインの自由度は高くありませんが、一つデザインを適用させたスライドを作成しておくことで、内容を書き換えるだけで簡単にデザインの適用されたスライドを作成することができ、汎用性の高いスライドを作成することができる点が魅力です。

予め作成済みの Markdown を簡単にスライド化することができる

Markdown で予め作成している文書に、Marp の記法を適用するだけで簡単にスライド化することができる点も大きなメリットの一つです。スライド化した後は、簡単なデザインや装飾をするだけで、ある程度整形されたスライドを生成することができます。

テキスト情報以外もそのままスライドにまとめることができる

Marp では、Markdown に記載されているあらゆる情報をスライド化することができます。そのため、表や図形、数式などにおいてもそのままスライド化することができるのは大きな特徴です。また、スライドのページ区切りについても柔軟に調整することができるため、図形や表などの大きなコンテンツを作成した際には、そのコンテンツだけ別ページに切り分けて表示するなど、作成者の意図したように分割できるのも魅力です。

Marp でスライドを作成する方法

Marp でスライドを作成するためには、いくつかルールがあります。決められたルールに則って作成をすれば既存の Markdown も Marp スライド化することもできます。具体的には、以下の Markdown の記述を参考に Marp スライドを作成してみてください。

■Marp スライドの記述例

---
marp: true
header: "Marp in GROWI"
footer: "GROWI の使い方"
paginate: true
---

<style scoped>
h1 {
    text-align: center;
}
</style>
# GROWI の使い方

---

## GROWI の機能
- Markdown で Wiki が書ける
- ElasticSearch による検索
- 同時多人数編集
- グループ管理
- コメント機能

![bg right 80%](https://growi.org/assets/images/growi-logo.svg)

---

## GROWI の機能
- そのほか draw.io による作図もサポートしています
- Markdown には mermaid や Marp の使用も可能です
- 次のように Marp を有効化します
```
---
marp: true
---

本文

```

※参考記事：社内wikiツール GROWI.cloud で Marp スライドを作成する方法

まとめ

Markdown で作成した情報を簡単にスライド化することができる Marp について解説しました。

Markdown 記法自体の編集コストの低さと掛け合わせると、Markdown を活用して Marp スライドを作成することの手間やコストが低く、作業の効率化に繋がることが分かります。

なお、Markdown エディタの中でも、Marp に適用しているエディタを選ばなければ Marp スライドでの表示はできません。今回記事内でご紹介している、社内wikiツール GROWI.cloud では、Marp を活用したスライド表示が可能ですので、是非サービス内容をご確認ください。

また、Markdown 自体の理解を深めたい方は「【画像で解説】Markdown 記法一覧表・チートシート」を一読することをオススメいたします。

今回使用イメージとして紹介している、社内wiki GROWI.cloud では HTML を適用することが可能なので、動画の埋め込みも可能となっています。