見出し画像

[MARP] Markdownでプログラマブルにスライドを作成しよう

M橋D輔

こんにちは、キン担ラボの本橋です。

プレゼン資料の自己紹介ページです

今回は僕がkintone Caféやその他のイベントでプレゼン資料を作る際に使っているMARP（マープ）について紹介したいと思います。

MARPの使用を前提として書きたいことがあって、そのためにまずはMARPについて紹介しておこう、という趣旨です。


MARPはスライドを手軽に作るための書式です。元になるデータをMarkdown形式のテキストで作成して、変換をかけると装飾の効いたスライド資料（PDF, PowerPoint, HTML, JPG形式を選べます）に早変わりします。

テキストもvscode上で編集すればリアルタイムにプレビューしてくれます。プレビュー画面を眺めながら、装飾についてはあまり細かく気にしないでスライドの中身に集中して作り込んでいくことができます。

MARP作成中の画面です

つい最近、GoogleドキュメントもMarkdownに対応したそうです。Markdownは色んな場所で使える場面が増えていくと思うので、このタイミングで使えるようになっておいて損のないテクノロジーと言えます。


MARPの紹介

MARPではMarkdownのシンプルな記法を使用して、プレゼンテーション用のスライドを作成できます。Markdownを知っているとすんなり手を付けられることもあってエンジニアに人気があります。

難しいんでしょ？　なんて心配はご無用です。必要なときに資料を見ながら書けばいいので学習コストなんてあってないようなもの。なんならChatGPTに『これMARP形式で整えて』とでもプロンプトすれば整形してくれます。

小中学生くらいだともしかしたら難しいかもしれませんが、高校生・大学生くらいならMARPは簡単に使いこなせます。#を一つつけて大見出し、##とふたつ重ねて中見出し、###とみっつ重ねて小見出し、くらいなものです。あとは頭に - つけたら箇条書き。見出しと箇条書きが書けたら形にできるかと思います。

プレゼンテーションを披露する機会も多くなってきてると思うので、ぜひMARPを使った資料作成に挑戦してみてください。

MARPの始め方

編集に使うエディタはvscodeが最高だと思います。vscodeでMARPスライドを作成する手順を紹介した記事は世の中にたくさんあって、なかでもこちらが秀逸でしたのでご紹介。

もう少し踏み込んで、自分でCSSを書いてスタイルを決めていきたいよ、という方はこちらの記事もどうぞ。

変換だけならCLIから実行することもできます。

慣れてくるとCLIも便利です。スライド出力をバッチファイルで自動化したり、HTMLのスライドにOGP画像を指定したいときなんかにmarp-cliのお世話になっています。

そのあたりもおいおい紹介していきたいと思います。

markdownのサンプル

先日プレゼンテーションで使ったスライドをサンプルにご紹介します。作成したスライドはこうしてhtml形式に変換してgithubに公開しています。

サンプルの２ページ目、自己紹介はこんなスライドです。

このページは以下のMarkdownテキストで作成されています。

# 株式会社モノサス

## キン担ラボ

**『kin**toneの**担**当者を楽にする』

そんな技術開発**ラボ**をしてます。

![bg fit right:40%](./img/kintone_cafe_plate_large.png)

それぞれの行を解説するとこんな具合です。

  • # 株式会社モノサス

    • H1見出し

  • ## キン担ラボ

    • H2見出し

  • **『kin**toneの**担**当者を楽にする』

    • kin と 担 を強調

  • そんな技術開発**ラボ**をしてます。

    • ラボ を強調

  • ![bg fit right:40%](./img/kintone_cafe_plate_large.png)

    • 以下のスタイルで画像を差し込む

      • bg

        • 背景画像として

      • fit

        • 画面全体を100%としたときに

      • right:40%

        • 右側40%の領域に

      • ./img/kintone_cafe_plate_large.png

        • このファイルを表示

どうです。簡単そうじゃないですか？

HTML化して公開しよう

今回紹介したのはMarkdownからスライド資料を作るMARPです。MARPとは別のツールとして、MarkdownからHTMLページを作成するpandocというツールもあります。

僕は自作のスライド資料や、自作ツール類をまとめたリンク集を作成しています。リンク集自体の作成はpandocを使っています。

pandocで生成したHTMLをgithubに保存して、そのHTMLをgithub pagesを利用してWebサイトとして公開しています。更新のたびにpushすればよいので、大した手数も不要でgithubに公開することができてとても便利です。

MARPとPandocの２つを組み合わせて使うとほとんどの資料作成をMarkdownベースで作成し、HTMLとして公開できることになります。

デザインを整えるのも、いまどきはChatGPTなどLLMの力を借りれば好みのデザインを作ることも用意になりました。

定期アウトプットのお供にMARPとPandocをどうぞ。


この記事が気に入ったらサポートをしてみませんか？