はじめに

少し前にスライド作成用にMarp CLIを導入した。

その後、何種類かスライドを作って、楽な方法がある程度わかってきた。慣れは必要ではあるが、本当に早くスライドを作ることができる。まだ自分の中では発展途上だが、知ってよかったことを書いておく。

詳細な使い方に関してはGitHub - marp-team/marp-cliを見るのが一番なので本記事では解説しない。また、基本的なマークダウン記法に関しても解説しない。

Marpとは

マークダウンで記載するだけできれいなスライドを作ることができるツールである。VS Codeの拡張機能も存在するが、CLIの方がエディターを選ばない利点がある。私はマークダウンをObsidianで記載するのでMarp CLIを使用することにした。

↑スライド例

必要な環境

  • Node.js
  • marp-cli
  • ブラウザ(Chrome、Edge、Firefoxのいずれか)
  • Libre Office(編集可能なパワポ出力が必要なら)

ディレクトリ構成

私はスライド用のフォルダを作って以下の通りに配置している(Obsidian内)。

slides/
├── attachments/    # 画像ファイル等が保存されるフォルダ
├── themes/         # CSSテーマファイルが格納されるフォルダ
│   ├── academic.css
│   └── academic_custom.css
└── *.md           # Marpスライド用のマークダウンファイル(ルートに配置)

サーバーコマンドだけ知っていればOK

marp -s "path/to/slide/folder" --allow-local-files --theme "path/to/theme.css"

コマンドラインを使うのは若干面倒に思っていたが、実は固定のサーバーコマンドだけで事足りることを知った。サーバーコマンドを実行すると、localhost:8080にサーバーが立ち上がる。--allow-local-filesはローカル保存された画像を使用する場合に必要で、--themeは任意である。

localhost:8080を開くと上記ページが表示されて、スライドをリアルタイムで編集しながら確認することができるし、pdfやpptxへの変換も可能となっている。

Marp特有の記法

基本的なマークダウンで対応できるが、スライド作成のための特有の記法がある。

academic_custom.css特有の記法

Academicテーマを若干改変してacademic_custom.cssを作成した。

編集可能なパワポ出力

Marpはパワポ出力に対応しているが、出力したスライドは画像として埋め込まれた状態なので、PowerPoint上での微調整はできない。ただし、LibreOfficeをインストールした状態で、変換コマンドに下記のオプションをつけると編集可能なPowerPointファイルに変換できる。

--pptx-editable

しかし、まだEXPERIMENTALな機能と記載があるように、レイアウトが若干崩れる。そもそもMarpのコンセプトからして、微調整が必要なスライドは最初からパワポで作れば良いような気がする。

おわりに

パワポで色やフォントを悩む時間があったら、Marpでコンテンツに集中した方が良い。マークダウンの簡潔さが、思考をクリアにしてくれる。

慣れは必要だが、一度慣れてしまえばスライド作成の概念が変わる。LLMとの相性も抜群で、「この内容を5枚のスライドにまとめて」と言えばほぼそのまま使える。ただし、レイアウトを意識したプロンプトは必須だろう。

Marpは、本当に大切なことに時間を使わせてくれるツールだと思う。