はじめに
こんにちは。エンジニアの前野です。
今回は、面倒に感じがちなスライド作成をどうにか楽にしたい！というテーマになります。
スライド作っているうちにレイアウトやデザインの微調整が気になって、資料を作る目的を見失って没頭なんてことありませんか...? 私はしょっちゅうです。作業自体は好きなんですが非効率的でややストレスですよね。
- markdownみたいにサクサクとスライド作れたりしないかなぁ...
- どうせならVScodeで図とかも作っちゃってさ...
- いっそAIに丸投げして...
などと考えているうちにパッケージ化の道筋が見えてきたので、一旦の経過報告を記事にしたいと思います。
タイトルの通り、markdown × Marp × draw.io × 生成AIによるVScode完結のスライド作成方法になります！
とりあえず作ったものを紹介
まずは今回作ったツールのざっくりとした紹介をします。
ユーザーの直接編集とAIによる自動生成どちらにも対応したVScode完結のスライド作成環境になります。
ユーザーはmarkdownでのテキスト入力 or AIへのプロンプト(作成指示) を出すだけで高速にスライドを作成できます。
また、Gitリポジトリとして社内共有することで、誰でも同じ環境でスライド作成が可能になります。
VScode上での役割とそれぞれのツールの関係をまとめると以下のようになります。
| 役割 | ツール名 |
|---|---|
| テキスト作成 | markdown |
| 作図 | draw.io（VScode拡張機能） |
| スライドデザイン適用 | Marp（VScode拡張機能） |
| 作業自動化・効率化 | 生成AI（Chat GPTやClaudeなど） |
VScodeでは以下のように作図・テキスト作成・スライド確認をまとめて１画面で可能。
GitHub Copilotの画面も開けばAIと対話しながらの作業も可能になります。
作業が完了したらPDFとして書き出してスライド完成です。
ちなみに画像内の図とテキストはAIによる自動生成で、私は一切編集していません！
「桃太郎について５枚のスライドで説明してください。登場人物の関係図をdraw.ioファイルで作成したものをスライドに貼り付けてください。」
と適当に伝えたらほんの２、3分で全部のファイルを作ってくれてびっくりしました。
微調整もテキスト修正だけでサクサクできるので、スライド作成のハードルをグッと下げられる気がしています。
Marpの利用がキモ
とにもかくにもmarkdownでスライド作成を実現できるのはMarpというVScode拡張機能のおかげです。
ここからはMarpの特徴と私の工夫をご紹介します。
拡張機能のインストール
MarpはVScodeの拡張機能として一般公開されています。
VScodeのマーケットからインストールします。
マーケットURL：Marp for VS Code
特徴１：markdown記法に対応
Marpはmarkdown記法で書かれたテキストを装飾してスライドに変換してくれるツールです。
見出しやリストなど一般的なmarkdown記述をするだけでリアルタイムにスライドへ変換してくれます。
メモをとっているだけでどんどんスライドができていく感覚で、効率的にスライド作成が可能になります。
markdownファイルの最上部にmarpの設定を追記することで、スライドをプレビューしてくれるようになります。
ページの区切りは罫線("---")で指定します。
---
marp: true ← trueにするとプレビューがスライドになる(Marp有効化)
---
# スライドのタイトル
## サブタイトル
テキストテキストテキストテキストテキストテキスト
- リスト1
- リスト2
- リスト3
---
特徴２：自作のスライドテーマを適用できる
Marpは内部的にはmarkdownの見出しやリストといった要素に対応したHTMLを出力しCSSで装飾しています。
なので、自作のCSSで独自のスライドテーマを作ることができます。
例えば、会社で使うスライド用のCSSを作成して共有すれば、誰でも同じデザインでスライド作成できるようになります。
Marpの設定で自作テーマCSSを指定することでスタイルを適用できます。
---
marp: true
theme: cu_theme ←自作テーマのCSSを指定
---
# スライドタイトル
## サブタイトル
テキストテキストテキストテキストテキスト
markdownで記述できる基本的なパーツのスタイルを準備しました。
また、スライド1ページごとにスタイルを指定することもできます。
各ページはsectionタグで出力されるので、専用のclassを作成してページごとのスタイルを作成します。
以下のようにmarkdown内でスライドのclassを指定するとページごとのスタイルを適用できます。
HTMLコメントアウト内に _class: [適用したいスライドのclass名] といった形で指定します
---
marp: true
theme: cu_theme
---
< !-- _class: title --> ←適用したいスライドのclassを指定
# スライドのタイトル
## サブタイトル
### 2025/MM/DD 発表者名
---
よく使いそうなレイアウトをいくつか考えてスタイルを作成しました。
特徴３：スニペット登録できる
Marpそのものの特徴というよりはVScodeで使うアプリの特徴という感じではありますが、各スライドのクラス名やテンプレートの記述をスニペット登録することができます。
class名をわざわざ覚える必要がなくなり、2カラムスライドのようにHTMLが混ざったテンプレートなどもすぐ呼び出すことができます。
作業フォルダ直下に ".vscode"フォルダを作り、"XXX.code-snippets"ファイルを作成しjsonを記述することで、その作業フォルダでのみ有効になるスニペットを登録することができます。
今回は、各スライドを呼び出すスニペットとして "slide-XXX" といった名前で登録したので、markdown上で "s" と打つだけで各スライドのスニペット候補が表示されるようになりました。
▼ スニペットの例
{
"Slide Title": {
"prefix": "slide-title",
"body": [
"",
"# タイトル",
"## サブタイトル",
"### 日付 名前",
"",
"---",
],
"description": "タイトル用スライドを作成する"
},
}
draw.ioを使った作図
こちらの拡張機能の特徴も紹介します。
拡張機能のインストール
draw.ioもMarpと同じくVScodeの拡張機能として一般公開されています。
VScodeのマーケットからインストールします。
マーケットURL：Draw.io Integration
特徴１：他メンバーと編集用ファイルを共有できる
draw.ioの編集用ファイルは ".dio" などの拡張子で保存します。
このファイルをVScodeで開くとdraw.ioの編集画面が表示され、拡張機能をインストールしたユーザーであれば誰でも同じ編集環境で作業することができます。
Gitでの管理も簡単なので他のメンバーと編集ファイルの共有がしやすくなります。
特徴２：markdownに編集ファイルを埋め込める
つまり、markdownにdraw.ioの編集ファイルをSVG画像として埋め込むことができます！
この特性のおかげで、
- 本来必要な画像(pngなど)への書き出しが不要
- 編集画面での更新がリアルタイムにスライドの図形に反映される
といった恩恵を受けられます。めっちゃ便利ですね...!
これはdraw.ioの編集ファイルが内部的にはXMLで記述されており、SVGと同じデータ構造となっているためのようです。
生成AIとの連携もしやすい！
Marp・draw.ioを使ったスライド・作図の方法を紹介してきましたが、これらで作成するファイルはいずれもテキストベースのものになります。
つまり生成AIによるファイル生成と相性がよく、スライド作成までの自動化を効率的に実現することができます。
また、生成AIのプロンプトに前提条件を与えることでより精度の高い結果を期待することができます。
弊社では全メンバーがGitHub Copilotの利用が可能になので、".github/copilot-instructions.md" を共有することで作業者全員の前提条件を揃えることができます。
これらを整備することで、プロンプトからスライドのテキストから作図まですべてAIに丸投げすることができます。
もちろん個別にカスタマイズすることも可能です。
今後の展望
ここまでの準備でAIとの連携を含めたスライド作成の効率化はかなりの効果を期待できると感じています。
ただ、VScode環境が整っていてmarkdownに慣れているエンジニア向けのツールとなっているのが現状ではあります。
今後はエンジニアだけでなく全メンバーが気軽に効率的にスライド作成できるツールにしていく必要があります。
例えばDifyなど他のAIツールとの連携も取り入れて、プロンプトのみで編集・書き出しまで完結できるような直感的で誰でも効率的に作業ができる方法がないか検討していきたいと思います。
社内リポジトリとして今回のスライド設定周りのファイルを共有したいと考えているので、他のメンバーからのフィードバックを取り入れながらみんなにとって使いやすいツールにしていきたいです！
さいごに
スライドを楽して作りたい！という動機から構想してきたツールですが、予想以上に効率化が期待できるものとなりそうです。
Marp・draw.io・生成AIとの連携、いずれかの情報がみなさまの興味・関心へつながれば幸いです。
最後まで読んでくださりありがとうございました。
