ChatGPTでPDFをコード化しSlidevで魅力的なスライドを作成する方法
プレゼン資料を作成する際、既存のPDFからSlidev用のスライドを作成したいことがあります。しかし、手動でスライドを作り直すのは時間がかかるため、ChatGPTを活用して自動化するのが便利です。
本記事では、ChatGPTを使ってPDFをMarkdownコード化し、Slidevでスライドを作成する手順を詳しく解説します。
1. ChatGPTにPDFをアップロードする
ChatGPTにはファイルアップロード機能があり、PDFを直接アップロードすることで内容をMarkdown形式に変換してもらうことができます。
今回使ったスライドはこれ!
1. PDFをChatGPTにアップロード
- ChatGPTのファイルアップロード対応モデル(GPT-4 Turboなど)を使用
- PDFをドラッグ&ドロップでアップロード
- 以下のようなプロンプトを入力
このPDFをSlidev用のMarkdown形式に変換してください。
スライドタイトルや適切な見出しを付け、リスト形式やレイアウトを考慮してください。
モデルは GPT-4o
を使っています。
2. ChatGPTが生成したMarkdownコードを取得
ChatGPTはPDFの内容を解析し、Slidevでそのまま使えるMarkdownコードを出力します。例えば、以下のようなコードが得られます。
---
title: Women Techmakers Ambassador
theme: seriph
background: ./assets/key_visual.jpg
class: text-center
---
# Women Techmakers Ambassador
Empowering the Next Generation of Global Tech Leaders
株式会社サイバーエージェント
神谷 優 / Yu Kamiya
---
layout: image-right
image: https://example.com/profile.jpg
class: my-cool-content-on-the-left
# 自己紹介
- **ソフトウェアエンジニア** @ サイバーエージェント
- **共同創設者** @ Ms.Engineer
- **Women Techmakers Ambassador**
- 子育て×テックPodcast『momit.fm』ホスト
- **3児の母**
---
layout: two-cols-header
---
# Career Highlights
::left::
## 2008-2013
- **自社メディア開発** (Java/サーバサイド)
- **スマートフォンアプリ開発** (Android/Java)
## 2014-2021
- 音楽配信サービス開発 (Golang)
- **Ms.Engineer立ち上げ**
- **育休×3**
::right::
## 2022-present
- Tech DE&Iプロジェクト立ち上げ
- Developers Connect室(マネージャー)
<img src="./assets/career_highlight.png" class="bottom-right" />
これで、スライドの構造がMarkdown形式で整った状態になります。
3. Slidevでスライドを作成する
ChatGPTが生成したMarkdownコードをSlidevで使用するには、以下の手順を実行します。
3-1. Slidevのインストール
Slidevをまだインストールしていない場合、以下のコマンドでインストールします。
npm install -g @slidev/cli
3-2. スライドプロジェクトを作成
slidev create my-presentation
フォルダが作成されるので、slides.md
を開き、ChatGPTから取得したMarkdownを貼り付けます。
3-3. スライドをプレビュー
以下のコマンドでスライドを確認できます。
slidev
ブラウザが開き、Markdownに基づいたスライドが表示されます。
ざっとこれだけでも30分かからずスライドを移行できました。
完成したスライドはこちら:
4. スライドのカスタマイズ
Slidevでは、テーマやレイアウトを自由に調整できます。
4-1. 2ページ目以降のh1スタイルを変更
2ページ目以降のh1
要素のデザインを変更する場合、以下のCSSを追加します。
<style>
/* 2ページ目以降のh1にスタイルを適用 */
section:nth-of-type(n+2) h1 {
color: #4EC5D4;
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
font-size: 3rem;
font-weight: bold;
text-align: center;
}
</style>
4-2. プロフィール画像を丸くする
Slidevのデフォルト設定では画像が四角形になります。プロフィール写真を丸くするには以下のCSSを適用します。
<style>
img {
border-radius: 50%;
width: 150px;
height: 150px;
object-fit: cover;
}
</style>
4-3. 右下に画像を配置
スライド右下に画像を配置したい場合は、以下のCSSを適用します。
<img src="./assets/image.png" class="bottom-right" />
<style>
.bottom-right {
position: absolute;
bottom: 20px;
right: 20px;
width: 100px;
height: auto;
}
</style>
5. スライドのエクスポート
Slidevでスライドが完成したら、PDFやPNGにエクスポートできます。
5-1. PDFエクスポート
slidev export
このコマンドを実行すると、slides.pdf
が作成されます。
5-2. PNGエクスポート
slidev export --format png
すべてのスライドが画像としてエクスポートされます。
まとめ
ChatGPTとSlidevを組み合わせることで、PDFからのスライド作成を効率化できます。
✅ ChatGPTにPDFをアップロードし、Markdownコードを生成
✅ SlidevでMarkdownを利用してスライド化
✅ デザインをカスタマイズし、見やすいスライドを作成
✅ 最終的にPDFやPNGにエクスポート可能
この方法を使えば、手作業を最小限に抑えながら、高品質なスライドを作成できます。ぜひ試してみてください!
おまけ
この記事すらもChatGPTのログから作成し20分程度で完成しました。笑
この会話のチャットログをすべて参考にして、「ChatGPTでPDFをコード化しSlidevで魅力的なスライドを作成する方法」というタイトルのブログ記事を書いてください。
Discussion