WebDesigner's Memorandumウェブデザイナーの備忘録

Marpで既存Markdownファイルを使ったスライド作成時に、見出しごとにスライドを分割する方法

MarpはMarkdownファイルをもとにしてスライドを作れるツールです。

ただ、Marp独自の記述があったり、あとはスライドを分割するときは「---(ハイフン3つ)」で区切る必要があります。

既存Markdownをスライド化するときに、このハイフンで区切っていかないのが地味に面倒です。
ただ、設定すれば見出しでスライド分割できるようになります。

見出しでスライド分割する

Marpの設定の下に、下記の「headingDriver」を追加するだけで、見出しでスライド分割できます。

<!--
headingDivider: 1
-->

ちなみに「headingDriver」が「1」の場合は見出し1(#)で分割して、「2」の場合は見出し2(##)で分割されます。

---
marp: true
---
<!--
headingDivider: 1
-->
# 見出し1ごとにスライドを分割する

# スライド2ページ目
見出しでスライドが分割されました

# スライド3ページ目
サンプルテキスト

見出しでスライド分割

このように、既存のMarkdownファイルを使って急遽スライドを作りたいときは、先頭に必要なMarpの設定と「headingDriver」の追加で済みます。

既存ファイルをスライド化するメリット

プロジェクトにメンバーが新しく入って、「プロジェクトに関して新しいメンバーに軽く説明して」と言われたときに、「README.md」を開いてそのまま話すよりもスライド化して画面共有しながら話すと、相手が把握しやすいですし親切です。

特にオンラインミーティングの場合は、画面共有でMarkdownファイルを映しても、テキストが大量に入っていると非常に見にくいです。

また、大量のテキストを写しながら話を進めていると、多少理解できない部分があっても話が止めにくく「この先の話を聞いていけば理解できるかも」「これだけ書いてあったらあとで見返せば分かるか」で理解しないまま話が進んでしまっていることもあります。

スライド化されていると単純に見やすいですし、文章がある程度のまとまりごとに区切られているとその部分にだけ集中できます。
次のスライドにいく前に質問がないか聞くと、そのスライド内で分からないことがあるかどうか考えるので、その場で質問がきて解決につながりやすい気がします。

かといってそのためにわざわざスライド作成に時間を多く使うのは本末転倒なので、もともと準備していたMarkdownファイルをMarpを使ってスライド化します。

著者について

プロフィール画像

サイトウ マサカズ@31mskz10

1997年生まれ。2016年から専門学校でデザインについて勉強。卒業後は神戸の制作会社「N'sCreates」にウェブデザイナーとして入社。このブログでは自分の備忘録も兼ねて、ウェブに関する記事や制作環境を効率的に行うための記事を書いています。

Twitterをフォロー Facebookでいいね