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

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

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

📅 目次

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

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に依頼したプロンプト

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

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

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

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

作成してもらったマークダウン

---
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」をインストール

作成したmdファイルを貼り付けてプレビュー

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

プラグイン「Presentation Mode」をインストール

ファイル名を右クリックしてプレビューを選択

本当のまとめ

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

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

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