Zenn
✨

ChatGPTでPDFをコード化しSlidevで魅力的なスライドを作成する方法

2025/02/19に公開
業務効率化
Slidev
ChatGPT
生成 AI
tech

プレゼン資料を作成する際、既存のPDFからSlidev用のスライドを作成したいことがあります。しかし、手動でスライドを作り直すのは時間がかかるため、ChatGPTを活用して自動化するのが便利です。

本記事では、ChatGPTを使ってPDFをMarkdownコード化し、Slidevでスライドを作成する手順を詳しく解説します。

1. ChatGPTにPDFをアップロードする

ChatGPTにはファイルアップロード機能があり、PDFを直接アップロードすることで内容をMarkdown形式に変換してもらうことができます。
今回使ったスライドはこれ！
https://speakerdeck.com/fuzzy31u/ms-dot-engineer-butokiyanpukosu-sohutosukirujiang-zuo

1. PDFをChatGPTにアップロード

  1. ChatGPTのファイルアップロード対応モデル（GPT-4 Turboなど）を使用
  2. PDFをドラッグ＆ドロップでアップロード
  3. 以下のようなプロンプトを入力
この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分かからずスライドを移行できました。

完成したスライドはこちら:
https://speakerdeck.com/fuzzy31u/women-techmakers-ambassador-empowering-the-next-generation-of-global-tech-leaders
pdfにしちゃうとアニメーションが削られて少し残念ですが、実際はlocalhostで起動しブラウザでプレゼンを行います。

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