2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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

ITエンジニアにとって、プレゼン資料の作成は手間がかかる作業ですが、 ChatGPTMarp 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 + PMarp: 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」をインストール

スクリーンショット 2025-02-13 18.49.06.png

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

スクリーンショット 2025-02-13 17.18.38.png

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

スクリーンショット 2025-02-13 17.18.12.png

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

スクリーンショット 2025-02-13 18.49.28.png

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

スクリーンショット 2025-02-13 17.18.50.png

スクリーンショット 2025-02-13 18.59.48.png

本当のまとめ

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

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

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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?