ChatGPTで作成するプレゼン資料 - Marp for VS Codeを使った最強メソッド

## 🚀 ChatGPT でスライド作成を効率化しよう

ITエンジニアにとって、プレゼン資料の作成は手間がかかる作業ですが、 **ChatGPT** と **Marp for VS Code** を活用することで、短時間で洗練されたスライドを作成できます。

本記事では、 **ChatGPTを活用してスライドを作成し、Marp for VS Codeでカスタマイズ・プレゼンテーションする方法** を詳しく解説します。

---

## 📅 目次

1. ChatGPTでスライドを作成するメリット
2. Marp for VS Code とは？
3. ChatGPTを活用したスライド作成手順
4. Marpのデザインカスタマイズ
5. **VS Codeでプレビューを開く方法**
6. **Presentation Modeを活用したプレゼン方法**
7. まとめ

---

## 1. ChatGPTでスライドを作成するメリット

🎯 **ChatGPTを使うと、こんなメリットが！**

✅ **時間短縮**: 重要なポイントを自動生成
✅ **構成の最適化**: 必要な情報をバランスよく配置
✅ **Markdown形式で出力**: そのままMarpで編集可能
✅ **ITエンジニア向けに最適**: コードや技術解説も簡単に含められる

---

## 2. Marp for VS Codeとは？

💻 **Markdownでスライドを作れるVS Code拡張機能**

📌 **主な特徴**

✅ Markdownベースで直感的にスライド作成
✅ テーマ・デザインのカスタマイズが簡単
✅ PDFやPPTX形式でエクスポート可能
✅ 画像やコードスニペットも埋め込める

🎯 **こんな人にオススメ！**
- ITエンジニア: コードをスライドに埋め込みたい
- プレゼンが多い人: Markdownで高速にスライドを作成したい

---

## 3. ChatGPTを活用したスライド作成手順

🚀 **たった3ステップ！**

1️⃣ **ChatGPTにスライド作成を依頼**
   - 例: 「ChatGPTとMarpを使ってスライドを作成する方法をMarkdownで生成して」
2️⃣ **生成されたMarkdownをVS Codeにコピー**
3️⃣ **Marp for VS Codeでプレビューしながら調整**

🔹 **Markdownの基本を知っておくと、より自由にカスタマイズ可能！**

---

## 4. Marpのデザインカスタマイズ

🖌 **Marpで使える便利なカスタマイズ方法**

✅ **背景色の設定** → `backgroundColor: #000000`
✅ **ページ番号を表示** → `paginate: true`
✅ **見出しのデザイン** → `h1, h2 { color: #00D8FF; }`

---

## 5. VS Codeでプレビューを開く方法

👀 **Marp for VS Codeを使ったプレビュー方法**

1️⃣ **Marp for VS Codeをインストール**
2️⃣ **Markdownファイルを開く**
3️⃣ **プレビューを表示する**
   - `Ctrl + Shift + V` (`Cmd + Shift + V` on Mac) でプレビュー
   - または `Ctrl + Shift + P` (`Cmd + Shift + P` on Mac) → `Marp: Open Preview` を選択
4️⃣ **スライド形式で表示する**
   - `Marp: Toggle Slide View` を選択

📌 **PDF / PPTX にエクスポートする方法**
- `Ctrl + Shift + P` → `Marp: Export` で出力形式を選択

---

## 6. Presentation Modeを活用したプレゼン方法

🎤 **Presentation Modeでフルスクリーンプレゼン！**

1️⃣ **Presentation Mode拡張機能をインストール**
2️⃣ **`Ctrl + Shift + P` (`Cmd + Shift + P`) を押し `Presentation Mode: Start` を選択**
3️⃣ **Marpスライドと組み合わせる**
   - `Marp for VS Code` のプレビューを開いた状態で `Presentation Mode` を有効にする
   - フルスクリーンでプレゼン可能！

📌 **終了方法**
- `Esc` キーを押して通常のVS Codeに戻る

💡 **こんな場面で便利！**
✅ コードとスライドを交互に表示したい
✅ 邪魔なUIを省いてプレゼンしたい

---

## 🎯 まとめ

🚀 **ChatGPT × Marp for VS Code × Presentation Mode で最強スライド作成！**

✅ **ChatGPTでスライドを自動生成**
✅ **MarpでMarkdownスライドを簡単編集**
✅ **VS Codeでプレビューを開いて即座に確認**
✅ **Presentation Modeでフルスクリーンプレゼン**

🎤 **エンジニア向けのスライド作成は、これで決まり！**

💡 **あなたも今すぐ試してみよう！** 🚀




# というのをマークダウンで起こすとパワーポイントになります。

## chatgptに依頼したプロンプト
```markdown
#命令書:
あなたは、IT業界で活躍するプロのエバンジェリストです。
以下のスライドの題名、スライドの内容と制約条件を厳密に守り、最高のライトニングトークとなるようなスライドを作成してください。スライドはMarp for VS Codeで作成するため、対応するMarkdown（テーマやレイアウトを指定できる形式）で出力してください。

#制約条件:
・目次を付けること
・視認性が良い配色とし、**モダンで洗練されたデザイン**とすること
・スライド枚数は **7～10枚** に収め、5分以内で説明できる内容とすること
・初心者にも分かりやすく、ITエンジニア向けの内容にすること
・重要なキーワードを取り残さないこと
・適切な場所にアイコンや図解を用いて、視覚的に理解しやすくすること
・出力するMarkdownは、コピー＆ペーストできる形式で出力すること

#スライドの題名:
ChatGPTで作成するプレゼン資料

#スライドの内容:
ChatGPTとMarp for VS Codeを使ってスライド作成を行う方法について説明する
```


## 作成してもらったマークダウン
```markdown
---
marp: true
theme: default
paginate: true
backgroundColor: #1E1E1E
color: white
header: "ChatGPT × Marp for VS Code"
footer: "Lightning Talk | 5 min"
style: |
  h1, h2 {
    color: #00D8FF;
  }
  p {
    font-size: 1.2em;
  }
  strong {
    color: #FFD700;
  }
---

# ChatGPTで作成するプレゼン資料  
🚀 **効率よくカッコいいスライドを作る方法** 🚀

---

# 目次  
1️⃣ ChatGPTでスライドを作成するメリット  
2️⃣ Marp for VS Codeとは？  
3️⃣ ChatGPTを使ったスライド作成手順  
4️⃣ Marpでスライドをデザインする  
5️⃣ まとめ

---

# 1️⃣ ChatGPTでスライドを作成するメリット  
✅ **時間短縮**: 内容のドラフトを一瞬で作成  
✅ **構成の最適化**: 重要なポイントを逃さない  
✅ **Markdown形式**: VS Codeで手軽に編集可能  
✅ **ITエンジニア向けに最適**: コードや技術的な話も簡単に組み込める  

---

# 2️⃣ Marp for VS Codeとは？  
💻 **Markdownでスライドが作れるVS Code拡張機能**  

📌 **特徴**  
✅ シンプルな構文（Markdownベース）  
✅ テーマ・カスタマイズが可能  
✅ PDFやPPTXにエクスポートできる  

📌 **こんな人にオススメ！**  
📝 **エンジニア** → コードを埋め込める！  
🚀 **プレゼン多めの人** → 見た目もカッコよく！  

---

# 3️⃣ ChatGPTを使ったスライド作成手順  
**🎯 たった3ステップ！**  

1️⃣ **ChatGPTに「スライドを作って！」と指示**  
   📌 例: 「ChatGPTとMarpを使ってスライドを作成する方法をMarkdownで作って」  
2️⃣ **生成されたMarkdownをVS Codeに貼り付ける**  
3️⃣ **Marp for VS Codeでプレビューしながら調整**  

🛠 **Markdownの基本を知っていると、より自由にカスタマイズ可能！**  

---

# 4️⃣ Marpでスライドをデザインする  
📌 **Marp専用の記法を活用しよう！**  

✅ **背景色の設定** → `backgroundColor: #000000`  
✅ **ページ番号を表示** → `paginate: true`  
✅ **見出しのデザイン** → `h1, h2 { color: #00D8FF; }`  


---

# 5️⃣ まとめ  
🎯 **ChatGPT × Marp for VS Codeでスライド作成は超効率的！**  

✅ **ChatGPTでスライドを自動生成**  
✅ **MarpでMarkdownスライドを簡単編集**  
✅ **デザインも自由自在！**  

⚡ **エンジニア向けのスライド作成は、これで決まり！** ⚡  

💡 **さあ、あなたも試してみよう！** 🚀  

```

## プラグイン「Marp for VS Code」をインストール
![スクリーンショット 2025-02-13 18.49.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/a29a7fd0-64bd-4b7a-8999-f04950f54439.png)


## 作成したmdファイルを貼り付けてプレビュー
![スクリーンショット 2025-02-13 17.18.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/438003cb-e18a-4bb8-94ef-0bc11dce8301.png)

* プレビューは右上の小さい虫眼鏡のアイコンから
* プレビューしたドキュメントをパワーポイント、pdfでダウンロードすることもできるよ
    * 三角が重なっているアイコンから

![スクリーンショット 2025-02-13 17.18.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/a8be9bf8-fcaf-4710-90c6-a7eac63f4576.png)


## プラグイン「Presentation Mode」をインストール
![スクリーンショット 2025-02-13 18.49.28.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/305a8683-f05a-479b-bfe0-68d5ef293d42.png)

## ファイル名を右クリックしてプレビューを選択
![スクリーンショット 2025-02-13 17.18.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/3e691ff7-e050-4e11-9604-3e9401e1ecfc.png)

![スクリーンショット 2025-02-13 18.59.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/75802/e9f9fbe1-c95f-4ff4-b898-beaf83ac586c.png)


# 本当のまとめ
この方法を使えば、 手軽にカッコいいスライドを作成 し、 そのままVS Codeでプレゼン できます。
Markdownベースで自由にカスタマイズ しながら、エンジニア向けの資料作成をスムーズに進めましょう！

📌 今日からできる3ステップ
1️⃣ ChatGPTでMarkdownスライドを自動生成
2️⃣ Marp for VS Codeで編集・プレビュー
3️⃣ Presentation Modeでフルスクリーンプレゼン

🚀 ぜひ試して、新しいスライド作成の形を体験してみてください！