【効率化】MarpとClaudeで実用的なスライドを作成する方法
はじめに
最近、AIを活用したスライド作成の新しい方法として、「MarpとAI」の組み合わせがXなどで話題になっています。
従来のスライド作成では、PowerPointやGoogle Slidesが一般的でした。ChatGPTなどのAIツールを活用する方法も登場しましたが、ビジネスで使えるクオリティやデザイン面で改善の余地がありました。
MarpとChatGPTやClaudeなどのAIを組み合わせる方法には、以下のような特徴があります：
高品質なコンテンツ生成が可能
デザイン面でも優れている
編集がしやすい
本記事では、MarpとClaudeを使ったスライド作成の方法を解説していきます。
それでは早速みていきましょう！
Marp（Markdown Presentation Ecosystem）は、Markdownを使ってプレゼンテーションスライドを作成できるツールです。日本人開発者のYuki Hattori（@yhatt）さんによって開発されました。
Marpを使うと、簡単なテキスト形式（Markdown）でスライドの内容を書くだけで、美しいプレゼンテーションを作ることができます。プログラミングの知識がなくても、誰でも簡単に使いこなすことができるのが特徴です。
Marpは、Visual Studio Code（VSCode）の拡張機能として利用できるため、普段使っているテキストエディタ上でスライド作成が可能です。また、作成したスライドはPDFやPowerPointファイルとして出力できるので、様々な場面で活用できます。
実際に作成したスライド：
VS Codeへの導入方法
Visual Studio Code（VS Code）は、無料のコードエディタです。Marpを使用するには、まずVS Codeをインストールし、その後Marp拡張機能を追加します。以下に手順を説明します。
ステップ1: VS Codeのインストール
VS Code公式サイトにアクセスします。
お使いのOSに合わせたインストーラーをダウンロードします。
ダウンロードしたインストーラーを実行し、画面の指示に従ってインストールを完了させます。
ステップ2: VS Codeの起動
インストールが完了したら、VS Codeを起動します。
ステップ3: Marp for VS Code拡張機能のインストール
VS Codeの左側にある拡張機能アイコン（四角が4つ並んだアイコン）をクリックします。
検索バーに「Marp for VS Code」と入力します。
検索結果に表示された「Marp for VS Code」の「Install」ボタンをクリックします。
ステップ4: インストールの確認
インストールが完了すると、「Install」ボタンが「Uninstall」に変わります。
これでMarp for VS Codeのインストールは完了です。
以上で、VS CodeへのMarpの導入は完了です。次のセクションでは、実際にMarpを使ってスライドを作成する方法を説明します。
Claudeを使ったスライド内容の執筆とMarpでの作成方法
スライドの内容作成には、ChatGPTやClaudeなどのAIを活用していきます。今回はClaude 3.5 Sonnetを使用します。
ステップ1: プロンプトの作成
効果的なスライドを作成するために、適切なプロプトを用意することが重要です。以下は、プロンプトの例です。
例：テーマ「環境に優しい都市計画」
環境に優しい都市計画についての5枚のスライドを作成してください。各スライドはMarpのMarkdown形式で書いてください。以下の点を含めてください：
1. タイトルスライド
2. 環境に優しい都市計画の定義と重要性
3. 主な施策（3-4点）
4. 成功事例（1-2都市）
5. まとめと今後の展望
各スライドは簡潔で、箇条書きを使用し、読みやすくしてください。
先頭には必ず以下の内容を記載するようにしてください。
```
---
marp: true
theme: default
---
```Marpの基本設定：YAMLフロントマター
Marpでスライドを作成する際、最初に重要な設定があります。これは「YAMLフロントマター」と呼ばれ、Markdownファイルの先頭に記述します。以下が基本的な設定例です：
---
marp: true
theme: default
---この3行の設定について説明します：
`---`（開始と終了）：YAMLフロントマターの開始と終了を示します。この間に設定を記述します。
`marp: true`：このMarkdownファイルをMarpスライドとして扱うことを指定します。この行がないと、通常のMarkdownとして解釈されてしまいます。
`theme: default`：スライドのテーマを指定します。`default`は基本的なテーマですが、他にも`gaia`や`uncover`などのテーマがあります。
この設定を行うことで、Markdownで書いた内容が自動的にスライド形式に変換されます。各スライドは`---`（ハイフン3つ）で区切ります。
例えば、以下のように記述します：
---
marp: true
theme: default
---
# スライド1
これは最初のスライドです。
---
# スライド2
これは2枚目のスライドです。この基本設定を理解し、適切に使用することで、Marpの機能を最大限に活用できます。必要に応じて、ここにさらに詳細な設定（ページ番号の追加、背景色の変更など）を追加することもできます。
ステップ2: Claudeによる内容生成
上記のプロンプトをClaudeに入力し、スライドの内容を生成してもらいます。
ステップ3: 生成された内容の確認と編集
Claudeが生成した内容を確認し、必要に応じて編集やカスタマイズを行います。
ステップ4: MarpでのスライドMDファイルの作成
次にVS Codeを開き、新しいファイルを作成します。
ファイル名を「スライド名.md」として保存します（例：environmental_city_planning.md）。
4.Claudeが生成したスライド内容をコピーして、このファイルに貼り付けます。
ステップ5: プレビューの確認
VS Codeの右上にある「Open Preview to the Side」ボタン（矢印の付いた虫眼鏡アイコン）をクリックします。
右側にプレビューが表示され、リアルタイムで編集結果を確認できます。
ステップ6: スライドの編集と完成
プレビューを確認しながら、必要に応じてスライドの内容やデザインを調整します。
編集が完了したら、ファイルを保存します。
以上の手順で、Claudeを使ってスライドの内容を効率的に執筆し、Marpでスライドを作成できます。
次のセクションでは、スライド作成時に使えるテクニックを紹介していきます。