45分登壇で75%効率化したMarkdown+生成AIスライド作成術

KDDIアジャイル開発センターのpiyonakajimaです。
突然ですが、あなたは登壇スライドの作成にどれぐらいの時間をかけていますか？

6/21-22に開催されたScrum Fest Osaka 2024に登壇した際、Markdown+生成AIを活用して登壇スライドを作成しました。その際、45分の登壇資料作成を75%効率化（自分比）できました。
普段からMarkdownで資料を作成している方からすると、これまで時間かけすぎやろ、というツッコミが聞こえてきそうですが、登壇資料の作成時間に悩まれる方は沢山いらっしゃるのではないかと思います。今回はこの時に実施した工夫をお話します。
以下がMarkdown(Marp)と生成AIを使って執筆した45分の登壇資料です。一部PowerPointで作図した過去資料から流用しています。

Marpでは、たとえば以下のようなmarkdownを書くと、

---

# 象、死んだ魚、嘔吐とは

## Airbnb ジョーゲビア氏が提唱したふりかえり

> ①「象」は口に出さないけれど全員が知っている真実。
> ②「死んだ魚」は、早くごめんなさいをしたほうがいい悩みのタネ。ほっておくと事態が悪化する。
> ③「嘔吐」は、人々が断罪されずに胸の内を話すこと。つまり「ぶっちゃけ」。

## <img src="./img/piyonakajima_icon.jpeg" class="icon"> <div class="balloon-left">これやったほうがよい！！！！</div>

## 「前向きにならなきゃいけない」と思っている人はその事を言い出せない（実体験）

---

以下のような資料が生成されます。

本記事では具体的なやり方よりも考え方にフォーカスして記載します。具体的にどうやってやるか、の部分については詳細な記事を書かれている方がいっぱいいます。記事を引用しているのでそちらをご参照下さい。
また、登壇した際の資料のレポジトリと記載したMarkdownも乗せておきますので、必要に応じて見ていただけると参考になるかと思います。

はじめに

今年Scrum Fest Osaka通称スクフェス大阪での発表準備は、私にとって大きなチャレンジでした。スクフェス大阪では、オープンプロポーザル形式が採用されています。登壇内容をproposalと呼ばれる形式にて申込し公開された上で、コミュニティの運営をされている方によってプログラムが選ばれます。
今回私は勢いでスクフェス大阪のproposalを書いたものの、忙しさのために辞めようと考えていました。しかし、手違いでproposalが候補に残り、運営の方(沖縄トラック)に採択頂くことになりました。登壇については迷ったのですが指名を頂いたからには話したいと思いました。しかしながら、今回は業務やプライベート（の曲作り）がなかなか逼迫している状況で資料作成の時間が取れそうにありませんでした。45分の登壇は大変です。何故ならば１回の練習に45分かかるからです。

PowerPointやGoogle Slideによる資料作成ではとても間に合わないと感じ、別の方法を模索しました。そこで思いついたのが、Markdownと生成AIを使ったスライド作成でした。この方法を試したところ、従来の方法よりも爆速で資料を作成することができました。

Marpとの出会い

スクラムフェス大阪での発表準備中、隣のチームに生成AIを使って自動で適当なプレゼン資料を試作している人がいました。彼が使っていたのがMarpでした。私もこのツールに興味を持ち、調べてみることにしました。

Marp（Markdown Presentation Ecosystem）は、Markdown形式でプレゼンテーションスライドを作成できるツールです。シンプルなMarkdown記法を使ってスライドを作成できるため、効率的で直感的なスライド作成が可能です。また、テーマやスタイルのカスタマイズが容易で、スライドのデザインも自由に調整できます。
また、Markdown形式のため、生成AIを使ってコンテンツを簡単に生成・編集できます。

備考：Slidevも検討した

同時にSlidevという別のツールも検討しましたが、今回は、シンプルで使いやすそうなMarpを採用しました。Slidevでもよかったように思っています。GitHubのStar数的にはこっちの方が多いようです。

Markdownと生成AIを使ったスライド作成術

資料作成において、私は「経験をLearning Outcomeにして書く」「プロットから書く」ことを大切にしています。

経験をLearning Outcomeにして書く

LAPRASのことねさんが以下の資料で発表された内容です。
自分の経験からLearning Outcome(=読者が見ることによって得られるメリット）を考えてから書くという考え方です。

プロットから書く

弊社のテクニカルエバンジェリストみのるん氏が以下のQiita記事にて記載しているやり方を大切にしています。いきなり資料本文から作り込むのではなく、Markdownでアジェンダを書いていきます。

この２点を重視しながら、生成AIと会話をするように資料を書いていく

例えばですが以下のようなプロンプトを書き、生成AIと雑談をしながらまとめていきます。

私が体験した「象、死んだ魚、嘔吐」を会社内外に広めた経験から登壇資料をmarpで作成します。
Learning Outcomeを書くために私に問いをいくつか投げかけて下さい。
私が回答したらそれを元に登壇資料をmarpで記載してください。

このように、生成AIを壁打ち相手として活用することにより、効率的に構成案を作成し、スムーズに資料作成が進みました。エディタはCursorを使い、生成AIに悩み相談しながらmarkdownを埋めていきました。Cursorを使うことで、執筆原稿のMarkdownを丸ごと生成AIに読み込ませて会話することができます。（以下はイメージ画像）

その他工夫した点

以下はスライドのデザインや作文で心がけた点です。

自社のスライドテンプレートから背景画像を作成する

さらに、自社のスライドテンプレートを作成するために、PowerPointの背景をpng画像で出力し、Marpで使用するスライドに重ね合わせました。これにより、統一感のあるデザインを保ちながら、Markdownでのスライド作成が可能となりました。（上記レポジトリは背景スライドのみ .gitignore しています)

デザインを必要以上にいじらない（Markdownで表現しにくい表現はつくらない）

Google SlideやPowerPointだとつい、高度なグラフィックにこりたくなりますが、敢えて作り込まないように心がけました。

それでもこだわりたい部分は生成AIにCSSで作らせる

一方で、こだわりたい部分（今回の場合、出会った人との会話シーン）はCSSで独自デザインを作りました。
このデザインも生成AIに頼り、以下のようなスライドを作成しました。

以下は吹き出しのCSSの例です。

吹き出しのCSS(長いので折りたたんでます)

/* 吹き出しのスタイル */
.balloon-left {
  position: relative;
  display: inline-block;
  margin-left: 64px;
  padding: 32px 64px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  background: #e0edff;
  border-radius: 20px; /* 角を丸くする */
  text-align: center;
}

.balloon-left:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -60px;
  margin-top: -15px;
  border: 15px solid transparent;
  border-right: 50px solid #e0edff;
}

.balloon-left p {
  margin: 0;
  padding: 0;
}
.balloon-right {
  position: relative;
  display: inline-block;
  margin-right: 64px;
  padding: 32px 64px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  border-radius: 20px; /* 角を丸くする */
  background: #e0edff;
}

.balloon-right:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -15px;
  border: 15px solid transparent;
  border-left: 50px solid #e0edff;
}

.balloon-right p {
  margin: 0;
  padding: 0;
}

上記CSSを活用しMarkdownで記載したスライド本文が以下です。

---

# ぶっちゃけて話せるようになった Fun Done Learn とその理由

## 業務が終わり雑談をしていたある日、会話の流れ。

## <div class="balloon-right">…で、結局ぴよさんはどうしたいの？</div> <img src="./img/person.png" class="icon">

## <img src="./img/piyonakajima_icon.jpeg" class="icon"> <div class="balloon-left">…ふりかえりで言いたいことがいえない、この状況がつらいです</div>

同じように沈黙は流れた。でもその場にいた全員が最後まで話を聞いてくれた
それをきっかけに少しずつオープンなコミュニケーションができるようになった

---

実際にできあがったスライドが以下の画像です。

オチを考えてもらう

最後どうオチをつけるか考えられていませんでした。生成AIに丸投げした結果生まれたオチが以下のとおりです。

---

# 象死んだ魚嘔吐で、絶対ぶっちゃけた話ができる？

## 答えは No

- それぞれ言えないことはある
- 何をやったとしても皆がぶっちゃけている保証はない

## でも、大切なのは「ぶっちゃけて話せる場」を作り続けること

- 一度で完璧な場は作れない
- 継続的にカイゼンしていく姿勢が重要
- また気づいたら proposal 出します

---

納得感があったので、少しだけ修正してそのまま採用しました。（資料の話になりますが、誰もがぶっちゃけられるような場を作れた保証はないですが、状況に合わせて試行錯誤しつづけることが大事だと思っています。）
最終的にXでそこに共感していただいた方がいました。生成AIが作成した部分ではありますが、自分が今回のproposalで伝えたかった、今も悩み続けている部分だったので嬉しかったです。

他にも資料がすべてMarkdownになっているため、Cursorを使って改善点の指摘を依頼すると、足りていない観点をフィードバックしてくれます。すべて鵜呑みにせず、自分の考え方と合致するフィードバックのみカイゼンしていきました。

Marpで書いた効果

こうして完成したスライドは、従来の方法に比べて大幅に時間短縮できました。
昨年登壇した資料では作成に32時間かかりましたが、1日2時間の4日間、計8時間で完了しました。
これは時間にして約75%の効率化を実現したことになります。効率化できた理由として、Markdownのため内容を書くことに集中できる、過剰なデザインにこだわらなくてすむ、Cursorで書くことでリアルタイムに生成AIに壁打ちしながら書けたからなのではないかと考えています。
作成したスライドはスクフェス大阪で発表し、その後オンラインでも共有されました。結果として6/29現在に4.3k閲覧され、それなりに多くの人に興味を持ってもらうことができたように思います。（前提ですがPageViewの数が内容の質を表しているわけではありません）
私はまだできていませんが、VSCodeのLiveshareを使えば、モブプログラミングのように登壇資料を作ることも可能です。PowerPointやGoogle Slideも今後Microsoft CopilotやGeminiによって同様の体験で執筆できる日がすぐ来る（来ている)と考えていますが、Markdown+生成AIで書く体験は是非感じてみて頂きたいです。もし興味を持った方がいたら試してみて下さい。