テク技

Markdownでプレゼン資料作成!!Marpとその活用術を紹介

Markdownからプレゼンテーション資料を作成できる「Marp」の紹介です。使い慣れたMarkdown書式で、デザインに気を配る必要なく伝えるべき内容とその言葉に集中してスライド作成ができます。

プレゼンテーション資料についての考え方

そもそもの前提として、プレゼンテーションにおいて大事なことは「どのような情報を」「どれだけ正確に相手に伝えることができたか」だと自分は考えています。よってプレゼン資料を作成する際は、なるべくデザインに気を配ることなく伝えべき内容を考えることに集中したいと考えています。

Marpを使う利点

そんな自分がなぜMarpを気に入っているかというとスライド資料を書き慣れたMarkdown書式から生成できる。結局これに尽きます。結果として

  • いつものようにドキュメントに起こす感覚でスライドを作成できる
  • デザインを気にせずに、文字や画像で伝えるべき内容に集中できる
  • 作成したスライドは再度ドキュメントとして再利用ができる。逆も然り

という利点を強く感じています。

その他の特徴

先ほどMarpのメリットとして述べたMarkdown互換性に比べるとあくまで副次的なものに過ぎませんが、その他にこんな特徴があります。簡単にですが紹介します。

エンジニアにとってのとっつきやすさ
  • VSCode拡張機能でVSCodeのみで記述&プレビューできる
  • 元ファイルがmarkdownのためgitで管理できる
  • 既存のテンプレートにCSSを追記することでカスタマイズ可能である

このようにエンジニアにとっては嬉しい機能てんこ盛りとなっています。

任意のフォーマットを選択可能

pdfやpptxをはじめ、さまざまなフォーマットの出力に対応しているところも嬉しいです。

画像周りのレイアウトに若干難あり

ただし画像の位置を少しずらしたい、みたいな微調整ができないところが玉に瑕という印象です。とはいえ致命的と言うほどのものではなく、十分ごまかしは効くかと思います。

使い方

vscodeの拡張機能をインストールし、markdownのfrontmatterに追記するだけです。classはファイル単位でなくページ単位で適応させることもできます。

---
marp: true
pagenate: true //ページ番号をつけてくれる
class: //色々用意されている
---

詳しくはQiitaとかに記事があると思うのでそれを参照してもらえたら良いと思います。ちなみにVSCode拡張機能を使っている場合は.vscode/settings.jsonに記述することでテンプレートを適用できます。githubを参照

{
  "markdown.marp.themes": [
    "https://example.com/foo/bar/custom-theme.css",
    "./themes/your-theme.css"
  ]
} 
活用Tips

続いてMarpによるスライド作成において、自分がよく使っているテクニック的なものを紹介します。ちょうど最近このサイトに関連するプレゼンテーション資料を作成したのでそれを例として使います。

Emojiの活用

marpでは:ok_hand:のような感じで、Slackのような形でEmojiを使えます。このEmoji機能のmarpにおける汎用性の高い使い方として、、、

before

例えばこのスライドのような箇条書きはよく使うと思います。このままでも十分ですが、次のようにemojiを使うことでさらに見やすくすることができます。

:one:**資産性**: 〜〜〜
:two:  〜〜〜
:three: 〜〜〜

emoji

画像の挿入

スライド作成において画像を挿入する機会は多くあると思いますが、Marpで提供されている機能にはリサイズ等の基本的な機能に加えて、次のような機能が用意されています。詳しくは公式ドキュメントを参照。

  • エフェクト
  • 画面分割

これらの機能を組み合わせることで、それっぽい感じのスライドを作ることができます。僕がよく使っているパターンを紹介します。

背景画像
![bg](画像パス)

bgとすること背景画像を挿入できます。

sample1

ただし、これだけでは若干文字が見づらいように感じます。

エフェクト

そこで画像に対してエフェクトをかけることができます。例えば次のようにすることでブラーをかけます。

![bg blur](画像パス)

すると文字が読みやすくなり、それっぽい感じになります。

sample2

画面分割

画面を分割することも可能です。右に画像を表示したいときはrightを渡します。縦に分割したいときはverticalを渡します。

![bg right](penguin.png)

pen

占有率の設定

次のように画面の占有率をパーセンテージで渡すこともできます。

![bg right:70%](penguin.pngpe)

pen2

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから