Marp入門

生成AIと作る新時代のスライド

toku345

スライド作成、面倒じゃないですか？

  • PowerPointを開くのが億劫
  • デザイン調整に時間を取られる
  • Gitで差分管理できない
  • 生成AIに頼りづらい

Marpとは

Markdown → スライド変換ツール

従来の悩み Marp なら
PowerPointを開くのが億劫 エディタで即執筆
デザイン調整に時間が溶ける テーマを選ぶだけ
Gitで差分管理できない 完全バージョン管理
生成AIに頼りづらい Claude Code にお任せ！

エディタで即執筆

アプリ不要、Markdownを書くだけ

Markdownで書くだけ

# スライドタイトル

- 箇条書きで
- サクサク書ける

---

# 次のスライド

--- で区切るだけでスライド完成

デザインはMarpにお任せ

テーマ / クラス / 背景で自由自在

組み込みテーマ（3種類）

このスライドは gaia

lead クラス

<!-- _class: lead --> で中央揃え

invert クラス

<!-- _class: invert --> で色反転

背景画像（全体背景）

backgroundImage ディレクティブで背景を設定

<!-- _backgroundImage: url('image.svg') -->

背景画像（分割レイアウト）

![bg right:40%](image.png)

  • right / left で配置を指定
  • パーセントで幅を調整

高度な機能（HTML + CSS）

2カラムレイアウト

  • HTML + CSSで自由配置
  • 比較表示に最適

CSS装飾

  • マーカー風ハイライト
  • サイズ・色の変更も自在

Gitで完全バージョン管理

Markdownだからdiffが読める

Gitで差分管理

- ## 古いタイトル
+ ## 新しいタイトル

- 修正前のテキスト
+ 修正後のテキスト
  • 変更点が一目瞭然
  • PRでレビュー可能
  • 履歴を追跡できる

Claude Codeにお任せ

Markdownだから生成AIと相性抜群

Claude Codeで爆速作成

「こんなスライド作って」で即生成

  • スライド構成の提案
  • コンテンツの自動生成
  • デザイン調整もお手のもの

実はこのスライドも Claude Code で作成

今日から始めるなら

インストール不要で試す

npx @marp-team/marp-cli@latest slide.md -o output.html

VS Code派なら

  1. 「Marp for VS Code」拡張をインストール
  2. .md ファイルを作成
  3. プレビューを開く

Markdownが書けるなら

もうスライドは作れる

公式サイト: https://marp.app/