1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【相性良すぎ】Marp × Codexでスライドデザインを壁打ちしていたら、37種類のテンプレートができた

1
Last updated at Posted at 2026-07-21

はじめに

こんにちは。皆さんはお仕事でスライド作ってますか。
PowerPointで資料を作っていると、内容は決まったはずなのに、なかなか完成しないことがありますよね。

テキストボックスの位置を揃え、図形の幅を合わせ、文章が増えたら周囲の要素を少しずつ動かす。
なんかいつの間にか配置を直す時間のほうが長くなって、自分は一体何をしているんだ?と思うこと、ありますよね。

生成AIに任せれば、この作業も楽になると思っていました。
実際、最初の数枚を作ってもらうところまでは速いです。

ところが、資料は初稿ができてからのほうが長いんですよね。

  • 「余白を増やしたい」
  • 「結論を目立たせたい」
  • 「このページだけ情報量が多い」

そうした修正を繰り返すには、PowerPointよりも、スライドをテキストとして扱える形式のほうが都合がよさそうでした。

そこで使い始めたのがMarpです。MarpはMarkdown記法でスライドが書けるというものです。友人からはMarpを使いなさいと色々言われていましたが、ずっと使っておらず、ようやく凄さに気づきました。

Codexとデザインを壁打ちしていたところ、1つの資料を作るはずが、最終的には37種類のレイアウトを持つテンプレートになりました。

作成したものはこちらで公開しています。

この記事では、私がどのような流れで、どのようなテンプレートスライドを作ったかなどをご紹介したいと思います。

作成したMarpテンプレート

リポジトリには、Marpのテンプレートと、そのテンプレートを使ったサンプル資料を入れています。

内容 ファイル
37種類のスライドテンプレート templates/marp-master-template.md
テンプレート一覧 templates/TEMPLATE-CATALOG.md
テンプレートのPDF templates/marp-master-template.pdf
GPT-5.6のモデル選びサンプル sample-slides/model-guide.md
GPT-5.6とClaudeの比較サンプル sample-slides/model-comparison.md

表紙、観点の対比、Before/After、まとめなど、いかにも説明資料で使いそうなレイアウトを収録しています。

表紙
image.png

アジェンダ
image.png

対比
image.png

メッセージ
image.png

最初から37種類を作る計画だったわけではありません。ただCodexで壁打ちをし続けて、このようなスライドが欲しいと言い続けていたらこんなことになりました。

なぜMarpは「強い」のか・・・

Marpの強さは、Markdownからスライドを作れることだけではないですよね。
PDFを出力するだけなら、PowerPointやGoogleスライドでも困りませんし。

Marpの強さが出るのは、スライドを作った後です!

  • 文章を直す
  • レイアウトを変える
  • 別案を試す
  • 変更内容を比較する

こうした反復作業を、普通のコードと同じように、しかも軽量に扱えます。

変更内容をGitで確認できる

AIにファイルを修正してもらうと、「何を変えたのか」が気になります。例えばPowerPointをCopilotで変更すると、変更履歴としては正直わかりづらいと思います。
ただ、Marpはテキストファイルなので、Gitの差分をそのまま確認できます。

文章を変えたのか、色を変えたのか、レイアウトを変えたのかを分けて確認できます。
もちろんGitで管理できるので、変更が気に入らなければ戻せますし、別案を残したければ、ブランチやファイルを分けられます。

AIで作業する場合も、Gitでスライドの経緯が残っているならば、現在のMarkdownとGitの差分を読んでもらって、どこまで進み、何を変えたのかを共有できます。

PDFで人間が見た目を評価し、MarkdownをAIが直す

スライドは、Markdownが正しければ完成というわけではないですよね。
文字が収まっていても、読みにくいことがありますし、レイアウト崩れが起きていたり、
レイアウトが崩れていなくても、結論が目立たなかったりすることは多々あります。

そこで、Marp CLIからPDFを出力します。

npx @marp-team/marp-cli slides.md --pdf

PDFを開くと、Markdownだけでは気付かなかった違和感が見えてきますので、あとはそれをAIに編集させて、修正理由をコミットメッセージに残せば、何が気になり、何を直したのかまで記録できます。

この往復が、Marpとコーディングエージェントを組み合わせたときの基本になるわけです。

AIがMarkdownとCSSを編集する
↓
MarpがPDFを出力する
↓
人間が見た目を確認する
↓
違和感を自然言語で伝えて直させる
↓
AIが再び編集する

AIやサービスを乗り換えてもファイルが残る

Marpファイルは、特定の生成AIだけが扱える形式ではありません。人間も使えますし、CodexでもClaude Codeでも、それ以外でも自由に扱うことができます。

例えば、Codexで作ったMarkdownをClaude Codeへ渡せますし、Claude Codeで修正したCSSを、別のコーディングエージェントに読ませることもできます。

AIを使わず、人間がVS Codeで編集しても構いません。

生成AIが変わっても、成果物はMarkdownとCSSとして残りますよね。
Marpでは、AIが作業を終えた後も、普通のファイルが手元に残ります。

制約があるからこそ、いいデザインが標準化される

PowerPointでは、ページごとに図形を自由に配置できます。
MarpにもHTMLとCSSがあるため、かなり自由なレイアウトを作れるには作れます。
ただし、PowerPointと同じように、細かく何でも配置しようとすると、Marpを選ぶ利点が薄くなります。

例えば今回作ったテンプレートは、正直細かく調整ができないのは事実ですが、「いい見た目」で伝えやすい資料になってると思いますし、この制約があるからこそ統一感のある標準的なスライドが作成できます。

Marpが向くと思う資料

ここまで、Marpがいいぞ、Marpテンプレはいいぞ、という内容で語ってきましたが、Marpがすべてのスライド制作に向くわけではないと思います。

図形を自由に配置したい資料、複雑なアニメーションを使う資料、PowerPoint上で共同編集する資料は、PowerPointのほうが作りやすいと思います。あとは少なくとも自分の周りだとMarpを使ってる人は少ないので、そういう環境でも、周りに強制するみたいな形で使用させることは少しお勧めできないかもしれません。

一方で、次のような資料はMarpと相性がよいと感じました。

  • 技術解説
  • 製品やモデルの比較
  • 社内勉強会
  • LTやカンファレンス発表
  • 手順やフローの説明
  • 定期的に更新する報告資料

これらの資料では、構成とデザインの一貫性がある程度必要になると思います。
文章や数値を更新するたびに、位置を手作業で調整したくない。同じ見た目の資料を、次回も作りたい。
こういう条件なら、MarkdownとCSSで管理する利点が出てきます。

まとめ

結局、スライド作りって見た目にもこだわっちゃいますよね。そしてそこに時間を使ってしまう。

内容を変更するたびに配置を直し、別案を試すたびにファイルを増やし、前に作ったレイアウトを探し直す。
その繰り返しに時間を使っていました。
もちろん、PowerPointにはスライドマスターも存在しますが、結局「自由」すぎるんです。

一方でMarpに変えると、内容もデザインも全てがMarkdownのテキストになります。そのおかげで

  • CodexやClaude Codeに修正を頼める、しかも軽量
  • Gitで差分を確認できる
  • 気に入ったページは、次の資料へ持っていける
  • 自由に編集ができすぎず、ある程度の制約がある

という非常に強い、メリットがあると思います。

もちろん今回作成したテンプレートは、一発で完成したスライドが出てきたわけではありません。PDFを開いて、違和感を見つけ、何回か修正し、こういうスライドが欲しい。と壁打ちをし続けてます。その、1つの資料から始まった試行錯誤が、37種類のテンプレートとして残ってくれました。

「PowerPointで位置を直す時間が増えてきた」「Copilotも編集してくれるけれど、ほかに良い方法はないだろうか?」と感じた方は、作りたいスライドを一度壁打ちしながらテキストにしてみる。

みなさんもいろんなデザインを参考にしながら、自分のMarpスライドテンプレートを作ってみるのはいかがでしょうか?

次はこのテンプレートをCodexやClaude CodeのSkillとして登録し、「スライドを作って」と頼むだけで、用途に合ったレイアウトを選んでくれるところまで試してみようと思います。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?