Zenn
🛝

あなたにMarpを使わせたくなる記事

に公開
slide
tools
Marp
発表
tech

Marpとは

Marpは、Markdownをプレゼンテーションスライドに変換するためのオープンソースツールです。
エンジニアに特に人気があり、テキストベースでスライドを作成できるため、Gitでのバージョン管理や共同編集が容易になります。
私自身、普段Google Slideでスライドを作成していたのですが、Gitで管理したいなーとか、文字ベースで作れたら嬉しいなーと思っていたところ、Markdownで作れるというめちゃくちゃ良いツールを見つけて使ってみたところ、めちゃくちゃ良かったので紹介しようと思いました。

公式はこちら。
https://marp.app

良い点

Markdownで書ける

スライドをMarkdownで作成できるという点がとてもエンジニアフレンドリーです。
Markdownなのでテキストベースということで、Git で管理もできます。
つまり、GitHub Actionsなどにも組み込める訳です。
今のところ、CIに組み込むことは想定できていないが、テンプレートを作成する時などをCIで構築とかすれば、手軽にスライドの土台ができることでしょう。

CSSによる装飾ができる

Google Slideでも作ることができますが、CSSによる自由度の高いアニメーションもつけることができます。
当然アニメーション以外にも、背景色や文字色などの装飾もできれば、before,afterによる装飾もできるので、表現の自由さはかなり高いです。
やはり、プレゼンというのは聴衆の注意を惹きつけることも重要なポイント。
カッコいいアニメーションや装飾をして華麗なプレゼンをキメられます。

特に生成AIを使うことで、スタイルも非常に楽につけることができるので生成AIとの相性も抜群ですね。

以下のようなヘッダーをつけることでMarpのMarkdownということをMarpが理解します。
そこにstyleなどをつけることができます。

---
marp: true
theme: default
class: lead
paginate: true
backgroundColor: white
header: "**Marpではじめるスライド作成**"
footer: "Marp Sample Presentation"
style: |
  section {
    font-family: 'Helvetica', 'Arial', sans-serif;
  }
  h1 {
    color: #0078D7;
  }
---

以下のようにアニメーションをつけることもできます

style:
  /* アニメーションの定義 */
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes slideIn {
    from { transform: translateX(-50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }

  /* アニメーション付きのクラス */
  .animate-fade-in {
    animation: fadeIn 0.5s ease-out forwards;
  }

  .animate-slide-in {
    animation: slideIn 0.5s ease-out forwards;
  }

ここら辺のアニメーションもAIと組み合わせるとダイナミックなスライドを作ることができるので、うまく使いこなすとより注意の引けるスライドが作れるようになります。

CSSのclassを使う方も簡単で、以下のように使うクラスを指定するだけです。

---

<!-- _class: default -->

# 自己紹介

<div class="columns">

<div class="animated-list">

- 所属：XXX 株式会社
- 役職：シニアエンジニア
- 専門：フロントエンド開発

</div>

![プロフィール画像を入れる場所](https://placehold.jp/300x300.png)

</div>

---

上記記述でできるスライドがこちら

スライドのサンプル

CLIやVSCodeのプラグインもある

CLIにより、プレゼンテーションモードが使えます。

CLI

npmでグローバルインストール

npm install -g @marp-team/marp-cli

エクスポートの多種多様さ

エクスポート機能も多種に渡るので、サンプルを書いておきます。

# HTMLへエクスポート（デフォルト）
npx @marp-team/marp-cli slide.md -o slide.html

# PDFへエクスポート
npx @marp-team/marp-cli slide.md --pdf -o slide.pdf

# PowerPointへエクスポート
npx @marp-team/marp-cli slide.md --pptx -o slide.pptx

# 画像へエクスポート（最初のスライドのみ）
npx @marp-team/marp-cli slide.md --image png -o slide.png

# 全スライドを画像として出力
npx @marp-team/marp-cli slide.md --images png

プレゼンテーションモードが神

よく発表する時、パソコンの画面をでかいディスプレイに投影して話をすることが多いと思います。
そんな場面に対する画面が2つ用意されています。
1つはプレゼンテーションの方を聴衆に見せるための一般的なスライド画面
もう1つが、スピーカー用の画面になります。

スピーカー用の画面は以下のボタンから開くことができます。

スピーカー画面への動線

スピーカー用の画面では、今何分話しているかが分かります。

開始から何分か確認できる

スライドの横にあるスクリプトを確認することができます。

正直、この機能がMarpの真骨頂というべき機能だと思っています。
書き方も非常にシンプルで、HTMLのコメントのように書くことで、スライドの横にスクリプトが出てきます。

mdファイルにコメントで記入

スピーカー画面でスクリプトとして確認

VSCodeのプラグイン

プラグインによりプレビューを見ながら作ることができます。

VSCodeプラグインによるプレビュー

使い方も非常にシンプルなので、普段のようにMarkdownを書く感覚でスライドができていきます。
私はCursorを使ってるので、MarkdownもCursorと共同で作成したりできるので非常に相性が良いです。

サンプル

最後に、軽くこの記事をAIにスライド化してもらいました。

sample.md
---
marp: true
theme: default
class: lead
paginate: true
backgroundColor: white
header: "**Marpではじめるスライド作成**"
footer: "Marp Sample Presentation"
style: |
  section {
    font-family: 'Helvetica', 'Arial', sans-serif;
  }
  h1 {
    color: #0078D7;
  }
  code {
    background-color: #f0f0f0;
    padding: 0.2em 0.4em;
    border-radius: 3px;
  }
  .columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
---

<!-- _class: lead -->
# **Marpではじめるスライド作成**
## Markdownでプレゼン資料を作ろう

![bg right:40% 80%](https://marp.app/assets/marp.svg)

---

# Marpとは？

- Markdownでプレゼンテーションを作成するためのエコシステム
- テキストベースでスライドを作成・管理できる
- Gitで変更履歴を管理できる
- CSSでスタイルをカスタマイズ可能
- HTML, PDF, PPTXなど多様な形式でエクスポート

<!-- 
発表者ノート：
- Marpの名前はMarkdown Presentationから来ていることを説明
- エンジニアとの親和性を強調する
-->

---

# 基本的な書き方

- スライドの区切りは `---` で表現
- Markdownの基本構文がそのまま使える
- ヘッダー、リスト、コードブロックなど

```markdown
# これはスライドのタイトル

- 箇条書き1
- 箇条書き2

---

# 次のスライド

コードブロックの表示

TypeScriptのサンプルコード：

// 非同期データ取得関数
const fetchData = async (url: string): Promise<any> => {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('データの取得に失敗しました:', error);
    return null;
  }
};

画像の使い方

背景画像

bg

背景画像（位置と比率の指定）

bg right:40% 80%

  • 右側に配置 (right)
  • 横幅40%を使用 (40%)
  • サイズは80% (80%)

複数の背景画像

bg left:33%
bg
bg

<div class="columns">

左カラム

  • GridレイアウトでCSSを使った
  • 2カラムのレイアウト
  • 複雑なレイアウトも可能

右カラム

// 配列を合計する
const sum = (numbers: number[]): number => 
  numbers.reduce(
    (acc, current) => acc + current, 
    0
  );

</div>

テーマの切り替え

このスライドだけテーマを反転させる例

  • <!-- _class: invert --> を使用
  • スライドごとに見た目を変更できる

アニメーション

  • アニメーション効果は箇条書きに対応
  • Marpではアスタリスク記法でアニメーションになる
  • 順番に表示される項目
  • 最後の項目

Marpのエコシステム

  • Marp Core: 基本エンジン
  • Marp CLI: コマンドラインツール
  • Marp for VS Code: Visual Studio Code拡張
  • Marp Web: オンラインエディタ
  • Marp API: プログラムからの利用
# HTMLに変換
npx @marp-team/marp-cli slide.md -o slide.html

# PDFに変換
npx @marp-team/marp-cli slide.md --pdf -o slide.pdf

まとめ

  • Markdownでスライド作成が簡単に
  • バージョン管理と相性抜群
  • 多様な出力形式
  • CSSでカスタマイズ可能
  • プログラマーにとって理想的なプレゼンツール

https://marp.app/

関連ツール

Marpで使えるいくつかツールもすでにあるようで、その紹介も最後にしておこうと思います。

MarkdownのメモツールであるObsidianでのプラグイン

https://zenn.dev/jichoup/articles/b97ebe6b2eaee7

GitHub Actionsから自動生成するスクリプト

https://zenn.dev/fooqoo/articles/d984b288bdfa4e

まとめ

新しいツールを学ぶことは楽しみでもあり、大変な面もあると思います。
MarpはMarkdownという親しみのある記法を用いて、さらにはエンジニアの発信欲を駆り立てる非常に良いツールだと思います。
CLIもあるのでいろんなツールに組み込めるのも非常にエンジニア向けのツールと思うので、これを機にMarpを絡めたツールを作るのも良いのではないでしょうか。

Discussion