🚀 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でフルスクリーンプレゼン
🚀 ぜひ試して、新しいスライド作成の形を体験してみてください!