社内向けの Marp テンプレートを作ってわかった Tips 紹介

Markdown でスライドを作れる Marp 、便利です。
今回アドベントカレンダーにかこつけて社内向けのスライドテンプレートを作成してみました。
本記事では、社内向けに作った Marp のテンプレートと、ちょっとした Tips を紹介します。

Marp とは？

Marp (Markdown Presentation Ecosystem)は Markdown 形式で記述したテキストからスライドを生成できるオープンソースのツール群です。
テキストベースで管理できるため、Git によるバージョン管理や、生成 AI と組み合わせた高速なスライド生成に便利です。
Cursor などの AI エディタ上で「この要件でスライドの章立てと内容を Marp 形式で生成して」と依頼するだけで、そのままプレゼン可能なファイルが出力されるのは純粋な Markdown ならではの強み。

私もプロジェクトの定例ミーティングの議事録を Github 上で管理し、報告資料を Marp で自動生成するなど活用しています。

ただ、活用する上で用意されているテンプレートでは綺麗に仕上がってもオフィシャル感がない...

クラスメソッドさまの Marp テーマ作成の記事 を拝見したこともあり、せっかくですので自分で作ってみました。

今回作ったもの

Marp にはカスタムテーマ機能があり、CSS で独自のレイアウトやスタイルを定義できます。作成した CSS の冒頭に /* @theme テーマ名 */ と記述し、Markdown 側のフロントマター（先頭のメタデータ）で theme: テーマ名 と指定するだけで、自分好みのデザインを適用することが可能です。

今回作成した Marp のテンプレートは、社内で用意されている公式 PowerPoint テンプレートをもとにしています。

実際に公式テンプレートが利用されているスライド

こちらを参考に、タイトル、セクション区切り、2カラム、プロフィールなどのレイアウトを _class 指定で切り替えられるようにしています。

出来上がったものはこちらです。あんまりちゃんとサイズとか位置とか合わせられてないのですが、それっぽい感じにはなっていそう。でももうちょっとちゃんとしないとやっぱりダメか...

PowerPoint のテンプレート	Marp のテンプレート

制作 Tips

ここからは制作 Tips です。Marp のテンプレートを作るうえでちょっと工夫した点を紹介したいと思います。

① PowerPoint 風のフォントサイズ自動調節機能

Marp で微妙に困るのが「枠内に文字が収まりきらない」問題です。AI さん、割と自由に文章を書くので分量やフォントの調節に手間がかかる...ということで、PowerPoint のように内容量に合わせて自動で縮小される仕組みを JavaScript で実装しました。
Marp はオプションで有効にすると Markdown 上に書いた <script> タグが動きます。

/**
 * class="fit" が指定された要素を、親の高さに収まるように scale で縮小する
 */
(() => {
  const transformOrigin = "top left";
  window.addEventListener("load", () => {
    const fits = document.querySelectorAll(".fit");
    for (const fit of fits) {
      if (!fit.scrollHeight) continue; 
      const scaleRatio = fit.clientHeight / fit.scrollHeight;
      fit.style.transformOrigin = transformOrigin;
      fit.style.transform = `scale(${scaleRatio})`;
    }
  });
})();

このスクリプトをスライドの Markdown ファイルの冒頭に埋め込み、縮小したいブロックに <div class="fit"> を指定することで、文字あふれを自動で回避しています。
色々とツッコミどころの多い実装なのですが、案外こんなもんでも十分だったりしました。

ちなみに、このスクリプトは調節する要素の clientHeight がレイアウト上決まっていること、overflow: scroll などではみ出した部分まで含めた高さを scrollHeight で取得できることが前提です。
今回のテンプレートの CSS では以下のようにヘッダーとフッターが固定され間の要素のサイズが決まる grid レイアウトにしています。

section {
  width: 1280px; /* width と height は marp の設定で上書きされることがあります */
  height: 720px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  grid-auto-flow: row;
}

② ページ番号を footer 要素の中に入れ込む

Marp の標準的なページ番号表示は位置を調整しづらいです。
そこで、CSS 変数を利用して、フッターテキストと並べて表示できるようにしました。

Marpでは、Markdown の先頭で paginate: true を設定しておくと、スライドの大枠である section 要素の data-marpit-pagination 属性にページ番号が自動で付与されます。これを CSS 変数に一旦収めて、footer 要素の疑似要素に引き継いでいます。

/* themes/asahi.css */

section {
  /* section 属性からページ番号を取得して変数に格納 */
  --page-number: attr(data-marpit-pagination);
}

footer::after {
  /* フッターの疑似要素で変数（ページ番号）を表示 */
  content: var(--page-number);
  display: inline-block;
  font-size: var(--font-size-exsmall);
}

こうすることで、フッター右側にページ番号を自然に配置することができます。

5. まとめ

今回、自分用（社内用にもなるといいな）の Marp テンプレートを作成したことで、使い慣れた Cursor でよりスライドを効率的に作成することができるようになりました。

スライド作成、大好きな作業の一つではあるのですが、本質的な仕事かと問われると悩むところです。
こういう時間が溶けていく作業は AI に任せて、より価値のある活動に注力していかなければならないのです。

今後も AI 活用をさらに進め、開発体験の向上に努めていきたいと思います。