登壇スライドを Marp でも書けるようにしてだいぶいい感じになってきたメモです。

背景

いままで Google スライドで登壇スライドを書いてて、これはこれでかなり管理できていましたし中身のコンテンツを作るうえでもいい感じに作れていました。

私の Speaker Deck を見ると、こんなかんじ。2025 年 5 月くらいのもの。

いわゆるオープニングの話に集中してねコールのデザインのところ。

Marp も使ってみる

2025 年 2 月くらいから、Google スライドの書き心地も悪くないけど必ず Google ドライブのフォルダに貯まっていくので、手元に取っ散らからないものの自分のデータの所有感が若干弱いし、Google スライドのエディタでスイスイとマウス操作でパーツを編集して作るという意味では PowerPoint と変わらないなぁというところで、もう少し登壇スライド体験をステップアップしたいなと思っていました。

そこで Markdown でスライドが作れる Marp: Markdown Presentation Ecosystem の環境整備に手を付けてイイ感じになってきてます。

自分のスライドって元々、キーワードとサブキーワードでシンプルにページを作って、話していくスタイルです。あとは、下部を図表を載せることで、より詳細を伝えます。あるいはタイトルのメッセージ性に合わせたキャッチアイコンで伝えます。

#AIMTG スライド整えてるけど、最近 Marp でのスライド制作環境も整ってきた。自分用のレイアウト CSS とかページテンプレートとかイイ感じ。 pic.twitter.com/HYP1kqwCf3

— Tanaka Seigo (@1ft_seabass) August 13, 2025

こう考えると、Markdown で書ける Marp でも見出しや画像でなんとかフォローできますし、文章でシンプルに構成を考える流れでスライドが作れるんじゃないかとやってみました。

ということで、出来上がったタイトルはこちら。もともと Google スライド期でもやりたかったデザイン変更がんばりました。CSS でここまで作れるんですね。

オープニングの話に集中してねコールのデザインもいい感じに作れました。

キーワード・サブキーワード・画像を使うレイアウトもいい感じに移植完了！

スライドデータの様子

スライド素材も Markdown と画像で残って Visual Studio Code で書けて Git で管理ができるのはいいですねー。自分のコンテンツとして管理できている感が強いです。

Markdown もこのようにアウトラインを文章で書くように構築できます。画像部分は中央寄せ 1 枚絵を載せる制約はあるものの、複雑な場合は画像内を別途つくればいいので何とかなっています。むしろ複雑になるときは、ほんとにその複雑な図表でいいのか？いうことも考えつつ対応してます。

いろいろと試行錯誤

Joplin で Marp カテゴリであれこれメモしている様子です。もちろん採用されたり採用されなかったりは各メモであるのですが、だいたいこんな感じ。

2 月に構想開始で 5 月に作り込み 6 月に完成というところで 9 月のいま思い出すと、

技術的な取り組みとしては、

• CSSカスタマイズ
  • ヘッダー・フッター、テーマ開発
  • フォント対応（M PLUS Webフォント、PDF出力）
  • もろもろレイアウトの調整・設計
  • 画像レイアウトの試行錯誤
• 開発環境構築
  • VS Code + Marp CLI の対応
  • 画像まわりの管理

が、いろいろ頑張ったところです。CSS は通常の Web ページとは違うのもあり、最近の CSS の学び直しという感じでした。

運用面の検討としては、

• 従来の Google スライドでのテンプレート整理
• 通常デザイン・表紙デザイン・箇条書きデザインの装飾分析・移行検討
• 表紙のバージョンアップ（さっきの新デザイン）

あたりをがんばりました。機会があれば、ピックアップしてまとめたいです。とくに CSS とかページデザイン整理は色々やったと思います。

開発途中では、こういうシンプルなレイアウト（素のCSS）を試したり、

こういった箇条書きをやってみたりしたのも良い思い出です。